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

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

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

流程圖

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

任務(wù)流與用戶流

任務(wù)流和用戶流并非完全不同。因?yàn)樗鼈兡康亩际菫榱艘宰钚〉淖枇Γ瑤椭脩敉瓿赡稠?xiàng)任務(wù)。它們都能夠幫助你在設(shè)計(jì)開發(fā)具體軟件或網(wǎng)頁功能之前，深思熟慮一些設(shè)計(jì)問題。如果你希望能夠更簡單具體地區(qū)分它們，也可以如此定義它們：

任務(wù)流

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

用戶流

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

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

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

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

頁面流程圖

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

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

*繪制出流程細(xì)節(jié)，會非常費(fèi)時(shí)。

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

雖然用戶流以及頁面流程圖之類“流”存在不足，你也可以在實(shí)際的Web或軟件中嘗試使用它們。因?yàn)樽鳛橐环NWeb或軟件設(shè)計(jì)的快速入門方式，它們能夠在時(shí)間有限的情況下，滿足你的設(shè)計(jì)需求。

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

Wireflows

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

Nielsen Norman Group這樣定義Wireflows：

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

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

Wireflow元素

*入口和出口

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

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

*決策點(diǎn)：用戶必須從兩個(gè)或多個(gè)選項(xiàng)中選擇。

總結(jié)：

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

資源

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

界面工具包資源

*FREEBIE — Flowchart kit for Sketch

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

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

*Flowchart Kit Sketch Resource

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

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

*User Flow Diagram Template

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

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

*13+ Productive UX Flowchart Templates

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

Sketch插件資源

*Sketch plugin — AEFlowchart

——來自Marko Tadic的AEFlowcharts插件

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