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

Updated definitions, examples and free resources

交互术语：任务流程，用户流程、流程表和一些新术语

更新的定义，示例和免费资源

UX has a long list of terms and deliverables. The list is even more apparent when viewing job descriptions 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有很多术语和可交付的成果。在查看职位描述时，那些看起来在完整的UX术语列表，这个列表更加明显。 因为这些可交付成果已经发展并且许多术语重叠，我认为现在是重新审视的时候了。

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.

细分任务流程分析和用户流程是我听了很多年的术语。 我决定找出他们的“官方”定义。 但是，一阵敏捷地谷歌搜索后显示，现有的用户体验词汇表没有定义这些术语。

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.

无论哪种情况，流程都描绘了转变发展。 设计人员需要考虑用户如何浏览网站或应用程序。 创建任何这些流程将有助于设计师考虑用户在访问特定页面之前和之后会发生什么，并关注什么是重要的。除了是创建工作原型的第一步之外，流程还可以帮助开发人员了解不同状态应该如何运行。

Flowcharts

流程图

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

流程图是复杂系统或活动中,在其涉及人员和事物的动作或动作顺序的示意图。

Task Flow vs User Flow

任务流VS用户流

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:

任务流和用户流没有那么不同。 两者的目标都是优化用户以最少的阻力完成任务的能力。 在功能开发之前，它们都可以帮助你充分思考设计。 如果你想要细化，可以将它们定义为：

Task Flow

任务流程

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.

任务流是所有用户针对特定操作相似地完成的单个流程。例如：注册。 任务流有一个单一的流程，它们不会分支出来。

User Flow

用户流程

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.

用户流是用户在应用程序中遵循的路径。 我喜欢将它们视为迷你用户之旅。 流程不一定是线性的，它可以在非线性路径中分支出来。 通过确定此路径，你可以看到通过路线转向的可能性，并可以优化用户体验。

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.

用户流程可以从简单开始，帮助确定“红色路线” —— 关键用户旅程。 当涉及许多条件和要求时，这些可以很容易地演变成复杂的流程。 在构建产品之前，用户流程有助于推敲复杂的流程。

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

设计用户流程可以为用户和业务带来更好的结果

UI Flows

UI流程

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

37 Signals 有一个用户流的简述。 他们认为用户流有以下问题：

·Flows are hard to communicate during the design process.

在设计过程中，流程很难沟通。

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

绘制流的每个状态都非常耗时。

·And drawings become instantly outdated as screens change.

随着屏幕的变化，图纸会立即过时。

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流程。 它们是一种快速入门的方式，在紧迫的时候可能适合你的需求。

Wireflows

Simplified Checkout Process by Michael Pons from PG

来自PG的Michael Pons的简化结账流程

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.

多年来，我不得不创建流程图来交流互动。但为了提供更多的情境，我的流程图已经逐渐变成包含了线框图的图表。 NNgroup最近创造了Wireflows一词，以呈现这一新的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是一种设计规范格式，它将线框式页面布局设计与表示交互的简化流程图方式相结合。 - 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.

仅靠线框是不够的。 线框传达布局和静态内容，但不传达交互。 流程图确实详细介绍了交互，但它们忽略了用户背景。 Wireflows有助于记录复杂的交互，当内容或布局在几页纸上发生变化时。

Elements of a Wireflow

Wireflow的元素

·Entries and Exits

入口和出口

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

脚步。 例如：用户操作，系统操作，替代路径

·Connections: Indicate the desired path and different possible flows

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

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

决策点：用户必须从2个或更多选项中进行选择的点

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.

这是一个精心设计的Sketch用户流程工具包，可帮助你快速轻松地创建简单的站点地图。

包括箭头在内的所有元素都是可扩展的，完全可定制。

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.

这是一个流程图工具包，用于显示Web项目页面之间的交互。 你可以使用此工具包添加箭头，图标，自定义您自己的页面，甚至可以构建准确的站点地图。

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的用户流程图模板将帮助您轻松制作精美的图表！ 为方便起见，所有块和箭头都是Sketch符号。

来自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有几个用于创建流程图的插件。 快速浏览后，我发现AEFlowcharts是最容易使用的。

See it in action on Vimeo.

在Vimeo查看。

小彩蛋：感谢你阅读到文章的最后，获取更多国外优秀设计第一手资讯，请关注微信公众号：包你嗨设计英语学习社区