優秀的流程設計不僅能幫助用戶更好的完成任務，還能幫助設計師更充分的思考錯誤，本文從定義出發，深入淺出地闡述流程設計的步驟及交互原型的畫法。

1. 流程設計是什么

流程設計既要兼顧業務需求，也要兼顧用戶需求，是以不干擾用戶使用流程的方式完成業務需求。

交互設計師輸出的雖然是頁面，但實際是設計用戶完成任務的方式。頁面流程圖展示的是頁面之間的跳轉關系，明確用戶當前的所處狀態，及下一步的操作。用戶通過某種流程完成任務，舉個簡單的例子，支付寶轉賬主要流程如圖所示，這是最簡單且正常情況下的流程。

2. 流程設計怎么做

2.1 理解業務需求，明確核心功能主線

工作中，交互設計師接到需求后，首先要進行需求分析，充分理解業務需求和功能邏輯，根據業務流程梳理出主要的頁面流程。此時需要考慮業務目標是什么，受到哪些技術限制，輸出的設計才能被公司和用戶接受。

2.2 細化場景，尋找所有接觸點

任務與流程是一對多的關系，用戶完成同一個任務可能通過不同的流程。所以需要找到用戶完成任務時的所有接觸點。接觸點是用戶和產品發生交互的關鍵點，比如用戶點擊了轉賬按鈕，就是一個接觸點。

接觸點來自于用戶場景（基于用戶模型、經驗，用戶調研的體驗故事）。設計師要擁有用戶場景的構思能力，根據用戶畫像，思考所有可能出現的場景?；蛘呋谧约旱慕涷瀯摻ㄖ安淮嬖诘膱鼍?，在腦子里模擬出來并把它記錄下來。

在用戶場景中，通過接觸點的模式找出用戶看到的信息和所做的事情。

如圖所示為轉賬流程中的接觸點。用戶完成轉賬這一任務，可能經過不同的流程，如點擊首頁轉賬按鈕/ 朋友頁面手指向下滑動，可以觸發找人轉賬的提示 / 聊天界面輸入數字也可以觸發給對方轉賬的提示等等。

注意：

• Tip1: 合并同類項，為了完成流程設計，需要構建的用戶場景有多個，但有些接觸點是重復的；
• Tip2: 顧及頭尾，考慮第一個和最后一個接觸點，因為他們是最容易被遺漏的接觸點；

2.3 梳理接觸點，制作流程圖

接觸點指用戶做了某件事或看到某個信息，梳理接觸點有以下三種模式：

• 模式一：做事-看信息-做事 ?是最舒服的模式，能對用戶起到良好的引導作用；
• 模式二：做事-做事 ?用于用戶經驗足以支撐的場景下，如輸入賬號-輸入密碼
• 模式三：看信息-看信息 ?用于信息量大，需要用戶理解的場景；如看淘寶促銷活動大致流程-具體參與規則

利用三種模式將接觸點串聯起來，明確每個頁面的核心元素，理清頁面之間的邏輯關系，也就是頁面的來源和去處。

一個轉賬流程如圖所示，由于用戶場景不同，流程會出現分支，所以梳理接觸點時考慮清楚，哪些是需要判斷的關鍵節點，將接觸點串聯起來。

簡言之，流程設計就是在理解業務需求的基礎上，構思用戶使用一個功能或完成一個任務的場景，找到所有接觸點，再對接觸點進行梳理，考慮各種狀態，將接觸點串聯起來，完成頁面流程圖的設計。

3. 如何根據流程設計交互原型

在交互稿上體現用戶操作流程，通過觸發點的虛擬表示和箭頭，把頁面橫向串聯起來，展示用戶一步一步完成任務會發生怎樣的頁面跳轉和操作行為。如圖所示，通過紅色點擊區和箭頭展示用戶的操作步驟。

注意：

• Tip1：如果流程出現分支時，不要制作在一個頁面中，這樣會使交互稿的可讀性變低，更好的做法是體現在站點對圖上，通過站點地圖拆分子流程。保證每個頁面是一條流程走到底的，遇到較長流程分支時可以建立跳轉，鏈接到子頁面。

• Tip2：注意前后頁面的關聯性和一致性，如當前頁面的button和下一頁面的title要一致。
• Tip3：完成交互稿后，對照接觸點流程檢查一遍交互，確認每個接觸點的過度是自然的。提供完成一個接觸點所需要的全部信息。

4. 處理異常流程

為了保證流程設計的全面性，需要預判用戶或系統可能出現的錯誤。

交互稿中，異常頁面位于正常頁面的下方，橫向是正常流程，縱向是異常流程補充，需要開發和測試注意的，處理這個頁面的一些異常情況。

必須考慮的異常流程：

1. 用戶網絡故障/服務器資源不足時，不要造成不可挽回的損失，設置自動保存機制；
2. 預判用戶可能出現的錯誤（錯誤的點擊），對于造成重大損失的按鈕，提供二次確認的對話框；

處理異常流程的方式：Toast和Alert

• Toast：提示文字少，出現2秒左右會自動消失。用于輕提示，馬上可以重試的；
• Alert：提示文字較多，有按鈕，需要用戶確認。用于業務的確認，當業務邏輯比較復雜時，用戶的操作存在違規或者造成重大損失，用Alert提示。

5. 總結

中篇所講的信息架構關注產品的全局性，考慮將多條流程整合在一起；本篇流程設計關注每一條流程的合理性，幫助用戶更好更快的完成任務。

流程設計步驟可歸納為：

1. 理解業務需求，明確核心功能主線；
2. 細化場景，尋找所有接觸點；
3. 梳理接觸點，制作流程圖；

然后根據流程圖設計交互稿，注重流程設計的全面性，思考異常流程的處理。