交互設(shè)計(jì)師的工作中，基礎(chǔ)的工具、常識(shí)、流程……，這些都能夠輕松學(xué)習(xí)到；最終的產(chǎn)出物，也能夠找得到成熟的范本；而只有中間的經(jīng)驗(yàn)，只能來(lái)自積淀，沒有速成的方法。

這篇分享，把自己成長(zhǎng)中和交流中獲得的一些經(jīng)驗(yàn)略微舉例，加上交互相關(guān)的一點(diǎn)基礎(chǔ)，希望能給對(duì)交互設(shè)計(jì)有興趣的朋友提供一些幫助。

提綱：

1. 入門

1.1. 工具

1.2. 原則/常識(shí)

2. 稱職

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)寫；用的最多，最適合的當(dāng)然是Axure，具體的使用教程不講，可以參考：

AXURE在原型設(shè)計(jì)中的應(yīng)用

［2010W13］早讀：Axure

Axure的使用中，個(gè)人認(rèn)為對(duì)入門比較重要的兩點(diǎn)：

柵格——按照柵格系統(tǒng)劃分布局，并適當(dāng)對(duì)齊，可以方便下一步UI同事進(jìn)行設(shè)計(jì)，需要注意的是：

a） 方案尚未確定的概念設(shè)計(jì)階段，不要追求對(duì)齊和美觀，能把交互設(shè)計(jì)捋順，比什么都重要；如果對(duì)著軟件界面不由自主地想要對(duì)齊，而時(shí)間又不是很充足，寧可先紙上畫草稿，也不要為了對(duì)齊而影響設(shè)計(jì)思路；經(jīng)驗(yàn)成熟之后當(dāng)然另說(shuō)，能夠在保證交互清晰的基礎(chǔ)上，同時(shí)兼顧到界面美觀（交互稿與視覺稿之間的間距比例，很可能非常不同，最糟的情況可能因?yàn)殚g距問(wèn)題，導(dǎo)致交互稿需要推翻重來(lái)）；

b） 繪制線框圖時(shí)，大可以畫的整齊漂亮一些，但具體設(shè)計(jì)一定是由更為專業(yè)的UI同事進(jìn)行。

灰度——在同一個(gè)界面中，用不同深度的灰色，表示不同區(qū)域的權(quán)重和相關(guān)性

1.2. 原則/常識(shí)

這里也不展開講了，基礎(chǔ)的一些教程，比如《 Web可用性設(shè)計(jì)》《Don’t make me think》，都可以學(xué)習(xí)到一些最基礎(chǔ)的知識(shí)。

2.1. 經(jīng)驗(yàn)

我認(rè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è)形式都能夠兼容），可以拋開需求的具體內(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è)比較少見的推廣入口設(shè)計(jì)，非當(dāng)前狀態(tài)的圖片，標(biāo)題能夠得到展現(xiàn)。

交互稿：

如果交互設(shè)計(jì)師的經(jīng)驗(yàn)，只是在具體的任務(wù)中積累具體的經(jīng)驗(yàn)，這個(gè)過(guò)程無(wú)疑過(guò)于漫長(zhǎng)且事倍功半；掌握抽象統(tǒng)一的一般規(guī)律，并掌握細(xì)微區(qū)別，這個(gè)方式，能夠使經(jīng)驗(yàn)的積累和設(shè)計(jì)工作更為有效。

標(biāo)簽： 交互設(shè)計(jì) 交互設(shè)計(jì)經(jīng)驗(yàn)積累 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。