平臺(tái)設(shè)計(jì)中,不僅要考慮視覺表現(xiàn)力,更應(yīng)該從嚴(yán)密的邏輯層次上進(jìn)行思考。如何在感性和理性中找到平衡,是設(shè)計(jì)師需要思考的一個(gè)問題。
離開 QQ 會(huì)員加入 TGideas 的大家庭也有一年的時(shí)間了。當(dāng)初抱著對(duì)游戲的向往,對(duì) TG 游戲設(shè)計(jì)大神們的敬仰,暫時(shí)放下從事 2 年多的平臺(tái)項(xiàng)目經(jīng)驗(yàn),毅然投身于偉大的游戲視覺包裝中來,從零學(xué)起。
在這一年的工作過程中,學(xué)到了很多好的視覺表現(xiàn)方法及前輩們優(yōu)秀的經(jīng)驗(yàn);而其中收獲最大的,是我經(jīng)歷了兩種不同的設(shè)計(jì)表現(xiàn)形式后,對(duì)平臺(tái)和游戲有了更加深入理解——理性與感性的碰撞。
不禁想起高中時(shí)代看過的《三國》。曹操、呂布、關(guān)羽、張飛、趙云等一個(gè)個(gè)極為生動(dòng)鮮活的人物個(gè)性就如同一張張游戲?qū)n},用極強(qiáng)的視覺沖擊力、極具帶入 性的游戲氛圍來刺激每個(gè)人感性的神經(jīng),讓人過目不忘;而火燒赤壁、草船借箭、空城計(jì)等一場(chǎng)場(chǎng)偉大的戰(zhàn)役卻讓人在深思后,對(duì)那些軍師有著超強(qiáng)的理性思維和大 局觀而贊嘆并牢牢記住。如果說《三國》沒有那一場(chǎng)場(chǎng)讓人拍案叫絕的戰(zhàn)役,那它充其量算作腦殘劇《一起去看流星雨》前傳。反之,可能也只是一部無聊的歷史教 科片。設(shè)計(jì)也無外乎如此。
在平臺(tái)設(shè)計(jì)中,最重要的就是如何把海量的內(nèi)容,梳理地區(qū)域合理、脈絡(luò)清晰、邏輯清楚,這也就是交互設(shè)計(jì)。
有一個(gè)優(yōu)秀交互設(shè)計(jì)的網(wǎng)站,即使視覺設(shè)計(jì)的很一般,也會(huì)被用戶所接受,因?yàn)槠脚_(tái)更注重的是信息的攝取。如何能做好一個(gè)平臺(tái)網(wǎng)站的交互設(shè)計(jì),我們通過一下幾個(gè)方面共同研究一下:
清晰的導(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),雖然沒有把商品品類做到非常詳細(xì),但他每一個(gè)品類都是根據(jù)用戶的購買習(xí)慣和興趣點(diǎn)做精細(xì)化排序,并且通過天天特價(jià)、免費(fèi)試用、清倉、一元起拍等極具誘惑性的連接放入導(dǎo)航中,來刺激用戶購買欲。
![2](https://image.woshipm.com/wp-files/2014/08/2.jpg)
當(dāng)當(dāng)網(wǎng)和亞馬遜則是把商品品類做了細(xì)致劃分,方便用戶精確查找,節(jié)省用戶購買時(shí)間及減免多余操作。為購買目標(biāo)相對(duì)明確的用戶提供更多方便快捷的入口。亞馬遜在展示上更加細(xì)心的在導(dǎo)航位置為推薦商品提供了快捷入口。
![3](https://image.woshipm.com/wp-files/2014/08/3.jpg)
搜索欄(檢索系統(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)酷高明的地方也就在此,長期下來用戶會(huì)形成習(xí)慣,這樣對(duì)于用戶的粘性培養(yǎng)起到了很重要的作用。
![4](https://image.woshipm.com/wp-files/2014/08/4.jpg)
優(yōu)酷網(wǎng)的關(guān)鍵字標(biāo)簽入口也是做的非常清晰,但這方面或許是因?yàn)樗且砸曨l為主,類別相對(duì)單一吧。就關(guān)鍵字標(biāo)簽入口,華蓋對(duì)此的梳理也是比較全面具體。
![5](https://image.woshipm.com/wp-files/2014/08/5.jpg)
區(qū)域的劃分及排序
這個(gè)相信大家都十分了解,通俗的講就是把重要的東西放在最前面。這里我不禁想起每次產(chǎn)品說最多的話「頭部好像高了,我要一屏看到全部內(nèi)容?!姑看温牭蕉紩?huì)滿腔怒火。
牢騷歸牢騷,但我們換位思考一下,其實(shí)產(chǎn)品比設(shè)計(jì)師還是更加懂得用戶需求的,雖然有時(shí)要求有點(diǎn)過。首屏的位置對(duì)于產(chǎn)品的重要性足以見得。特別是平臺(tái)這樣海量內(nèi)容的網(wǎng)站,怎樣利用首屏的位置來吸引用戶,對(duì)于交互設(shè)計(jì)的挑戰(zhàn)很大。記得之前淘寶網(wǎng)做過很多次首屏模塊改版,或許也是這個(gè)原因吧。
第一版:
![6](https://image.woshipm.com/wp-files/2014/08/6.jpg)
第二版:
![7](https://image.woshipm.com/wp-files/2014/08/7.jpg)
第三版:
![8](https://image.woshipm.com/wp-files/2014/08/8.jpg)
最新線上版:
![9](https://image.woshipm.com/wp-files/2014/08/9.jpg)
而他們一次次的改版優(yōu)化,也是基于對(duì)用戶數(shù)據(jù)的分析以及用戶購買習(xí)慣及消費(fèi)群體分布等一系列思考過后做出的。這樣可以更加使得用戶便捷的購買和查找到所需商品,培養(yǎng)用戶習(xí)慣,也能讓商家的預(yù)售商品有一個(gè)更加顯眼的曝光位置。
總結(jié)
超強(qiáng)的視覺表現(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ì)所要考慮的重要部分。
來源:產(chǎn)品中國
本文作者 妖哥