一个人看的www免费高清在线视频一个人看的www免费高清视频 ,bt天堂新版中文在线地址,久久综合九色综合欧美98

搜索

APP

起點(diǎn)課堂會員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會特權(quán)

個人IP打造特權(quán)

30+門專項技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導(dǎo)直播

12場專業(yè)技能直播

會員專屬社群

榮耀標(biāo)識

發(fā)布

注冊 | 登錄

1.6萬字誠意之作｜如果你想成為一名交互設(shè)計師，這篇文章值得慢讀

夜雨

2017-02-28

52 評論 54493 瀏覽 853 收藏

66 分鐘

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

目錄導(dǎo)讀：

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

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

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

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

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

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

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

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

1.1 交互設(shè)計定義

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

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

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

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

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

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

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

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

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

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

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

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

交互指的是產(chǎn)品與它的使用者之間的互動過程，而交互設(shè)計師則是秉承以用戶為中心的設(shè)計理念，以用戶體驗度為原則，對交互過程進(jìn)行研究并開展設(shè)計的工作人員?！俣劝倏?/p>

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

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

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

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

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

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

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

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

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

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

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

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

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

（1）全局觀

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

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

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

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

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

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

（4）審美能力

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

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

（5）同理心

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

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

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

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

（7）邏輯思考能力

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（1）交互設(shè)計

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

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

（4）心理學(xué)

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

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

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

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

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

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

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

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

（4）人性（對人性和社會的理解）

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

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

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

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

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

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

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

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

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

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

（2）流程圖

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

（3）線框圖

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

（4）視覺設(shè)計/界面設(shè)計

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

（5）交互說明文檔

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

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

2.1 設(shè)計思考

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

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

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

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

（2）用戶

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

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

（3）場景

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

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

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

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

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

（2）流程圖

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

1）任務(wù)流程圖

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

2）頁面流程圖

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

3）異常流程

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

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

（3）線框圖

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

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

常見輸出物問題：交互設(shè)計師是否需要輸出高保真的原型？
答：視項目需求和交互設(shè)計師個人時間效率，一般不太建議輸出高保真的原型，因為制作成本和維護(hù)成本都很高，除非制作、維護(hù)高保真原型的效率能抵消這種成本。

（4）交互說明文檔

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

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

2.3 項目管理

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

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

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

（2）項目評估

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

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

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

（4）評審記錄

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

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

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

（1）競品分析

競品分析有多種方法，有簡單的功能對比法、SWOT法、用戶體驗要素法等等。

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

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

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

（2）用戶研究

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

2.5 設(shè)計資源庫

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

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

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

3.1 需求理論

（1）需求挖掘

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

1）內(nèi)部挖掘

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

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

2）外部挖掘

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

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

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

（2）需求分級

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

1）通用四象限法

適用場景：交互設(shè)計師收到很多需求時。

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

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

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

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

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

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

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

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

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

2）kano模型

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

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

①必須具備的（Must-have）

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

②所期望的（Linear）

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

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

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

3）馬斯洛需求層次理論

適用場景：需求實現(xiàn)的價值有多大？

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

①生理需求

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

②安全需求

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

③社交/情感需求

例如，給最愛的人買一份保險，滿足情感上的需求。

④尊重需求

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

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

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

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

3.2 框架設(shè)計理論

（1）用戶體驗五要素

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

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

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

（2）神奇7±2

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

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

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

7±2法則對我們設(shè)計上的啟示：

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

（3）卡片分類法

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

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

3.3 界面設(shè)計理論

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

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

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

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

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

適用場景：界面設(shè)計元素組織

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5）Error prevention 防錯原則

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

（5）其他理論

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

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

4.1 設(shè)計流程

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

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

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

4.2 設(shè)計方法

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

作為交互設(shè)計師小白的時候，這個問題是斷然答不上來的，因為那個時候還沒接觸到這么“高深莫測或者不明覺厲”的東西。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5.1 導(dǎo)航

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

5.2 流程

常見一個完整功能流程：

5.3 表單

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

5.4 反饋

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

5.5 場景

離開場景來談交互，都是耍流氓。

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

6.1 柵格規(guī)范

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

我們在設(shè)計中常用的是：網(wǎng)頁柵格系統(tǒng)，百度百科給出的解釋是：

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

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

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

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

6.2 平臺設(shè)計規(guī)范

交互設(shè)計師必須掌握的知識點(diǎn)，也是面試必考題：平臺設(shè)計規(guī)范。因為，我們所有的設(shè)計，幾乎都是基于這些平臺來進(jìn)行設(shè)計。

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

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

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

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

（2）Material Design

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

（3）Window10 UWP

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

（4）微信小程序

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

6.3 設(shè)計趨勢

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

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

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

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

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

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

7.1 突破瓶頸

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

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

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

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

（3）長時間的經(jīng)驗積累，至少需要5年以上