我常被問起：“你是做什么的？”
“交互設(shè)計師。”
“交互設(shè)計是做什么的？”
我很尷尬的解釋一堆：“！@#￥%…….”
對方更是疑惑：”那….是不是網(wǎng)頁的視覺設(shè)計？”
………
網(wǎng)上搜到一張圖，發(fā)現(xiàn)不只是我，很多交互設(shè)計師都存在困惑。缺乏職業(yè)存在感。

• 交互設(shè)計的特色之一——“虛”

交互設(shè)計似乎是個很難解釋，有點”虛、空、玄“的東西?；ヂ?lián)網(wǎng)的快速發(fā)展，交互設(shè)計少了些可以借鑒的方法。交互設(shè)計這個行業(yè)似乎只能靠前人經(jīng)驗、自身靈感、悟性體會，江湖中野蠻發(fā)展著。簡直就是武林中的內(nèi)功了得。

• 交互設(shè)計的特色之二——糾結(jié)，有木有！

JJg在《用戶體驗要素》中，將交互設(shè)計設(shè)置在結(jié)構(gòu)層。

一方面，交互設(shè)計恰恰處在抽象的戰(zhàn)略向具體實現(xiàn)頁面的轉(zhuǎn)化過度階段。從產(chǎn)品開發(fā)流程中，交互設(shè)計上從產(chǎn)品經(jīng)理接到需求，分析需求并最終交付網(wǎng)站高保真的原型。要把“抽象”的點子和想法如實貼切用界面語言表現(xiàn)出來。滿足公司商業(yè)需求。

另一方面，交互設(shè)計師的誕生某種程度是為了提升產(chǎn)品可用性。其實就是要滿足產(chǎn)品使用者——用戶的要求。

說起來簡直就是吃飯靠公司，目標是用戶的“無間道”。要不斷平衡公司“商業(yè)”利益（不能丟飯碗），和用戶體驗利益（專業(yè)道德）之間的矛盾。具體來說，就是在交互設(shè)計思考的過程中，考慮用戶邏輯+公司的特殊需求兩部分內(nèi)容。

能不糾結(jié)么…..

• 交互設(shè)計的內(nèi)容有哪些？

有人問我交互設(shè)計難么？

我說“不難，你想，用戶的操作行為就倆：點擊、拖拽。”：）

其實，我理解的交互設(shè)計主要分為兩塊：信息架構(gòu)和操作細節(jié)。交互設(shè)計的產(chǎn)出物（交付物）也應(yīng)當包含這一靜一動兩塊。

下面從交互設(shè)計不同階段的產(chǎn)出物，來談?wù)勎易约航换ピO(shè)計方法和思考過程：

1.接需求

這個階段主要是接到產(chǎn)品經(jīng)理等拿來的需求，比如FRD文檔。和產(chǎn)品經(jīng)理討論需求，了解重點。

2.需求分析——>翻譯成界面語言

俗話說，Think first，Design next.對于接到的需求，第一件要做的事情就是仔細分析和討論下需求的邏輯、內(nèi)容和目的，而不是馬上風風火火的開工。這個階段的重點在于梳理用戶邏輯+特殊需求，最好能高度概括成幾點。

忍不住引用臭魚博客的一個灰常貼切的案例：

一個需求文檔。里面描述了頁面需要承載的信息。

第一步. 概括信息

第二步. 排序

1. 您選擇了回郵方式辦卡，概括解釋這個辦卡方式。

2. 接下來您應(yīng)該 下載申請表

3. 回郵辦卡的全過程是這樣的…

4. 一系列注意事項。

第三步. 翻譯為界面語言

對于單一的頁面（并非整站，沒有操作邏輯）的產(chǎn)品來說，需求分析完，交付物出線框圖，后面視覺和開發(fā)靜態(tài)頁面足夠了。

3.結(jié)構(gòu)框架

實際產(chǎn)品往往復(fù)雜很多，在需求分析的時候要對產(chǎn)品結(jié)構(gòu)進行梳理，表達出網(wǎng)站的層級結(jié)構(gòu)。做出類似的站點地圖（site maps）。這個除了可以把公司所提供的內(nèi)容層梳理清晰，為全站導(dǎo)航也奠定基礎(chǔ)。

4.流程圖（flow charts）：表達用戶或系統(tǒng)對某項任務(wù)執(zhí)行的流程。流程圖的重要性在于從用戶的使用邏輯來分析交互邏輯是否合理，走得通。

其實流程圖分為單個用戶流程圖和多用戶流程圖。它不僅是提高可用性的利器，也是信息架構(gòu)的好工具。具體詳情可以看：利用任務(wù)角色來做信息架構(gòu)

