交互设计技能必备之 I 用户流程图和跨职能泳道图的绘制

大米粒同学

上海/UX设计师/4年前/6173浏览

版权

大米粒同学

绘制用户流程图与多线程泳道图是交互设计师必备且必须精通的一大项基本技能，因为这是我们设计师梳理产品逻辑的核心方法之一

前言

大家也许会觉得理论性的设计知识点、工具和方法论细碎且凌乱，或许已经知道个皮毛但在项目中真实运用起来的时候却还是无从下手，其根本还是因为并没有真正领会方法论中的原理精髓；那我们设计师该如何提升对方法论的认知，并真正转化为自己的技能呢？这里我就以我们交互设计中最常见的2类流程图：用户流程图和泳道图为例，深入的解析下，TA们是什么？为什么要用？有什么联系和区别，使用场景是什么？怎么用？

本文会以“5W1H"这个工具来梳理话题大纲，也以此作为该篇的文章目录😊。多说一嘴，5W1H真是一个绝佳的梳理思路的方法论，可以运用在任何学习阶段👍

【What】什么是泳道图？什么是用户流程图？泳道图和用户流程图的联系与区别？
【Why】为什么交互设计师需要画泳道图和用户流程图，绘制这些图表的目的与用途分别是什么？
【Where】流程图和泳道图的使用场景？
【When】我们在何时或在哪个设计环节需要去绘制/展示这两类图表？
【Who】设计师绘制这些图表主要是给谁看？
【How】如何绘制泳道图和用户流程图？

💡温馨提示：正文约6000+个字，你大约需要花费10分钟左右的时间读完这篇文章；（读不完也不要怨我噢先收藏起来8～😊）

1. WHAT are Swim Lane Diagram and User Flow Chart？

1.1. 什么是泳道图和用户流程图？两者之间的联系与区别？

【泳道图的定义】

泳道图又名“跨职能流程图”（如下图），其目的是展示整个业务流程中每个阶段所对应的不同用户角色或部门；他们在具体的阶段分别做了什么，业务和功能在他们之间是什么样的交互流程。泳道图是一种特殊的流程图图表（这里可以把它看成是用户流程图的高阶版，反正我是这么理解的😁），它可以帮助设计师、产品经理、业务分析师、项目经理等角色清晰的梳理出复杂的业务流程，并可以在梳理的过程中发现业务和产品体验层面存在的问题，是解决问题的必要前提步骤。

【其它文献中的介绍】

“A swimlane diagram is a type of flowchart that delineates who does what in a process. Using the metaphor of lanes in a pool, a swimlane diagram provides clarity and accountability by placing process steps within the horizontal or vertical “swimlanes” of a particular employee, work group or department. It shows connections, communication and handoffs between these lanes, and it can serve to highlight waste, redundancy and inefficiency in a process.”

【用户流程图的定义】

用户流程图是指具体某一用户在某个具体场景下，为了去实现某一具体目的，而在产品中去完成的一系列交互流程。产品可能会面向多个用户角色，而这些用户角色使用产品的目的往往是不一样的，那么他们相对应与产品之间的交互行为也会是不一样的。所以作为体验设计师我们需要理解用户，在确定好产品的用户角色之后，根据不同的用户角色分别画出与之对应的用户流程图。

【其它文献介绍】

“UX flowchart serves a multipurpose function. Generally, it is a set of diagrams and symbols showing a process. In UX design, a flowchart helps you visualize how users complete a task or achieve a goal step by step. The designer can use flowcharts to overview how users navigate your website or app; it will help you meet the user's expectations. A flowchart can also show the real quality and experience of the user’s path. It helps work out a logical path of interactions between the user and the system, potential user actions, and associated consequences. The better your flowchart is designed, the clearer you can see what users want.”

其它补(fei)充(hua)

📒 这里还需要简略分享一下另外一个小知识点：用户角色和用户画像并不是一个概念；用户角色是用户在使用这个产品时的一个具体身份，比如B站的Up主，TA就是一类角色，而Up主和B站的普通观众用户是不一样的，他们和B站其他用户使用平台的目的也是不一样的。

再说到用户画像，用户画像是指一类用户族群，用户画像可能是由多个角色由于意愿、洞见等等一致而聚合成的一类相似族群；和用户画像最紧密相关的就是用户旅程图（As-Is/To-Be user journey map）我们需要通过用户旅程图去挖掘用户痛点与机会点，再找到明确的机会点之后再去做POV和HMW的转化balabala..此处省略多行字。总之用户旅程图和用户流程图也是完全不一样的概念，用法也很不一样，千万不要混淆（想深入了解的同学可以自己去调研一下）

