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

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

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

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

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

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

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

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

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

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

有人問我交互設計難么？

我說“不難，你想，用戶的操作行為就倆：點擊、拖拽?！保海?/p>

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

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

1.接需求

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

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

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

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

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

第一步. 概括信息

?您選擇了回郵方式辦卡，概括解釋這個辦卡方式。
?接下來您應該 下載申請表
?回郵辦卡的全過程是這樣的…
?一系列注意事項。

第二步. 排序

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

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

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

4. 一系列注意事項。

第三步. 翻譯為界面語言

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

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

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

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

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

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

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

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

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

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

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

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

這些表現(xiàn)頁面

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

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

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

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

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

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

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

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

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

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

6.檢查check

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

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

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

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

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

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

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

來源：http://www.zhangyq.com/interaction-design-methods-and-processes/