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

大家也许会觉得理论性的设计知识点、工具和方法论细碎且凌乱,或许已经知道个皮毛但在项目中真实运用起来的时候却还是无从下手,其根本还是因为并没有真正领会方法论中的原理精髓;那我们设计师该如何提升对方法论的认知,并真正转化为自己的技能呢?这里我就以我们交互设计中最常见的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当然就是自己啦。

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

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

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

THE END
1.原型图用什么软件做?设计师和产品经理的4款推荐工具在选择原型图制作工具时,需要考虑以下因素: 1. 团队协作需求:如果团队需要频繁协作,Figma和Adobe XD的实时协作功能可能更适合。 2. 设计复杂度:对于需要创建复杂交互和动态内容的原型,Axure RP可能是更好的选择。 3. 预算限制:如果预算有限,可以考虑使用免费或开源的工具,如Sketch或Figma的免费版本。 https://www.banlikanban.com/info/tool/toolbag/5000.html
2.从构思到实现:8款高效原型图设计软件指南业界新闻简介:Axure Axurerp是美国Axurererp Software Solution旗舰产品是一种专业的快速产品原型工具,允许负责定义需求和规格、设计功能和界面的专家快速创建应用程序软件或网站的线框图、流程图、原型和规格说明文档。作为一种专业的原型工具,它可以快速有效地创建原型,并支持多人合作设计和版本控制管理。 https://www.jindouyun.cn/document/industry/article/185634
3.推荐几款好用的原型图工具Running°つ推荐几款好用的原型图工具 1.墨刀-极简超快的移动应用原型工具 2.ProcessOn 在线作图工具,不用装Visio 3.Principle 前Apple工程师打造的交互设计工具,快速制作丰富流程的应用交互动画 4.摩客 --简洁高效的原型图设计工具 5.Sketch --一款轻量易用的矢量设计工具https://www.cnblogs.com/shine1234/p/13712807.html
4.交互神器!谁是最好用的原型绘制工具?优设网谁是最好用的原型绘制工具? 尚:作为一个交互设计师,选用什么工具来完成快速原型绘制是一个争论不断的话题,从早些年“唯一”的选择 visio 到如今 Axure / Omnigraffle / Adobe Creative Suite 遍地开花,再加上在线工具balsamiq,Lucidchart或Google Drive,思维导图工具XMind,Mindmanager或MindNode,在不同的细分领域给https://www.uisdc.com/the-best-prototype-drawing-tools/
5.《界面设计》复习资料21.Sketch是一款能同时满足交互和视觉设计需求的工具。22.使用Sketch自带的Symbol可以很容易地在高、低保真原型图中进行切换。23.Sketch 对于团队说是一款效率很高的设计工具,意味着能快速推进团队创意到具体方案的落地。同时,结合Sketch 自带的Symbol(组件)和版本回溯功能,可以从容应对项目的快速迭代。24.谷歌全栈设计师https://www.wjx.cn/xz/260641939.aspx
6.墨刀和axure哪个好用?墨刀与axure区别介绍图形图像软件教程墨刀和axure哪个好用?我们再制作网页原型的时候,经常使用墨刀和axure,这两款软件哪款比较好用?下面我们就来看看墨刀与axure区别介绍,需要的朋友可以参考下 GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用! 【如果你想靠AI翻身,你先需要一个靠谱的工具!】 https://www.jb51.net/softjc/702703.html
7.原型图都可以用什么软件做?11款好用软件分享!11款好用软件分享! 从产生想法到递交项目给开发人员,设计师在进行原型设计师时,都会用到原型图软件,无论你是构建基本线框还是功能齐全的原型,原型图软件都可以为你节省大量时间和精力。如果你是该领域的新手或者想更新你的原型图软件包,那就赶紧看看这11个原型图软件分享吧。https://pixso.cn/designskills/yuanxingturuanjian/
8.思维导图软件哪个好?这几款不容错过思维导图是一种可以用来记录、梳理和整合发散性思维的工具。思维导图既能够处理具有临时性、一闪而过的灵感,又能够作为实用性工具,协助人的大脑对逻辑和问题进行整理。在学习和工作中,面对大量复杂的、冗杂的资料,思维导图将思维形象化,便于人脑对输入的知识更好地吸收和转换。那么思维导图通常用什么软件呢?这里介绍https://modao.cc/mindmap/mindmap-software.html
9.ProcessOn思维导图流程图在线画思维导图流程图ProcessOn是一款专业在线作图工具和知识分享社区,提供AI生成思维导图流程图。支持思维导图、流程图、组织结构图、网络拓扑图、鱼骨图、UML图等多种图形,同时可实现人与人之间的实时协作和共享,提升团队工作效率。https://www.processon.com/
10.兴山教育资源公共服务平台75、算盘是中国传统计算工具,利用算盘能进行开平方的运算吗?A、能B、不能(A)不止是开平方,似乎还能开立方。 76、下面哪个成语与秦始皇有关?A、指鹿为马B、奇货可居C、图穷匕见(C)图穷匕见说的是荆轲刺秦王的故事;奇货可居说的是吕不韦“投资”秦始皇父亲的故事;指鹿为马则是赵高“欺负”秦始皇儿子秦亥http://xsx.i.yce21.cn/index.php?r=space/person/blog/view&sid=cec21c53fb6f4429a0d3ef063ec5bfb9&id=313133
11.画原型图用什么软件可以画UI原型图的软件有:Sketch、Axure、Mockplus、adobe XD、墨刀、UID、Figma、Pixso等工具。1、https://www.hxsd.com/wenda/67058/
12.产品经理认证知识体系指南第二版学习笔记这个图有9项内容. 中间一项"价值主张"也可以说是战略价值观. 以价值主张联系左右两边的各4项. 右边是: 用什么关系/熟悉哪些客户,客户通过哪些渠道/想花多少钱买到产品. 左边是: 我用什么资源/跟谁合作/花多少钱/做什么事情 Key Activities 在课本里翻译成"关键业务". 但我感觉"业务"这个词不准确. "业务"一https://idarc.cn/index.php/archives/3707/
13.前QQ浏览器产品负责人:从0到1深度认识产品经理用户原型图=产品经理会借助工具简单画产品的交互原型,给交互设计师参考。交互设计师会在这个基础上通过专业的知识再去细化,降低错误,或者通过界面的标准,再去优化。同时,视觉设计师会根据产品的原型图考虑界面上的排布、排版、用色。 开发迭代计划,应该是项目经理来做,项目经理只管项目研发过程中的工作,不负责产品设计https://www.digitaling.com/articles/20887.html
14.原型图是什么?5分钟带你了解原型图!简单来说,原型图就是产品成型前的简单框架,主要用于展示页面的布局和各个功能键的交互,让产品的初步构思有更直观的展现。它为开发相关的功能边界,需求细节和产品期望提供了非常具象化的展示。也是创意成为成熟产品之前非常重要的一步。原型是创造性思维过程和最终产品之https://www.mockplus.cn/blog/post/1630
15.亲测好用!8款流程图绘制软件分享!流程图在许多业务场景有着广泛的应用,它通过图形化的表达方式,用以展示各种形式的流程或过程,清晰表达各种业务逻辑,能够帮助人们更清晰地理解一个复杂的过程、让人们更容易发现和识别问题,还能提高工作效率。本文为大家整理了8款免费又好用的流程图绘制软件,一起来看一下吧。 https://boardmix.cn/article/8-flowchart-software/
16.迅捷画图迅捷画图是一个专业的在线画图网站,为用户提供简单易用的作图工具,支持在线创作流程图、在线制作思维导图、组织结构图、ER图、网络拓扑图等.在线作图,方便快捷,真正实现高效工作。https://www.liuchengtu.com/
17.快速原型设计工具AxureRP教程(一):流程图和连接线·上篇Axure RP是一套专门为网站或应用程序所设计的快速原型设计工具, 可以让应用网站策划人员或网站功能界面设计师更加快速方便的建立Web AP和Website的线框图、流程图、原型和规格,现已成为设计Web AP的重要工具。 优惠购买Axure RP 本文主要介绍Axure RP中流程图和连接线的相关用法及效果。 https://www.evget.com/doclib/s/25/11178
18.axure专业的快速原型设计工具All-in-one software design tool for creating prototypes, specifications, and diagramshttp://www.axure.com/
19.101种最热门的EdTech工具Buncee 被用作课堂演示工具,用于回顾和介绍符合课程标准的内容。此外,Buncee还能记录学生的学习模式和“踪迹”,包括选修的书籍报告、研究项目、数字故事、基于项目的学习、感兴趣的项目和创造的时刻。有了Buncee易于使用的创作画布,学习只需要一个拖拽动作,整个过程变得简单有趣。https://36kr.com/p/829435155242882
20.设计导航bezier用贝塞尔曲线绘图,提高钢笔工具的运用 RGBchallenge测试你对RGB值的了解 helvarialquiz分辨Arial和Helvetica字体 Color匹配色轮的颜色 Type字体排版练习 Shape钢笔工具使用练习 Real or Photoshop分辨图像是真是假 dedesigntheweb通过原型图来分辨是哪个网站 https://hao.shejidaren.com/
21.超级单页超级单页官网,极简网页制作工具,在线免费制作网页网站,免费页面模板在线生成,能快速让您生成漂亮又免费的企业网站,工作室网站,个人简历网站,傻瓜式操作,好用方便,自适应移动设备的的h5页面,同时您还可以在这里免费展示您的企业网站,一个简单好用适合小白直接使用https://vipcom.cc/
22.原型图AxureRP试用设计师用正版AxureRP软件Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专门的原型设计工具,它比一般创建静态原型的工具如Visio、Omnigraffle、Illustrator、Photoshop、Dreamweaver、Visual Studihttps://www.china.cn/tuxingtuxiangruanj/4689654874.html
23.35个常用的分析方法及模型How:用户的支付方式销量分布,用户更喜欢用什么支付? How much:价格段销量分布(用户更容易接受那个价位) 十四、企业问题解决策略:逻辑树模型 逻辑树又称问题树、演绎树或分解树等。很多咨询公司分析问题最常使用的工具就是“逻辑树”。逻辑树是将问题的所有子问题分层罗列,从最高层开始,并逐步向下扩展。 https://www.iyunying.org/seo/dataanalysis/264914.html
24.美术课教案15篇二、学习油水分离的绘画方法,能巧妙的利用油画棒等绘画工具进行创作。 活动准备: 1、深色颜色颜料,水粉笔。 2、白纸,铺好报纸的桌子。 3、油画棒,已用白色油画棒画好的图画一幅。 活动过程: 1、情境导入:以看魔术表演来激发幼儿学习的兴趣。 “小朋友们看看,我是谁啊?告诉你们,我是一个魔术师。我会变魔术https://www.fwsir.com/jiaoan/html/jiaoan_20230105165939_2203098.html
25.电脑绘图软件有哪些?好用的都有这些SAI绘画软件MediBang Paint 是一款免费好用的电脑绘图软件,不仅可以让你绘制出精美的漫画插画,你还可以通过 MediBang Paint 制作漫画。因为 MediBang Paint 具备简单切割漫画格和可以分别整理每个漫画资料的页面管理功能,所以它是最适合制作漫画的工具。同时,软件还具备了制作漫画必备的所有功能,漫画分格、粘贴色调也是非常的轻松。拥https://www.painttoolsai.cn/article/120.html