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

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

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

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

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

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

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

2.2 細(xì)化場景，尋找所有接觸點(diǎn)

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

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

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

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

注意：

• Tip1: 合并同類項(xiàng)，為了完成流程設(shè)計(jì)，需要構(gòu)建的用戶場景有多個(gè)，但有些接觸點(diǎn)是重復(fù)的；
• Tip2: 顧及頭尾，考慮第一個(gè)和最后一個(gè)接觸點(diǎn)，因?yàn)樗麄兪亲钊菀妆贿z漏的接觸點(diǎn)；

2.3 梳理接觸點(diǎn)，制作流程圖

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

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

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

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

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

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

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

注意：

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

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

4. 處理異常流程

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

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

必須考慮的異常流程：

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

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

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

5. 總結(jié)

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

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

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

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