游戲視覺設計與用戶體驗

 

　　對於游戲頁面設計，可能有很多設計師把重點放在視覺設計上，從而忽略了用戶的感受。個人認為其實一個頁面設計的怎麼樣，關鍵還是在於用戶對頁面各個方面的感受。

　　時間很快，通過近一年對自己強烈的要求(快有強迫症了)，設計思維發生了很大的變化。

　　大家可能會問什麼樣的頁面設計才算是優秀的頁面設計，個人大概總結了一下。

　　Q：對於游戲頁面才講，什麼樣的頁面才算是優秀的頁面設計?

　　A：有很好的視覺導向，讓用戶在最短的時間內找到想到的內容，對內容一目了然，頁面視覺創意整體感覺舒服而不感到扎眼。

　　目前，游戲頁面的設計質量飛速提升，頁面上的細節提升、創意及形式感等都有了很大的變化，花瓣上的各種采集也讓我看到 大家的設計思維及創意變化層出不窮，尤其是形式感方面，各種三角、菱形、圓形的拼接使頁面變的靈活多樣，千變萬化。但是有些設計為了追求創意而忽視了用戶 的感受，頁面雖然視覺很好，卻讓頁面沒有盡到它應盡的職責，從而導致上線後的效果不好。

　　以上分析均為個人觀點，有不對的地方還請諒解

　　聊到這裡大家肯定會想問，什麼是用戶體驗，具體是什麼我也說不上來，用戶體驗包括的范圍很廣，包括用戶的行為、心理、習慣、情感、等，以及頁面上的布局、結構、框架、代碼、視覺、互動等還有產品的本身及內容都是相關的。

　　根據網絡、書本上的定義及個人的理解，簡單做了個概括。

　　Q：什麼是用戶體驗?

　　A：用戶在使用我們的產品或者浏覽我們網站的過程中所體會的到的各方面的感受，即使是錯誤的操作所帶來的感受(包括好的、不好的)

　　用戶體驗涉及到的面比較廣泛，作為一名視覺設計師，一直在想把視覺設計與用戶體驗緊密結合起來。選擇了近期一些自己做過的案例和大家一起分享和討論。希望大家給出寶貴意見。

　　根據以上用戶分析及現有素材，開始創意分析。

　　現有素材如下：

　　通過線稿讓我聯想到了圖紙，根據他的歷史背景，整個畫面第一屏采用了艦船圖紙設計的形式，把戰艦線稿放在了圖紙正 中間，圖紙上的飛機、炮彈等戰艦上的組成元素的線稿在兩側、圖紙被游標卡尺、圓規等繪圖工具壓著邊緣呼應線稿的繪 制。讓用戶聯想到戰艦的圖紙設計過程，勾起喜愛戰艦的用戶對戰艦結構的好奇，以及想深層解剖戰艦的心理。

　　第一屏loading完成後線稿將會變成戰艦模型實體，線稿和模型的大小、位置在切換時始終保持相同，由loading頁過度 到首頁。首頁畫面設計將戰艦置於海面上，通過戰艦周圍的浪花及前後的小艦船及飛機的表現充分體現出中心的戰艦。 相同位置戰艦線稿與實體的慢慢轉變，增強用戶的代入感，頁面營造歷史滄桑感調動用戶情緒，給予用戶復活二戰歷史場景的心理暗示。

　　細節渲染二戰氛圍，為每一條船艦進行了差異設計。例如俾斯麥的英文名稱使用哥特字體，因為這是二戰期間德軍公文用字體。

　　首頁上增加鼠標滾動提示，增加與用戶的互動，用戶滑動鼠標控制幀頻播放，幫助用戶維持較長的注意力，並營造出網站的節奏感。

　　由於用戶之前長時間觀看網站後進入信息疲勞階段。因此在這裡設計了交互，讓用戶在這裡需要親自拖動准星，瞄准艦船投彈。通過用戶親自操作將用戶的情緒被喚起至興奮水平。

　　以下下面展示

　　用戶反映

　　本次測試中超預期完成任務。整個測試期間，pv值150萬以上。經過調查90%的玩家喜歡。

　　網站鏈接

　　http://hz.changyou.com/event/201409/brand/index.shtml

　　針對以上分析進行創意設計，首先看下設計稿。

　　cover頁完首屏

　　性感的人設視覺的沖擊，對男性玩家具有很強的誘惑力，勾起男性玩家的興趣。

　　cover頁其他切換頁面

　　main頁完成稿

　　cover及main頁各屏采用統一的色調，藍色與橘黃色的過度，每一屏都采用大規模多人戰場為背景，烘托游戲特色，激發用戶的戰斗心理，讓用戶更清晰的了解游戲特點。

　　UI及材質的設計與游戲內元素相似，如鐵鏈、導航條、視頻播放框等等，反映游戲的故事背景，幫助用戶了解游戲產品。

　　如果網頁上的人眼看著旁邊的事物，那麼人們習慣性也會看向同一處。頁面中人設眼睛的走勢幫助用戶關注頁面內容。給用戶指示作用

　　用戶反映

　　本次測試中。一周內pv值200萬以上。經過調查90%的玩家喜歡。

　　網站鏈接

　　http://kuf.changyou.com/

　　總結：在頁面設計當中，不僅要表現出頁面本身的含義，比如：懸念站要表現出一種神秘、節日專題要表現出節日氣氛等等 更要為用戶考慮，如何吸引用戶的眼球，抓住用戶的心理等，畢竟我們所設計的一切都是為用戶服務的。

　　個人在這方面還有很大的欠缺，我會繼續努力，希望大家提出寶貴意見，共同學習，共同進步。

　　謝謝大家!!!