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

• 交互設計的特色之一——“虛”

交互設計似乎是個很難解釋，有點”虛、空、玄“的東西。互聯網的快速發展，交互設計少了些可以借鑒的方法。交互設計這個行業似乎只能靠前人經驗、自身靈感、悟性體會，江湖中野蠻發展著。簡直就是武林中的內功了得。

• 交互設計的特色之二——糾結，有木有！

JJg在《用戶體驗要素》中，將交互設計設置在結構層。

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

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

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

能不糾結么…..

• 交互設計的內容有哪些？

有人問我交互設計難么？

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

其實，我理解的交互設計主要分為兩塊：信息架構和操作細節。交互設計的產出物（交付物）也應當包含這一靜一動兩塊。

#p#

下面從交互設計不同階段的產出物，來談談我自己交互設計方法和思考過程：

1.接需求

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

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

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

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

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

第一步. 概括信息

第二步. 排序

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

2. 接下來您應該 下載申請表

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

4. 一系列注意事項。

第三步. 翻譯為界面語言

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

#p#

3.結構框架

實際產品往往復雜很多，在需求分析的時候要對產品結構進行梳理，表達出網站的層級結構。做出類似的站點地圖（site maps）。這個除了可以把公司所提供的內容層梳理清晰，為全站導航也奠定基礎。

 

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

其實流程圖分為單個用戶流程圖和多用戶流程圖。它不僅是提高可用性的利器，也是信息架構的好工具。舉一個購物網站的例子：使用者主要包括購買者、買禮物的人、通過EDM(email營銷)進來的人和退貨者。

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

 

再畫出其他角色的流程圖

繼續畫出“買禮物的人”的業務流程。如果這家B2C網站增加了“買禮物”的需求，增設了“我的愿望清單”用來記錄、顯示我想購買的商品或者公開、指定給好友。

你會發現不同用戶角色可以復用相同的頁面。比如：購物車、搜索結果list頁、送貨地址、確認頁面等等。

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

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

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

這些表現頁面

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

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

“接受” 更加醒目的引導用戶。這里也會對一些企業戰略的特殊需求引導。

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

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

#p#

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

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

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

交付物中對交互細節和跳轉頁面的說明

具體交互細節的說明，包括focus狀態，變化反饋條件等等。

6.檢查check

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

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

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

回頭看看，這幾個階段的交付物涵蓋了交互設計的內容：信息架構和操作細節。當然，具體思考過程不會那么界限分明。可能兼顧兩者，比如在流程圖中既有細節又有架構。

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

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

不過方法各樣，Don’t fall in love with your design，最終還是要做“有愛、有人情味”的產品。