舉一個購物網(wǎng)站的例子：使用者主要包括購買者、買禮物的人、通過EDM(email營銷)進來的人和退貨者。

先畫出“購物者”的流程圖

再畫出其他角色的流程圖
繼續(xù)畫出“買禮物的人”的業(yè)務(wù)流程。如果這家B2C網(wǎng)站增加了“買禮物”的需求，增設(shè)了“我的愿望清單”用來記錄、顯示我想購買的商品或者公開、指定給好友。

你會發(fā)現(xiàn)不同用戶角色可以復(fù)用相同的頁面。比如：購物車、搜索結(jié)果list頁、送貨地址、確認頁面等等。

畫出所有用戶角色的流程圖，整體看一遍

通過梳理不同用戶的行為路徑，可以更好地梳理復(fù)雜問題。你不僅可以從開始緊盯用戶來網(wǎng)站的目的和需求，還可以避免遺漏頁面和頁面上關(guān)鍵性的操作。

• 所謂避免遺漏頁面就是查看整站是否缺失了某些頁面，首頁、類目集合list頁、list頁、detail頁，以及操作后的結(jié)果頁。個人覺得在這個階段項目估時最靠譜。

這些表現(xiàn)頁面

• 每個頁面展示要素頁面上關(guān)鍵性的操作對于接下去的視覺設(shè)計也可以起到參考的作用。

相關(guān)箭頭越多，頁面承載的信息量也越多。還有一些重要操作（如上圖紅框）在視覺上應(yīng)該突出表現(xiàn)（比如button顏色醒目色、高亮度等）。各個要素在頁面中的級別其實是不同的。比如：

“接受” 更加醒目的引導(dǎo)用戶。這里也會對一些企業(yè)戰(zhàn)略的特殊需求引導(dǎo)。

還有，操作邏輯緊密的按鈕要接近。

保存寶貝后，要么結(jié)算要么關(guān)閉。雖然右上角有關(guān)閉按鈕，但由于兩個操作緊密，應(yīng)該放在視覺上比較接近的位置。

5.線框圖（wireframes）：更像最終產(chǎn)品呈現(xiàn)的毛胚。簡單來說，就是拋去配色、字體樣式、圖片等的原型設(shè)計。這個階段包含具體操作細節(jié)。

線框圖這個階段，除了把上一階段流程圖需要的要素包含好，最重要的要考慮如何在頁面中排布這些信息，積極具體的操作細節(jié)、狀態(tài)說明。

交互體驗的一些參照原則：操作前，結(jié)果可預(yù)知。 操作時，操作有反饋，可停止。 操作后，操作可撤銷。

交付物中對交互細節(jié)和跳轉(zhuǎn)頁面的說明

具體交互細節(jié)的說明，包括focus狀態(tài)，變化反饋條件等等。

6.檢查check

這個階段就是再次對線框圖進行可用性的分析。第一時間，設(shè)計師可以把已有的可用性原則拿出來參照，是否出現(xiàn)問題。

《Don’t make me think》里有些說明，外加偶個人總結(jié)的常見排查點：

• 這是個神馬網(wǎng)站？（站點名稱、logo、適當?shù)恼f明）
• 我在哪？（文章或page title）
• 主要欄目有神馬？（導(dǎo)航、分類…）
• 我在導(dǎo)航的哪個位置？（導(dǎo)航反白、面包屑）
• 能回去么？（Home和返回或撤銷）
• 需要搜索嗎？（搜索框滿足詢問型用戶，而不是瀏覽型用戶的需求）
• 兩個重要狀態(tài)有嗎？（第一次進來的新手引導(dǎo)，參見here+出錯狀態(tài)提示）
• 相同功能和文案的統(tǒng)一、一致表達。

回頭看看，這幾個階段的交付物涵蓋了交互設(shè)計的內(nèi)容：信息架構(gòu)和操作細節(jié)。當然，具體思考過程不會那么界限分明?？赡芗骖檭烧?，比如在流程圖中既有細節(jié)又有架構(gòu)。

交互設(shè)計其實讓機器“模仿”人和人溝通對話。交互和視覺最終要的是清晰表達信息。

設(shè)計師都該有自己的一套設(shè)計方法，設(shè)計分析思路和習慣。這只是我一個小白設(shè)計師對過去一些思考的總結(jié)，便于未來檢討。不一定對，找到適合自己和環(huán)境的方法才是重點，以上均為個人觀點，如有雷同，算我抄你的。如覺得不好，板磚扔來。求童鞋們分享批評。

不過方法各樣，Don’t fall in love with your design，最終還是要做“有愛、有人情味”的產(chǎn)品。干巴得~