關(guān)于交互設(shè)計(jì)，這是一篇很全很全很全（重要事情要說(shuō)三遍）的科普文章。作者寫了1.6萬(wàn)字，實(shí)在是誠(chéng)意之作。如果你打算走進(jìn)交互，此文值得真的真的真的（重要事情要說(shuō)三遍）值得一讀^_^ by 小編

目錄導(dǎo)讀：

1. 交互設(shè)計(jì)概念

2. 交互設(shè)計(jì)輸出物

3. 交互設(shè)計(jì)相關(guān)理論

4. 交互設(shè)計(jì)流程及方法

5. 交互設(shè)計(jì)常見案例分析

6. 交互設(shè)計(jì)規(guī)范及趨勢(shì)

7. 交互設(shè)計(jì)師進(jìn)階之路

1. 交互設(shè)計(jì)概念

1.1 交互設(shè)計(jì)定義

（1）什么是交互設(shè)計(jì)？

這里比較傾向于優(yōu)設(shè)網(wǎng)的回答：“你來(lái)我往”謂之”交互”；這里的”你來(lái)”指的是”輸入（input）”，”我往”是”反饋（feedback）或輸出(output)”。

交互可能存在于人與人之間，也可能存在于人于物之間。

（2）交互設(shè)計(jì)和視覺(jué)設(shè)計(jì)有什么區(qū)別？

交互設(shè)計(jì)傾向于用戶目標(biāo)的實(shí)現(xiàn)，讓任務(wù)行為變得更簡(jiǎn)單；視覺(jué)設(shè)計(jì)傾向于美化和外顯表達(dá)，讓產(chǎn)品變得更好看，兩者的側(cè)重點(diǎn)不同。

例如，微信搶紅包頁(yè)面，交互設(shè)計(jì)讓用戶更容易達(dá)成“搶紅包的目標(biāo)”，只需點(diǎn)擊“拆紅包”即可以搶紅包，點(diǎn)擊后有反饋（要么搶到紅包，顯示搶到多少金額，其他人搶到多少金額；要么搶不到紅包，手慢了，搶光了。）視覺(jué)設(shè)計(jì)則讓界面像看起來(lái)像真實(shí)的紅包，中間的黃色按鈕更明顯，提示可以點(diǎn)擊。

（3）交互設(shè)計(jì)三要素是什么？

交互設(shè)計(jì)三要素是目標(biāo)、任務(wù)、行為。所有的交互設(shè)計(jì)都是圍繞完成用戶的目標(biāo)進(jìn)行服務(wù)的，不能順利完成用戶目標(biāo)的交互，都是沒(méi)有意義的。

怎么理解這三要素的區(qū)別？

舉個(gè)例子就是：小明餓了，他需要填飽肚子（目標(biāo)），他跑到樓下的餐館進(jìn)行點(diǎn)餐、吃飯、結(jié)賬（任務(wù)），吃完了出門的時(shí)候推門（行為）出去，然后過(guò)馬路回家。

1.2 認(rèn)識(shí)交互設(shè)計(jì)師

（1）什么是交互設(shè)計(jì)師？

交互指的是產(chǎn)品與它的使用者之間的互動(dòng)過(guò)程，而交互設(shè)計(jì)師則是秉承以用戶為中心的設(shè)計(jì)理念，以用戶體驗(yàn)度為原則，對(duì)交互過(guò)程進(jìn)行研究并開展設(shè)計(jì)的工作人員。——百度百科

（2）交互設(shè)計(jì)師與產(chǎn)品經(jīng)理、視覺(jué)設(shè)計(jì)師有什么區(qū)別和聯(lián)系？

一般的公司很少設(shè)有交互設(shè)計(jì)師的職位，交互設(shè)計(jì)的功能一般由產(chǎn)品經(jīng)理或者視覺(jué)設(shè)計(jì)師兼任，所以很多人都認(rèn)為，產(chǎn)品經(jīng)理能干交互設(shè)計(jì)師的活，但是產(chǎn)品經(jīng)理干的活交互設(shè)計(jì)師干不了，這種理解是帶有偏見的，因?yàn)楹芏嗳隋e(cuò)誤把交互設(shè)計(jì)師理解為畫流程圖或者原型圖的職位。

它們?nèi)叩穆毼挥斜举|(zhì)的區(qū)別，產(chǎn)品經(jīng)理更關(guān)注產(chǎn)品的業(yè)務(wù)方向、產(chǎn)品規(guī)劃、生命周期等大方向，而交互設(shè)計(jì)師更著重與讓用戶使用產(chǎn)品時(shí)更好的完成目標(biāo)任務(wù)，并且在過(guò)程中得到情感上的滿足，最后，視覺(jué)設(shè)計(jì)師更關(guān)注產(chǎn)品的外在表達(dá)。交互設(shè)計(jì)師在產(chǎn)品團(tuán)隊(duì)中處于中游的位置，上游為產(chǎn)品經(jīng)理，下游需要對(duì)接視覺(jué)設(shè)計(jì)師，所以大家之間的理解和溝通十分重要。

（3）交互設(shè)計(jì)師的職業(yè)發(fā)展路徑如何？

首先，任何職位都有高低能力的區(qū)別，能力就會(huì)體驗(yàn)為職位、待遇的不同，所以交互設(shè)計(jì)師較為簡(jiǎn)單的職業(yè)發(fā)展路徑為：

①初級(jí)交互設(shè)計(jì)師<10k：俗稱「線框仔」，出沒(méi)于小公司和外包公司，沒(méi)有設(shè)計(jì)決策權(quán)，專門配給不會(huì)畫圖的產(chǎn)品經(jīng)理使用。門檻低，只需要熟練使用原型軟件，會(huì)看著其它APP抄設(shè)計(jì)即可。無(wú)發(fā)展前途，看到此類崗位請(qǐng)遠(yuǎn)離。

②中級(jí)交互設(shè)計(jì)師10k-15k：除了畫線框圖外參與一定的產(chǎn)品層面的工作，有一定設(shè)計(jì)決策權(quán)，通常為知名院校應(yīng)屆畢業(yè)生，可以對(duì)設(shè)計(jì)決策提出異議，但不一定被接受。

③高級(jí)交互設(shè)計(jì)師15k-25k：通?？梢詤⑴c整個(gè)產(chǎn)品的概念過(guò)程，工作職能與產(chǎn)品經(jīng)理更為接近，有更多的設(shè)計(jì)決策權(quán)，通常工作經(jīng)驗(yàn)超過(guò)2年，可以和產(chǎn)品經(jīng)理、視覺(jué)設(shè)計(jì)師、用戶研究員及開發(fā)人員進(jìn)行「激烈討論」，并有能力維護(hù)設(shè)計(jì)師的尊嚴(yán)。

④資深交互設(shè)計(jì)師>25k：通常出沒(méi)于BAT、財(cái)大氣粗的創(chuàng)業(yè)公司及設(shè)計(jì)咨詢公司。有著豐富的成功設(shè)計(jì)案例，通常工作經(jīng)驗(yàn)超過(guò)5年，有主流大公司工作經(jīng)驗(yàn)，有大型項(xiàng)目的設(shè)計(jì)管理經(jīng)驗(yàn)，業(yè)內(nèi)有一定名氣。

——以上分級(jí)，參考寺主人在知乎的回答《如何成為交互設(shè)計(jì)師？》

上面的發(fā)展路徑屬于職業(yè)的縱向發(fā)展，當(dāng)然交互設(shè)計(jì)師也可以橫向發(fā)展，例如，轉(zhuǎn)產(chǎn)品經(jīng)理，但產(chǎn)品經(jīng)理同樣有高低能力差異，并不代表你本身是高級(jí)交互設(shè)計(jì)師，轉(zhuǎn)到產(chǎn)品經(jīng)理就是高級(jí)產(chǎn)品經(jīng)理。對(duì)于當(dāng)前產(chǎn)品職位入門門檻越來(lái)越低，細(xì)分能力要求越來(lái)越高的情況下，建議交互設(shè)計(jì)師選擇縱向的反正方向，并且深耕一個(gè)行業(yè)領(lǐng)域。

1.3 交互設(shè)計(jì)師需要具備哪些素質(zhì)？

這是一個(gè)交互設(shè)計(jì)師面試必考題，它能反應(yīng)我們對(duì)交互設(shè)計(jì)師的崗位的理解，并且檢測(cè)你是否適合成為一名交互設(shè)計(jì)師。其實(shí)，這些素質(zhì)都是可以通過(guò)后天訓(xùn)練而成，如果想要成為一名交互設(shè)計(jì)師，可以從這些方面進(jìn)行刻意訓(xùn)練。

（1）全局觀

交互設(shè)計(jì)師需要全程參與產(chǎn)品的討論，與產(chǎn)品團(tuán)隊(duì)的人員達(dá)成共識(shí)，我們的交互設(shè)計(jì)水平達(dá)到所有人的認(rèn)可；另一個(gè)方面，我們要對(duì)產(chǎn)品的全局了如指掌，產(chǎn)品的現(xiàn)狀特性，產(chǎn)品的目標(biāo)，產(chǎn)品的設(shè)計(jì)流程等。

