交互設(shè)計(jì)師的工作中,基礎(chǔ)的工具、常識(shí)、流程……,這些都能夠輕松學(xué)習(xí)到;最終的產(chǎn)出物,也能夠找得到成熟的范本;而只有中間的經(jīng)驗(yàn),只能來(lái)自積淀,沒(méi)有速成的方法。
這篇分享,把自己成長(zhǎng)中和交流中獲得的一些經(jīng)驗(yàn)略微舉例,加上交互相關(guān)的一點(diǎn)基礎(chǔ),希望能給對(duì)交互設(shè)計(jì)有興趣的朋友提供一些幫助。
提綱:
1. 入門(mén)
1.1. 工具
1.2. 原則/常識(shí)
2. 稱(chēng)職
2.1. 經(jīng)驗(yàn)
2.2. 經(jīng)驗(yàn)積累的切入點(diǎn)——模仿并思考
3. 進(jìn)階
3.1. 一定程度地違反邏輯
3.2. 擴(kuò)展相關(guān)技能
1.1. 工具:——一切可用于繪制線框,表達(dá)交互設(shè)計(jì)藍(lán)圖的工具,甚至可以用很不主流的PPT、或者直接用前端語(yǔ)言來(lái)寫(xiě);用的最多,最適合的當(dāng)然是Axure,具體的使用教程不講,可以參考:
Axure的使用中,個(gè)人認(rèn)為對(duì)入門(mén)比較重要的兩點(diǎn):
柵格——按照柵格系統(tǒng)劃分布局,并適當(dāng)對(duì)齊,可以方便下一步UI同事進(jìn)行設(shè)計(jì),需要注意的是:
a) 方案尚未確定的概念設(shè)計(jì)階段,不要追求對(duì)齊和美觀,能把交互設(shè)計(jì)捋順,比什么都重要;如果對(duì)著軟件界面不由自主地想要對(duì)齊,而時(shí)間又不是很充足,寧可先紙上畫(huà)草稿,也不要為了對(duì)齊而影響設(shè)計(jì)思路;經(jīng)驗(yàn)成熟之后當(dāng)然另說(shuō),能夠在保證交互清晰的基礎(chǔ)上,同時(shí)兼顧到界面美觀(交互稿與視覺(jué)稿之間的間距比例,很可能非常不同,最糟的情況可能因?yàn)殚g距問(wèn)題,導(dǎo)致交互稿需要推翻重來(lái));
b) 繪制線框圖時(shí),大可以畫(huà)的整齊漂亮一些,但具體設(shè)計(jì)一定是由更為專(zhuān)業(yè)的UI同事進(jìn)行。
灰度——在同一個(gè)界面中,用不同深度的灰色,表示不同區(qū)域的權(quán)重和相關(guān)性
這里也不展開(kāi)講了,基礎(chǔ)的一些教程,比如《 Web可用性設(shè)計(jì)》《Don’t make me think》,都可以學(xué)習(xí)到一些最基礎(chǔ)的知識(shí)。
我認(rèn)為,同任何一門(mén)學(xué)科或者技能一樣,交互設(shè)計(jì)中,同樣存在著工作的對(duì)象(流程、控件、控件組)和目標(biāo)(需求);對(duì)這兩個(gè)方面所包含的內(nèi)容,分別進(jìn)行細(xì)微區(qū)分和掌控,便是交互設(shè)計(jì)的經(jīng)驗(yàn)。
實(shí)現(xiàn)同一個(gè)目標(biāo),比如最基礎(chǔ)的,我們需要一個(gè)入口,點(diǎn)擊它,觸發(fā)新的內(nèi)容或者功能。
做法有很多:按鈕、長(zhǎng)短不同的文字鏈、下拉菜單、tab標(biāo)簽、radio組……
其中又包含不同的色彩、下劃線樣式……
它們分別對(duì)應(yīng)不同的使用場(chǎng)景,使用的效果有細(xì)微區(qū)分。
面對(duì)目標(biāo)需求,可以將其抽象化,在內(nèi)容不影響形式的時(shí)候(或者說(shuō)大多數(shù)時(shí)候,我們都盡量達(dá)到這樣一個(gè)效果:面對(duì)不同的內(nèi)容,我們所使用的這個(gè)形式都能夠兼容),可以拋開(kāi)需求的具體內(nèi)容,而是去考慮它要實(shí)現(xiàn)的是一種怎樣的交互形式。
比如這樣一個(gè)例子:
原始需求:要有兩個(gè)頭圖輪播,一個(gè)是活動(dòng)公告,一個(gè)是產(chǎn)品推薦,但我又擔(dān)心兩個(gè)都會(huì)動(dòng),變得很奇怪……但又都想放……
抽象需求:有兩個(gè)模塊,模塊的內(nèi)容是復(fù)數(shù)入口,圖片方式,避免相互干擾;
分析:
1. 首屏區(qū)域出現(xiàn)兩個(gè)自動(dòng)輪播的內(nèi)容,顯然會(huì)相互干擾;
2. 自動(dòng)輪播的目的是獲得更多展現(xiàn);
2.1. 需要不自動(dòng)輪播,仍然能夠展示出其中部分信息的做法
于是這是線上的效果,右下是一個(gè)比較少見(jiàn)的推廣入口設(shè)計(jì),非當(dāng)前狀態(tài)的圖片,標(biāo)題能夠得到展現(xiàn)。
|