用戶體驗之交互設計十步法

交互設計即(InteractionDesign) ，是莫格里奇在上世紀提出來的，定義為人機交互。如果站在整個產品設計的角度來說，包括前期的設計調查研究，需求分析，角色建模，競爭對手分析，用戶行為分析，信息架構，原型設計，可用性測試等等，並從「目標導向」的角度解決產品設計，經常在商業與體驗、Boss與用戶、開發與設計等各種對象之間尋找平衡，更多側重思考，最終提供最合適的解決方案呈現給用戶。

由於交互設計的KPI的體現短時間是看不到的，所以一般產品創業團隊上線後，有了用戶活躍度才需要交互設計師，也就是我們常說的用戶體驗（用戶通過使用產品／服務形成的純主觀的心理感受），是精神層面的上層需求，只有滿足了基層需求後才能體現精神層面的好。

簡單來說，交互設計有兩個核心：行為路徑的設計；用戶反饋。這裡主要聊下實現前者的步驟，並可適時結合運用到這次改版中。

梳理業務邏輯以及產品需求文檔

理清業務邏輯是交互設計的第一步，你必須得擁有非常清晰的邏輯思維，因為某些產品往往伴隨著海量的功能、大量的模塊、錯綜複雜的交互流程以及難以理解的業務技術背景，這些都是對設計師邏輯思維的一個挑戰。

一些快速梳理業務邏輯和功能文檔的心得：

1. 當我們拿到PRD時先快速閱讀一遍，快速閱讀的目的是讓你大概了解客戶的需求和業務邏輯，在你心中形成一個模糊的需求模型，這樣會提高你的效率。
2. 準備一張紙和一支筆，把客戶的業務流程一步一步地畫下來，在畫業務流程的時候多問產品和自己幾個為什麼，為什麼客戶會有這樣的需求？產生需求的場景是什麼？為什麼會出現這樣的問題？問題的概率大嗎？等等（如有條件可做客戶調研，做出用戶畫像）。問題弄明白後，把問題和問題的答案一併記錄n 到對應的流程節點上。畫完一遍後整個業務邏輯也就弄懂了。
3. 把自己想成一個真實的用戶，帶著需求和場景去回憶整個業務流程。

確定核心任務並確定任務優先順序

在講核心任務前，先用一張圖來闡述用戶需求的實現過程（如下圖）。

如上圖，任務是由設計師為了滿足用戶需求所設計出來的，用戶要想實現他的需求就得去完成產品為他所設計的任務，這就好比在遊戲中做任務一樣，你只有完成了遊戲任務你才能得到遊戲的獎勵和升級。對於某項任務來講又需要具體的行為去完成它，這就形成了任務的操作流程。需求、任務、行為這三者之間就形成了n行為驅動任務，多項任務去實現用戶需求的關係。

那什麼又是核心任務呢？對一個產品來說，大量最終用戶希望通過這個產品去完成的任務被稱為核心任務；對一個功能模塊來講，大量用戶會經常使用某些功能去完成的任務稱為核心任務。

為什麼需要確定核心任務？核心任務是大部分用戶大部分時間使用產品完成的任務，這正是為用戶帶來驚喜，為他們創n建良好體驗的絕佳機會，用戶在使用產品的過程中對核心任務的期望會越來越高。通過了解用戶的核心任務，你會更容易地去改進產品，對所需資源按優先度排序，n把資源和時間投到核心任務上去，而不是花大量時間去改進那些用戶不經常使用的功能。

如何確定核心任務？由於核心任務會隨著用戶需求的改變而改變，而用戶需求又會隨著目標用戶的變化而變化，所以說n你首先得弄明白自己產品最終用戶群體的類型。在確定了目標用戶群體後，確定用戶需求（前面已確認過）後你就很清楚這個功能模塊中用戶經常使用的功能是什麼，他們在使用這些功能時的痛點是什麼。如果你是在改進一款現有的產品，不要閉門造車YY用戶的需求，找幾個實際使用的用戶做個簡單的調研，這樣很快就可以確定用戶的實際需求所在。接下來就是根據需求去確定核心任務，要永遠記住任務是為了完成用戶的需n求，它看起來很像在描述一個產品的功能。舉一個簡單的例子，用戶的需求是希望能和好友一起聽歌，我們設計出來的任務可能就是「分享一首歌給好友並同步播 放」、「查看好友的歌單並一起聽歌」

設計任務流程圖

任務流程圖是由用戶目標作為導向來設計的，它描述的是用戶實現某一目標所需要完成的任務，這些任務彼此間按照先後順序和條件連成一條線，這樣就形成n了任務流程圖。舉一個最簡單的購物流程，我的目標是購買一件男士羽絨服，我需要完成的任務如下：登陸網站—尋找男士羽絨服—確定購買對象—選擇物品參數— 加入購物車—結算—付款。設計任務流程時要不斷思考和嘗試如何讓用戶完成更少的任務去實現它的需求。在實際工作中，這部分工作通常由PM完成，或者是UE配合PM完成。