（2）關(guān)鍵思考能力

如果有看過(guò)NBA的人都應(yīng)該知道，關(guān)鍵球，都是掌握在關(guān)鍵角色手里，同樣，產(chǎn)品的具象化，同樣掌握在交互設(shè)計(jì)師手里。交互設(shè)計(jì)師作為中游職位，會(huì)面臨來(lái)自上游產(chǎn)品經(jīng)理的挑戰(zhàn)，同樣會(huì)面臨下游視覺(jué)設(shè)計(jì)師、開發(fā)人員的挑戰(zhàn)。所以關(guān)鍵思考能力就變得尤為重要。

關(guān)鍵思考能力體現(xiàn)在兩個(gè)方面：一方面是我們的設(shè)計(jì)是經(jīng)過(guò)深入的思考，并且經(jīng)得起考驗(yàn)，要深入到業(yè)務(wù)邏輯和商業(yè)價(jià)值進(jìn)行思考，而不是停留在產(chǎn)品功能設(shè)計(jì)表面，同時(shí)，在用戶體驗(yàn)和開發(fā)成本之間達(dá)到一種平衡，這樣我們才能在設(shè)計(jì)評(píng)審上能堅(jiān)定自己的立場(chǎng)；另一個(gè)方面，作為“設(shè)計(jì)師”，永遠(yuǎn)別想著一套方案就可以解決所有的問(wèn)題，要有備胎方案為關(guān)鍵時(shí)刻做準(zhǔn)備，正如NBA關(guān)鍵先生被防死了之后，還有planB。

（3）細(xì)節(jié)

2016年、2017年的交互設(shè)計(jì)趨勢(shì)中都有提及，交互會(huì)更比拼細(xì)節(jié)，設(shè)計(jì)稿不能馬虎了事，一個(gè)流程細(xì)節(jié)，一個(gè)字段，甚至是像素上的差異，都有可能造成嚴(yán)重的后果。注重細(xì)節(jié)習(xí)慣的養(yǎng)成，交互設(shè)計(jì)師才能對(duì)產(chǎn)品負(fù)責(zé)，對(duì)其他同事負(fù)責(zé)，對(duì)用戶負(fù)責(zé)。

（4）審美能力

相當(dāng)一部分交互設(shè)計(jì)師，在畫原型的時(shí)候，為了追求速度，都會(huì)東拼西湊地組成一個(gè)原型，導(dǎo)致視覺(jué)設(shè)計(jì)師或者開發(fā)的同事都很難看懂原型，更不用說(shuō)，需要模擬出真實(shí)的產(chǎn)品是什么樣子。所以，交互設(shè)計(jì)師還必須懂得審美，在頁(yè)面具體化的時(shí)候就知道最后的頁(yè)面是大概什么樣子，否則，視覺(jué)設(shè)計(jì)師重新把我們的設(shè)計(jì)稿改一遍，改成了最終產(chǎn)品上線的樣子，我們畫原型還有什么意義？

另外一點(diǎn)，擁有審美能力的交互設(shè)計(jì)師，他流程圖、原型、交互說(shuō)明文檔等交互設(shè)計(jì)輸出物，必然是美輪美奐的，從外觀看起來(lái)就是高質(zhì)量的東西，給其他團(tuán)隊(duì)同事一種更好的閱讀感受，大大提高工作效率。

（5）同理心

同理心，我們更多知道的是產(chǎn)品經(jīng)理要有同理心，要站在用戶的角度去思考問(wèn)題，這個(gè)產(chǎn)品的需求是否滿足用戶的需求？用戶用得爽不爽？同樣，交互設(shè)計(jì)師也需要同理心，明確用戶的目標(biāo)是什么，讓用戶使用產(chǎn)品的時(shí)候不要做多余的操作，更好的完成目標(biāo)。

對(duì)于交互設(shè)計(jì)師來(lái)說(shuō)，同理心不光是針對(duì)用戶，也針對(duì)所在產(chǎn)品團(tuán)隊(duì)。一個(gè)交互設(shè)計(jì)的產(chǎn)出，都有視覺(jué)設(shè)計(jì)師或者開發(fā)團(tuán)隊(duì)工作量在里面，所以從交互設(shè)計(jì)的崗位來(lái)看，要懂得換位思考，珍惜開發(fā)工程師和設(shè)計(jì)設(shè)計(jì)師的勞作成果，不做高成本低產(chǎn)出的需求，懂得拒絕業(yè)務(wù)方不合理的需求。

（6）創(chuàng)新能力

資深交互設(shè)計(jì)師和普通設(shè)計(jì)師之間的差異在于創(chuàng)新能力的差異，資深交互設(shè)計(jì)師總能在設(shè)計(jì)中找到可以創(chuàng)新的點(diǎn)，把它改進(jìn)，并能大大提高產(chǎn)品的受歡迎程度（轉(zhuǎn)化率、留存率）。不要臨摹別人的產(chǎn)品，需要時(shí)刻保持創(chuàng)新的精神，我們可以做得更好。

（7）邏輯思考能力

把邏輯思考能力放到最后來(lái)講，并不意味著它不重要，相反，邏輯思考能力是最基礎(chǔ)需要具備的能力。其實(shí)，不光是交互設(shè)計(jì)師，放在任何一個(gè)職位都是一樣的，邏輯思考能力強(qiáng)的人，適應(yīng)一個(gè)崗位更快，思考比別人更深遠(yuǎn)，工作效率比別人更高。

1.4 交互設(shè)計(jì)師的職責(zé)是什么？

了解交互設(shè)計(jì)師職責(zé)的最快方法是招聘網(wǎng)站，我們先來(lái)看看3個(gè)公司對(duì)交互設(shè)計(jì)師的職責(zé)要求。

唯品會(huì)（高級(jí)/資深交互設(shè)計(jì)師）

1. 負(fù)責(zé)唯品會(huì)移動(dòng)端及相關(guān)延伸產(chǎn)品的交互設(shè)計(jì)，參與產(chǎn)品的整體設(shè)計(jì)規(guī)劃；
2. 分析業(yè)務(wù)需求，執(zhí)行具體的交互設(shè)計(jì)，并推進(jìn)設(shè)計(jì)落地與驗(yàn)證；
3. 對(duì)現(xiàn)有產(chǎn)品的進(jìn)行可用性測(cè)試和評(píng)估，提出改進(jìn)方案，持續(xù)優(yōu)化產(chǎn)品的用戶體驗(yàn)。

阿里巴巴（高級(jí)交互設(shè)計(jì)師）

1. 負(fù)責(zé)國(guó)際應(yīng)用發(fā)行產(chǎn)品的功能需求優(yōu)化、產(chǎn)品流程梳理、交互設(shè)計(jì)等工作；
2. 與產(chǎn)品、運(yùn)營(yíng)團(tuán)隊(duì)合作，分析業(yè)務(wù)需求，歸納及設(shè)計(jì)產(chǎn)品交互頁(yè)面，優(yōu)化用戶體驗(yàn)流程。

網(wǎng)易（高級(jí)交互設(shè)計(jì)師）

1. 參與公司的郵箱系統(tǒng)或相關(guān)產(chǎn)品的規(guī)劃構(gòu)思和創(chuàng)意過(guò)程；
2. 與產(chǎn)品人員溝通，分析業(yè)務(wù)需求，并加以分解，歸納產(chǎn)品人機(jī)交互界面需求；
3. 設(shè)計(jì)產(chǎn)品人機(jī)交互界面結(jié)構(gòu)、用戶操作流程等；
4. 與視覺(jué)設(shè)計(jì)師密切配合，產(chǎn)生美觀易理解的界面；
5. 跟蹤產(chǎn)品開發(fā)流程并推動(dòng)落實(shí)，制定并輸出相關(guān)設(shè)計(jì)規(guī)范；
6. 優(yōu)化產(chǎn)品可用性，不斷地改善用戶體驗(yàn)；
7. 宣傳和推廣”以用戶為中心”的設(shè)計(jì)理念；
8. 參與部門內(nèi)外的用戶體驗(yàn)概念和流程的普及工作。

所以，基本上是大同小異，我們總結(jié)一下職責(zé)要求就是：

1. 參與產(chǎn)品的整體設(shè)計(jì)規(guī)劃，輸出交互設(shè)計(jì)產(chǎn)出物，推動(dòng)產(chǎn)品的落地實(shí)現(xiàn)；
2. 對(duì)產(chǎn)品進(jìn)行持續(xù)性的設(shè)計(jì)優(yōu)化，輸出相關(guān)設(shè)計(jì)規(guī)范，提升用戶體驗(yàn)；
3. 協(xié)調(diào)和推動(dòng)“已用戶為中心”的設(shè)計(jì)理念，在公司范圍普及用戶體驗(yàn)概念和流程；
4. 負(fù)責(zé)設(shè)計(jì)前瞻性的研究工作。

所以，不要再以為交互設(shè)計(jì)師只是畫原型的線框仔了，我們?nèi)绻胍蔀榻换ピO(shè)計(jì)師，就要明確交互設(shè)計(jì)師的職責(zé)所在。

