交互設計的三個層次

交互設計是產品工作中的重要一節，一份優秀的交互設計文檔可以高效地指導開發和測試展開工作，并減少不必要溝通，有利于提高產品的產出效率。

交互設計主要是將產品經理確定的需求進行細化，并以交互文檔的方式呈現，指導開發和測試展開工作，也可以理解為開發使用的文檔。下面我將從三個層面來探討下交互設計，即：產品層、概念層、行為層。

一、產品層

產品層，主要是從正常的產品設計角度，即產品鏈角度來分析交互設計。

在用戶體驗五要素中，我們知道產品經理負責戰略層和范圍層，交互設計師負責結構層和框架層，視覺設計師負責表現層。

其中產品經理主要是從一堆需求中，通過需求分析找到低成本高價值的需求，并確定好范圍以需求文檔形式呈現，這里有產品需求和用戶需求。

而交互設計師主要是分析已確定的需求，站在用戶體驗角度將其轉化為可開發的交互文檔，也可以簡單理解為分析問題，解決問題。

1. 分析問題

我們可以對應交互模型和用戶體驗地圖。

交互模型應該是一開始就要分析的，即用戶、場景、目標；不同的用戶在不同的場景下的不同任務目標，可以衍生出多個任務流程。其中用戶分析，可以理解為用戶畫像，即模擬出幾種類型的用戶，并對其基本情況有個詳細描述，后面針對某類型用戶時便可以使用其虛擬名稱。

用戶體驗地圖，正常來說是需要找到一群真實用戶來體驗產品，并將真實的體驗過程給描述出來。實操上可能并沒有這么完善的條件，我這邊的做法是利用同理心去模擬用戶，體驗通過交互模型分析梳理的任務流程，并將所思、所做、所感記錄下來。

• 所思，可以理解為每步操作前的思考，例如：看到登錄頁時，頁面中的元素擺放會讓我有哪些思考或想法。
• 所做，可以理解為靜態的時候，我會怎么操作，產品有所反饋后，我又會怎么操作。
• 所感，可以理解為整個流程體驗下來，具體的一些心里感受，好的或者不好的地方。

通過用戶體驗地圖可以很容易的找到產品的一些隱含痛點，并通過持續的改進讓產品的體驗越來越好。

2. 解決問題

我們可以對應任務流程、信息架構、頁面原型。

通過交互模型可以很容易得到任務流程圖，我這邊不喜歡將很多流程畫到一張圖里面，而是區分不同的用戶畫出在不同場景下的任務流程圖，將復雜的流程圖給拆分簡單化，這樣后面畫原型時，邏輯更清晰，也不會遺漏一些頁面。

信息架構圖，主要是分析產品的需求文檔，也可以先梳理出功能架構圖，在此基礎上對產品的信息架構進行設計，原則就是脈絡要清晰。

有了任務流程圖和信息架構圖后，再來畫頁面原型，感覺就清晰多了。頁面原型可以理解為需求可視化，即將產品的概念通過實際的產品設計圖表達出來，需要交互設計師有一定的頁面排版能力和美感，原型在不影響效率的前提下應盡量美觀。個人感覺，這部分能力就需要一定的項目積累了。我之前由于有幾年的網頁設計經歷，所以需求可視化的能力就直接轉嫁過來了。

3. 方案落地

我們可以對應交互文檔。

交互設計師最終的輸出物就是交互文檔了，我們一般畫好了原型后就會拉個會議，對交互方案進行討論。我這邊的做法是按照設計流程來講，依次按交互模型、用戶體驗地圖、任務流程圖、信息架構圖的順序先過一邊，再針對具體的頁面原型進行講解。

這個地方需要根據公司的實際情況靈活安排了，我們的原則就是盡量讓交互方案順利通過，所以先講概念性的分析產物。而原型是通過前面分析而來，不容易被全盤否決，更多的是具體頁面元素內容或者擺放上的調整。我這邊的經驗是，開發也會將一些難點拋出來進行討論。

交互評審通過后針對每頁原型都要附上一些說明，然后將所有這些輸出物集合打包，就成了一份詳細的交互文檔，也可以理解為開發文檔。后面會專門寫一篇文章來描述交互文檔如何來寫。

我個人的想法是，產品經理輸出的需求文檔就不用給開發看了，后面開發和測試都統一以交互文檔為依據，有需求變更或者開發難點反饋等，交互文檔需要跟進，并附上修改時間和記錄，作為詳細的查閱資料應用于整個產品組。

4. 優化

我們可以對應數據分析、用戶反饋、可用性測試。

數據分析，主要是產品上線后，用戶的一些使用數據，我們拿到這些數據后，可以分析出一些真實的用戶行為。

用戶反饋，就是用戶使用產品后的一些反饋，有好的也有不好的，例如：APP上線后，都會有一些用戶的吐槽等。我們需要從眾多反饋中提煉出可優化的用戶需求，此處有個原則：不要讓小概率事件影響大概率事件。

