暢游VC：游戲視覺(jué)設(shè)計(jì)與用戶體驗(yàn)

對(duì)于游戲頁(yè)面設(shè)計(jì)，可能有很多設(shè)計(jì)師把重點(diǎn)放在視覺(jué)設(shè)計(jì)上，從而忽略了用戶的感受。個(gè)人認(rèn)為其實(shí)一個(gè)頁(yè)面設(shè)計(jì)的怎么樣，關(guān)鍵還是在于用戶對(duì)頁(yè)面各個(gè)方面的感受。

時(shí)間很快，通過(guò)近一年對(duì)自己強(qiáng)烈的要求（快有強(qiáng)迫癥了），設(shè)計(jì)思維發(fā)生了很大的變化。

大家可能會(huì)問(wèn)什么樣的頁(yè)面設(shè)計(jì)才算是優(yōu)秀的頁(yè)面設(shè)計(jì)，個(gè)人大概總結(jié)了一下。

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

A：有很好的視覺(jué)導(dǎo)向，讓用戶在最短的時(shí)間內(nèi)找到想到的內(nèi)容，對(duì)內(nèi)容一目了然，頁(yè)面視覺(jué)創(chuàng)意整體感覺(jué)舒服而不感到扎眼。

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

以上分析均為個(gè)人觀點(diǎn)，有不對(duì)的地方還請(qǐng)諒解

聊到這里大家肯定會(huì)想問(wèn)，什么是用戶體驗(yàn)，具體是什么我也說(shuō)不上來(lái)，用戶體驗(yàn)包括的范圍很廣，包括用戶的行為、心理、習(xí)慣、情感、等，以及頁(yè)面上的布局、結(jié)構(gòu)、框架、代碼、視覺(jué)、互動(dòng)等還有產(chǎn)品的本身及內(nèi)容都是相關(guān)的。

根據(jù)網(wǎng)絡(luò)、書本上的定義及個(gè)人的理解，簡(jiǎn)單做了個(gè)概括。

Q：什么是用戶體驗(yàn)？

A：用戶在使用我們的產(chǎn)品或者瀏覽我們網(wǎng)站的過(guò)程中所體會(huì)的到的各方面的感受，即使是錯(cuò)誤的操作所帶來(lái)的感受（包括好的、不好的）

用戶體驗(yàn)涉及到的面比較廣泛，作為一名視覺(jué)設(shè)計(jì)師，一直在想把視覺(jué)設(shè)計(jì)與用戶體驗(yàn)緊密結(jié)合起來(lái)。選擇了近期一些自己做過(guò)的案例和大家一起分享和討論。希望大家給出寶貴意見(jiàn)。

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

現(xiàn)有素材如下：

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

第一屏loading完成后線稿將會(huì)變成戰(zhàn)艦?zāi)Ｐ蛯?shí)體，線稿和模型的大小、位置在切換時(shí)始終保持相同，由loading頁(yè)過(guò)度 到首頁(yè)。首頁(yè)畫面設(shè)計(jì)將戰(zhàn)艦置于海面上，通過(guò)戰(zhàn)艦周圍的浪花及前后的小艦船及飛機(jī)的表現(xiàn)充分體現(xiàn)出中心的戰(zhàn)艦。 相同位置戰(zhàn)艦線稿與實(shí)體的慢慢轉(zhuǎn)變，增強(qiáng)用戶的代入感，頁(yè)面營(yíng)造歷史滄桑感調(diào)動(dòng)用戶情緒，給予用戶復(fù)活二戰(zhàn)歷史場(chǎng)景的心理暗示。

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

首頁(yè)上增加鼠標(biāo)滾動(dòng)提示，增加與用戶的互動(dòng)，用戶滑動(dòng)鼠標(biāo)控制幀頻播放，幫助用戶維持較長(zhǎng)的注意力，并營(yíng)造出網(wǎng)站的節(jié)奏感。

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

以下下面展示

用戶反映

本次測(cè)試中超預(yù)期完成任務(wù)。整個(gè)測(cè)試期間，pv值150萬(wàn)以上。經(jīng)過(guò)調(diào)查90%的玩家喜歡。

網(wǎng)站鏈接

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

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

cover頁(yè)完首屏

性感的人設(shè)視覺(jué)的沖擊，對(duì)男性玩家具有很強(qiáng)的誘惑力，勾起男性玩家的興趣。

cover頁(yè)其他切換頁(yè)面

main頁(yè)完成稿

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

UI及材質(zhì)的設(shè)計(jì)與游戲內(nèi)元素相似，如鐵鏈、導(dǎo)航條、視頻播放框等等，反映游戲的故事背景，幫助用戶了解游戲產(chǎn)品。

如果網(wǎng)頁(yè)上的人眼看著旁邊的事物，那么人們習(xí)慣性也會(huì)看向同一處。頁(yè)面中人設(shè)眼睛的走勢(shì)幫助用戶關(guān)注頁(yè)面內(nèi)容。給用戶指示作用

用戶反映

本次測(cè)試中。一周內(nèi)pv值200萬(wàn)以上。經(jīng)過(guò)調(diào)查90%的玩家喜歡。

網(wǎng)站鏈接

http://kuf.changyou.com/

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

個(gè)人在這方面還有很大的欠缺，我會(huì)繼續(xù)努力，希望大家提出寶貴意見(jiàn)，共同學(xué)習(xí)，共同進(jìn)步。