1.5 交互設(shè)計(jì)師有什么專業(yè)背景要求？

雖然說(shuō)人人都能成為交互設(shè)計(jì)師，但是專業(yè)科班出身的同學(xué)，無(wú)意是企業(yè)最先青睞的對(duì)象。以下這些專業(yè)是最貼合的：

（1）交互設(shè)計(jì)

（2）藝術(shù)設(shè)計(jì)

（3）工業(yè)設(shè)計(jì)

（4）心理學(xué)

1.6 交互設(shè)計(jì)師需要哪些知識(shí)體系？

本段內(nèi)容可以參考文章《騰訊高級(jí)交互設(shè)計(jì)師：什么是優(yōu)秀的設(shè)計(jì)思維與方法？》總結(jié)得比較到位。

（1）商業(yè)（幫助尋找切入角度和決策）

所有設(shè)計(jì)都是為商業(yè)而服務(wù)的，沒(méi)有產(chǎn)生利潤(rùn)的設(shè)計(jì)都是毫無(wú)意義的，即使是早年鼓吹“免費(fèi)”的360衛(wèi)士，同樣也反思免費(fèi)的模式已經(jīng)走不通?；ヂ?lián)網(wǎng)的發(fā)展趨勢(shì)、產(chǎn)品的商業(yè)模式、所在的行業(yè)知識(shí)、當(dāng)前的政策背景、新技術(shù)的發(fā)展趨勢(shì)，這些都是需要首先了解的，這樣才能設(shè)計(jì)出有價(jià)值的好的產(chǎn)品。

（2）思辨（提高邏輯分析能力和解讀視角）

如果有讀過(guò)《交互設(shè)計(jì)沉思錄》一書的人，應(yīng)該知道，設(shè)計(jì)方法無(wú)非就可以分為兩種：感性設(shè)計(jì)，設(shè)計(jì)只是靈光一閃；理性設(shè)計(jì)，通過(guò)設(shè)計(jì)方法論或者大量用戶驗(yàn)證來(lái)進(jìn)行設(shè)計(jì)。對(duì)于大多數(shù)交互設(shè)計(jì)師來(lái)說(shuō)，理性設(shè)計(jì)應(yīng)優(yōu)于感性設(shè)計(jì)，這就需要交互設(shè)計(jì)師去訓(xùn)練自己的思辨能力。這個(gè)設(shè)計(jì)好在哪里？不好在哪里？我能做到哪方面的改進(jìn)？

（3）設(shè)計(jì)（設(shè)計(jì)思維和設(shè)計(jì)表達(dá)）

說(shuō)白了就是看設(shè)計(jì)的專業(yè)書，深入學(xué)習(xí)設(shè)計(jì)知識(shí)。例如《用戶體驗(yàn)五要素》、《交互設(shè)計(jì)四策略》、《交互設(shè)計(jì)沉思錄》、《認(rèn)知與設(shè)計(jì)》等等。

（4）人性（對(duì)人性和社會(huì)的理解）

如果說(shuō)中級(jí)交互設(shè)計(jì)師與高級(jí)設(shè)計(jì)師的差距在哪里，那么對(duì)人性的理解是其中的一個(gè)重大的差距。交互設(shè)計(jì)基本是以用戶為中心的設(shè)計(jì)，如果對(duì)人性的了解更深入，設(shè)計(jì)水平同樣會(huì)突飛猛進(jìn)。

看看這些經(jīng)典的心理學(xué)書籍吧，《心理學(xué)與生活》會(huì)告訴我們?nèi)说闹X(jué)組織是如何對(duì)分組起作用的——格式塔原理；《社會(huì)心理學(xué)》告訴我們好評(píng)如何影響人的購(gòu)買行為——從眾心理；《設(shè)計(jì)師要懂心理學(xué)》則告訴我們用戶認(rèn)知會(huì)比視覺(jué)耗費(fèi)更多的腦力資源——人如何思考。

（5）藝術(shù)（提高審美能力）

提高審美能力就不用多說(shuō)了，可以大致去學(xué)習(xí)一下視覺(jué)設(shè)計(jì)的知識(shí)，例如最基本的柵格理論、色彩原理（色調(diào)、飽和度和明度）；同時(shí)，可以關(guān)注一下時(shí)尚雜志、家具設(shè)計(jì)等，能顯著提高自己的審美能力。另外，每個(gè)設(shè)計(jì)師最好都規(guī)劃好自己的作品集，把作品集做得漂漂亮亮也是一種審美的提高過(guò)程。

（6）技能（創(chuàng)新工具的使用）

很多入門的新人應(yīng)該都會(huì)聽過(guò)一句話：Axure只是最基本的工具，交互設(shè)計(jì)并不是Axure畫原型那么簡(jiǎn)單。這句話是對(duì)的，但是同時(shí)也是錯(cuò)誤的，所謂的錯(cuò)誤就是，交互設(shè)計(jì)師的設(shè)計(jì)落地都要通過(guò)工具進(jìn)行表達(dá)，工具就是技能。如同Photoshop成為視覺(jué)設(shè)計(jì)師的代名詞一樣，交互設(shè)計(jì)師同樣也需要有技能傍身——Mindnode Pro、Axure、Visio等等。

此外，交互設(shè)計(jì)師不能滿足于用一種工具去表達(dá)，這就需要交互設(shè)計(jì)師挖掘?qū)W習(xí)更多的技能，例如模擬真實(shí)的動(dòng)效，讓開發(fā)工程師更好的理解，讓交互設(shè)計(jì)讓用戶用起來(lái)更愉悅。

1.7 交互設(shè)計(jì)師常用的工具有哪些？

（1）思維導(dǎo)圖

Mindnode Pro、xmind等，常用思維導(dǎo)圖，會(huì)讓你的設(shè)計(jì)靈感得到合理的釋放，最好的移動(dòng)端也能用的思維導(dǎo)圖，所有的靈感都是一瞬間，我們可以用手機(jī)隨時(shí)隨地記錄靈感。

（2）流程圖

Visio，或者在線的流程圖工具ProcessOn。畫好流程圖，并不比畫原型圖更容易，對(duì)于開發(fā)工程師來(lái)說(shuō)，流程圖比原型圖更重要。

（3）線框圖

Axure，看個(gè)人喜好或者團(tuán)隊(duì)協(xié)助要求，至少會(huì)一種，建議學(xué)習(xí)Axure，對(duì)于大多數(shù)公司都適用。

（4）視覺(jué)設(shè)計(jì)/界面設(shè)計(jì)

Sketch，交互設(shè)計(jì)師如果本身沒(méi)有Photoshop基礎(chǔ)的話，不建議學(xué)習(xí)Photoshop進(jìn)行界面設(shè)計(jì)，Sketch入門簡(jiǎn)單， Symbol復(fù)用、切圖簡(jiǎn)單的特性會(huì)讓交互設(shè)計(jì)師愛(ài)上它的，唯一的缺點(diǎn)就是，它只能運(yùn)行在mac上面。

（5）交互說(shuō)明文檔

Word、PPT甚至Axure等，隨意選擇，但是要注意一點(diǎn)，一定是可以生成目錄進(jìn)行索引的，修改更新方便的。

2. 交互設(shè)計(jì)輸出物

2.1 設(shè)計(jì)思考

（1）設(shè)計(jì)目標(biāo)

在項(xiàng)目一開始時(shí)，交互設(shè)計(jì)師就必須參與其中，切記，切記，切記，重要的事情說(shuō)三遍！不然最終只能淪為畫原型的工具，設(shè)計(jì)方案也容易偏離目標(biāo)。交互設(shè)計(jì)師參與項(xiàng)目時(shí)，必須搞清楚下面三件事情：

1. 我們的業(yè)務(wù)訴求是什么？
2. 我們的產(chǎn)品方向是什么？
3. 用戶希望用產(chǎn)品達(dá)成什么樣的目標(biāo)？

把這三者歸納起來(lái)，形成我們的設(shè)計(jì)目標(biāo)，最終得出設(shè)計(jì)方案。前面的步驟一般都會(huì)醞釀在設(shè)計(jì)師的腦海中，很少有設(shè)計(jì)師會(huì)通過(guò)書面去表達(dá)出來(lái)，或者設(shè)計(jì)師認(rèn)為根本不必要去表達(dá)。但是，如果設(shè)計(jì)師可以把這部分思考過(guò)程放進(jìn)交互設(shè)計(jì)輸出物當(dāng)中，就會(huì)讓設(shè)計(jì)變得更加透明，在設(shè)計(jì)提案時(shí)更有說(shuō)服力，同時(shí)，也記錄當(dāng)時(shí)的設(shè)計(jì)思考過(guò)程，便于日后追溯修正。

（2）用戶

這個(gè)需求針對(duì)的目標(biāo)用戶群有哪些？了解用戶才能更好地對(duì)用戶想要達(dá)成的目標(biāo)進(jìn)行，一般可以三個(gè)方面對(duì)用戶進(jìn)行了解。

