大家也许会觉得理论性的设计知识点、工具和方法论细碎且凌乱,或许已经知道个皮毛但在项目中真实运用起来的时候却还是无从下手,其根本还是因为并没有真正领会方法论中的原理精髓;那我们设计师该如何提升对方法论的认知,并真正转化为自己的技能呢?这里我就以我们交互设计中最常见的2类流程图:用户流程图和泳道图为例,深入的解析下,TA们是什么?为什么要用?有什么联系和区别,使用场景是什么?怎么用?
泳道图又名“跨职能流程图”(如下图),其目的是展示整个业务流程中每个阶段所对应的不同用户角色或部门;他们在具体的阶段分别做了什么,业务和功能在他们之间是什么样的交互流程。泳道图是一种特殊的流程图图表(这里可以把它看成是用户流程图的高阶版,反正我是这么理解的),它可以帮助设计师、产品经理、业务分析师、项目经理等角色清晰的梳理出复杂的业务流程,并可以在梳理的过程中发现业务和产品体验层面存在的问题,是解决问题的必要前提步骤。
“Aswimlanediagramisatypeofflowchartthatdelineateswhodoeswhatinaprocess.Usingthemetaphoroflanesinapool,aswimlanediagramprovidesclarityandaccountabilitybyplacingprocessstepswithinthehorizontalorvertical“swimlanes”ofaparticularemployee,workgroupordepartment.Itshowsconnections,communicationandhandoffsbetweentheselanes,anditcanservetohighlightwaste,redundancyandinefficiencyinaprocess.”
用户流程图是指具体某一用户在某个具体场景下,为了去实现某一具体目的,而在产品中去完成的一系列交互流程。产品可能会面向多个用户角色,而这些用户角色使用产品的目的往往是不一样的,那么他们相对应与产品之间的交互行为也会是不一样的。所以作为体验设计师我们需要理解用户,在确定好产品的用户角色之后,根据不同的用户角色分别画出与之对应的用户流程图。
“UXflowchartservesamultipurposefunction.Generally,itisasetofdiagramsandsymbolsshowingaprocess.InUXdesign,aflowcharthelpsyouvisualizehowuserscompleteataskorachieveagoalstepbystep.Thedesignercanuseflowchartstooverviewhowusersnavigateyourwebsiteorapp;itwillhelpyoumeettheuser'sexpectations.Aflowchartcanalsoshowtherealqualityandexperienceoftheuser’spath.Ithelpsworkoutalogicalpathofinteractionsbetweentheuserandthesystem,potentialuseractions,andassociatedconsequences.Thebetteryourflowchartisdesigned,thecleareryoucanseewhatuserswant.”
它们都是产品设计流程中用来分析需求、发现问题和挖掘设计机会点的工具,在一些复杂项目中会混合着使用(比如B端项目)可以先用泳道图梳理出整体的业务流程;再划分细小颗粒度,梳理出某一阶段中更详细的用户流程图。
泳道图侧重于分析全局的业务流程,更偏向于对业务和商业这个高纬度的流程分析,其中会涉及到多个用户角色和业务部门,整个流程中会涉及到多个场景、任务与目的,它可以展现出一个产品完整的业务模式与生命周期。设计师并不会在每个项目里都需要产出跨职能泳道图,也许团队的设计lead、产品经理和业务分析师会早早的把这个环节给梳理好再传达给交互设计师。
而用户流程图则侧重于展示对功能逻辑流程的梳理;它也是我们交互设计师和开发人员同步交互逻辑最好的表达方式之一。它更聚焦于具体的某一个功能或者用户场景;它的流程也相对单一。交互设计师会在画交互原型前自行梳理一遍用户流程图,核心目的还是为了避免交互稿出错或遗漏某一极端场景,也可以确保交互原型的严谨性。
这里可以顺带提一下用什么设计工具来画,之前大家会使用Visio,或者Processon这类专业绘制流程图的工具。但由于云协作类设计平台的快速发展,我们现在的选择也就更多了,比如Figma和即时设计上面也会有很多现成的模版供大家去使用,所以工具普及度很广且也不是唯一的。我个人还是比较喜欢自己画的,一般会在常用的Sketch和Figma里自己绘制一些常规组件,用起来也很方便。
一般是在C端类项目中使用的比较多,尤其是针对目标用户其核心使用场景中的流程展示;举个:现在需要梳理共享单车骑行用户在单次用车中的使用流程,那么这个流程大致会分为:用户查找附近车辆-扫码用车-骑行中-停车还车-付款结束骑行这5个阶段。整个流程对骑行用户而言的唯一目标就是骑车到达目的地,这个完整的用车流程具体梳理下来是这样的:
多运用于复杂的B端项目,当业务场景涉及到多个用户角色和多个部门的情况之下,就需要用泳道图这种丰富的图表来呈现产品业务逻辑。比如企业级的CRM、OA管理系统。(脑补一下图吧,本想自己画一个但没有具体的系统参考我就放弃了)
根据DesignThinking的设计方法论,产品设计是反复迭代周转的一个过程,那我们绘制的流程图也自然就会随着设计的推进和产品策略的调整而不断迭代。所以“何时”会用到流程图这个问题应该从完整的设计周期中去体会,从设计师的视角这个周期可以分为3大阶段:
在设计前期,也就是桌面研究、分析需求、产品/竞品分析和用户调研的阶段,我们需要对产品的现状进行客观的泳道图/用户流程图的梳理。目的是让自己对整个产品有深刻的理解,定义好一个待验证的设计目标与方向;这个设计目标可以是,基于现有的流程进行整体的产品体验升级,解决一些问题;也可以是结合需求方提出的明确需求点,在原有的流程上进行真删改的优化。
在设计执行阶段,我们设计师需要根据前期挖掘和定义好的设计目标进行创意发散,并梳理出最新的用户流程图/泳道图、信息架构图等,根据新的方案设计出低中高保真原型,为下一步可用性测试做准备。
当我们在设计后期经过一定的测试、迭代且最终确定方案之后;我们需要整理自己的交互文档,并在文档中记录好最终版的流程图与交互原型图,便于下一次sprint时再拿出来作为新一轮设计迭代的参考和度量点。
这里仍然可以从设计师的视角,从完整的设计阶段来区分每个阶段不同的audience会是谁。
设计前期中任何结点的梳理都是为了让自己可以更深刻、准确和全面的理解商业需求、项目目标和功能逻辑。所以该阶段产出的流程图其中受益最大的audience当然就是自己啦。
当团队内部达成一致后,在设计后期我们需要向客户/需求方汇报设计理念和具体落地方案,我们可以将设计流程和原型的前后对比展示给客户和需求方进行评审。让我们的观众明白我们具体改进了什么,优化的依据又是什么。
这里并不是单纯介绍一个图表该如何去画,我们这里应该弄清楚绘制这两类图表的步骤和底层逻辑思路是什么,其中的模块分别有什么价值,每个信息模块展示的目的又是什么?
用户流程图中那些标准的图形符号都代表了特殊的含义,也是行业多年发展下来沉淀给我们的符号规范,尽量不要随便创造一个自己的图形符号(这里的创意性可以适当收敛下)但也许你的行业业务场景很特殊,你不得不画一个让你的客户更容易理解的符号图形,这种情况下你可以在图表旁边注释下图例说明,确保任何人都可以明白那个特殊符号的含义。