一、關(guān)于流程圖

什么是流程圖？

百度百科定義：以特定的圖形符號加上說明，表示算法的圖，稱為流程圖或框圖。流程圖是流經(jīng)一個系統(tǒng)的信息流、觀點(diǎn)流或部件流的圖形代表。在企業(yè)中，流程圖主要用來說明某一過程。這種過程既可以是生產(chǎn)線上的工藝流程，也可以是完成一項(xiàng)任務(wù)必需的管理過程。

簡單而言：流程圖是通過圖形來表示任務(wù)、算法、工藝等流程的操作過程~

二、交互流程圖

什么是交互設(shè)計中的流程圖？

總結(jié)網(wǎng)上各種設(shè)計文章，筆者總結(jié)了一下交互設(shè)計中涉及的流程圖有：任務(wù)流程圖、用戶流程圖、頁面流程圖。

2.1任務(wù)流程圖

交互設(shè)計很重要的一點(diǎn)：設(shè)計用戶完成任務(wù)的方式。而任務(wù)流程圖就是通過圖形來表示用戶完成一個任務(wù)的操作流程。任務(wù)流程圖的繪制要遵循一些規(guī)則，不同的圖形代表不同的意思，主要的圖形以及意思如下（圖片來自網(wǎng)絡(luò)）。

以美團(tuán)點(diǎn)外賣下單和付款簡單為例：整個流程主要是結(jié)算、填寫收貨地址、確認(rèn)訂單、提交訂單、選擇支付方式、支付、成功支付，這一系列操作可以通過以下的流程圖形式表示。但值得注意的是，這只是一張簡版流程圖，整個流程并沒有這么簡單的：如選擇支付方式就有美團(tuán)支付、微信支付、支付寶支付等多種支付方式，在工作流程中都是需要畫的；另外繪制流程要異常流程考慮進(jìn)去，一般先考慮正常流程，然后補(bǔ)充異常流程。

2.2頁面流程圖

頁面流程圖描述了用戶完成一個任務(wù)需要經(jīng)過哪些頁面，經(jīng)過什么操作，去到哪里。通過頁面+接觸點(diǎn)+連接線表示。

怎么區(qū)分任務(wù)流和頁面流呢？

很簡單，以登錄任務(wù)為例，任務(wù)流有：輸入賬號、輸入密碼、提交、登錄成功提示4步操作（不考慮忘記密碼這些情況）。而頁面流只有：登錄頁面和登錄成功后頁面2個頁面。

以美團(tuán)點(diǎn)外賣下單和付款簡單為例繪制頁面流程圖（這里默認(rèn)地址沒有更改的情況）

2.3用戶流程圖

設(shè)計師Naema Baskanderi在自己的文章中如此定義用戶流：用戶流是用戶所遵循的軟件或網(wǎng)頁執(zhí)行路徑?？梢砸曌魇怯脩粼跒g覽軟件或網(wǎng)頁所經(jīng)歷的一個個迷你旅程。用戶流不一定是線性的，還可以有分支。通過定義或設(shè)計軟件或網(wǎng)頁路徑，你能夠發(fā)現(xiàn)其中可能的轉(zhuǎn)變點(diǎn)和提升點(diǎn)，從而優(yōu)化用戶體驗(yàn)。

設(shè)計師Aaron Brako提出用戶流的繪制可以遵循一個原則：“用戶看到什么”而不是“用戶做什么”。在筆者看來，用戶流像是頁面+操作的形式hhh

用戶流程圖：來自Aaron Brako設(shè)計師Recall項(xiàng)目（鏈接放評論）

三、總結(jié)

筆者以為，在交互設(shè)計中要把任務(wù)流、頁面流和用戶流結(jié)合使用才能在團(tuán)隊中更好的協(xié)作，單一使用都不可避免的出現(xiàn)問題。比如登錄流程的操作涉及：輸入賬號、輸入密碼、提交、登錄成功提示4步操作，常規(guī)的前三步操作是一個頁面；但是也有些產(chǎn)品一個操作一個頁面，如果沒有對應(yīng)的頁面流，可能就會出錯。當(dāng)然也有一種解決方案是將任務(wù)流設(shè)計輸入賬號和密碼不分開。