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

1. 流程設(shè)計是什么

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

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

2. 流程設(shè)計怎么做

2.1 理解業(yè)務(wù)需求，明確核心功能主線

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

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

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

接觸點來自于用戶場景（基于用戶模型、經(jīng)驗，用戶調(diào)研的體驗故事）。設(shè)計師要擁有用戶場景的構(gòu)思能力，根據(jù)用戶畫像，思考所有可能出現(xiàn)的場景?；蛘呋谧约旱慕?jīng)驗創(chuàng)建之前不存在的場景，在腦子里模擬出來并把它記錄下來。

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

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

注意：

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

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

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

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

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

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

簡言之，流程設(shè)計就是在理解業(yè)務(wù)需求的基礎(chǔ)上，構(gòu)思用戶使用一個功能或完成一個任務(wù)的場景，找到所有接觸點，再對接觸點進行梳理，考慮各種狀態(tài)，將接觸點串聯(lián)起來，完成頁面流程圖的設(shè)計。

3. 如何根據(jù)流程設(shè)計交互原型

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

注意：

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

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

4. 處理異常流程

為了保證流程設(shè)計的全面性，需要預(yù)判用戶或系統(tǒng)可能出現(xiàn)的錯誤。

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

必須考慮的異常流程：

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

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

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

5. 總結(jié)

中篇所講的信息架構(gòu)關(guān)注產(chǎn)品的全局性，考慮將多條流程整合在一起；本篇流程設(shè)計關(guān)注每一條流程的合理性，幫助用戶更好更快的完成任務(wù)。

流程設(shè)計步驟可歸納為：

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

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