暢游VC：游戲視覺設計與用戶體驗

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

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

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

Q：對于游戲頁面才講，什么樣的頁面才算是優(yōu)秀的頁面設計？

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

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

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

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

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

Q：什么是用戶體驗？

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

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

根據以上用戶分析及現有素材，開始創(chuàng)意分析。

現有素材如下：

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

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

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

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

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

以下下面展示

用戶反映

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

網站鏈接

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

針對以上分析進行創(chuàng)意設計，首先看下設計稿。

cover頁完首屏

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

cover頁其他切換頁面

main頁完成稿

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

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

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

用戶反映

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

網站鏈接

http://kuf.changyou.com/

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

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