我的个人感受是设计工具和流程不能生搬硬套，还是要结合具体的产品目标、设计目标来灵活运用，并不是所有的产品都要从0-1的去搭建，也不是所有的设计环节你一定都需要用上，你可以和团队配合或者自己主动去定义最合适的设计流程，确保自己最终的解决方案是有理有据，禁得起推敲就可以。（扯远了下此有时间再专门整理一个用户调研的文章吧😊）

【用户流程图和泳道图两者之间的联系】

它们都是产品设计流程中用来分析需求、发现问题和挖掘设计机会点的工具，在一些复杂项目中会混合着使用（比如B端项目）可以先用泳道图梳理出整体的业务流程；再划分细小颗粒度，梳理出某一阶段中更详细的用户流程图。

【两者之间的区别】

泳道图侧重于分析全局的业务流程，更偏向于对业务和商业这个高纬度的流程分析，其中会涉及到多个用户角色和业务部门，整个流程中会涉及到多个场景、任务与目的，它可以展现出一个产品完整的业务模式与生命周期。设计师并不会在每个项目里都需要产出跨职能泳道图，也许团队的设计lead、产品经理和业务分析师会早早的把这个环节给梳理好再传达给交互设计师。

而用户流程图则侧重于展示对功能逻辑流程的梳理；它也是我们交互设计师和开发人员同步交互逻辑最好的表达方式之一。它更聚焦于具体的某一个功能或者用户场景；它的流程也相对单一。交互设计师会在画交互原型前自行梳理一遍用户流程图，核心目的还是为了避免交互稿出错或遗漏某一极端场景，也可以确保交互原型的严谨性。

1.2. 会使用到的工具

这里可以顺带提一下用什么设计工具来画，之前大家会使用Visio，或者Process on这类专业绘制流程图的工具。但由于云协作类设计平台的快速发展，我们现在的选择也就更多了，比如Figma和即时设计上面也会有很多现成的模版供大家去使用，所以工具普及度很广且也不是唯一的。我个人还是比较喜欢自己画的，一般会在常用的Sketch和Figma里自己绘制一些常规组件，用起来也很方便。

2. WHY we need them? 为什么要绘制用户流程图和泳道图？

2.1. 为何要绘制用户流程图和泳道图？（Benefits）

更清晰/全面的理解业务流程和产品功能流程，对后期设计方案的执行和落地有很大的帮助
更好的理清楚产品中涉及到的对象是谁，有利于梳理用户愿景和利益者相关地图
清晰的流程可以辅助设计师发现现有流程中存在的问题，便于找到设计机会点
设计前梳理的流程图可以让设计师与后期优化好的设计方案进行有效的对比，通过前后对比，证明自己的确解决了相关问题
设计方案确定后产出的流程图，有利于辅助设计师准确的梳理出完整的交互原型，可避免原型出现漏洞
重新设计好的流程图也是设计师与团队其它人员和需求方高效同步设计理念的方法之一

3. WHERE to use? 使用场景？

3.1 【用户流程图使用场景】

一般是在C端类项目中使用的比较多，尤其是针对目标用户其核心使用场景中的流程展示；举个🌰：现在需要梳理共享单车骑行用户在单次用车中的使用流程，那么这个流程大致会分为：用户查找附近车辆-扫码用车-骑行中-停车还车-付款结束骑行这5个阶段。整个流程对骑行用户而言的唯一目标就是骑车到达目的地，这个完整的用车流程具体梳理下来是这样的：

3.2. 【泳道图使用场景】

多运用于复杂的B端项目，当业务场景涉及到多个用户角色和多个部门的情况之下，就需要用泳道图这种丰富的图表来呈现产品业务逻辑。比如企业级的CRM、OA管理系统。（脑补一下图吧，本想自己画一个但没有具体的系统参考我就放弃了😭）

4. WHEN to use? 何时使用？

根据Design Thinking的设计方法论，产品设计是反复迭代周转的一个过程，那我们绘制的流程图也自然就会随着设计的推进和产品策略的调整而不断迭代。所以“何时”会用到流程图这个问题应该从完整的设计周期中去体会，从设计师的视角这个周期可以分为3大阶段：

4.1. 设计前期

