技术文章

在不断重塑自我的用户体验和产品设计领域，接触许多新的流行语并不奇怪——通常事先没有太多解释。您可能经常听到的两个这样的术语（通常可以互换）是用户流和流程图。然而，实际上，这两种常见类型的图表不仅在它们所代表的内容方面不同，而且在需要它们的人和目的方面也不同。

本文从 UX 和产品设计的角度概述了这两种流行图表类型之间的主要异同，因此您可以根据您的产品目前在产品开发过程中所处的位置来决定哪一种最适合您的需求。

什么是用户流？

用户流是用户为实现特定目标可以采用的路径的可视化表示。在最基本的形式中，用户流程图将视觉效果（屏幕、形状或图像）与连接器相结合，以定义实现所需结果的步骤顺序。更复杂或准备好演示的用户流程图可以包含额外的元素，例如标签、设备皮肤、品牌详细信息等。

让我们以上面的有声读物应用程序的用户流程图为例。登录后，用户的主要目标是找到他们喜欢的有声读物并收听。他们可以通过多种方式做到这一点，具体取决于不同的因素，例如他们之前是否注册过、是否拥有有效的付费会员资格等。用户流程将所有这些场景都考虑在内，并以一种易于理解、易于遵循的方式呈现不同的成功路径。

用户流量有什么好处？

与流程图相比，用户流程是一种更直观有效的方式来呈现整个用户旅程，同时仍然可以看到所有项目屏幕彼此靠近布置。这为用户流程提供了更多上下文的优势，这有助于在设计评论期间更快地加入利益相关者，同时减少想象力或个人解释。

此外，在转换和适应产品设计和开发过程的更高级阶段时，用户流程非常灵活。线框、低保真度或高保真度设计只要可用就可以使用。此外，可以在任何阶段添加形状、连接器和注释，具体取决于交付的演示类型。这使得用户流成为从早期构思一直到最终文档的宝贵工具。尝试时，用户流也特别有价值迭代已经推出的产品.

什么是流程图？

流程图（也拼写为“流程图”）是按顺序步骤描述过程、工作流或系统的图表。流程图通常在外观上很简单，由用箭头连接的不同形状组成。在产品设计的背景下，流程图通常是在早期构思阶段快速描述应用程序预期行为的工具。流程图从不包含视觉效果；甚至包含一些线框或手绘草图的图表也被称为线框，混合了术语“线框”和“用户流”。

流程图的一个独特元素可能会使初学者复杂化，那就是使用不同的形状或符号来表示流程的不同步骤。例如，菱形代表一个决策，该决策通常根据决策的结果将流程图分支为至少两条不同的路径。另一个例子是椭圆形（也称为胶囊形或药丸形），代表起点或终点。我们在下图中总结了最常见的流程图形状以供参考。

上面没有显示的许多其他形状很少适用于产品设计相关的项目，而在工业工程或计算机编程流程图中更常遇到。

流程图有什么好处？

与用户流程相比，流程图通常可以更快地组合在一起，因为除了为每个形状选择颜色和标签之外，它们不需要太多的设计输入。这使得它们在早期产品设计阶段特别有效，在这个阶段团队希望花费最少的精力来调整初步想法。

此外，即使非设计人员也可以轻松创建和维护流程图，因此任何产品经理、营销人员或 Scrum 团队的其他成员都可以负责使它们保持最新状态。即使流程图不是以数字格式设计的，它们也可以同样具有影响力——根据情况，纸上的手绘草图也同样有效。

最后，产品和设计团队还可以在内部使用流程图进行与产品无关的决策。如前所述，流程图是对任何类型的流程或任何逻辑步骤顺序的描述。这意味着团队也可以采用它们来映射、记录或改进他们自己的内部流程，从而实现更高的透明度和一致性。

用户流程和流程图的相似之处

许多人将用户流程与流程图混淆的主要原因可能是两者都包含连接器并显示从开始到结束的过程。事实上，两者在非视觉上有更多相似之处，这与它们帮助团队实现的目标以及创建它们的方法有关：

不管它们的异同如何，这两种类型的图表都可以使团队受益匪浅，并在产品设计和开发过程的后期阶段为他们节省大量时间。此外，它们还帮助制作团队让所有利益相关者跟上速度，并实现更顺畅的项目执行，减少阻力和瓶颈。

用户流程和流程图的区别

如前所述，虽然这两个术语经常互换使用，但用户流和流程图实际上并不是一回事。下表从用户体验/产品设计的角度概述了它们之间的主要区别，因此您可以更轻松地在流程的每个阶段选择最适合您的：

不管它们的异同如何，这两种类型的图表都可以使团队受益匪浅，并在产品设计和开发过程的后期阶段为他们节省大量时间。此外，它们还帮助制作团队让所有利益相关者跟上速度，并实现更顺畅的项目执行，减少阻力和瓶颈。

完美的混合体

图表（例如用户流和流程图）旨在简化演示和决策制定。这也意味着，尽管每种图表都有适用的最佳实践和规则，但归根结底，最重要的是创建个性化文档，以尽可能最好的方式服务于预期目的。

有时，将事物混合在一起确实可以更好地传达您的信息。以我们之前讨论过的同一个有声读物应用程序用户流程的以下变体为例：

在这里，引入了流程图符号，使图表更深入地了解不同的可能支付结果。由于部分过程发生在有声读物应用程序之外，当用户被重定向到他们的银行应用程序以继续付款时，引入平行四边形以易于理解的方式象征着第三方用户操作。

有用的工具，让您的生活更轻松

您可以在大多数知名设计工具（如 Figma、Sketch 或 Adobe XD）上使用基本原型制作功能（屏幕到屏幕转换）构建简单的用户流程。但是，如果用户流程图在您的日常工作流程中扮演着重要角色，并且您正在寻找一种有效且流畅的方式来引导您的受众了解全局和设计细节，我们建议您尝试使用专门的图表工具，例如溢出.

溢出最近还推出了平行四边形和胶囊/椭圆形，以及现有的菱形、矩形和圆形，从而涵盖了设计和产品团队的所有流程图需求。

要获得具有更多可用形状和符号的更高级流程图选项，请使用专门的流程图工具，例如 Lucidchart。如果您是 Microsoft Office 应用程序的高级用户，您会发现 Microsoft Visio 非常适合您现有的工具包。