1. 用戶目標(biāo)：用戶希望用產(chǎn)品達(dá)成何種目標(biāo)，例如用戶能用訂餐APP吃飽飯。
2. 用戶特征：包括生理特征（年齡、性別），社會(huì)特征（收入、學(xué)歷），了解用戶的特征可以使產(chǎn)品設(shè)計(jì)更貼合用戶，例如針對(duì)老人的手機(jī)，字體會(huì)設(shè)計(jì)得更大，這樣方便老人閱讀；針對(duì)兒童的產(chǎn)品，首先要考慮安全性，鋒利、細(xì)小的物品是嚴(yán)禁使用的。
3. 用戶權(quán)限：常見于后臺(tái)產(chǎn)品設(shè)計(jì)，搞清楚用戶角色所擁有的不同菜單權(quán)限、數(shù)據(jù)權(quán)限。例如總部人員能看到所有分公司的數(shù)據(jù)，而分公司人員只能看到所屬分公司的數(shù)據(jù)。

（3）場(chǎng)景

場(chǎng)景的作用是解決什么人在什么情景下會(huì)使用到產(chǎn)品或者功能的問(wèn)題，我們?yōu)g覽一個(gè)網(wǎng)頁(yè)，下拉后會(huì)出現(xiàn)回到頂部按鈕，這就是一個(gè)比較經(jīng)典的場(chǎng)景?；趫?chǎng)景進(jìn)行設(shè)計(jì)，可以從如下三個(gè)因素進(jìn)行考慮，見《阿里設(shè)計(jì)師分享設(shè)計(jì)方法：如何基于場(chǎng)景做設(shè)計(jì)？》一文，對(duì)場(chǎng)景化的介紹和應(yīng)用闡述得比較詳細(xì)。

1. 時(shí)間因素：考慮用戶在什么時(shí)候會(huì)使用該產(chǎn)品，是工作的時(shí)候，上班的路上，與情人約會(huì)的時(shí)候，睡覺(jué)前，朋友聚會(huì)，還是鍛煉的時(shí)候。例如，微信的勿擾模式，開啟后，可以指定某時(shí)間段內(nèi)不會(huì)收到消息推送。
2. 地點(diǎn)因素：考慮用戶在什么地點(diǎn)會(huì)使用該產(chǎn)品。在家，在學(xué)校，在辦公室，公交車上，打的的時(shí)候，地鐵里還是飯館里。例如，在戶外陽(yáng)光直射后，手機(jī)屏幕會(huì)自動(dòng)調(diào)整亮度，以便用戶能更好的看清屏幕內(nèi)容。
3. 人物因素：考慮使用該產(chǎn)品的人群會(huì)有怎樣的特征，通過(guò)數(shù)據(jù)的積累勾勒用戶的標(biāo)簽，達(dá)到千人千面的個(gè)性化服務(wù)。例如電商常用的推薦商品模塊“猜你喜歡”，都是根據(jù)用戶的喜好推薦相應(yīng)的產(chǎn)品。

2.2 主要交互產(chǎn)物

（1）信息架構(gòu)

設(shè)計(jì)web、APP產(chǎn)品，經(jīng)常要進(jìn)行信息架構(gòu)設(shè)計(jì)，復(fù)雜的信息架構(gòu)，對(duì)交互設(shè)計(jì)師的業(yè)務(wù)理解能力、產(chǎn)品的全局把控能力、用戶場(chǎng)景的設(shè)定提出更高的要求。在描繪信息架構(gòu)圖時(shí)，不僅要輸出架構(gòu)層級(jí)，而且要清晰注明他們之間的相互關(guān)系。

（2）流程圖

流程圖（Flow Chart），是流經(jīng)一個(gè)系統(tǒng)的信息流、觀點(diǎn)流或部件流的圖形代表，簡(jiǎn)單來(lái)說(shuō)就是把一個(gè)流程用圖形化來(lái)表達(dá)出來(lái)，方便他人了解。交互輸出物中常見的流程圖是任務(wù)流程圖以及頁(yè)面流程圖。

1）任務(wù)流程圖

任務(wù)流程圖可以直接展示一個(gè)或者多個(gè)角色從一開始到結(jié)束的所有任務(wù)流程步驟，以及與各角色之間、各系統(tǒng)之間、各頁(yè)面之間的關(guān)聯(lián)。做任務(wù)流程圖輸出物的時(shí)候，不僅要交付流程圖，還要交付針對(duì)流程圖的必要說(shuō)明，例如流程說(shuō)明，圖例說(shuō)明，讓閱讀對(duì)象能“讀懂”流程圖。

2）頁(yè)面流程圖

頁(yè)面流程圖可以清晰表達(dá)用戶在使用產(chǎn)品過(guò)程中的頁(yè)面間上下游關(guān)系及跳轉(zhuǎn)頁(yè)面邏輯，同時(shí)也幫助設(shè)計(jì)師梳理產(chǎn)品整體頁(yè)面層級(jí)，通常作為中大型項(xiàng)目輸出物產(chǎn)出。（PS：利用axure自帶生成流程圖的功能，可以很方便生成頁(yè)面流程）

3）異常流程

異常流程通常是流程圖輸出物中忽略的一個(gè)點(diǎn)，異常流程可以不用畫流程圖，但是需要注明異常流程的處理方法。針對(duì)項(xiàng)目的不同，異常流程也復(fù)雜多樣，下面是部分舉例：

1. 用戶網(wǎng)速緩慢、超時(shí)、甚至無(wú)網(wǎng)狀態(tài)時(shí)，流程上如何引導(dǎo)用戶正確地返回、自動(dòng)保存已輸入信息或檢查網(wǎng)絡(luò)環(huán)境？
2. 服務(wù)器無(wú)反應(yīng)時(shí)，如何引導(dǎo)用戶進(jìn)行下一步操作？
3. 頁(yè)面加載為空白內(nèi)容時(shí)，如果引導(dǎo)用戶重新嘗試或者放棄等待？
4. 上傳過(guò)程中網(wǎng)絡(luò)中斷，是否提示用戶檢查網(wǎng)絡(luò)環(huán)境，重新進(jìn)行上傳？

（3）線框圖

線框圖是交互設(shè)計(jì)師的主要交互輸出物，主要以黑白的字體、控件和塊填滿整個(gè)頁(yè)面，線框圖一般不追求華麗的表達(dá)，但要滿足以下要求：

1. 能體現(xiàn)界面的大體結(jié)構(gòu)和布局
2. 表達(dá)內(nèi)容的模塊位置擺放合理
3. 能展示界面的主要交互元素，例如按鈕，鏈接跳轉(zhuǎn)，輸入框等元素

• 常見輸出物問(wèn)題：交互設(shè)計(jì)師是否需要輸出高保真的原型？
• 答：視項(xiàng)目需求和交互設(shè)計(jì)師個(gè)人時(shí)間效率，一般不太建議輸出高保真的原型，因?yàn)橹谱鞒杀竞途S護(hù)成本都很高，除非制作、維護(hù)高保真原型的效率能抵消這種成本。

（4）交互說(shuō)明文檔

交互說(shuō)明文檔又可以稱為交互注釋，圖例展示和文字注釋是主要的手段，交互注釋應(yīng)包括如下的內(nèi)容：

1. 鏈接指向：點(diǎn)擊XX跳轉(zhuǎn)到哪個(gè)頁(yè)面？是在當(dāng)前頁(yè)面打開、新窗口打開還是彈框呈現(xiàn)？
2. 內(nèi)容展示
3. 內(nèi)容輸入
4. 交互樣式
5. 特殊狀態(tài)
6. 動(dòng)效說(shuō)明
7. 手勢(shì)說(shuō)明
8. 提示文案

2.3 項(xiàng)目管理

交互設(shè)計(jì)師的項(xiàng)目管理跟傳統(tǒng)意義的項(xiàng)目管理不一致，交互設(shè)計(jì)師的項(xiàng)目管理主要是為了溝通上下游，確保項(xiàng)目按照設(shè)計(jì)目標(biāo)進(jìn)行推進(jìn)，項(xiàng)目管理主要包括如下內(nèi)容：

（1）業(yè)務(wù)/產(chǎn)品的原始需求

記錄項(xiàng)目的原始業(yè)務(wù)/產(chǎn)品需求，對(duì)照項(xiàng)目實(shí)施是否和預(yù)期需求偏差

（2）項(xiàng)目評(píng)估

項(xiàng)目開始前的可能性評(píng)估，包括項(xiàng)目實(shí)施周期，項(xiàng)目實(shí)施難度，可能性的潛在風(fēng)險(xiǎn)評(píng)估

（3）大致進(jìn)度計(jì)劃

和產(chǎn)品經(jīng)理、項(xiàng)目經(jīng)理溝通，落實(shí)項(xiàng)目大體的進(jìn)度計(jì)劃，確保項(xiàng)目如期交付

（4）評(píng)審記錄

每一次交互設(shè)計(jì)評(píng)審，都應(yīng)有記錄，主要記錄實(shí)施細(xì)節(jié)和優(yōu)化點(diǎn)

2.4 設(shè)計(jì)發(fā)現(xiàn)

