當(dāng)理性碰撞感性——交互驅(qū)動(dòng)下的設(shè)計(jì)

先扯句閑篇，離開(kāi)QQ會(huì)員加入TGideas的大家庭也有一年的時(shí)間了。當(dāng)初抱著對(duì)游戲的向往，對(duì)TG游戲設(shè)計(jì)大神們的敬仰，暫時(shí)放下從事2年多的平臺(tái)項(xiàng)目經(jīng)驗(yàn)，毅然投身于偉大的游戲視覺(jué)包裝中來(lái)，從零學(xué)起。在這一年的工作過(guò)程中，學(xué)到了很多好的視覺(jué)表現(xiàn)方法及前輩們優(yōu)秀的經(jīng)驗(yàn);而其中收獲最大的，是我經(jīng)歷了兩種不同的設(shè)計(jì)表現(xiàn)形式后，對(duì)平臺(tái)和游戲有了更加深入理解——理性與感性的碰撞。

不禁想起高中時(shí)代看過(guò)的《三國(guó)》 。曹操、呂布、關(guān)羽、張飛、趙云等一個(gè)個(gè)極為生動(dòng)鮮活的人物個(gè)性就如同一張張游戲?qū)ｎ}，用極強(qiáng)的視覺(jué)沖擊力、極具帶入性的游戲氛圍來(lái)刺激每個(gè)人感性的神經(jīng)，讓人過(guò)目不忘;而火燒赤壁、草船借箭、空城計(jì)等一場(chǎng)場(chǎng)偉大的戰(zhàn)役卻讓人在深思后，對(duì)那些軍師有著超強(qiáng)的理性思維和大局觀而贊嘆并牢牢記住。如果說(shuō)《三國(guó)》沒(méi)有那一場(chǎng)場(chǎng)讓人拍案叫絕的戰(zhàn)役，那它充其量算作腦殘劇《一起去看流星雨》前傳。反之，可能也只是一部無(wú)聊的歷史教科片。設(shè)計(jì)也無(wú)外乎如此。

看到博客中大神們對(duì)游戲的視覺(jué)表現(xiàn)分享已經(jīng)研究到掘地三尺的地步，再去說(shuō)皮毛也沒(méi)什么意思，那我就借此機(jī)會(huì)談?wù)勎覍?duì)平臺(tái)項(xiàng)目的理解吧。而在平臺(tái)設(shè)計(jì)中，最重要的就是如何把海量的內(nèi)容，梳理的區(qū)域合理、脈絡(luò)清晰、邏輯清楚，這也就是交互設(shè)計(jì)。

有一個(gè)優(yōu)秀交互設(shè)計(jì)的網(wǎng)站，即使視覺(jué)設(shè)計(jì)的很一般，也會(huì)被用戶所接受，因?yàn)槠脚_(tái)更注重的是信息的攝取。如何能做好一個(gè)平臺(tái)網(wǎng)站的交互設(shè)計(jì)，我們通過(guò)一下幾個(gè)方面共同研究一下：

1.清晰的導(dǎo)航(快捷導(dǎo)航)設(shè)計(jì)

在這類設(shè)計(jì)中，電商類網(wǎng)站可謂首屈一指，這或許是因?yàn)樗麄儞碛袛?shù)以千際的商品品類吧。而在這些電商網(wǎng)站中，淘寶網(wǎng)、亞馬遜、當(dāng)當(dāng)網(wǎng)不管是在品類整合及展示上，都做了很好的用戶引導(dǎo)。

淘寶網(wǎng)，雖然沒(méi)有把商品品類做到非常詳細(xì)，但他每一個(gè)品類都是根據(jù)用戶的購(gòu)買習(xí)慣和興趣點(diǎn)做精細(xì)化排序，并且通過(guò)天天特價(jià)、免費(fèi)試用、清倉(cāng)、一元起拍等極具誘惑性的連接放入導(dǎo)航中，來(lái)刺激用戶購(gòu)買欲。

當(dāng)當(dāng)網(wǎng)和亞馬遜則是把商品品類做了細(xì)致劃分，方便用戶精確查找，節(jié)省用戶購(gòu)買時(shí)間及減免多余操作。為購(gòu)買目標(biāo)相對(duì)明確的用戶提供更多方便快捷的入口。亞馬遜在展示上更加細(xì)心的在導(dǎo)航位置為推薦商品提供了快捷入口。

2.搜索欄(檢索系統(tǒng))及標(biāo)簽入口

