兩年前寫過一篇交互新人入坑經(jīng)驗總結(jié)文章掸哑，陸陸續(xù)續(xù)的有一些網(wǎng)友加到我向我咨詢和交互設(shè)計相關(guān)的工作經(jīng)驗和跳槽轉(zhuǎn)行方面的問題约急，當(dāng)時認(rèn)知尚淺 ，履歷也不夠豐富苗分，只能在如何從0到1踏進(jìn)交互設(shè)計的領(lǐng)域給到一些不成熟的建議厌蔽，最近這篇文章好像又被炒了一次老飯，又有一些剛畢業(yè)的摔癣，想轉(zhuǎn)行的奴饮，或是單純感興趣的小伙伴加我微信問了一些大同小異的問題

踏入交互設(shè)計領(lǐng)域的第三年，從0-1的經(jīng)歷已經(jīng)沉淀在過去择浊，而職業(yè)生涯的征程才剛剛開始而已拐云。

今天用這篇文章整理一些和交互設(shè)計相關(guān)的內(nèi)容，以及很多剛?cè)胄谢蛘叽蛩闳胄械脑O(shè)計新人迫切需要了解的知識近她，整理成這篇文章供大家學(xué)習(xí)交流叉瘩。

1.什么是交互設(shè)計

裝逼版解釋：（1）業(yè)務(wù)模型框架化，即 框架設(shè)計 在產(chǎn)品概念階段時期粘捎，交互設(shè)計師需要關(guān)注用戶界面和整體結(jié)構(gòu)薇缅，稱為“框架設(shè)計”框架設(shè)計實際上就是基于用戶目標(biāo)的導(dǎo)航和流程設(shè)計危彩，這個階段交互的產(chǎn)出物主要有：導(dǎo)航架構(gòu)圖 流程圖和低保真線框圖（2）框架模型界面化 在定義完功能模塊的結(jié)構(gòu)和流程后，還需要設(shè)計規(guī)劃使用者的操作泳桦，包括頁面元素的主次關(guān)系汤徽，小部件的處理，元素的組織灸撰，界面的引導(dǎo)等谒府。需要提供原型demo。

和親朋好友的接地氣版解釋：我們這個工作就相當(dāng)于互聯(lián)網(wǎng)產(chǎn)品的建筑設(shè)計師啦浮毯！產(chǎn)品經(jīng)理和老板相當(dāng)于包工頭完疫，告訴我們現(xiàn)在要做什么樣的房子，給什么樣的人住债蓝，目標(biāo)是掙多少錢壳鹤，我們就開始按照他們的需求來規(guī)劃這個房子要建在哪里，多高饰迹，多大芳誓，包含哪些房間，這些房間的結(jié)構(gòu)是什么樣子的啊鸭，里面要放哪些家具等等锹淌，思考怎樣才能讓住進(jìn)去的人覺得舒服愉快，最后出一個說明清晰的設(shè)計稿交給后面的裝修工人（也就是視覺設(shè)計師）赠制，他們來負(fù)責(zé)這個房子的外觀好不好看葛圃，風(fēng)格如何啦，是不是一聽就懂憎妙？（管你懂不懂，反正就是一個苦逼設(shè)計師就對了）

2.關(guān)于交互設(shè)計的經(jīng)典三問

Q1.交互設(shè)計的職位好像已經(jīng)趨向飽和了曲楚，現(xiàn)在從事這個行業(yè)是不是沒機(jī)會了厘唾？

A：“飽和”這個詞，咋一聽是挺嚇人的龙誊，感覺是這個職位人已經(jīng)夠多了抚垃，現(xiàn)在進(jìn)入這個行業(yè)很吃虧。COME ON~公務(wù)員是我見過的飽和度最高的行業(yè)了趟大，但是每年還不是有那么多的人樂此不疲的高喊要成為為民服務(wù)的人民好同事鹤树。

但是正如金字塔的結(jié)構(gòu)所示，往往是最底層的那一部分人是最多的逊朽，也是最容易進(jìn)入的罕伯，所謂的飽和只是整體的基數(shù)比較大了而已，越往上走人越少叽讳，也越難堅持追他。市場不缺做同一個職業(yè)的人坟募，缺的是做的好的人。

Q2.貌似只有大公司才會有交互設(shè)計這個職位邑狸，小公司又不重視交互懈糯，是不是意味著進(jìn)不去大公司的話，最好的選擇就是做產(chǎn)品或者視覺单雾？

A.首先想說明小公司不重視交互的原因赚哗。一是沒意識（不知道交互設(shè)計是啥，有什么用處硅堆，總覺得是會點(diǎn)產(chǎn)品又會點(diǎn)視覺的可有可無的職位）二是沒錢（知道這個職位的意義屿储，但是又想先省錢再說）。

