|
交互設(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)。
|
