我常被問起：“你是做什么的？”
“交互設(shè)計(jì)師?！?/p>
“交互設(shè)計(jì)是做什么的？”
我很尷尬的解釋一堆：“！@#￥%…….”
對(duì)方更是疑惑：”那….是不是網(wǎng)頁(yè)的視覺設(shè)計(jì)？”
………
網(wǎng)上搜到一張圖，發(fā)現(xiàn)不只是我，很多交互設(shè)計(jì)師都存在困惑。缺乏職業(yè)存在感。
交互設(shè)計(jì)的特色之一——“虛”
交互設(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)功了得。
交互設(shè)計(jì)的特色之二——糾結(jié)，有木有！
JJg在《用戶體驗(yàn)要素》中，將交互設(shè)計(jì)設(shè)置在結(jié)構(gòu)層。
一方面，交互設(shè)計(jì)恰恰處在抽象的戰(zhàn)略向具體實(shí)現(xiàn)頁(yè)面的轉(zhuǎn)化過度階段。從產(chǎn)品開發(fā)流程中，交互設(shè)計(jì)上從產(chǎn)品經(jīng)理接到需求，分析需求并最終交付網(wǎng)站高保真的原型。要把“抽象”的點(diǎn)子和想法如實(shí)貼切用界面語(yǔ)言表現(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ì)的內(nèi)容有哪些？
有人問我交互設(shè)計(jì)難么？
我說“不難，你想，用戶的操作行為就倆：點(diǎn)擊、拖拽?！保海?/p>
其實(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.需求分析——>翻譯成界面語(yǔ)言
俗話說，Think first，Design next.對(duì)于接到的需求，第一件要做的事情就是仔細(xì)分析和討論下需求的邏輯、內(nèi)容和目的，而不是馬上風(fēng)風(fēng)火火的開工。這個(gè)階段的重點(diǎn)在于梳理用戶邏輯+特殊需求，最好能高度概括成幾點(diǎn)。
忍不住引用臭魚博客的一個(gè)灰常貼切的案例：
一個(gè)需求文檔。里面描述了頁(yè)面需要承載的信息。
第一步. 概括信息
您選擇了回郵方式辦卡，概括解釋這個(gè)辦卡方式。
接下來您應(yīng)該 下載申請(qǐng)表
回郵辦卡的全過程是這樣的…
一系列注意事項(xiàng)。
第二步. 排序
1. 您選擇了回郵方式辦卡，概括解釋這個(gè)辦卡方式。
2. 接下來您應(yīng)該 下載申請(qǐng)表
3. 回郵辦卡的全過程是這樣的…
4. 一系列注意事項(xiàng)。
第三步. 翻譯為界面語(yǔ)言
對(duì)于單一的頁(yè)面（并非整站，沒有操作邏輯）的產(chǎn)品來說，需求分析完，交付物出線框圖，后面視覺和開發(fā)靜態(tài)頁(yè)面足夠了。
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ù)用相同的頁(yè)面。比如：購(gòu)物車、搜索結(jié)果list頁(yè)、送貨地址、確認(rèn)頁(yè)面等等。
畫出所有用戶角色的流程圖，整體看一遍
通過梳理不同用戶的行為路徑，可以更好地梳理復(fù)雜問題。你不僅可以從開始緊盯用戶來網(wǎng)站的目的和需求，還可以避免遺漏頁(yè)面和頁(yè)面上關(guān)鍵性的操作。
所謂避免遺漏頁(yè)面就是查看整站是否缺失了某些頁(yè)面，首頁(yè)、類目集合list頁(yè)、list頁(yè)、detail頁(yè)，以及操作后的結(jié)果頁(yè)。個(gè)人覺得在這個(gè)階段項(xiàng)目估時(shí)最靠譜。
這些表現(xiàn)頁(yè)面
每個(gè)頁(yè)面展示要素頁(yè)面上關(guān)鍵性的操作對(duì)于接下去的視覺設(shè)計(jì)也可以起到參考的作用。
相關(guān)箭頭越多，頁(yè)面承載的信息量也越多。還有一些重要操作（如上圖紅框）在視覺上應(yīng)該突出表現(xiàn)（比如button顏色醒目色、高亮度等）。各個(gè)要素在頁(yè)面中的級(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è)階段，除了把上一階段流程圖需要的要素包含好，最重要的要考慮如何在頁(yè)面中排布這些信息，積極具體的操作細(xì)節(jié)、狀態(tài)說明。
交互體驗(yàn)的一些參照原則：操作前，結(jié)果可預(yù)知。 操作時(shí)，操作有反饋，可停止。 操作后，操作可撤銷。
交付物中對(duì)交互細(xì)節(jié)和跳轉(zhuǎn)頁(yè)面的說明
體交互細(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è)神馬網(wǎng)站？（站點(diǎn)名稱、logo、適當(dāng)?shù)恼f明）
我在哪？（文章或page title）
主要欄目有神馬？（導(dǎo)航、分類…）
我在導(dǎo)航的哪個(gè)位置？（導(dǎo)航反白、面包屑）
能回去么？（Home和返回或撤銷）
需要搜索嗎？（搜索框滿足詢問型用戶，而不是瀏覽型用戶的需求）
兩個(gè)重要狀態(tài)有嗎？（第一次進(jìn)來的新手引導(dǎo)，參見here+出錯(cuò)狀態(tài)提示）
相同功能和文案的統(tǒng)一、一致表達(dá)。
回頭看看，這幾個(gè)階段的交付物涵蓋了交互設(shè)計(jì)的內(nèi)容：信息架構(gòu)和操作細(xì)節(jié)。當(dāng)然，具體思考過程不會(huì)那么界限分明?？赡芗骖檭烧?，比如在流程圖中既有細(xì)節(jié)又有架構(gòu)。
交互設(shè)計(jì)其實(shí)讓機(jī)器“模仿”人和人溝通對(duì)話。交互和視覺最終要的是清晰表達(dá)信息。
計(jì)師都該有自己的一套設(shè)計(jì)方法，設(shè)計(jì)分析思路和習(xí)慣。這只是我一個(gè)小白設(shè)計(jì)師對(duì)過去一些思考的總結(jié)，便于未來檢討。不一定對(duì)，找到適合自己和環(huán)境的方法才是重點(diǎn)，以上均為個(gè)人觀點(diǎn)，如有雷同，算我抄你的。如覺得不好，板磚扔來。求童鞋們分享批評(píng)。
