UX Glossary: Task Flows, User Flows, Flowcharts and some new-ish stuff

Updated definitions, examples and free resources

交互術(shù)語(yǔ)：任務(wù)流程，用戶(hù)流程、流程表和一些新術(shù)語(yǔ)

更新的定義，示例和免費(fèi)資源

UX has a long list of terms and deliverables. The list is even more apparent when viewing job des criptions that seem to throw in the full UX glossary of terms. Factor in that these deliverables have been evolving and many terms overlapping, I thought it was time to revisit.

UX有很多術(shù)語(yǔ)和可交付的成果。在查看職位描述時(shí)，那些看起來(lái)在完整的UX術(shù)語(yǔ)列表，這個(gè)列表更加明顯。 因?yàn)檫@些可交付成果已經(jīng)發(fā)展并且許多術(shù)語(yǔ)重疊，我認(rèn)為現(xiàn)在是重新審視的時(shí)候了。

Break it down

分解

Task Flow Analysis and User Flows are terms I have heard for years. I decided to find out their ‘official’ definitions. However, a quick google search revealed that existing UX glossaries didn’t have these terms defined.

細(xì)分任務(wù)流程分析和用戶(hù)流程是我聽(tīng)了很多年的術(shù)語(yǔ)。 我決定找出他們的“官方”定義。 但是，一陣敏捷地谷歌搜索后顯示，現(xiàn)有的用戶(hù)體驗(yàn)詞匯表沒(méi)有定義這些術(shù)語(yǔ)。

In either case, flow depicts movement. Designers need to consider how the user will navigate through the website or app. Creating any of these flows will help the designer think about what happens to the user before & after they visit a particular page and focus on what is important. Besides being the first step towards creating a working prototype, flows can help developers understand how alternate states should work.

無(wú)論哪種情況，流程都描繪了轉(zhuǎn)變發(fā)展。 設(shè)計(jì)人員需要考慮用戶(hù)如何瀏覽網(wǎng)站或應(yīng)用程序。 創(chuàng)建任何這些流程將有助于設(shè)計(jì)師考慮用戶(hù)在訪(fǎng)問(wèn)特定頁(yè)面之前和之后會(huì)發(fā)生什么，并關(guān)注什么是重要的。除了是創(chuàng)建工作原型的第一步之外，流程還可以幫助開(kāi)發(fā)人員了解不同狀態(tài)應(yīng)該如何運(yùn)行。

Flowcharts

流程圖

Flowchart is a diagram of the sequence of movements or actions of people or things involved in a complex system or activity.

流程圖是復(fù)雜系統(tǒng)或活動(dòng)中,在其涉及人員和事物的動(dòng)作或動(dòng)作順序的示意圖。

Task Flow vs User Flow

任務(wù)流VS用戶(hù)流

Task flows and user flows are not that different. The goal of both is to optimize users ability to accomplish a task with the least amount of friction. They both help you think through the design before the feature is developed. If you want to get granular, you can define them as:

任務(wù)流和用戶(hù)流沒(méi)有那么不同。 兩者的目標(biāo)都是優(yōu)化用戶(hù)以最少的阻力完成任務(wù)的能力。 在功能開(kāi)發(fā)之前，它們都可以幫助你充分思考設(shè)計(jì)。 如果你想要細(xì)化，可以將它們定義為：

Task Flow

任務(wù)流程

Task flow is a single flow completed similarly by all users for a specific action. Ex. Sign Up. Task flows have a singular flow, they don’t branch out.

任務(wù)流是所有用戶(hù)針對(duì)特定操作相似地完成的單個(gè)流程。例如：注冊(cè)。 任務(wù)流有一個(gè)單一的流程，它們不會(huì)分支出來(lái)。

User Flow

用戶(hù)流程

User Flow is the path a user follows through an application. I like to think of them as mini user journeys. The flow doesn’t have to be linear, it can branch out in a non-linear path. By determining this path you can see possible turns through the route and can optimize the user experience.

用戶(hù)流是用戶(hù)在應(yīng)用程序中遵循的路徑。 我喜歡將它們視為迷你用戶(hù)之旅。 流程不一定是線(xiàn)性的，它可以在非線(xiàn)性路徑中分支出來(lái)。 通過(guò)確定此路徑，你可以看到通過(guò)路線(xiàn)轉(zhuǎn)向的可能性，并可以?xún)?yōu)化用戶(hù)體驗(yàn)。

User flows can start off simple and help determine ‘red routes’?—?key user journeys. These can easily evolve into complex flows when there are many conditions and requirements involved. User flows are helpful in hashing out complex flows before building out the product.

用戶(hù)流程可以從簡(jiǎn)單開(kāi)始，幫助確定“紅色路線(xiàn)” —— 關(guān)鍵用戶(hù)旅程。 當(dāng)涉及許多條件和要求時(shí)，這些可以很容易地演變成復(fù)雜的流程。 在構(gòu)建產(chǎn)品之前，用戶(hù)流程有助于推敲復(fù)雜的流程。

Designing user flows leads to better results for both the user and business?—?Morgan Brown

設(shè)計(jì)用戶(hù)流程可以為用戶(hù)和業(yè)務(wù)帶來(lái)更好的結(jié)果

UI Flows

UI流程

37 Signals has a shorthand for User Flows. They feel that user flows have the following issues:

