UX术语详解：任务流，用户流，流程图以及其它全新术语

如下内容由Mockplus（摹客）团队翻译整理，仅供学习交流，Mockplus是更快更简单的原型设计工具。

 

用户体验拥有一长串专业的术语和可交付内容。当在线查看UX相关职位描述时，所罗列的这类术语更是全面繁多。并且，随着时间的流逝和它们自身的不断演变，其中很大一部分甚至出现了定义上的重复和交叠。因此，为方便设计师，Web/app开发者以及用户等更加简单的理解这些术语和可交付内容，我认为是时候该从新整理和定义它们了。

打破它

任务流和用户流是多年来常听到的用户体验术语。虽然我尝试经过Google搜索等方式搜寻其“官方”权威定义，但结果倒是，现存的不少UX术语表并未集中过定义它们。

尽管如此，不管如何，这类“流”都是在描述Web或软件的“运动”状况。设计师须要考虑如何设计和引导用户浏览一个网站或软件。建立这类网页或软件“流”可以帮助设计师思考和预估用户在浏览一个页面以前或以后可能发生的状况，并集中处理其中重要的部分。并且，此外，做为建立可运行原型的第一步，这类“流”的设计也可以帮助开发人员了解，软件或网页在交替状态下是如何运做的。

流程图

流程图是一张展现一个复杂系统或活动中人或物动做或行为的顺序图。而，应用到软件或Web设计中，则表示一张展现用户一系列页面活动或行为的顺序图。

任务流与用户流

任务流和用户流并不是彻底不一样。由于它们目的都是为了以最小的阻力，帮助用户完成某项任务。它们都可以帮助你在设计开发具体软件或网页功能以前，深思熟虑一些设计问题。若是你但愿可以更简单具体地区分它们，也能够如此定义它们：

任务流

任务流是全部用户为实现某特定操做所完成的单一流程，全部用户所经历流程都是类似的，好比网页或软件注册。任务流是一条单一的流程，毫无分支。

用户流

用户流则是用户所遵循的软件或网页执行路径。能够视做是用户在浏览软件或网页所经历的一个个迷你旅程。用户流不必定是线性的，还能够有分支。经过定义或设计软件或网页路径，你可以发现其中可能的转变点和提高点，从而优化用户体验。

用户流能够很是简单，仅用以帮助设计网页或软件的“红色路径”——即网页或软件主路径。当涉及和添加更多相关条件和要求时，用户流也能够变得极其的复杂。总之，在开发产品以前，用户流能够帮助设计师和开发人员有效地分解复杂的流程，从而加深理解，提高工做效率。

Morgan Brown曾经说过：

“用户流设计能够为用户和企业带来更多实效。”

页面流程图

世界闻名的37 signals软件公司曾对用户流进行速记，并认为它们存在如下不足：

*在设计过程当中，用户流有时很难解释并用以交流。

*绘制出流程细节，会很是费时。

*并且随着界面设计的更迭变化，流程设计很快就不在适用。

虽然用户流以及页面流程图之类“流”存在不足，你也能够在实际的Web或软件中尝试使用它们。由于做为一种Web或软件设计的快速入门方式，它们可以在时间有限的状况下，知足你的设计需求。

并且，随着设计需求的不断变化，为方便设计师展现和交流其设计理念，一些原型工具，例如简单快捷的Mockplus, 提供了专业的页面流程图功能。设计师一键点击便可生成所需Web或软件页面流程图，并根据设计须要设置其颜色，背景以及链接线，添加页面备注以及导出为图片等。可以帮助设计师极大的提高设计和交流效率。

Wireflows

多年来，我经过建立流程图来演示和交流Web或软件中的交互设计。并且为了囊括更多的设计情景，这些流程图已演变成包含线框图的“流”设计。而全球知名的用户体验研究机构Nielsen Norman Group最近提出了一个全新的术语“Wireflows”来描绘此类用户体验的可交付内容。

Nielsen Norman Group这样定义Wireflows：

Wireflows是一种结合了线框图风格的页面布局格式，采用了一种简化的流程图来展现Web或软件的各类交互设计。

只有线框图是远远不够的。由于线框图经常仅仅展现Web或软件的页面布局或静态内容，并未包含任何动态交互。而流程图则囊括了Web或软件的交互细节，但却忽略了可能发生的应用情景。而Wireflow则可以帮助设计师存储复杂的交互设计，并展现这些交互设计中变化的内容和布局。

Wireflow元素

*入口和出口

*步骤：例如用户操做，系统操做以及替代路径

*链接：指示所需的路径和可能的不一样流程

*决策点：用户必须从两个或多个选项中选择。

总结：

了解和预估这些“流”可能的应用场景，可以有效地优化设计体验。以上所描述的任何“流”都可以帮助设计师更好的展现和交流各类设计理念，从而提升协做效率。

资源

如下是一些能够加速UX工做流设计的资源，但愿能对你有所帮助：

界面工具包资源

*FREEBIE — Flowchart kit for Sketch

——来自Greg Dlubacz设计师的流程图工具包

这是一个精心制做的Sketch流程图工具包,能够帮助你轻松快捷的建立简洁直观的站点地图。包含的全部元素，包括箭头等，都是可编辑，可定制的。

*Flowchart Kit Sketch Resource

——来自 Arthur Guillermin Hazan设计师的流程图工具包

这是一个展现了网页界面之间交互设计的流程图工具包。你可使用它轻松地为你的界面添加箭头以及图标等元素，自定义你的界面，甚至在其帮助下建立更加精确的站点地图。

*User Flow Diagram Template

——来自Jarosław Ceborski设计师的用户流程图模板

这个用户用户流程图模板可以帮助你简单地制做美观吸睛的图表。其中包含的全部方块和箭头都是便于直接使用的Sketch符号。

*13+ Productive UX Flowchart Templates

——来自Template.net网页的UX流程图

Sketch插件资源

*Sketch plugin — AEFlowchart

——来自Marko Tadic的AEFlowcharts插件

Sketch提供了多种可以帮助设计师常见Web或软件流程图的插件。而在简单查看这些插件以后，小编发现，AEFlowcharts是全部这些插件中最易用的。

做者：Naema Baskanderi

原文地址：https://uxplanet.org/ux-glossary-task-flows-user-flows-flowcharts-and-some-new-ish-stuff-2321044d837d