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

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

1. 入門

1.1. 工具

1.2. 原則/常識

2. 稱職

2.1. 經(jīng)驗

2.2. 經(jīng)驗積累的切入點——模仿并思考

3. 進階

3.1. 一定程度地違反邏輯

3.2. 擴展相關(guān)技能

1.1. 工具：——一切可用于繪制線框，表達交互設(shè)計藍圖的工具，甚至可以用很不主流的PPT、或者直接用前端語言來寫；用的最多，最適合的當(dāng)然是Axure，具體的使用教程不講，可以參考：

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

[2010W13]早讀：Axure

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

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

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

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

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

1.2. ?原則/常識

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

2.1.? 經(jīng)驗

我認(rèn)為，同任何一門學(xué)科或者技能一樣，交互設(shè)計中，同樣存在著工作的對象(流程、控件、控件組)和目標(biāo)(需求)；對這兩個方面所包含的內(nèi)容，分別進行細(xì)微區(qū)分和掌控，便是交互設(shè)計的經(jīng)驗。

實現(xiàn)同一個目標(biāo)，比如最基礎(chǔ)的，我們需要一個入口，點擊它，觸發(fā)新的內(nèi)容或者功能。
做法有很多：按鈕、長短不同的文字鏈、下拉菜單、tab標(biāo)簽、radio組……
其中又包含不同的色彩、下劃線樣式……
它們分別對應(yīng)不同的使用場景，使用的效果有細(xì)微區(qū)分。

面對目標(biāo)需求，可以將其抽象化，在內(nèi)容不影響形式的時候(或者說大多數(shù)時候，我們都盡量達到這樣一個效果：面對不同的內(nèi)容，我們所使用的這個形式都能夠兼容)，可以拋開需求的具體內(nèi)容，而是去考慮它要實現(xiàn)的是一種怎樣的交互形式。

比如這樣一個例子：

原始需求：要有兩個頭圖輪播，一個是活動公告，一個是產(chǎn)品推薦，但我又擔(dān)心兩個都會動，變得很奇怪……但又都想放……
抽象需求：有兩個模塊，模塊的內(nèi)容是復(fù)數(shù)入口，圖片方式，避免相互干擾；
分析：
1. 首屏區(qū)域出現(xiàn)兩個自動輪播的內(nèi)容，顯然會相互干擾；
2. 自動輪播的目的是獲得更多展現(xiàn)；
2.1. 需要不自動輪播，仍然能夠展示出其中部分信息的做法

于是這是線上的效果，右下是一個比較少見的推廣入口設(shè)計，非當(dāng)前狀態(tài)的圖片，標(biāo)題能夠得到展現(xiàn)。

交互稿：

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

2.2. 經(jīng)驗積累的切入點——模仿并思考

有一個快速存儲這類經(jīng)驗的方法，就是自己動手，把現(xiàn)成的網(wǎng)站抄成交互稿。

直接看成品的交互稿，可能并不容易理解，而在自己動手畫的時候，可以伴隨著思考：
為什么模塊是這樣擺放，
為什么使用這樣的流程，
為什么是這種層級，
面包屑vs導(dǎo)航條，
強按鈕vs弱按鈕vs功能鏈
……
捎帶學(xué)習(xí)了Axure的玩法

如果覺得有錯誤……別懷疑自己，很可能就是他錯了；或者，是平衡協(xié)調(diào)后的產(chǎn)物。

之前的一個用于可用性測試的例子，有點像是這個情形：

當(dāng)時需要評估這個產(chǎn)品規(guī)劃中的部分新功能的可用性與易用性，并為了測試任務(wù)的流暢，模仿了大量的現(xiàn)有功能，甚至用Axure模擬了從硬盤上傳圖片。

在這個任務(wù)里，比較有印象的收獲是，用axure的Frame工具，可以模擬“回到頁首”或者底部導(dǎo)航條這種與瀏覽器位置相對固定的模塊。

3.1.?多種方案的權(quán)衡

實現(xiàn)同一個目的，有多種不同的方案，每個方案，都可能在這個方面強一些，在另一個方面弱一些；實際使用上，它們的效果通常并沒有非常明顯的區(qū)別。
這是交互設(shè)計的另一項經(jīng)驗：如何設(shè)計不完美的作品。

又要易用流暢，又要屏蔽干擾項，又要方便用戶隨時切換，又要充實又要簡潔……這種設(shè)計方案是不可能存在的，而為了產(chǎn)品和運營的目標(biāo),為了用戶看似不合邏輯但切實存在的操作流程, 我們通常面臨的需求正是這種復(fù)雜需求，同時往往伴隨著名為“快速迭代小步快跑”之類的短工期。

這時，對不同方案的細(xì)節(jié)區(qū)分，各自有什么樣的優(yōu)劣，熟練于心，可以方便我們快速地決定一個或是另一個方案，而不是陷入長時間的糾結(jié)。(pm非要糾結(jié)則另當(dāng)別論……)

如同這個機票查詢的例子，各家的使用方法不同，效果也各有傾向(或者說，由于需要偏重的方向不同，而使用了不同的設(shè)計)：

大多數(shù)機票查詢的入口，都是這樣，單程/往返使用兩個radio，放在最前面；選擇單程時禁用往返，或者隱藏返程時間輸入框。
邏輯是這樣的：用戶最先決定自己是單程還是往返，然后再選擇起降地點及時間……這顯然是產(chǎn)品邏輯，實際上絕大多數(shù)用戶都不是一去不回，而是必須回來的。用戶隨時可能從買單程變成想買往返，而這時候再把注意力返回到頁面最上方，又離的很遠成為了負(fù)擔(dān)。
不禁用返程，又擔(dān)心用戶被這個框干擾，影響任務(wù)往下走。

于是淘寶的版本是這樣的，返程時間不禁用，只是視覺相對弱化；返程時間輸入框獲得焦點時，上方radio自動切換到往返。
同時，要回到單程狀態(tài)……仍然只能手動通過radio切換。

這個控件組的作用，抽象地說，就是二選一的入口，分別對應(yīng)不同的內(nèi)容展示：兩個radio/下拉列表/tab，都能起到二選一的作用。下拉列表鼠標(biāo)操作次數(shù)太多，適用于更多選項的情形；tab帶有兩者平行且無交集的意味，所以這兒也不適用。

一種特殊的二選一，就是是否，是否需要返程，于是可以用復(fù)選框：

這時，用戶在往返與否之間切換的成本最低。

這并不是說使用radio的方案不正確，只是在只有這兩種情形的產(chǎn)品，使用復(fù)選框會更好一些，如果考慮擴展的情形：

還是應(yīng)該使用radio的。

3.2. 擴展相關(guān)技能

視覺：柵格、用色、間距……

前端：代碼邏輯、可實現(xiàn)性

產(chǎn)品：功能設(shè)計

用研：可用性測試

BI：數(shù)據(jù)挖掘……

同樣也不展開說了，這些內(nèi)容，對交互設(shè)計工作都會有相當(dāng)?shù)膸椭?，但也不需要精通，基本了解就可以?/p>

個人經(jīng)驗和理解啰嗦完畢……歡迎共同討論。

來源：http://uedc.163.com/8472.html