作為資深UI設(shè)計師要懂得UX術(shù)語

任務(wù)流和用戶流是多年來常聽到的用戶體驗術(shù)語。雖然我嘗試通過Google搜索等方式搜尋其“官方”權(quán)威定義，但結(jié)果卻是，現(xiàn)存的很多UX術(shù)語表并未集中過定義它們。

盡管如此，無論如何，這類“流”都是在描述Web或軟件的“運動”情況。設(shè)計師需要考慮如何設(shè)計和引導用戶瀏覽一個網(wǎng)站或軟件。創(chuàng)建這類網(wǎng)頁或軟件“流”能夠幫助設(shè)計師思考和預估用戶在瀏覽一個頁面之前或之后可能發(fā)生的情況，并集中處理其中重要的部分。而且，此外，作為創(chuàng)建可運行原型的第一步，這類“流”的設(shè)計也能夠幫助開發(fā)人員了解，軟件或網(wǎng)頁在交替狀態(tài)下是如何運作的。

流程圖

流程圖是一張展示一個復雜系統(tǒng)或活動中人或物動作或行為的順序圖。而，應(yīng)用到軟件或Web設(shè)計中，則表示一張展示用戶一系列頁面活動或行為的順序圖。

任務(wù)流與用戶流

任務(wù)流和用戶流并非完全不同。因為它們目的都是為了以最小的阻力，幫助用戶完成某項任務(wù)。它們都能夠幫助你在設(shè)計開發(fā)具體軟件或網(wǎng)頁功能之前，深思熟慮一些設(shè)計問題。如果你希望能夠更簡單具體地區(qū)分它們，也可以如此定義它們：

任務(wù)流

任務(wù)流是所有用戶為實現(xiàn)某特定操作所完成的單一流程，所有用戶所經(jīng)歷流程都是相似的，比如網(wǎng)頁或軟件注冊。任務(wù)流是一條單一的流程，毫無分支。

用戶流

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

用戶流可以非常簡單，僅用以幫助設(shè)計網(wǎng)頁或軟件的“紅色路徑”——即網(wǎng)頁或軟件主路徑。當涉及和添加更多相關(guān)條件和要求時，用戶流也可以變得極其的復雜。總之，在開發(fā)產(chǎn)品之前，用戶流可以幫助設(shè)計師和開發(fā)人員有效地分解復雜的流程，從而加深理解，提升工作效率。

Morgan Brown曾經(jīng)說過：

“用戶流設(shè)計可以為用戶和企業(yè)帶來更多實效。”

頁面流程圖

世界聞名的37 signals軟件公司曾對用戶流進行速記，并認為它們存在以下不足：

*在設(shè)計過程中，用戶流有時很難解釋并用以交流。

*繪制出流程細節(jié)，會非常費時。

*而且隨著界面設(shè)計的更迭變化，流程設(shè)計很快就不在適用。

雖然用戶流以及頁面流程圖之類“流”存在不足，你也可以在實際的Web或軟件中嘗試使用它們。因為作為一種Web或軟件設(shè)計的快速入門方式，它們能夠在時間有限的情況下，滿足你的設(shè)計需求。

而且，隨著設(shè)計需求的不斷變化，為方便設(shè)計師展示和交流其設(shè)計理念，一些原型工具，例如簡單快捷的Mockplus, 提供了專業(yè)的頁面流程圖功能。設(shè)計師一鍵點擊即可生成所需Web或軟件頁面流程圖，并根據(jù)設(shè)計需要設(shè)置其顏色，背景以及連接線，添加頁面?zhèn)渥⒁约皩С鰹閳D片等。能夠幫助設(shè)計師極大的提升設(shè)計和交流效率。

Wireflows

多年來，我通過創(chuàng)建流程圖來演示和交流Web或軟件中的交互設(shè)計。而且為了囊括更多的設(shè)計情景，這些流程圖已演變成包含線框圖的“流”設(shè)計。而全球知名的用戶體驗研究機構(gòu)Nielsen Norman Group最近提出了一個全新的術(shù)語“Wireflows”來描繪此類用戶體驗的可交付內(nèi)容。

Nielsen Norman Group這樣定義Wireflows：

Wireflows是一種結(jié)合了線框圖風格的頁面布局格式，采用了一種簡化的流程圖來展示W(wǎng)eb或軟件的各種交互設(shè)計。

只有線框圖是遠遠不夠的。因為線框圖常常僅僅展示W(wǎng)eb或軟件的頁面布局或靜態(tài)內(nèi)容，并未包含任何動態(tài)交互。而流程圖則囊括了Web或軟件的交互細節(jié)，但卻忽略了可能發(fā)生的應(yīng)用情景。而Wireflow則能夠幫助設(shè)計師存儲復雜的交互設(shè)計，并展示這些交互設(shè)計中變化的內(nèi)容和布局。

Wireflow元素

*入口和出口

*步驟：例如用戶操作，系統(tǒng)操作以及替代路徑

*連接：指示所需的路徑和可能的不同流程

*決策點：用戶必須從兩個或多個選項中選擇。

總結(jié)：

了解和預估這些“流”可能的應(yīng)用場景，能夠有效地優(yōu)化設(shè)計體驗。以上所描述的任何“流”都能夠幫助設(shè)計師更好的展示和交流各種設(shè)計理念，從而提高協(xié)作效率。

資源

以下是一些可以加速UX工作流設(shè)計的資源，希望能對你有所幫助：

界面工具包資源

*FREEBIE — Flowchart kit for Sketch

——來自Greg Dlubacz設(shè)計師的流程圖工具包

這是一個精心制作的Sketch流程圖工具包,可以幫助你輕松快捷的創(chuàng)建簡潔直觀的站點地圖。包含的所有元素，包括箭頭等，都是可編輯，可定制的。

*Flowchart Kit Sketch Resource

——來自 Arthur Guillermin Hazan設(shè)計師的流程圖工具包

這是一個展示了網(wǎng)頁界面之間交互設(shè)計的流程圖工具包。你可以使用它輕松地為你的界面添加箭頭以及圖標等元素，自定義你的界面，甚至在其幫助下創(chuàng)建更加精確的站點地圖。

*User Flow Diagram Template

——來自Jaros?aw Ceborski設(shè)計師的用戶流程圖模板

這個用戶用戶流程圖模板能夠幫助你簡單地制作美觀吸睛的圖表。其中包含的所有方塊和箭頭都是便于直接使用的Sketch符號。

*13+ Productive UX Flowchart Templates

——來自Template.net網(wǎng)頁的UX流程圖

Sketch插件資源

*Sketch plugin — AEFlowchart

——來自Marko Tadic的AEFlowcharts插件

Sketch提供了多種能夠幫助設(shè)計師常見Web或軟件流程圖的插件。而在簡單查看這些插件之后，小編發(fā)現(xiàn)，AEFlowcharts是所有這些插件中最易用的。