設(shè)計(jì)發(fā)現(xiàn)，是指為交互設(shè)計(jì)服務(wù)的輸出物，交互設(shè)計(jì)師也需要競(jìng)品分析，必須要時(shí)需要協(xié)助用戶研究的同時(shí)開展用戶研究工作。

（1）競(jìng)品分析

競(jìng)品分析有多種方法，有簡(jiǎn)單的功能對(duì)比法、SWOT法、用戶體驗(yàn)要素法等等。

例如，可參照經(jīng)典的《用戶體驗(yàn)要素》一書，可以下面幾個(gè)維度進(jìn)行切入：

1. 戰(zhàn)略層（產(chǎn)品定位、用戶需求）
2. 范圍層（主要功能）
3. 結(jié)構(gòu)層（信息架構(gòu)）
4. 框架層（交互設(shè)計(jì)）
5. 表現(xiàn)層（視覺(jué)設(shè)計(jì)）

另外，可以增加運(yùn)營(yíng)推廣、商業(yè)模式等維度。

（2）用戶研究

推薦交互設(shè)計(jì)師必須掌握和輸出的一項(xiàng)產(chǎn)品，或者協(xié)助用戶研究人員輸出的產(chǎn)物，通過(guò)用戶研究，不僅可以挖掘可能性的需求，還可以驗(yàn)證交互設(shè)計(jì)方案。

2.5 設(shè)計(jì)資源庫(kù)

設(shè)計(jì)資源庫(kù)一般指工具的元件庫(kù)，例如Axure的元件庫(kù)，Sketch的組件庫(kù)，交互設(shè)計(jì)師產(chǎn)出設(shè)計(jì)資源庫(kù)，能讓后續(xù)交互設(shè)計(jì)快速地復(fù)用樣式，后續(xù)的交互設(shè)計(jì)師能快速上手；同時(shí)也可以統(tǒng)一項(xiàng)目的交互設(shè)計(jì)規(guī)范，注意，網(wǎng)絡(luò)上分享的元件庫(kù)東拼西湊并不能很好地規(guī)范項(xiàng)目。

一般建議產(chǎn)出兩套組件庫(kù)，一套為Axure的，一套為Sketch的（僅針對(duì)mac用戶）。Sketch的組件庫(kù)可以參考《微信小程序的組件庫(kù)》。

3. 交互設(shè)計(jì)相關(guān)理論

3.1 需求理論

（1）需求挖掘

需求挖掘是產(chǎn)品從業(yè)人員經(jīng)常需要面臨的難題，交互設(shè)計(jì)涉及的需求挖掘，與產(chǎn)品經(jīng)理同理，可以采用同樣的方式和方法，按照挖掘的對(duì)象不同，我們可以分為外部挖掘和內(nèi)部挖掘兩種。

1）內(nèi)部挖掘

針對(duì)公司內(nèi)部，常見理論是：頭腦風(fēng)暴。即組織群體決策，交互設(shè)計(jì)師以明確的目標(biāo)方式組織大家參加會(huì)議，自由發(fā)言，讓大家提出更多的可能性問(wèn)題或者方案。

此外，內(nèi)部挖掘的需求還可能來(lái)源于：業(yè)務(wù)需求、運(yùn)營(yíng)反饋、產(chǎn)品經(jīng)理

2）外部挖掘

針對(duì)外部用戶，或者是產(chǎn)品的真正使用者。常見理論是：用戶研究。用戶研究是用戶中心的設(shè)計(jì)流程中的第一步。它是一種理解用戶，將他們的目標(biāo)、需求與您的商業(yè)宗旨相匹配的理想方法。用戶研究重點(diǎn)工作在于研究用戶的痛點(diǎn)。

用戶研究常見的方法有：可用性測(cè)試、焦點(diǎn)小組、問(wèn)卷調(diào)查、A/B測(cè)試等，每一個(gè)方法都可以深入展開，有興趣可以深入了解一下，此篇章不展開詳述。

另外，外部挖掘的需求還可能來(lái)源于：競(jìng)品分析、行業(yè)分析、社交平臺(tái)。

（2）需求分級(jí)

需求分級(jí)是指挖掘完需求后，對(duì)需求進(jìn)行合理的分解，去除偽需求，實(shí)現(xiàn)那些真正對(duì)產(chǎn)品或者設(shè)計(jì)目標(biāo)有幫助的需求。常見理論有以下三種：

1）通用四象限法

適用場(chǎng)景：交互設(shè)計(jì)師收到很多需求時(shí)。

四象限最早是用于時(shí)間管理的方法，目的是解決時(shí)間不足，但是需要完成的事情又很多的情況。該方法理論同樣適用于需求分級(jí)，幫助交互設(shè)計(jì)師進(jìn)行需求管理。方法是將需求劃分到4個(gè)象限當(dāng)中，按照落在各個(gè)象限的處理方式進(jìn)行處理。

①重要且緊急的需求：立即搞定

例如，微信的搶紅包功能需求，需要在春節(jié)前上線（緊急），關(guān)乎到微信的戰(zhàn)略定位（重要）。

②重要但不緊急的需求：排期實(shí)現(xiàn)

例如，產(chǎn)品的運(yùn)營(yíng)統(tǒng)計(jì)需求，能幫助分析產(chǎn)品的運(yùn)營(yíng)情況（重要），但其他功能都優(yōu)先于統(tǒng)計(jì)前實(shí)現(xiàn)（不緊急）。

③不重要但緊急的需求：需要考慮

例如，剛開會(huì)老板說(shuō)了，這個(gè)按鈕的顏色不好看（不重要），想今天調(diào)一下（緊急）。

④不重要且不緊急：不用實(shí)現(xiàn)

例如，產(chǎn)品能否增加一個(gè)國(guó)際版本，方便我們這些歪果仁（不重要，不緊急）。

2）kano模型

適用場(chǎng)景：收集到的需求當(dāng)中，哪些需求能顯著提升用戶的滿意度？

KANO 模型是東京理工大學(xué)教授狩野紀(jì)昭(Noriaki Kano)發(fā)明的對(duì)用戶需求分類和優(yōu)先排序的有用工具，以分析用戶需求對(duì)用戶滿意的影響為基礎(chǔ)，體現(xiàn)了產(chǎn)品性能和用戶滿意之間的非線性關(guān)系。

①必須具備的（Must-have）

例如，一款美顏工具產(chǎn)品，拍照是必須具備的基本功能。

②所期望的（Linear）

例如，一款美顏工具產(chǎn)品，使自己變得更漂亮——美顏，是用戶比較明確“提出”的，否則為什么要下載使用。

③超出預(yù)期的（Exciter）

例如，一款美顏工具產(chǎn)品，居然可以一鍵美顏，自動(dòng)幫你P成大眼、小臉、巨乳、蜂腰的大長(zhǎng)腿女神，遠(yuǎn)超預(yù)期。

3）馬斯洛需求層次理論

適用場(chǎng)景：需求實(shí)現(xiàn)的價(jià)值有多大？

該理論是由美國(guó)心理學(xué)家亞伯拉罕·馬斯洛在1943年在《人類激勵(lì)理論》論文中提出，人類需求像階梯一樣從低到高按層次分為五種，分別是：生理需求、安全需求、社交需求、尊重需求和自我實(shí)現(xiàn)需求。

①生理需求

最基本的生存需求，例如，利用產(chǎn)品能最基本的生存需求：點(diǎn)外賣。

②安全需求

人身財(cái)產(chǎn)安全有保障，例如，在線支付安全。

③社交/情感需求

例如，給最愛(ài)的人買一份保險(xiǎn)，滿足情感上的需求。

④尊重需求

產(chǎn)品給予用戶帶來(lái)的成就感，常見例子是游戲升級(jí)。

⑤自我實(shí)現(xiàn)需求

用戶通過(guò)產(chǎn)品實(shí)現(xiàn)了人生追求，例如，利用股票軟件賺取了第一桶金。

注意：位于金字塔頂端的需求，能使利潤(rùn)最大化。

3.2 框架設(shè)計(jì)理論

（1）用戶體驗(yàn)五要素

適用場(chǎng)景：采用五要素的方法，從不同層次指導(dǎo)產(chǎn)品的框架設(shè)計(jì)。

來(lái)源經(jīng)典的著作《用戶體驗(yàn)的要素?-以用戶為中心的Web設(shè)計(jì)》，用五個(gè)要素：戰(zhàn)略層、范圍層、結(jié)構(gòu)層、框架層、表現(xiàn)層來(lái)闡述以用戶為中心的設(shè)計(jì)方法。

1. 戰(zhàn)略層：產(chǎn)品目標(biāo)及其目標(biāo)用戶（做什么、為誰(shuí)而做？）經(jīng)營(yíng)者和用戶分別想從網(wǎng)站得到什么。
2. 范圍層：功能及其內(nèi)容需求整合（需要做哪些？）
3. 結(jié)構(gòu)層：交互設(shè)計(jì)及其信息架構(gòu)（怎樣做？）
4. 框架層：界面設(shè)計(jì)、導(dǎo)航設(shè)計(jì)和內(nèi)容（信息）設(shè)計(jì)（要做成什么樣子？）
5. 表現(xiàn)層：功能及內(nèi)容的視覺(jué)呈現(xiàn)（做成了什么樣子？）

