我常被問起：“你是做什么的？”
“交互設(shè)計(jì)師。”
“交互設(shè)計(jì)是做什么的？”
我很尷尬的解釋一堆：“！@#￥%…….”
對(duì)方更是疑惑：”那….是不是網(wǎng)頁的視覺設(shè)計(jì)？”
………
網(wǎng)上搜到一張圖，發(fā)現(xiàn)不只是我，很多交互設(shè)計(jì)師都存在困惑。缺乏職業(yè)存在感。
交互設(shè)計(jì)似乎是個(gè)很難解釋，有點(diǎn)”虛、空、玄“的東西?；ヂ?lián)網(wǎng)的快速發(fā)展，交互設(shè)計(jì)少了些可以借鑒的方法。交互設(shè)計(jì)這個(gè)行業(yè)似乎只能靠前人經(jīng)驗(yàn)、自身靈感、悟性體會(huì)，江湖中野蠻發(fā)展著。簡(jiǎn)直就是武林中的內(nèi)功了得。
JJg在《用戶體驗(yàn)要素》中，將交互設(shè)計(jì)設(shè)置在結(jié)構(gòu)層。
一方面，交互設(shè)計(jì)恰恰處在抽象的戰(zhàn)略向具體實(shí)現(xiàn)頁面的轉(zhuǎn)化過度階段。從產(chǎn)品開發(fā)流程中，交互設(shè)計(jì)上從產(chǎn)品經(jīng)理接到需求，分析需求并最終交付網(wǎng)站高保真的原型。要把“抽象”的點(diǎn)子和想法如實(shí)貼切用界面語言表現(xiàn)出來。滿足公司商業(yè)需求。
另一方面，交互設(shè)計(jì)師的誕生某種程度是為了提升產(chǎn)品可用性。其實(shí)就是要滿足產(chǎn)品使用者——用戶的要求。
說起來簡(jiǎn)直就是吃飯靠公司，目標(biāo)是用戶的“無間道”。要不斷平衡公司“商業(yè)”利益（不能丟飯碗），和用戶體驗(yàn)利益（專業(yè)道德）之間的矛盾。具體來說，就是在交互設(shè)計(jì)思考的過程中，考慮用戶邏輯+公司的特殊需求兩部分內(nèi)容。
能不糾結(jié)么…..
有人問我交互設(shè)計(jì)難么？
我說“不難，你想，用戶的操作行為就倆：點(diǎn)擊、拖拽。”：）
其實(shí)，我理解的交互設(shè)計(jì)主要分為兩塊：信息架構(gòu)和操作細(xì)節(jié)。交互設(shè)計(jì)的產(chǎn)出物（交付物）也應(yīng)當(dāng)包含這一靜一動(dòng)兩塊。
下面從交互設(shè)計(jì)不同階段的產(chǎn)出物，來談?wù)勎易约航换ピO(shè)計(jì)方法和思考過程：
1.接需求
這個(gè)階段主要是接到產(chǎn)品經(jīng)理等拿來的需求，比如FRD文檔。和產(chǎn)品經(jīng)理討論需求，了解重點(diǎn)。
2.需求分析——>翻譯成界面語言
俗話說，Think first，Design next.對(duì)于接到的需求，第一件要做的事情就是仔細(xì)分析和討論下需求的邏輯、內(nèi)容和目的，而不是馬上風(fēng)風(fēng)火火的開工。這個(gè)階段的重點(diǎn)在于梳理用戶邏輯+特殊需求，最好能高度概括成幾點(diǎn)。
忍不住引用臭魚博客的一個(gè)灰常貼切的案例：
一個(gè)需求文檔。里面描述了頁面需要承載的信息。
第一步. 概括信息
第二步. 排序
1. 您選擇了回郵方式辦卡，概括解釋這個(gè)辦卡方式。
2. 接下來您應(yīng)該 下載申請(qǐng)表
3. 回郵辦卡的全過程是這樣的…
4. 一系列注意事項(xiàng)。
第三步. 翻譯為界面語言
對(duì)于單一的頁面（并非整站，沒有操作邏輯）的產(chǎn)品來說，需求分析完，交付物出線框圖，后面視覺和開發(fā)靜態(tài)頁面足夠了。
3.結(jié)構(gòu)框架
實(shí)際產(chǎn)品往往復(fù)雜很多，在需求分析的時(shí)候要對(duì)產(chǎn)品結(jié)構(gòu)進(jìn)行梳理，表達(dá)出網(wǎng)站的層級(jí)結(jié)構(gòu)。做出類似的站點(diǎn)地圖（site maps）。這個(gè)除了可以把公司所提供的內(nèi)容層梳理清晰，為全站導(dǎo)航也奠定基礎(chǔ)。
4.流程圖（flow charts）：表達(dá)用戶或系統(tǒng)對(duì)某項(xiàng)任務(wù)執(zhí)行的流程。流程圖的重要性在于從用戶的使用邏輯來分析交互邏輯是否合理，走得通。
其實(shí)流程圖分為單個(gè)用戶流程圖和多用戶流程圖。它不僅是提高可用性的利器，也是信息架構(gòu)的好工具。具體詳情可以看：利用任務(wù)角色來做信息架構(gòu)
舉一個(gè)購(gòu)物網(wǎng)站的例子：使用者主要包括購(gòu)買者、買禮物的人、通過EDM(email營(yíng)銷)進(jìn)來的人和退貨者。
先畫出“購(gòu)物者”的流程圖
再畫出其他角色的流程圖
繼續(xù)畫出“買禮物的人”的業(yè)務(wù)流程。如果這家B2C網(wǎng)站增加了“買禮物”的需求，增設(shè)了“我的愿望清單”用來記錄、顯示我想購(gòu)買的商品或者公開、指定給好友。
你會(huì)發(fā)現(xiàn)不同用戶角色可以復(fù)用相同的頁面。比如：購(gòu)物車、搜索結(jié)果list頁、送貨地址、確認(rèn)頁面等等。
畫出所有用戶角色的流程圖，整體看一遍
通過梳理不同用戶的行為路徑，可以更好地梳理復(fù)雜問題。你不僅可以從開始緊盯用戶來網(wǎng)站的目的和需求，還可以避免遺漏頁面和頁面上關(guān)鍵性的操作。
這些表現(xiàn)頁面
相關(guān)箭頭越多，頁面承載的信息量也越多。還有一些重要操作（如上圖紅框）在視覺上應(yīng)該突出表現(xiàn)（比如button顏色醒目色、高亮度等）。各個(gè)要素在頁面中的級(jí)別其實(shí)是不同的。比如：
“接受” 更加醒目的引導(dǎo)用戶。這里也會(huì)對(duì)一些企業(yè)戰(zhàn)略的特殊需求引導(dǎo)。
還有，操作邏輯緊密的按鈕要接近。
保存寶貝后，要么結(jié)算要么關(guān)閉。雖然右上角有關(guān)閉按鈕，但由于兩個(gè)操作緊密，應(yīng)該放在視覺上比較接近的位置。
5.線框圖（wireframes）：更像最終產(chǎn)品呈現(xiàn)的毛胚。簡(jiǎn)單來說，就是拋去配色、字體樣式、圖片等的原型設(shè)計(jì)。這個(gè)階段包含具體操作細(xì)節(jié)。
線框圖這個(gè)階段，除了把上一階段流程圖需要的要素包含好，最重要的要考慮如何在頁面中排布這些信息，積極具體的操作細(xì)節(jié)、狀態(tài)說明。
交互體驗(yàn)的一些參照原則：操作前，結(jié)果可預(yù)知。 操作時(shí)，操作有反饋，可停止。 操作后，操作可撤銷。
交付物中對(duì)交互細(xì)節(jié)和跳轉(zhuǎn)頁面的說明
具體交互細(xì)節(jié)的說明，包括focus狀態(tài)，變化反饋條件等等。
6.檢查check
這個(gè)階段就是再次對(duì)線框圖進(jìn)行可用性的分析。第一時(shí)間，設(shè)計(jì)師可以把已有的可用性原則拿出來參照，是否出現(xiàn)問題。
《Don’t make me think》里有些說明，外加偶個(gè)人總結(jié)的常見排查點(diǎn)：
回頭看看，這幾個(gè)階段的交付物涵蓋了交互設(shè)計(jì)的內(nèi)容：信息架構(gòu)和操作細(xì)節(jié)。當(dāng)然，具體思考過程不會(huì)那么界限分明。可能兼顧兩者，比如在流程圖中既有細(xì)節(jié)又有架構(gòu)。
交互設(shè)計(jì)其實(shí)讓機(jī)器“模仿”人和人溝通對(duì)話。交互和視覺最終要的是清晰表達(dá)信息。
設(shè)計(jì)師都該有自己的一套設(shè)計(jì)方法，設(shè)計(jì)分析思路和習(xí)慣。這只是我一個(gè)小白設(shè)計(jì)師對(duì)過去一些思考的總結(jié)，便于未來檢討。不一定對(duì)，找到適合自己和環(huán)境的方法才是重點(diǎn)，以上均為個(gè)人觀點(diǎn)，如有雷同，算我抄你的。如覺得不好，板磚扔來。求童鞋們分享批評(píng)。
不過方法各樣，Don’t fall in love with your design，最終還是要做“有愛、有人情味”的產(chǎn)品。干巴得~
聯(lián)系客服