但是據(jù)我所知硬萍，現(xiàn)在已經(jīng)慢慢開始有很多的中小型公司很重視交互設(shè)計這個崗位了扩所，至少這是一個趨勢。在小公司不太會出現(xiàn)大公司專人單專職的螺絲釘模式朴乖，由于實際情況的局限性祖屏，很可能需要你是個多面手，但是如果你覺得你是在“打雜”买羞，那還是重新考慮一下袁勺。

如果你確定要走上交互設(shè)計這個職位，不妨去找找看“投緣”的中小型公司畜普，大公司的交互設(shè)計可能看起來是比較單一職責(zé)的期丰，但是實際上他們大部分都是一專多精型的。

阿里倡導(dǎo)的全鏈路設(shè)計師就是我們職業(yè)發(fā)展的大方向吃挑，所以不管你是去做產(chǎn)品還是去做視覺钝荡，最終還是逃不開需要去了解交互設(shè)計的知識，學(xué)會“以用戶為中心”的設(shè)計方法舶衬。

Q3.交互設(shè)計是不是就是畫線框圖埠通？和產(chǎn)品經(jīng)理的工作有什么異同？

在知乎上看到一個很精辟的回答： 交互設(shè)計是戰(zhàn)術(shù)問題逛犹，產(chǎn)品設(shè)計是戰(zhàn)略問題端辱。如果你面試一家公司，一上來不問你項目的設(shè)計思路和思考虽画，只是盯著你的線框圖看它畫的好不好看舞蔽，告訴你做的正是他們公司產(chǎn)品經(jīng)理的工作，那還是趁早另謀他處吧码撰。一家產(chǎn)品經(jīng)理只畫線框圖渗柿，設(shè)計師只做表面功夫的公司，還是敬而遠(yuǎn)之吧脖岛。

3.交互設(shè)計師在項目中的角色扮演

一個公司如果有完善的產(chǎn)品部門的話做祝，會包含如下這些崗位：產(chǎn)品經(jīng)理砾省，運(yùn)營，交互設(shè)計師混槐，視覺設(shè)計師编兄，用戶研究員，前端開發(fā)人員声登，后端開發(fā)人員狠鸳，測試人員。

而一般設(shè)計團(tuán)隊中主要由交互設(shè)計師悯嗓，視覺設(shè)計師件舵，用戶研究員三個職位組成。

而用戶研究和交互設(shè)計這兩個職位只有在大公司里才比較常見脯厨，主要是驅(qū)動一個產(chǎn)品從概念到實際落地的過程铅祸，以及產(chǎn)品后續(xù)開發(fā)迭代的推進(jìn)。

我們可以通過《破繭成蝶》一書中的圖片來了解一下交互設(shè)計師在團(tuán)隊合作中所扮演的角色合武。

第一階段：需求分析階段

角色：需求討論和規(guī)劃的參與者

執(zhí)行者主要是老板或者產(chǎn)品經(jīng)理以及運(yùn)營（ 但是在《破繭》一書中临梗，作者鼓勵設(shè)計師們可以大膽的參與需求階段，拿回設(shè)計的主導(dǎo)權(quán)）

第二階段：設(shè)計規(guī)劃階段

角色：設(shè)計執(zhí)行的主導(dǎo)者

這個階段主要包含了范圍層，結(jié)構(gòu)層和框架層的設(shè)計，第一階段經(jīng)過了產(chǎn)品和運(yùn)營確定需求经瓷，用戶研究人員分析需求，需求溝通后什猖，到了設(shè)計規(guī)劃的階段，交互設(shè)計師和用戶研究員則應(yīng)該成為主導(dǎo)红淡，帶領(lǐng)整個團(tuán)隊不狮，確定目標(biāo)用戶，確定范圍層的內(nèi)容在旱，設(shè)計主要的操作流程以及產(chǎn)品內(nèi)容元素摇零，信息板塊的布局。

第三階段：設(shè)計實施階段

角色：視覺設(shè)計師的助攻者

經(jīng)過前面幾個底層框架層的設(shè)計之后颈渊，關(guān)于用戶體驗設(shè)計的最后一步“感知設(shè)計”就需要由視覺設(shè)計師來操刀了，交互設(shè)計師需要將自己的交互原型圖附上詳細(xì)的交互說明终佛，設(shè)計相應(yīng)的交互規(guī)范一并交給視覺設(shè)計師開始完成界面的設(shè)計俊嗽，但這并不代表交互設(shè)計師的工作就到此結(jié)束了。在這個階段铃彰，交互設(shè)計師應(yīng)該全力配合視覺設(shè)計師绍豁，積極的與之溝通相關(guān)的設(shè)計理念和原因，所謂不同手同腦牙捉，要想別人百分百的理解你的設(shè)計意圖竹揍，光靠幾張交互原型圖是很難讓對方完全明白你的設(shè)計意圖敬飒。

第四階段：開發(fā)階段，項目跟進(jìn)

角色：程序開發(fā)的協(xié)助者和引導(dǎo)者