（2）神奇7±2

適用場(chǎng)景：規(guī)范導(dǎo)航或者選項(xiàng)卡的數(shù)量，例如，我們網(wǎng)站的菜單最佳數(shù)量是多少個(gè)？

人類頭腦最好的狀態(tài)能記憶含有7（±2）項(xiàng)信息塊，在記憶了 5-9 項(xiàng)信息后人類的頭腦就開始出錯(cuò)。

假如你的短時(shí)記憶像一般人那樣,你可能會(huì)回憶出5~9個(gè)單位,即7±2個(gè)，這個(gè)有趣的現(xiàn)象就是神奇的7±2效應(yīng)。這個(gè)規(guī)律最早是在19世紀(jì)中葉,由愛(ài)爾蘭哲學(xué)家威廉漢密爾頓觀察到的。他發(fā)現(xiàn)，如果將一把子彈撒在地板上，人們很難一下子觀察到超過(guò)7顆子彈。

7±2法則對(duì)我們?cè)O(shè)計(jì)上的啟示：

• 導(dǎo)航或選項(xiàng)卡盡量不要超過(guò)9個(gè)
• 如果導(dǎo)航或選項(xiàng)卡內(nèi)容很多，可以用一個(gè)層級(jí)結(jié)構(gòu)來(lái)展示各段及其子段，并注意其深廣度的平衡

（3）卡片分類法

適用場(chǎng)景：為我們?cè)O(shè)計(jì)導(dǎo)航、菜單以及分類提供幫助，例如，銀行APP轉(zhuǎn)賬和查詢余額兩個(gè)功能是否放在一起？資金歸集呢？

卡片分類法是一種規(guī)劃和設(shè)計(jì)互聯(lián)網(wǎng)產(chǎn)品或者軟件產(chǎn)品的信息構(gòu)架的方法。它屬于用戶研究中的一種方法，簡(jiǎn)單來(lái)說(shuō)就是用戶來(lái)對(duì)信息卡片（或者是菜單卡片）進(jìn)行歸類，從而得出信息關(guān)聯(lián)性的一種方法。我們最后把關(guān)聯(lián)性更強(qiáng)的菜單放在一起，就形成了較為科學(xué)的一套信息分組。

3.3 界面設(shè)計(jì)理論

（1）格式塔心理學(xué)

適用場(chǎng)景：界面設(shè)計(jì)時(shí)，選擇有容易理解的形狀，把相關(guān)聯(lián)的元素組織在一起。

人在觀察和理解時(shí)，被視為有組織和結(jié)構(gòu)的整體時(shí)才可以得到理解。簡(jiǎn)單來(lái)說(shuō)就是人們首先會(huì)注意到一個(gè)有整齊、規(guī)律的整體，或者說(shuō)，人們會(huì)自動(dòng)把所見的事物在人腦中加工為一個(gè)整體。

格式塔理論創(chuàng)始人提出的5項(xiàng)基本法則：

（2）交互設(shè)計(jì)四策略

適用場(chǎng)景：界面設(shè)計(jì)元素組織

出自《簡(jiǎn)約至上-交互設(shè)計(jì)四策略》一書，四策略分別為：刪除、組織、隱藏、轉(zhuǎn)移，幾乎任何界面設(shè)計(jì)都適用這四個(gè)策略。

1）刪除-去掉不必要的的按鈕，直至減到不能再減。

例如iPhone只有一個(gè)home鍵，其他按鍵都刪除了。

2）組織-按照有意義的標(biāo)準(zhǔn)把按鈕劃分成組。

例如，手機(jī)設(shè)置中，把同類的設(shè)置都?xì)w在同一個(gè)組別。

3）隱藏-把那些不重要的功能隱藏，避免分散用戶的注意力。

例如，微信聊天界面，刪除、置頂?shù)裙δ芏茧[藏起來(lái)，需要左滑或者長(zhǎng)按才會(huì)出現(xiàn)。

4）轉(zhuǎn)移-只在主要界面/設(shè)備保留最基本功能，將其他控制轉(zhuǎn)移到其他界面/設(shè)備/用戶里。

例如，行程定制，計(jì)算機(jī)無(wú)法為每個(gè)不同喜好的用戶提供個(gè)性化的行程，所以只提供編輯行程功能，剩余的控制轉(zhuǎn)移到用戶上。

（3）尼爾森可用性十大原則

適用場(chǎng)景：產(chǎn)品設(shè)計(jì)與用戶體驗(yàn)設(shè)計(jì)的重要參考指標(biāo)。

尼爾森可用性十大原則是由web易用性大師人機(jī)交互學(xué)博士Jakob Nielsen于1995年提出的，主要有十大原則。

1）Visibility of system status 系統(tǒng)可見性原則

系統(tǒng)應(yīng)該讓用戶知道發(fā)生了什么，在適當(dāng)?shù)臅r(shí)間內(nèi)做出適當(dāng)?shù)姆答仭?大多數(shù)流通的翻譯是針對(duì)網(wǎng)頁(yè)的：用戶在網(wǎng)頁(yè)上的任何操作，不論是單擊、滾動(dòng)還是按下鍵盤，頁(yè)面應(yīng)即時(shí)給出反饋。

2）Match between system and the real world 匹配系統(tǒng)與真實(shí)世界（環(huán)境貼切）

系統(tǒng)應(yīng)該用用戶的語(yǔ)言，用詞，短語(yǔ)和用戶熟悉的概念，而不是系統(tǒng)術(shù)語(yǔ)。遵循現(xiàn)實(shí)世界的慣例，讓信息符合自然思考邏輯。

3）User control and freedom用戶的控制性和自由度（撤銷重作原則）

用戶經(jīng)常錯(cuò)誤地選擇系統(tǒng)功能而且需要明確標(biāo)識(shí)離開這個(gè)的“出口”，而不需要通過(guò)一個(gè)擴(kuò)展的對(duì)話框。為了避免用戶的誤用和誤擊，要支持撤銷和重做的功能。

4）Consistency and standards一致性和標(biāo)準(zhǔn)化（一致性原則）

用戶不必懷疑是否不同的語(yǔ)言，不同的情景，或者不同的操作產(chǎn)生的結(jié)果實(shí)際上是同一件事情。遵循平臺(tái)的慣例。也就是，同一用語(yǔ)、功能、操作保持一致。

5）Error prevention 防錯(cuò)原則

比出現(xiàn)錯(cuò)誤信息提示更好的是更用心的設(shè)計(jì)防止這類問(wèn)題發(fā)生。在用戶選擇動(dòng)作發(fā)生之前，就要防止用戶容易混淆或者錯(cuò)誤的選擇。

6）Recognition rather than recall 識(shí)別比記憶好（易取原則）

盡量減少用戶對(duì)操作目標(biāo)的記憶負(fù)荷，動(dòng)作和選項(xiàng)都應(yīng)該是可見的。用戶不必記住一個(gè)頁(yè)面到另一個(gè)頁(yè)面的信息。系統(tǒng)的使用說(shuō)明應(yīng)該是可見的或者是容易獲取的。

7）Flexibility and efficiency of use使用的靈活高效（靈活高效原則）

系統(tǒng)可以滿足有經(jīng)驗(yàn)和無(wú)經(jīng)驗(yàn)的用戶。 允許用戶進(jìn)行頻繁的操作。

8）Aesthetic and minimalist design 審美和簡(jiǎn)約的設(shè)計(jì)（易掃原則）

對(duì)話中不應(yīng)該包含無(wú)關(guān)緊要的信息。在段落中每增加一個(gè)單位的重要信息，就意味著要減少相應(yīng)的弱化一些其他信息?；ヂ?lián)網(wǎng)用戶瀏覽網(wǎng)頁(yè)的動(dòng)作不是讀，不是看，而是掃。易掃，意味著突出重點(diǎn)，弱化和剔除無(wú)關(guān)信息。

9）Help users recognize, diagnose, and recover from errors 幫助用戶識(shí)別，診斷，并從錯(cuò)誤中恢復(fù)（容錯(cuò)原則）

錯(cuò)誤信息應(yīng)該用語(yǔ)言表達(dá)（不要用代碼），較準(zhǔn)確地反應(yīng)問(wèn)題所在，并且提出一個(gè)建設(shè)性的解決方案。

10）Help and documentation? 幫助文檔（人性化幫助原則）

如果系統(tǒng)不使用文檔是最好的，但是有必要提供幫助和文檔

（4）費(fèi)茨定律

• 適用場(chǎng)景：菜單的設(shè)計(jì)，可點(diǎn)擊對(duì)象的尺寸設(shè)計(jì)
• 定律內(nèi)容：從一個(gè)起始位置移動(dòng)到一個(gè)最終目標(biāo)所需的時(shí)間由兩個(gè)參數(shù)來(lái)決定，到目標(biāo)的距離和目標(biāo)的大小（上圖中的 D與 W），用數(shù)學(xué)公式表達(dá)為時(shí)間 T = a + b log2(D/W+1)。

