什么是线流？

任务流、用户流和流程图——这些术语描述了设计人员用来记录用户交互并显示定向流和基于决策的逻辑的图表。任务流与流程图的区别在于它们包含的详细程度和流程，术语“用户流”通常与任务流和流程图互换使用。

然而，长期以来，产品设计师一直在使用混合方法来制作线框图。我们谈论的是线流——一系列连接到记录用户流的线框。您要用于特定用户流的图表类型取决于您正在设计的应用程序的类型 - 具体来说，它有多少独特的页面，或者页面的内容是否会根据用户交互动态变化。

任务流

任务流是一个图表，显示了说明用户将如何完成特定任务的线性步骤序列- 例如，登录任务流。任务流使用自然语言，不显示任何设计。他们通常也不会探索与理想路径的偏差——例如，如果用户忘记了密码。

任务流有助于规划任务完成的最佳路径。创建任务流的一种方法是进行任务分析，以观察用户如何执行他们的任务并实现他们的预期目标

流程图

流程图类似于任务流，但更详细。除了用户在与系统交互时所采用的路径外，它还显示了他们对该旅程的决定（用户是否登录？是/否）以及他们可能触发的反应性后端流程（向服务器发送请求）。

由于其性质，流程图使我们能够更彻底地记录用户和系统流程，显示决策点的路径分支以及数据如何流经系统。它们非常适合代表产品的复杂性，但它们与任务流共有的缺点是它们不显示任何 UI 设计。

线流

“wireflow”一词来自 Nielsen Norman Group 创造的“wireframe”和“flowchart”这两个词的组合。顾名思义，线框图结合了线框和流程图的优点。

Wireflows 在用户与应用程序或网站交互时显示视觉 UI 变化。它们还可以包含注释以指示当时后端发生的情况。将线流视为图示的任务流和流程图。

Wireflows 在记录移动、桌面或 Web 应用程序时特别有用，这些应用程序没有很多独特的页面，而是具有一些基于用户交互动态更改内容的核心页面。这允许设计人员在常见用户任务的上下文中展示设计。

简化的线流

简化的线流允许您采用更抽象的方法，使用更小的屏幕表示来绘制流程。这种类型的简化线流是任务流和常规线流的混合体。您基本上无需为不同的屏幕创建自定义线框，而是创建一个任务流，用代表不同屏幕类型的符号来说明。

在示例中，您可以看到一个简化的购买流程，该流程从用户在主页上搜索商品开始，最终到购买确认屏幕结束。

组织和使用

Wireflows 的经典用例是记录用户在产品上完成一项常见任务的过程——例如，将歌曲添加到播放列表中。

简单的线框显示了用户在工作流程的每个步骤中可用的屏幕。箭头将用户与之交互的特定 UI 组件（例如，点击按钮或链接）与显示交互结果的线框连接起来。流程中的线框不需要显示单独的页面。很多时候，页面保持不变，但内容会发生变化，反映对用户操作的反馈（勾选的复选框或弹出菜单）。

您还可以使用 Wireflow 记录桌面和 Web 应用程序的复杂工作流程。无需为每个步骤显示全屏线框 - 为屏幕更改的部分创建线框将提供足够的上下文。

您可以使用 Wireflows 来记录传统静态网站中的任务流吗？它适用于移动设备，但对于桌面网站可能不是最好的主意——当线框显示不同的大页面时，很容易丢失用户流的上下文。

Wireflow创建过程

让我们在一个移动应用程序的示例中查看 Wireflow 创建过程的步骤。

• 从描述用户故事中的需求和问题开始。例如，用户注册——设置用户名、电子邮件和密码。

• 识别界面中的关键屏幕。解决这个问题的一个好方法是考虑起点和终点。例如，起点是登录页面，终点是欢迎模式。

• 按照用户前进的顺序用箭头连接屏幕。您还可以包含决策点并显示在不同情况下会发生什么——例如，如果用户忘记了密码。

以上内容为转载