到了這個階段芬位，基本上設(shè)計部分的工作就暫時告一段落无拗，接下來就到開發(fā)同學(xué)登場了，他們會根據(jù)你的交互原型和說明來進(jìn)行相應(yīng)的開發(fā)昧碉，并按照視覺設(shè)計給出的視覺稿“盡力”還原成應(yīng)有的樣子英染，后端的同學(xué)則負(fù)責(zé)支持產(chǎn)品運(yùn)行過程中所需要的數(shù)據(jù)，反饋結(jié)果等等被饿，一個產(chǎn)品只有依靠技術(shù)的最終實現(xiàn)才能順利的跑起來（所以趕緊搬個小板凳坐在你們團(tuán)隊的程序員大大們的腳邊投喂美味的零食去）四康。在這個階段我們則需要密切的跟進(jìn)整個開發(fā)過程，確保最終實現(xiàn)的結(jié)果和初衷相差微小狭握。所以測試的階段里闪金，交互設(shè)計師也需協(xié)助測試同學(xué)一起找出BUG和不過關(guān)的地方，才能確保產(chǎn)品交付到用戶手里的時候盡可能的無可挑剔论颅。

第五階段：反饋階段

角色：運(yùn)營和用研同學(xué)的好伙伴

產(chǎn)品上線后哎垦，我們可以從各個渠道收集到用戶的反饋，如果你是C端的產(chǎn)品嗅辣，那么你可以通過各大應(yīng)用市場或者專門的用戶社群了解到他們對產(chǎn)品的評價撼泛，或者可以通過專門的用戶研究員，運(yùn)營人員去收集相關(guān)信息（但澡谭，大部分公司是很少會付出這方面的時間和人力）如果是B端用戶的話愿题，可以直接對B端用戶進(jìn)行使用反饋的問卷調(diào)查，一般B端產(chǎn)品的針對性比較強(qiáng)蛙奖，大部分B端用戶都會比較重視產(chǎn)品是否達(dá)到了他們的需求潘酗。通過這些反饋的收集，再次將這些結(jié)果整理成需求雁仲，成為推進(jìn)下一次迭代的依據(jù)仔夺。交互設(shè)計師在這個階段也是以配合運(yùn)營，用戶研究的同學(xué)完成這個產(chǎn)品的反饋收集工作攒砖。

4.在不同階段如何執(zhí)行工作

1. 需求階段

前面說到交互設(shè)計的第一個環(huán)節(jié)就是需求分析缸兔，交互設(shè)計師需要在這個階段協(xié)助產(chǎn)品經(jīng)理梳理需求完善需求：產(chǎn)品經(jīng)理和交互設(shè)計師各司其職，前者主要從商業(yè)目標(biāo)和產(chǎn)品本質(zhì)需求出發(fā)進(jìn)行圍繞公司和產(chǎn)品的設(shè)計吹艇，而交互設(shè)計師更多的是需要從用戶的角度出發(fā)惰蜜，更多的是考慮用戶的需求。

2.設(shè)計執(zhí)行階段：定義框架-組件界面元素-繪制低保真原型

* 定義框架

也就是上面的框架設(shè)計階段 直接影響到業(yè)務(wù)目標(biāo)和轉(zhuǎn)化率 框架設(shè)計的意義就是讓用戶快速完成目標(biāo)受神，提升操作效率 分為導(dǎo)航的設(shè)計（包括結(jié)構(gòu)導(dǎo)航和局部導(dǎo)航的設(shè)計） 和流程的設(shè)計（應(yīng)注意：1.業(yè)務(wù)目標(biāo)為導(dǎo),2.兼顧用戶的習(xí)慣3.盡量讓流程做減法抛猖，多一次流程就會流失一部分用戶4任務(wù)連冠清晰5考慮實現(xiàn)方式的復(fù)雜程度）

* 組織頁面元素

（1）. 需求內(nèi)容的呈現(xiàn) ：需求最終會變成內(nèi)容形式呈現(xiàn)出來：文本，圖片，多媒體內(nèi)容财著。如何排列這些內(nèi)容联四，主次如何，主要目標(biāo)是什么撑教，是否能引起用戶的情感召喚朝墩，激發(fā)用戶的行動點(diǎn)是否足夠清晰。

（2）. 導(dǎo)航和鏈接 結(jié)構(gòu)導(dǎo)航 和 關(guān)聯(lián)導(dǎo)航

（3）. 設(shè)計出符合平臺規(guī)范的交互模式 熟悉各大平臺的各種組件（WEB端驮履，移動端的IOS規(guī)范鱼辙，安卓的MATRIAL DESIGN 規(guī)范)? 給出合適的即時操作反饋 容錯性原則 程序能實現(xiàn)的

*繪制低保真原型/交互DEMO

需要說明的是原型只是一個過程，并不是結(jié)果玫镐，真正有價值的是背后的思考倒戏，所以用什么工具畫不是該糾結(jié)的問題，用紙筆也可以完成這個步驟恐似，但最終還是需要AXURE或者SKETCH這樣的制圖軟件來完成不同部門之間的溝通杜跷，以此作為溝通的橋梁。