設計行為流程圖

行為流程圖是完成某項任務所需要進行的具體操作。上面的的購物流程中每項任務都對應著具體的行為流程，拿結算來講，用戶會經過如下的這些操作：

和同行交流中發現很多人並沒有任務流程和行為流程的概念，會把他們混為一談一起去設計，個人認為這樣是不好的，因為對於架構非常複雜的產品來講，一起設計會使你的思維在整體流程與具體行為之間不斷地跳躍，思路會變得很亂，設計出來的流程可能會是相當複雜的。

交互邏輯的完善

在用戶完成某項任務的時候，不同場景下不同的選擇或操作會帶來不同的交互反饋和結果，這個過程中，我們就需要去完善這些交互邏輯。以下是我在完善交互邏輯時經常考慮的方面：

1.是非條件的判斷：

是非條件是交互流程中最常見的一種條件判定，大家應該都懂的，還是舉京東付款的例子，點擊結算了會判斷你是否有默認的收貨地址，如果沒有就得添加，如果有就默認選擇。

2.網路信號

大家可能會認為網路信號不就是在沒有網路的時候給用戶一個提示嘛，沒有什麼好注意和設計的。非也，在沒網時一個好的處理方式會給用戶帶來意想不到的n驚喜，在這個設計上被微信感動過，微信在沒有網路時依然能發朋友圈，而且會記住你發布的時間，在有網路時系統自動幫你按照之前的時間戳發布出去。想想，如n果這裡我們只是做簡單的處理，沒有網路時就不能發朋友圈，用戶會有什麼樣的感受呢？還有，對於工具型產品，斷網情況下的處理方式是非常重要的。比如說你正n在填寫一個表單，這個時候網路斷了，該怎麼辦呢？

3.任務中斷

這種情況是經常會遇見的交互場景，上面說的網路中斷也可能導致任務中斷的發生。任務中斷可能由外部不可抗力因素或者自身需求改變等引起，在任務中斷n時我們需要去判斷中斷任務的原因並給出相應的反饋，舉一個點外賣的例子，在餓了么點外賣時我到付款這一步時突然覺得菜點錯了想重新選擇一下，於是我放棄了n付款，然後返回到了訂單詳情頁面，再次點擊返回就回到了首頁，這時我會很迷茫，為啥就回到首頁了呢，我又得重新去尋找一遍餐廳，同樣的情況，百度和美團取n消付款後在訂單頁面點擊返回時則是回到了之前所選的店家頁面。

4.需求改變

在用戶執行任務的時候需求可能會發生改變，這種情況在工具型產品中很常見，舉個例子，下面為某BI工具的數據配置界面，我本來想做一個多種線型的組 合圖（數據配置界面如圖1），做著做著我想切換成餅圖（數據配置界面如圖2），最後我又想再切換為組合圖。餅圖和組合圖的數據配置方式是有一些區別的，在n它們之間相互切換時，數據的放置會發生怎樣的變化呢，再切換回來的時候是否與之前的保持一致？

圖一

圖二

5.交互邏輯之間的衝突

這種情況在架構複雜的產品中是很常見的，你在前面為某一任務定下的交互邏輯可能會與後面某一任務的交互邏輯發生衝突，這一點我就不舉例說明了。對於這一問題，不斷去完善團隊的設計規範可以有效的避免這些問題的發生

設計屏幕流程圖

行為流程圖設計完後，這個過程就是根據行為流程圖去設計具體的屏幕流，具體的方法如下：

逐一從行為流程圖中去提取屏幕，梳理每個流程節點，列舉這個節點上應該具有的支撐信息，去判斷這些信息出現的情景和方式從而確定界面的形式，把每個節點確定後，將他們串成線就成為了屏幕流程圖。以下是京東付款流程的一個實例。

如上圖，拿是否有收貨信息這個節點來舉例，用戶進入購物車點擊結算後首先得判斷是否有收貨信息，如果有就得讓用戶去選擇收貨地址，如果沒有就得讓用n戶去添加。收貨信息包含：「收貨人、收貨地址、聯繫方式、備用聯繫方式、郵箱」，這些信息是用來支撐整個付款流程的，但它又不是每次都需要填寫，它屬於整 個付款流程的子任務，如果說讓用戶到另一個頁面去完成這個任務這樣可能會打斷用戶的行為流，頁面間的跳轉可能會讓用戶搞不清楚自己所處的狀態，所以把填寫n收貨信息做成一個彈窗式的表單為好。通過這樣分析後，就確定了「是否有收貨信息」這個節點的界面出現的情景和形式。