可用性測試，主要是模擬真實用戶去體驗測試階段的產品，并將一些問題進行記錄。這里可以請具有代表性的用戶或者公司同事來體驗，也可以自己去體驗。

二、概念層

從概念上來說，交互設計是指：幫助用戶更好地使用產品，達到用戶目標，并在這個過程中有愉悅的感受。我們可以提取出“更好地使用產品”、“有愉悅感受”。

1. 更好地使用產品

更好地使用產品，我們對應認知和反饋。

認知，簡單說就是一看就明白，會用。一個復雜的界面，第一次使用時用戶可以很快上手，這樣我們就認為擁有好的認知屬性，可以節省很多用戶思考的時間或者說節省用戶的認知資源；一個產品如果復雜的界面都有這種認知屬性，整個產品就不會太難用，可以節省很多培訓用戶的時間。

反饋，簡單說就是操作順暢，容錯。每次操作界面時，系統都能給出很友好的反饋，對于很復雜的流程，用戶也能很順利操作，最終達到自己的任務目標；用戶有一些錯誤的操作，產品通過合理反饋可以避免用戶去犯錯。

這樣的一款有好的認知和友好反饋的產品，對用戶而言，應該是用起來很舒服的。我們在產品設計時考慮更多點，做的更多點，用戶用起來就更簡單些，更舒服些。

2. 有愉悅感受

有愉悅感受，我們對應體驗過程，即操作簡單、界面美觀。

操作簡單，一款用戶體驗好的產品，用戶在使用時，有愉悅的感受是必然的。這里我們可以去關注交互層的情感化設計，一個復雜的流程，每一步的銜接，每一步的轉場動效，在用戶完成目標的前提下，有更愉悅的精神體驗。

例如：反饋時的方式，哪種體驗更好；界面切換時，需要使用哪種動效等。

界面美觀，這里主要是針對UI設計，視覺層的情感化設計。使用一款界面很漂亮的產品，在滿足好用的前提下，有更多的愉悅感受也是必然的。

例如：一些報錯頁面的情感化設計，可以撫慰用戶的焦慮；引導頁的情感化設計，可以降低用戶使用產品的難度等。

三、行為層

交互從廣義上來說，是設計人與物的互動、人與人的互動、人與環境的互動。從俠義上來說，就是人與物的互動，而且這個物指產品界面。我們希望設計用戶的行為，讓用戶按照我們的商業目標來使用產品。用戶是難伺候的，我們的實操是通過設計物的行為即界面的行為，來影響用戶的行為。

簡單說就是——設計物的行為，影響人的行為；收集用戶真實的使用行為，反過來決策產品行為應該如何設計，這樣形成了一個良好閉環，不斷的設計行為，達到更好的用戶體驗。

用戶有很多：潛在的、實際的等，對于低動機低能力的用戶，在此不考慮。

1. 引導，高動機低能力

對于高動機低能力的用戶，我們的關鍵是提升用戶的能力。

用戶對我們的產品有很高的使用動機，無奈缺乏使用能力，這個能力可以理解為用戶的負荷過重，理解能力不夠；我們要提高用戶的能力，自然就是降低用戶負荷，降低產品的理解難度。

這類用戶，我們只需要去引導他們，讓他們跟著產品設計好的行為，一步步走，例如引導頁，新功能的引導助手等。

在生活中，有個大家很熟悉的例子：貸款買房。

買房屬于大件消費了，一般人缺少全款買房的能力，銀行推出的個人貸款買房產品，就可以理解為是提高了購房者的購房能力，然后銀行可以獲得利息作為利潤。其他的產品，例如貸款買車，花唄，借唄等都是一類的，都是提高用戶的購買能力。

2. 提醒，高動機高能力

對于高動機高能力的用戶，我們的關鍵是提醒。

一個好的產品，知道的人太少，導致用戶量不高，其中很多高動機高能力的用戶也錯過了。生活中，常見的宣傳手段是廣告，提高曝光度，讓大家都知道這款產品，對于有高動機高能力的，一點點提醒后，自然就會成為產品用戶。

3. 激勵，低動機高能力

對于低動機高能力的用戶，我們的關鍵是激勵。

用戶缺少足夠的刺激，可能擁有很高的能力，但是不會去用你的產品，我們要做的就是激勵用戶，一些好的廣告也可以達到這個目的。

例如一些豪宅的廣告，可以吸引到一些富豪；一些高端的手機廣告，可以吸引到一些成功人士等。

四、總結

針對B端和C端的補充說明：

B端產品，我們必須以業務目標為前提，深挖不同用戶不同場景的任務流程，提高用戶的認知能力；提高產品的反饋能力；提高產品的智能性，有良好的感知和預見。

C端產品，我們必須以好用好玩為宗旨，深挖用戶的愉悅感，然后通過設計產品的行為來影響用戶的行為。

 

作者：D.cheerful，微信號：dcf8859，武漢地區野路子高級交互設計師，7年B端產品交互設計經驗。

本文由 @D.cheerful 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議