37 Signals 有一個(gè)用戶(hù)流的簡(jiǎn)述。 他們認(rèn)為用戶(hù)流有以下問(wèn)題：

·Flows are hard to communicate during the design process.

在設(shè)計(jì)過(guò)程中，流程很難溝通。

·Drawing out every state of a flow is too time-consuming.

繪制流的每個(gè)狀態(tài)都非常耗時(shí)。

·And drawings become instantly outdated as screens change.

隨著屏幕的變化，圖紙會(huì)立即過(guò)時(shí)。

You may want to give UI flows a try. They are a quick way to get started and in a time crunch may suit your needs.

你可能想嘗試使用UI流程。 它們是一種快速入門(mén)的方式，在緊迫的時(shí)候可能適合你的需求。

Wireflows

Simplified Checkout Process by Michael Pons from PG

來(lái)自PG的Michael Pons的簡(jiǎn)化結(jié)賬流程

Over the years, I have had to create flowcharts to communicate interactions. To give more context, my flowcharts have morphed to include wireframes. NNgroup recently coined the term Wireflows to capture this new UX deliverable.

多年來(lái)，我不得不創(chuàng)建流程圖來(lái)交流互動(dòng)。但為了提供更多的情境，我的流程圖已經(jīng)逐漸變成包含了線(xiàn)框圖的圖表。 NNgroup最近創(chuàng)造了Wireflows一詞，以呈現(xiàn)這一新的UX可交付成果。

Definition: Wireflows are a design-specification format that combines wireframe-style page layout designs with a simplified flowchart-like way of representing interactions.?—?NNgroup

定義：Wireflow是一種設(shè)計(jì)規(guī)范格式，它將線(xiàn)框式頁(yè)面布局設(shè)計(jì)與表示交互的簡(jiǎn)化流程圖方式相結(jié)合。 - NNgroup

Wireframes alone are not enough. Wireframes communicate layout and static content but not interactions. Flowcharts do cover interactions in detail, but they leave out the user context. Wireflows help document complex interactions where the content or layout is changing on a few pages.

僅靠線(xiàn)框是不夠的。 線(xiàn)框傳達(dá)布局和靜態(tài)內(nèi)容，但不傳達(dá)交互。 流程圖確實(shí)詳細(xì)介紹了交互，但它們忽略了用戶(hù)背景。 Wireflows有助于記錄復(fù)雜的交互，當(dāng)內(nèi)容或布局在幾頁(yè)紙上發(fā)生變化時(shí)。

Elements of a Wireflow

Wireflow的元素

·Entries and Exits

入口和出口

·Steps. Ex: user action, system action, alternative path

腳步。 例如：用戶(hù)操作，系統(tǒng)操作，替代路徑

·Connections: Indicate the desired path and different possible flows

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

·Decision Points: a point where a user must choose from 2 or more options

決策點(diǎn)：用戶(hù)必須從2個(gè)或更多選項(xiàng)中進(jìn)行選擇的點(diǎn)

Resources

資源

Here are a few resources that will help you speed up your ux workflow.

以下是一些可以幫助您加快ux工作流程的資源。

UI Kits

UI套件

Flowchart Kit by Greg Dlubacz

This is a carefully crafted User flow kit for Sketch that helps creating simple sitemaps really fast and easy.

All the elements including arrows are scalable and fully customizable.

這是一個(gè)精心設(shè)計(jì)的Sketch用戶(hù)流程工具包，可幫助你快速輕松地創(chuàng)建簡(jiǎn)單的站點(diǎn)地圖。

包括箭頭在內(nèi)的所有元素都是可擴(kuò)展的，完全可定制。

Flowchart Kit by Arthur Guillermin Hazan

This is a flowchart kit made to show interactions between pages of a web project. You can add arrows, icons, custom your own pages, and even build accurate sitemap using this kit.

這是一個(gè)流程圖工具包，用于顯示W(wǎng)eb項(xiàng)目頁(yè)面之間的交互。 你可以使用此工具包添加箭頭，圖標(biāo)，自定義您自己的頁(yè)面，甚至可以構(gòu)建準(zhǔn)確的站點(diǎn)地圖。

User Flow Diagram Template by Jaros?aw Ceborski

This user flow diagram template for Sketch will help you make beautiful diagrams with ease! All blocks and arrows are Sketch symbols for your convenience.

13+ Productive UX Flowchart Templates from template.net

Sketch的用戶(hù)流程圖模板將幫助您輕松制作精美的圖表！ 為方便起見(jiàn)，所有塊和箭頭都是Sketch符號(hào)。

來(lái)自Template.net的13+ Productive UX流程圖模板

Sketch Plugins

sketch插件

AEFlowcharts by Marko Tadic

Sketch has several plugins for creating flowcharts. After a quick look, I found AEFlowcharts to be the easiest to use.

Sketch有幾個(gè)用于創(chuàng)建流程圖的插件。 快速瀏覽后，我發(fā)現(xiàn)AEFlowcharts是最容易使用的。

See it in action on Vimeo.

在Vimeo查看。

小彩蛋：感謝你閱讀到文章的最后，獲取更多國(guó)外優(yōu)秀設(shè)計(jì)第一手資訊，請(qǐng)關(guān)注微信公眾號(hào)：包你嗨設(shè)計(jì)英語(yǔ)學(xué)習(xí)社區(qū)