界面原型設計

這一步就是對每一個屏幕做具體的界面設計了，做界面原型設計時最重要的就是把握住具體平台的設計規範以及一些通用的設計原則和自己團隊所定下的設計n規範。這裡我就不多講具體的設計規範和原則了，一方面去熟讀各大平台的設計規範，另一方面在實際的工作中多去總結。以下為界面設計時需要注意的問題：

• 你是否遵循了設計規範？
• 界面是否具有層次感？
• 這個界面上，你最想讓用戶幹什麼？
• 在用戶操作之前你如何讓他明白操作之後會發生什麼？
• 邊緣和角落是否被有意識地放置著交互元素？
• 錯誤信息的反饋應該以怎樣的形式？
• 與其他類似功能是否保持了交互的統一性？
• 解析度的變化對界面造成的影響是什麼？
• 這個圖標的寓意合理嗎？
• 內容是否出現在了該出現的時機與地方？
• 在這個界面上，用戶是否清楚知道他當前的狀態？
• 是否給用戶提供更高級的觸發器方便用戶快捷操作？
• 這裡是否應該有一個動效讓界面變得更加優雅？
• 文案設計是否合理？
• 該怎麼預防用戶犯錯？

界面間具體交互方式的確定

在完成界面原型設計後我們就需要確定界面間具體的交互方式了，它描述的就是用戶向界面上某一監聽區域所發出的指令，在用戶發出指令後界面會出現什麼n樣的反饋，這些反饋出現後用戶怎麼繼續執行任務。在確定交互方式時我們需要特別注意的就是遵循各大平台的設計規範以及用戶的行為習慣。拿IOS來舉例，下 圖為IOS的標準手勢（來自iOS設計規範）

不要給標準手勢賦予不同的行為

除非你的應用是遊戲，否則重新定義標準手勢會使用戶迷惑，且增加使用難度。

不要創建和標準手勢功能相似的手勢操作

用戶已經習慣了標準手勢的行為，沒有必要讓用戶學習達到同樣效果的不同操作。

可以用複雜手勢作為完成某任務的快捷方式，但不能是唯一觸達方式

最好給用戶提供一些簡單、直接的方式完成某操作，即使這種方法需要額外的動作。簡單的手勢能讓用戶集中於當前的體驗和內容，而不是交互操作本身。

除非是遊戲，否則避免定義新的手勢

在遊戲或其他沉浸式的應用中，操作手勢也是有趣體驗的一部分。但是在普通應用中，幫助用戶達成目標要比操作本身重要的多，所以最好使用標準手勢，盡量避免讓用戶去發掘和記憶新的操作。

在特定的環境中，可以考慮使用多指操作

雖然複雜的操作並不一定適用於所有應用，但對用戶會花大量時間使用的應用來說可以豐富體驗，例如遊戲或創建內容環境。但因為非標準手勢可發現性差，要盡量少用，並且不要讓這類手勢成為完成任務的唯一方式

細節設計

在做完界面原型設計後整個設計過程基本完成了，接下來為了讓產品的體驗變得更加優雅，我們需要去進行一些微交互上的設計，比如說一些界面載入動畫、頁面跳轉方式、出錯提示、頁面過渡效果等等。這個過程也是非常重要的，好的細節設計會讓你的產品上升幾個層次。

舉一個百度地圖的例子

上圖是百度地圖搜索結果頁面的展示方式，搜索結果分為地圖標記點和具體信息條目出現在同一個屏幕上，這裡用戶可能存在兩種需求，一種是優先查看地圖n標記點，一種是優先查看具體條目，我通常時兩者間相互切換查看。這兩者間轉換的具體交互方式如圖所示，向上滑動搜索結果面板時，搜索結果面板和頂部 Navigation Bar拼接成為另一個頁面。向下滑動搜索麵板時，搜索結果的條目被收起，只向用戶展示標記點地圖。這種頁面間的轉場方式相比之前很好地降低了兩種不同展現n形式之間的隔閡。

可交互原型製作

交互設計最重要的產出物是交互原型，想法和思考都有原型來承載，從而定義用戶與產品交互的行為。最後一步就是製作可交互的原型了，它更像一門純技能的活，這裡不多講了，扒一扒平時使用的原型工具，「Axure、Justinmind、sketch、墨刀、AE、PS、AI」等等。結合軟體性格、個人習慣選擇最適合的軟體，來展示你的思維、邏輯、想法與觀點。

交互設計的具體流程先談到這裡，當然接下來還會有可用性測試、收集用戶反饋等等。總之交互設計師即需要有從用戶需求到產品功能的建模能力，也需要細膩的思維在細節上去琢磨用戶微妙的心理感受，需要有強邏輯思維、了解心理學等等。

文章整合參考地址：十步交互設計方法