自译外文 分类: 规范/资料 版权: 原作者: Naema Baskanderi
855 5 2 0

Image title

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.

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



Image title

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


Image title

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


Image title

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


Image title

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


·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




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


UI Kits


Image title

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.



Image title

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项目页面之间的交互。 你可以使用此工具包添加箭头,图标,自定义您自己的页面,甚至可以构建准确的站点地图。

Image title

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


Image title

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.



Image title


视觉设计师 交互设计师





视觉设计师 交互设计师


京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2018 UI.CN