它是 1954 年保羅.菲茨首先提出來(lái)的，用來(lái)預(yù)測(cè)從任意一點(diǎn)到目標(biāo)中心位置所需時(shí)間的數(shù)學(xué)模型，在人機(jī)交互（HCI）和設(shè)計(jì)領(lǐng)域的影響卻最為廣泛和深遠(yuǎn)。

這就很容易解釋了為什么菜單都要設(shè)置在邊緣，手機(jī)的實(shí)體鍵放置在邊緣，可點(diǎn)擊的按鈕尺寸要盡量大。等等。

（5）其他理論

交互設(shè)計(jì)的理論還有很多，時(shí)間有限，就不一一枚舉，有興趣可以繼續(xù)了解，例如：奧卡姆剃刀原理、席克定律、泰思勒定律、新鄉(xiāng)重夫：防錯(cuò)原則等。

4. 交互設(shè)計(jì)流程及方法

4.1 設(shè)計(jì)流程

我們接觸的產(chǎn)品一般從規(guī)劃到上線的流程是如下圖這樣的，先從目標(biāo)用戶開始，一直到開發(fā)實(shí)施，然后上線。

作為交互設(shè)計(jì)，同樣有屬于自己的一套設(shè)計(jì)流程，注意，這些是通用的流程，但具體交互設(shè)計(jì)師的習(xí)慣或者具體的項(xiàng)目，用的流程并不一致：

1. 需求分析：即業(yè)務(wù)訴求、用戶目標(biāo)、產(chǎn)品方向綜合一起，最終得出主要的設(shè)計(jì)需求。產(chǎn)出物一般為需求文檔或者需求列表。
2. 概念設(shè)計(jì)：這個(gè)時(shí)候，發(fā)散我們的思維，包括感性和理性，和設(shè)計(jì)需求一起，形成最終的設(shè)計(jì)目標(biāo)。
3. 框架設(shè)計(jì)：包括導(dǎo)航菜單的設(shè)計(jì)、頁(yè)面總體框架和層級(jí)等等，輸出物一般為草圖。
4. 流程設(shè)計(jì)：產(chǎn)品中的頁(yè)面流程、功能流程、任務(wù)流程等等，主要輸出物為流程圖。
5. 界面設(shè)計(jì)：具體的頁(yè)面設(shè)計(jì)，主要是把抽象化的設(shè)計(jì)目標(biāo)具體化，用線框圖表達(dá)出來(lái)。
6. 驗(yàn)證設(shè)計(jì)：把我們所學(xué)的交互理論代入到交互稿中進(jìn)行驗(yàn)證，或者通過(guò)潛在用戶來(lái)進(jìn)行模擬驗(yàn)證，如可用性測(cè)試。
7. 交互說(shuō)明：所有設(shè)計(jì)稿定稿之后，編寫通俗易懂的交互說(shuō)明文檔，方便與視覺(jué)設(shè)計(jì)、開發(fā)同事溝通。

4.2 設(shè)計(jì)方法

“你在設(shè)計(jì)的生涯中，有沒(méi)有用到或者總結(jié)出哪些設(shè)計(jì)方法？”

作為交互設(shè)計(jì)師小白的時(shí)候，這個(gè)問(wèn)題是斷然答不上來(lái)的，因?yàn)槟莻€(gè)時(shí)候還沒(méi)接觸到這么“高深莫測(cè)或者不明覺(jué)厲”的東西。

設(shè)計(jì)方法的作用是什么？主要有兩個(gè)方面的作用：一方面，設(shè)計(jì)方法能指導(dǎo)交互設(shè)計(jì)師更好的進(jìn)行設(shè)計(jì)；另一個(gè)方面，經(jīng)過(guò)設(shè)計(jì)方法包裝后的設(shè)計(jì)，能讓交互設(shè)計(jì)師坦然面對(duì)產(chǎn)品經(jīng)理、項(xiàng)目經(jīng)理、開發(fā)同事的質(zhì)疑。

那么設(shè)計(jì)方法有哪些呢？設(shè)計(jì)方法到底是怎么對(duì)交互設(shè)計(jì)起作用的呢？我們用英國(guó)設(shè)計(jì)協(xié)會(huì)的“雙鉆模型”為例來(lái)進(jìn)行說(shuō)明。來(lái)源于IDEO的以人為本的設(shè)計(jì)思想，以及@d.school的設(shè)計(jì)流程。

雙鉆模型主要分為兩個(gè)階段，四個(gè)步驟：

第一階段——為正確的事情做設(shè)計(jì)（designing the right thing）

第1步：探索（Discover）和調(diào)研（Research），此步是發(fā)散型的思考，探索和研究問(wèn)題的本質(zhì)。

1. 質(zhì)疑 rip the brief：對(duì)需求質(zhì)疑，對(duì)商業(yè)模式質(zhì)疑，對(duì)用戶質(zhì)疑，質(zhì)疑一切不合理的事情。
2. 故事/場(chǎng)景 cluster topics：列舉用戶可能遇到的真實(shí)場(chǎng)景元素：地點(diǎn)、時(shí)間、人物、故事，梳理整個(gè)交互流程和節(jié)點(diǎn)。
3. 研究 research：針對(duì)問(wèn)題進(jìn)行研究，例如用戶訪談，問(wèn)卷調(diào)查，競(jìng)品分析，行業(yè)分析等等，最終得到一系列的研究結(jié)果。

第2步：定義（Define）和聚焦（Synthesis），此步是將第1步發(fā)散的問(wèn)題進(jìn)行思考和總結(jié)，把問(wèn)題集中起來(lái)解決。

1. 洞察（insights）：把存在的問(wèn)題、研究結(jié)論看透徹，這是一個(gè)深入觀察的過(guò)程。
2. 主題（themes）：把問(wèn)題歸類成為一個(gè)主題，或者說(shuō)是把問(wèn)題歸類成為一個(gè)系列。
3. 機(jī)會(huì)領(lǐng)域（opportunity areas）：把之前的行業(yè)分析、競(jìng)品分析以及存在的問(wèn)題一起比較，發(fā)現(xiàn)可能存在的機(jī)會(huì)突破點(diǎn)，例如這個(gè)設(shè)計(jì)能給用戶帶來(lái)什么？
4. how might we…HMW：我們?cè)谟嘘P(guān)的領(lǐng)域應(yīng)該怎么做，能解決什么問(wèn)題？

第二階段——將設(shè)計(jì)做正確（designing things right）

第3步：發(fā)展（Develop）和構(gòu)思（Ideation），此步是開始真正的交互設(shè)計(jì)構(gòu)思。

1. 構(gòu)思ideation：把問(wèn)題具體化，我們可以參考流行的設(shè)計(jì)趨勢(shì)、好的設(shè)計(jì)網(wǎng)站或者好的交互效果，構(gòu)思自己的交互設(shè)計(jì)應(yīng)該如何做。
2. 評(píng)估evaluation：如果構(gòu)思的過(guò)程產(chǎn)生了很多的想法方案，那么我們應(yīng)該先評(píng)估一下可行性。
3. 想法ideas：經(jīng)過(guò)評(píng)估之后，最終選擇了2~3種ideas

第4步：傳達(dá)（Deliver）和實(shí)現(xiàn)（Implementation），此步等于最終用線框圖解決了之前的問(wèn)題了。

1. 制作原型，測(cè)試，迭代（build，test，iterate），重復(fù)3次以上。即可以簡(jiǎn)單理解為線框圖的評(píng)審（自己把關(guān)、產(chǎn)品經(jīng)理把關(guān)、評(píng)審把關(guān)），反復(fù)迭代原型。
2. 淘汰out：淘汰中間不合理的想法和設(shè)計(jì)，最終保留精華設(shè)計(jì)。

5. 交互設(shè)計(jì)常見案例分析

交互設(shè)計(jì)日常需要注意積累案例，并從案例中學(xué)習(xí)總結(jié)，只有案例積累得越多，才能形成質(zhì)變。本章只是簡(jiǎn)單示意一下交互可以從哪些案例入手。

5.1 導(dǎo)航

導(dǎo)航包括：左側(cè)導(dǎo)航、頂部導(dǎo)航、面包屑導(dǎo)航、電梯導(dǎo)航、搜索等。

5.2 流程

常見一個(gè)完整功能流程：

5.3 表單

表單包括表單的展示、輸入以及數(shù)據(jù)校驗(yàn)。

5.4 反饋

有反饋的交互才是交互，什么時(shí)候用輕反饋，什么時(shí)候用重反饋？

5.5 場(chǎng)景

離開場(chǎng)景來(lái)談交互，都是耍流氓。

6. 交互設(shè)計(jì)規(guī)范及趨勢(shì)

6.1 柵格規(guī)范

首先，我們要明確一個(gè)觀念：交互設(shè)計(jì)師和視覺(jué)設(shè)計(jì)師是密切配合的，所以交互設(shè)計(jì)師也需要學(xué)習(xí)一些視覺(jué)設(shè)計(jì)的知識(shí)，以免雙方溝通出現(xiàn)問(wèn)題。柵格化就是視覺(jué)設(shè)計(jì)中的比較基本有用的知識(shí)，至少可以規(guī)范交互設(shè)計(jì)師畫的原型，沒(méi)有超過(guò)視覺(jué)設(shè)計(jì)師所能承受的“界限”。