搜索欄及標(biāo)簽入口如同網(wǎng)站里的時(shí)空隧道，可以跨躍區(qū)域、時(shí)間及繁瑣的層級(jí)，方便用戶對(duì)信息的查找。在這類設(shè)計(jì)中，幾乎每個(gè)網(wǎng)站都有做到這一點(diǎn)，但搜索系統(tǒng)的完善性及關(guān)鍵字標(biāo)簽的選擇則差強(qiáng)人意。在搜索欄及標(biāo)簽入口展示上，做的相對(duì)完善的之中，我就列舉優(yōu)酷網(wǎng)做例子吧。

優(yōu)酷網(wǎng)在檢索系統(tǒng)上算是做到了相對(duì)領(lǐng)先的地步，最大亮點(diǎn)是他的檢索系統(tǒng)在用戶搜索目標(biāo)未能提供服務(wù)的環(huán)境下會(huì)自動(dòng)推薦同類有用戶搜索信息的網(wǎng)站。對(duì)于目標(biāo)性極強(qiáng)的用戶受用最大。而用戶的目的不在于去哪個(gè)網(wǎng)站瀏覽信息，而關(guān)心的是能否快速找到目標(biāo)。而優(yōu)酷高明的地方也就在此，長(zhǎng)期下來(lái)用戶會(huì)形成習(xí)慣，這樣對(duì)于用戶的粘性培養(yǎng)起到了很重要的作用。

優(yōu)酷網(wǎng)的關(guān)鍵字標(biāo)簽入口也是做的非常清晰，但這方面或許是因?yàn)樗且砸曨l為主，類別相對(duì)單一吧。就關(guān)鍵字標(biāo)簽入口，華蓋對(duì)此的梳理也是比較全面具體。

3.區(qū)域的劃分及排序

這個(gè)相信大家都十分了解，通俗的講就是把重要的東西放在最前面。這里我不禁想起每次產(chǎn)品說(shuō)最多的話“頭部好像高了，我要一屏看到全部?jī)?nèi)容。”(瞎TM扯，難道你的顯示器天生是豎起來(lái)的?傷不起。)牢騷歸牢騷，但我們換位思考一下，其實(shí)產(chǎn)品比設(shè)計(jì)師還是更加懂得用戶需求的，雖然有時(shí)要求有點(diǎn)過(guò)。首屏的位置對(duì)于產(chǎn)品的重要性足以見(jiàn)得。特別是平臺(tái)這樣海量?jī)?nèi)容的網(wǎng)站，怎樣利用首屏的位置來(lái)吸引用戶，對(duì)于交互設(shè)計(jì)的挑戰(zhàn)很大。記得之前淘寶網(wǎng)做過(guò)很多次首屏模塊改版，或許也是這個(gè)原因吧。

第一版：

第二版：

第三版：

最新線上版：

而他們一次次的改版優(yōu)化，也是基于對(duì)用戶數(shù)據(jù)的分析以及用戶購(gòu)買習(xí)慣及消費(fèi)群體分布等一系列思考過(guò)后做出的。這樣可以更加使得用戶便捷的購(gòu)買和查找到所需商品，培養(yǎng)用戶習(xí)慣，也能讓商家的預(yù)售商品有一個(gè)更加顯眼的曝光位置。

總結(jié)

超強(qiáng)的視覺(jué)表現(xiàn)力固然重要，但是嚴(yán)謹(jǐn)理性的用戶邏輯，也是一個(gè)網(wǎng)站的重中之重。而這也是交互設(shè)計(jì)所要面臨的挑戰(zhàn)，同時(shí)也是交互設(shè)計(jì)不斷提升價(jià)值的表現(xiàn)。除了以上幾點(diǎn)之外，交互設(shè)計(jì)的涉及面遠(yuǎn)不于此，用戶數(shù)據(jù)指引、用戶體驗(yàn)、人機(jī)信息互換等方面也是平臺(tái)網(wǎng)站中交互設(shè)計(jì)所要考慮的重要部分，但由于本人對(duì)著幾點(diǎn)的理解還有待提升，待我查閱資料、整理文獻(xiàn)、通過(guò)日后的工作總結(jié)經(jīng)驗(yàn)后，再讓我們下次一起，促膝長(zhǎng)談。而以上所提到的方面，也并非資深權(quán)威，而是本人在平時(shí)的學(xué)習(xí)和日常的工作中整理的一些交互思維經(jīng)驗(yàn)，如有專業(yè)資深的大神閱讀本文章，請(qǐng)務(wù)必輕點(diǎn)拍磚，多多闡述更加好的經(jīng)驗(yàn)和見(jiàn)解，大家一起探討學(xué)習(xí)。