在设计前期，也就是桌面研究、分析需求、产品/竞品分析和用户调研的阶段，我们需要对产品的现状进行客观的泳道图/用户流程图的梳理。目的是让自己对整个产品有深刻的理解，定义好一个待验证的设计目标与方向；这个设计目标可以是，基于现有的流程进行整体的产品体验升级，解决一些问题；也可以是结合需求方提出的明确需求点，在原有的流程上进行真删改的优化。

4.2. 设计中

在设计执行阶段，我们设计师需要根据前期挖掘和定义好的设计目标进行创意发散，并梳理出最新的用户流程图/泳道图、信息架构图等，根据新的方案设计出低中高保真原型，为下一步可用性测试做准备。

4.3. 设计后期

当我们在设计后期经过一定的测试、迭代且最终确定方案之后；我们需要整理自己的交互文档，并在文档中记录好最终版的流程图与交互原型图，便于下一次sprint时再拿出来作为新一轮设计迭代的参考和度量点。

5. WHO is the audience? 给谁看？

这里仍然可以从设计师的视角，从完整的设计阶段来区分每个阶段不同的audience会是谁。

5.1. 给自己【设计前期】

设计前期中任何结点的梳理都是为了让自己可以更深刻、准确和全面的理解商业需求、项目目标和功能逻辑。所以该阶段产出的流程图其中受益最大的audience当然就是自己啦。

5.2. 给团队其他人员【设计中】

我们不管在什么阶段产出的流程图和分析图表都需要和团队内其他设计师、产品经理还有项目相关负责人员及时的同步，目的是为了大家可以高效同步设计思路并统一确定设计方向。所以阶段性目标的不同导致了受众的观众也是不同的。

5.3. 给客户/需求方【设计后期】

当团队内部达成一致后，在设计后期我们需要向客户/需求方汇报设计理念和具体落地方案，我们可以将设计流程和原型的前后对比展示给客户和需求方进行评审。让我们的观众明白我们具体改进了什么，优化的依据又是什么。

6. HOW to create? 如何绘制？

这里并不是单纯介绍一个图表该如何去画，我们这里应该弄清楚绘制这两类图表的步骤和底层逻辑思路是什么，其中的模块分别有什么价值，每个信息模块展示的目的又是什么？

6.1. 用户流程图元素拆解

用户流程图中那些标准的图形符号都代表了特殊的含义，也是行业多年发展下来沉淀给我们的符号规范，尽量不要随便创造一个自己的图形符号（这里的创意性可以适当收敛下😄）但也许你的行业业务场景很特殊，你不得不画一个让你的客户更容易理解的符号图形，这种情况下你可以在图表旁边注释下图例说明，确保任何人都可以明白那个特殊符号的含义。

6.2. 泳道图的组成拆分和绘制法则

Step1: 分析用户角色和部门
确定好整个流程中涉及到的所有用户角色和部门；
确定好每个参与者、部门TA们不同的职能是什么，TA们的目标任务分别是什么；
确定好他们彼此之间在业务上的关联，有什么样的交互；
明确他们共同配合下要完成的核心目标和其主线流程。

Step2: 确定开始(Start)与结束(End)的节点与路径
明确整个流程的开始和结束的节点；
梳理整个流程中的不同阶段，明确一共有几个阶段，分别是叫什么。

Step3: 明确核心路径与模块
梳理出不同对象在整个环节中进行交互的所有流程，其中不能遗漏异常分支的情况噢；
注意路径中特殊的(Yes/No)决策判断点和产生的交付物等；

Step4: 分析与优化
第四步也是最关键的一步，我们需要对梳理出来的流程进行分析和总结，可以基于发现的复杂流程/业务盲点进行一些判断和体验上的优化假定；
有机会的话我们也可以基于发现的问题，与流程中涉及到的对象进行交流，询问在使用过程中遇到的问题，以及导致这个问题的原因是什么，做到真实还原用户的使用场景。

总结

最后想分享的心得是，设计方法论和设计工具并不是一成不变的，它们也会随着行业的快速发展迭代升级，甚至被淘汰；作为设计师我们只有掌握方法论中最核心的底层逻辑，了解这些方法背后真正的原理和目的是什么，实时跟踪行业内最新的设计趋势与动向，不要生搬硬套或者缺乏自己独立思考去理解的过程；只有做到这样才能保证我们可以游刃有余的紧跟互联网快速发展的节奏，甚至引领行业的设计趋势（梦想总是要有的，万一真的不小心实现了呢😊）。