我們?cè)谠O(shè)計(jì)中常用的是：網(wǎng)頁(yè)柵格系統(tǒng)，百度百科給出的解釋是：

“以規(guī)則的網(wǎng)格陣列來(lái)指導(dǎo)和規(guī)范網(wǎng)頁(yè)中的版面布局以及信息分布。對(duì)于網(wǎng)頁(yè)設(shè)計(jì)來(lái)說(shuō)，柵格系統(tǒng)的使用，不僅可以讓網(wǎng)頁(yè)的信息呈現(xiàn)更加美觀易讀，更具可用性。而且，對(duì)于前端開發(fā)來(lái)說(shuō)，網(wǎng)頁(yè)將更加的靈活與規(guī)范?！?/p>

柵格系統(tǒng)詳細(xì)的應(yīng)用，可以看這篇文章《騰訊高手教你靠譜的布局設(shè)定方法》，介紹得十分詳細(xì)，本文不再累述。

這里只簡(jiǎn)單總結(jié)一下學(xué)習(xí)柵格規(guī)范對(duì)交互設(shè)計(jì)的意義：

1. 和視覺(jué)設(shè)計(jì)師一起，達(dá)成頁(yè)面寬度的共識(shí)，而不是超出視覺(jué)設(shè)計(jì)的“邊界”；
2. 在交互設(shè)計(jì)時(shí)，用柵格化規(guī)范模塊的布局，整齊的分為N欄，讓原型變得更美觀；
3. 合理利用柵格，產(chǎn)出“黃金比例”的效果圖，例如制作簡(jiǎn)歷或者作品集。

6.2 平臺(tái)設(shè)計(jì)規(guī)范

交互設(shè)計(jì)師必須掌握的知識(shí)點(diǎn)，也是面試必考題：平臺(tái)設(shè)計(jì)規(guī)范。因?yàn)椋覀兯械脑O(shè)計(jì)，幾乎都是基于這些平臺(tái)來(lái)進(jìn)行設(shè)計(jì)。

但要注意，不要過(guò)度在意平臺(tái)的設(shè)計(jì)規(guī)范，有一些規(guī)范也有自相矛盾的地方，舉例摘自：崇書慶發(fā)表于妖鹿山設(shè)計(jì)屯的《【交互小零食】- Ser.02》在iOS9規(guī)范中，

“關(guān)于彈窗中的“推薦選項(xiàng)”應(yīng)該放在左邊還是右邊，分了兩種情況：如果推薦選項(xiàng)有破壞性，那么應(yīng)該放在左邊。如果沒(méi)有破壞性，則應(yīng)該放在右邊。但到了iOS10的時(shí)候，卻變成了推薦選項(xiàng)都應(yīng)該放在右邊?！?/p>

以下是一些交互設(shè)計(jì)師常見需要掌握的規(guī)范舉例，詳細(xì)規(guī)范需要自行去了解。

（1）IOS10設(shè)計(jì)規(guī)范

（2）Material Design

喜歡Andriod和Material Design風(fēng)格的，不容錯(cuò)過(guò)。

（3）Window10 UWP

來(lái)自微軟的UWP設(shè)計(jì)規(guī)范，參考官網(wǎng)《設(shè)計(jì)和UI》

（4）微信小程序

新的熱點(diǎn)，了解大平臺(tái)是怎樣做設(shè)計(jì)規(guī)范的。參考微信小程序官網(wǎng)給的規(guī)范《微信小程序設(shè)計(jì)指南》

6.3 設(shè)計(jì)趨勢(shì)

作為一名優(yōu)秀的交互設(shè)計(jì)師，當(dāng)前的時(shí)尚流行元素，以及設(shè)計(jì)趨勢(shì)，也是需要了解的，不要讓自己的設(shè)計(jì)跟不上時(shí)代。

建議交互設(shè)計(jì)師了解兩方面的設(shè)計(jì)趨勢(shì)：交互設(shè)計(jì)趨勢(shì)，以及視覺(jué)設(shè)計(jì)趨勢(shì)。在年初或者年末的時(shí)候搜索最新的看即可。

2017年設(shè)計(jì)趨勢(shì)文章推薦：

（1）交互設(shè)計(jì)趨勢(shì)：《2017年度交互設(shè)計(jì)趨勢(shì)》

（2）視覺(jué)設(shè)計(jì)趨勢(shì)：《8個(gè)你需要知道的2017年UI設(shè)計(jì)流行趨勢(shì)》

7. 交互設(shè)計(jì)師進(jìn)階之路

7.1 突破瓶頸

每個(gè)交互設(shè)計(jì)師通過(guò)努力都能成為高級(jí)交互設(shè)計(jì)師的水平，要想成為優(yōu)秀的資深交互設(shè)計(jì)師或者業(yè)內(nèi)有影響力的設(shè)計(jì)師還需要突破一個(gè)瓶頸。那么所謂的瓶頸期是指？這里可以參考《騰訊高級(jí)交互設(shè)計(jì)師：什么是優(yōu)秀的設(shè)計(jì)思維與方法？》一文即可。

按照慣例，總結(jié)了一下需要突破瓶頸的3大必要條件：

（1）知識(shí)的積累達(dá)到一定的程度，一般是由量變轉(zhuǎn)為質(zhì)變

（2）有個(gè)人的設(shè)計(jì)方法體系

（3）長(zhǎng)時(shí)間的經(jīng)驗(yàn)積累，至少需要5年以上

7.2 進(jìn)修

交互設(shè)計(jì)師職位發(fā)展的時(shí)間不長(zhǎng)，大多數(shù)的交互設(shè)計(jì)師都是基本靠自學(xué)成才，那么對(duì)于入門或者想要更近一步的交互設(shè)計(jì)師，有什么樣的進(jìn)修渠道推薦呢？

不建議報(bào)讀培訓(xùn)班，不建議報(bào)讀培訓(xùn)班，不建議報(bào)讀培訓(xùn)班。重要的事情說(shuō)3遍，報(bào)培訓(xùn)班不如自學(xué)。

推薦渠道一：進(jìn)培訓(xùn)體系完善的公司，接受培訓(xùn)

最直接最節(jié)省成本的方法，有老司機(jī)帶領(lǐng)。前提是，我們要上一輛好的車。1-2年學(xué)成出師，比自己自學(xué)效率要快N倍，少走的彎路能繞地球一圈。

推薦渠道二：報(bào)讀設(shè)計(jì)類學(xué)校

刷資歷首選，進(jìn)入知名企業(yè)必備敲門磚頭，系統(tǒng)的知識(shí)體系和方法論學(xué)習(xí)。缺點(diǎn)是學(xué)習(xí)周期長(zhǎng)，成本高，同時(shí)，院校的可選擇范圍也很小。推薦院校：清華美院、江南大學(xué)、中山大學(xué)、廣州美院。

7.3 作品集

人靠衣裝，交互設(shè)計(jì)師靠的是作品，好的交互設(shè)計(jì)師同樣需要好的作品襯托。作品集也是交互設(shè)計(jì)師總結(jié)沉淀、自我提升的重要方法。

把自己的項(xiàng)目包裝成一個(gè)個(gè)作品集，展示出來(lái)吧，在作品集里面回答如下問(wèn)題（面試必考題）：

（1）這個(gè)作品的亮點(diǎn)在哪里？解決了什么樣的問(wèn)題？

（2）這個(gè)作品存在什么樣的不足？可以怎么改進(jìn)？

（3）這個(gè)作品遇到了什么難點(diǎn)？最終是如何克服的？

（4）這個(gè)作品的設(shè)計(jì)過(guò)程是怎么樣的？

（5）這個(gè)作品的最終成果如何？

大神們作品集推薦：

• Mike
• Melanie Daveid
• Jenny
• 人人都是產(chǎn)品經(jīng)理社區(qū)作者：Qinsman
• Dine

8. 參考文獻(xiàn)

8.1 圖書類

1. 《交互設(shè)計(jì)沉思錄》-Jon Kolko-機(jī)械工業(yè)出版社
2. 《簡(jiǎn)約至上 : 交互式設(shè)計(jì)四策略》-Giles Colborne-人民郵電出版社
3. 《設(shè)計(jì)師要懂心理學(xué)》-Susan Weinschenk-人民郵電出版社
4. 《用戶體驗(yàn)的要素 : 以用戶為中心的Web設(shè)計(jì)》-Jesse James Garrett-機(jī)械工業(yè)出版社
5. 《心理學(xué)與生活》-Richard J.Gerrig、Philip G.Zimbardo-人民郵電出版社
6. 《社會(huì)心理學(xué)》-戴維·邁爾斯-人民郵電出版社

8.2 網(wǎng)站類

1. 人人都是產(chǎn)品經(jīng)理
2. 優(yōu)設(shè)網(wǎng)
3. 站酷網(wǎng)
4. 英國(guó)設(shè)計(jì)協(xié)會(huì)
5. IDEO
6. 知乎
7. 36kr

 

本文由 @WensenCen?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。