下面是笔者以前画的交互流程图，用的工具是Photoshop，比较注重细节。现在由于时间问题，多用axure，无法像Photoshop 那样扣细节了，也没办法画斜线，但好处是快，导出动态demo比较方便。我个人还是比较推荐用Axure的。
接下来进入正题，说说画出易懂，美观的交互流程图的5个技巧
一、完整的主干闭环+可能出现异常反馈
1、确定一个目标，例如：新用户注册，从第一步开始，按用户页面跳转顺序摆放界面。
2、针对新用户注册这个功能，完整的功能交互流程图，必须包含：新用户开启APP，触发注册，注册流程，完成注册，进入游戏这几个关键步骤的完整闭环。
3、在关键步骤的主干闭环之外，需要将所有的异常提示展示出来，如：手机号无效，手机号已注册，网络超时等主干流程中可能遇到的异常提示，以及对应处理反馈。
二、按钮点击效果+页面跳转逻辑
1、主干流程的按钮，均要描述点击后的处理，以及可能出现的异常反馈。
2、触发页面跳转后，需要用箭头标注跳转逻辑，两条流程线之间，尽量不要有十字交叠。
三、标题和注解
1、交互流程图中，主要包含四类注解：模块标题、界面标题、界面注解、流程箭头注解。
2、模块标题：一般是主干流程的功能名称，如新用户注册流程、充值流程等。
3、界面标题：即每个界面的名称，如启动页、登录页等，可展示在每个界面上方，并附带编号。
4、界面注解：是交互图中最重要的文字内容，一般展示在对应界面下方，可包含页面动态描述，页面异常情况描述，页面简要逻辑描述等。
5、流程箭头注解：一般是展示在箭头线上的，对于页面跳转的描述，如：点击注册跳转。
四、视觉相关要素
1、视觉焦点：一个界面，尽量只展示一个重点信息，并且使其成为视觉焦点，从面积，放置位置，颜色，字号等元素，都做强化，其他非焦点信息，则弱化。
2、图像：在交互图中，每个模块尽可能用块状底色区分，避免使用过多线框，否则容易使交互图变得复杂，加重视觉负担。
3、配色：建议交互图中，使用一种基准色，如蓝色或灰色，叠放层级靠后的模块，用深蓝色，靠前的模块，用浅蓝色。同时，按钮可单独使用一种颜色，如绿色。部分需重点突出的元素可用提醒色，如橘色。箭头可用半透明的黄色等。
4、摆放：所有界面上下对齐，间隔一致，保证工整的视觉效果。
再附上一张关于手势 *** 作的描述图，每个 *** 作细节都要清楚描述
附录：如何提升互联网产品体验：
1、把用户假设成一个聪明但是很忙的人，不要指望让用户记住任何 *** 作流程，而是随时提供清晰的指引和尽可能自由的页面跳转入口。
2、用户的高频 *** 作，应尽量减少 *** 作步骤，而低频 *** 作，则无需刻意关注步骤数，更应该关注的是每一步的 *** 作难度和界面信息是否易于理解。应尽量降低选择难度，别让用户花时间去理解。
3、一个页面只突出一个重点，用大小，颜色，形状来做分类，让用户一眼可分辨到重要信息。
4、扁平化和渐进披露相结合，视场景而定，而不是机械地执行扁平化。流程扁平化的好处是，可以让用户提前感知流程，页面跳转的成本也比较低，但是比较考验对页面信息的整合处理，渐进披露是预先旁如陆把次要信息隐藏，当用户触发了对应 *** 作，进入对应流程，才给出相应反馈或指引，好处是让用户更专注，减少理解成本。
5、页面一致性也是这个道理，就我理解，一致性的是为了让用户形成习惯，进而减少理解成本。比如，确定 *** 作永远在右侧，选中状态永远高亮，红色代表严重警告等等。当用户已经形成统一认知，则会大大降低每一次 *** 作的理解成本。但有时候设计师会过于信仰一致性，导致失去个性，我建议在不影响习惯的前提下，可适时打橡丛破所谓一致性的束缚，让设计更加出彩。
6、让用户有反悔机会。误 *** 作后，可恢复，且重要 *** 作需二次确认，并强化感知严重性。
7、避免依赖文字说明，多用图形化的方式让用户直接感知，而不是通过理解文字来感知。且文案使用的格式、主语建议统一，这有助于营造整体调性。另外一点，即按钮文案的使用，建议明确告诉用户该页面的目的和功能，同时引导行为，而不是陈述性文案。用动词+宾语的格式来引导用户 *** 作，如：“去购买”比“商城”更清楚，“去玩牌”比“游戏”更清楚。
8、需同时考虑多平台的用户 *** 作习惯，如ios系统上的应用，页面需提供返回按钮，而安卓上的应用，按钮应避免过于靠近手机底部 *** 作栏，以防误 *** 作。
业务流程图的表达的6个关键问题业务流程图的“烹饪三部曲”
在绘制业务流程图前，思考如何精美，如何交互，使用什么工具，都不应该是重点。
真正重点的是将业务流程图的关键要素给搜集一番。请试图回答清楚以下几个问题，否则不要开始郑销橘绘制流程图：
整个流程的起始点是什么？整个流程的终结点是什么？
在整个流程中，涉及到的角色都是谁？
在整个流程中，都需要做什么事情？（可是是一个会议，可以是一个任务）
这些会议和任务是可选还是必选的？
分别产出什么文档？
这有点像一个头脑风暴，能够帮助你将所需用到的原材料获取到，有了这些“米”和“水”，那就不愁去如何烹饪了。
在项目管理中，上个月，我们也试图给去规范化一个数据产品的设计开发流程。
这是一个数据产品的项目，而我们都不是对此很有经验的人。所以我们召集到所有相关的角色，组织了一次头脑风暴及卡片分类法的混合式应用。
让大家头脑风暴出自己认为在项目里必须的节点，如“需求调研”，“需求分析”，“kick off会议”，“PRD撰写及确认”，“数据评估”，“技术架构”，“DEMO绘制”，“指标算法定义”，等等。
在头脑风暴过程中，主持人将这些节点都写到白板上，等没有新的节点诞生后，大家一起对节点进行合并归类。之后呢？
将这些剩余下来的真正有价值的节点，撰写到即时贴上，开始进行排序。在排序过程中，可以由一个人先主导，他会按照自己的理解，将各个节点放到按角色排布的泳道中，并设计好先后的顺序。在他进行的过程中，其他人不断进行提问：“这项任务开始前，需要什么样的条件？”“这个任务是必须的吗？”然后一起调整先后顺序。直到最终没有人有任何重大的异议。
之后拍照留念。
然后可整理成电子文档，如project或者excel版本（使用excel做项目管理？）
但是，业务流程图和上述项目中的流程不太相同的是：
项目中的各种活动节点有更宽泛的可配置性，任务A和任务B是否并行，还是串行，如果项目组成员达成共识，是可以调整，并且多做尝试的。所以可以用集思广益的做法去头脑风暴出一个暂定比较合理的流程。而业务流程图的梳理，有两种:
一种是基于现实发生的业务流程如实反映。这显然不是你一个团队能够YY的结果。更需要走到现实环境中，去调研，去梳理，去确认。
另一种是基于流程优化的方案，当你已经掌握了目前的流程现实如何运作时，基于分析，讨论，能够判断出流程中不合理的地方，给出一个更完善或者有更效率、成本更低的新的流程出来——或许你要求增加一个部门，或者你需要删减一个环节，或者中间的若干步使用新开发的系统去取代。
总之，大多数时候，你要想做第二种流程图，必然要先将第一种给梳理出来。所以，第一种如实反映的流程图是躲不过的。既然如此，基于YY或者头脑风暴是不现实的。我们需要走到前线去，掌握现实中业务是如何运作的。而且很多时候，越细节越好。
那怎么做呢？基于有限的知识与经验，我可以给如下建议：
调研——2.梳理呈现——3.评审确认三部曲，如图所示：
2. 调研——问正确的问题，多问问题，多问几个人
除了在本部分开始的那几个问题要顾及到，其实调研过程解决的仍然是who，what，why，how，以及where的问题：谁，在什么情况下，做了什么事情，喊团这个事情需要什么前置条件，又输出了什么，这个事情在哪里完成的？搞明白这几个问题，我们的调研就可以圆满完成了。
流程图的表现，要回答这几个问题：
Who——谁？部门，角色，岗位
What——什么事情？
Where——在哪里做的？在我梳理的业务流程图上，where更多表示是文档还是各种系统，用来表示信息化的程度。比如当我们梳理中发现，有一项登记，是用excel而不是业务系统来进行的，那么在这里的where就可以表示为：excel文档。
Document——那产生的这份文档叫什么名字？也写出来，代表有文件的传递，而以后要进行信息化的话，此份人肉文档也是需要被消除而被系统取代的。（相反，如果这项工作是在某个系统里 *** 作的，where就可以写成“人事系统”，文档可以继续存在，即该系统中的表单名称：“员工登记表单”）
Condition——条件。在这种条件下，下一个活动还能够继续，即用逻辑链接线的方式来表示一项活动的输入和输斗亮出，指向某个活动的箭头就表示此活动的前置输入条件。
Dicision——决策。有些活动会产生一个条件判断，根据不同的判断结果从而走不同的分支流程。比如输入员工信息的时候，可以根据员工之前是否就职过，选择不同的流程，对于已经就职过的，选用之前的工号而不用生成新的工号。
举个案例（如果不太恰当，请意会）。假设你受命要调研两家餐饮店的业务流程，目的是给他们提供性价比最高的点餐系统。
在调研中：
1. 你首先可以要求精通业务流程的人给你系统讲解一遍。
2. 调研具体 *** 作的人，来验证他给你讲解的是否全面和偏差。
3. 实地观察和记录（花点时间走遍业务流程）
三种方式相互结合使用。第一种方法可以让你首先建立一个系统观，了解大体枝干，但是很难切入到可能会出现问题的细节。第二种方法太依赖于问题的质量以及问问题的场景。有很多结论的不正确其实是因为问错了人或者问问题的方法不对。那么就需要借助第三种，在观察中再进行验证。
比如，你现在找到了一个厨师：
你主要负责做什么菜系？
热菜。
那菜单都是谁给你的？
我们的服务员。
她都怎么提供给你？
她负责客人点菜后，然后手写一个单子，给我放到窗口上。
单子上都会写什么？
桌号，菜名等
那如何客人点的是冷菜呢？
恩，有复印本，直接拿一份给冷菜间。
那你怎么开始工作呢？从洗菜到切菜，一直烹饪都是一个人吗？
哦，不，我只负责烹饪。当接到菜单后，首先我的助理会进行择菜，刀工进行切菜，这样如果有几个菜就完全可以并行。
当你们做好后呢？
放到窗口，按铃，喊桌号和菜名，传菜员就会传菜。
……
在这些问题中，就涉及到了“分单”，“切菜”，“择菜”，”烹饪”，“传菜”，“上菜”几个活动，也涉及到了“服务员”，“厨师”，“助理”，“刀工”，“传菜员”几个角色。几个活动的次序也比较清楚了。
而另一家餐饮店的业务流程却是不一样的，你同样抓住一个厨师进行询问：
要做什么菜，菜单是哪里来的？
打印出来的。
所有菜都会在这里打印吗？
哦，只有热菜在这里打印出来，冷菜、酒水就会在冷菜间和酒水间打印出来。
打印机是谁在 *** 作的？
没人 *** 作，它会自动打印不同的单子给我们。
……下面的问题，可能厨师就不了解了，要问点菜员了。
请问你是怎么点菜的？
拿设备啊，客人点菜就按几下，确认就好了。
之后呢？
之后就可以将菜单打印出来。
不同的菜系会在不同的烹饪间打印吗？
是的，我们可以分单打印。是在这中心打印机里完成分单。
然后，你可以继续调研烹饪后的传菜和上菜流程。
3. 梳理并呈现
你的调研和观察使你拥有了“烹饪”所需的原材料。
角色：部门、岗位或人
活动：做了什么事情
次序：做这些事情的次序如何
规则：什么情况下到什么事情
还记得我们之前提过的流程图要素吗？回顾下：
接下来的任务是不是很简单，对，就像填空题一样简单。将活动/事件按照一定的规则填到由部门和时间两条维度决定的框框里。
这个阶段是paper work，你需要将调研阶段收集到的原材料用更直观明了的方式呈现出来。从而能够更好进行评审和确认。也为以后的流程评审和优化做准备。
在刚开始，笔和纸的原始搭配仍然是最好的起步工具。你可以暂时忽略掉美观或者可复用的因素。但是当你对要呈现的流程已经有足够的信心时，就可以借助软件工具了。
3.1 复杂流程的分解
不可能将所有的活动都放到一张图里呈现。
“业务流程是有层次性的，这种层次体现在由上至下、由整体到部分、由宏观到微观、由抽象到具体的逻辑关系。这样一个层次关系符合人们的思维习惯，有利于企业业务模型的建立 企业部门之间的层次关系表。一般来说，我们可以先建立主要业务流程的总体运行过程（其中包括了整个企业的大的战略），然后对其中的每项活动进行细化，落实到各个部门的业务过程，建立相对独立的子业务流程以及为其服务的辅助业务流程。”
——引自《百度百科》 业务流程词条
对于很多新人来讲，业务最难的在于划分业务流程图的层次上。
首先，明确你要梳理的业务流程的范围——用大的粗略的关键节点，讲清楚这个业务流程范围中的故事，就是顶层业务流程图。你的顶层业务流程图是业务全局故事的简单表达，但是请注意这里的业务全局不见得是公司整体的业务全局，而是你界定好的业务范围。比如，下图是餐厅的日常运作流程图，若你界定的业务范围是面向顾客的点餐和结帐流程，那么这就是顶层业务流程图。但是若你界定的是整个餐厅的运作业务流程，那这显然还是一个子集——并没有包含餐厅的采购、供应商管理、一级库存管理等工作。
其次，先从顶层的业务流程分解开始，由粗至细。顶层业务流程图的梳理原则：
1. 界定范围内的业务全局故事。
2. 包含该范围内的关键节点。并且，当被质疑说某某环节怎么不存在时，自己要清楚它在下一层分解中应该被包含在那个关键节点中。比如，赠送10周年优惠券，应该会在结帐节点分解中出现。而打印分单，会在点菜节点中分解。而准备儿童座椅应该是接待入座环节。
3. 顶层流程图分解出来的关键节点未必都会细化分解下去，生成二级以及三级的流程图。这要看该节点涉及到的“活动”以及“角色”是否复杂。
再看一个案例，对传统生产型企业的进销存主业务流程进行分解。橙色的代表被分解点，已经可以分解为四层。当我们分解到第四层，发现再往下去涉及到的活动和角色都已经很少时，就不必再分解了，而是可以将第四层的关键节点直接作为第三层业务流程的“活动”，而不是子流程图。
当然，这是依赖于你梳理业务流程的目标。如果你偏偏是要对“打样”环节进行剖析优化，则还可以继续分解下去。
这一步的工作会帮你建立出清晰的流程目录结构，如下图所示是摘选于刚完成的一个流程梳理的项目中的目录结构部分。可以看到全图即是顶层关键节点，作为老大，可能只要看这一层就够了。下面则会对顶层做更多细化拆解。
“H3.样品认证”在顶层业务流程图中，仅仅是一个“活动”，而在自己细化的这一个层次中，则会包含详细的子活动一级参与者。
3.2 流程图的常用图示
我常用的就是前两行的“活动”，“判断”，“逻辑关系线”，“起始与终止”，以及第二行的“子流程”，和“文件/表单”。如果你不是符号控，我建议这几个就足够了。
其中，“子流程”此图示就是可以帮助你将流程分解得到的子流程能够串联起来，比如，当在”A流程”中涉及到进一步需要分解的”A1.1流程”时，就可以在”A流程”中用子流程符号代表“A1.1”。然后你的读者就会明白要想进一步了解”A1.1″应该参考另外一个流程图。
流程图的常用结构：
给大家看一些案例：
基本上包含大多数图示的流程图：
只用到少数几个图示画的简单流程图（台湾人的文档中称为程序图——不过这里的程序不是指计算机程序，而是process，仅仅是体现任务之间的处理流程，所以使用极简单的符号也不为怪了）：
以上两个流程图案例，从符号的复杂程度上来讲，一个是完整流程图，一个是基本流程图，但是从表现形式来讲，都属于“泳道图”——Swimlane。这也是我们最常用的一种表现形式了。泳道图能够很好体现部门或者角色在流程中的职责以及上下游的协作关系。且流程图本身的标准容易掌握，达成共识也就更加容易。
3.3 泳道图精要
2大维度：一般泳道图的横向会作为部门或岗位维，当然也有例外，如上述案例中就是横的泳道。而纵向则做为阶段维——时间是从上到下发展的。如果复杂的泳道图，在任务分解上可以在阶段维里做一些划分，比如“采购”，“生产”，“销售”，”配送”等。
活动流转：活动就像一个游泳员一样，游到不同的泳道中去执行任务。
在上文中的软件推荐部分，我推荐过smartdraw工具，此工具还附带了泳道图的模板，大家比较更快能够上手：
3.4 Do vs Donnot 业务流程图的注意事项！
DO
1. 让涉众参与，不要闭门造车
业务流程图包含了你图上的各个参与角色代表，与他们适时确认事情的原本流程，禁止自己YY。
2. 恰当的层次分解，不要将所有都铺到一张图上
如上所示。
3. 逐渐深入，先抓枝干
切忌胡子眉毛一把抓。
4. 流程一定有开始和结束
切忌交付出来的流程图，让读者还来问你：流程的开始点是什么？用清晰的代表开始和结束的符号来完成第一步和最后一步。
5. 编号，编号，编号
这是让沟通效率更高的优化措施。当你有了编号系统，相当于对你的流程图都赋予了唯一识别身份z号。这比中文名称更有效。比如当我们完成了业务流程图后，负责业务流程规则审核和优化的部门能够清楚在邮件里传达：H5.1流程优化，大家就更明确指的是什么。
DONNOT
1. 自己YY应用的环节而不是现实中的环节
2. 所有的环节都试图放到一张图上
3. 一开始就陷入细节，胡子眉毛一起抓
4. 流程很难让人分清楚从哪里开始，到哪里结束
4. 评审及后续行动
验证你是否做到了以上的DO，以及规避了Donnot的做法是什么？
很好办，及时与各位进行评审。将各个涉众都叫到一起，给他们看你梳理出来的成果。
这会发现一些有意思的事情，除了评审你的流程图是否符合现实外，也会评审目前的业务流程是否符合理想。不同的部门和岗位的代表会在这个评审中，确认当前，也会相互提出意见，甚至吵起来，这不失于做流程优化的一个很好的契机。暂且不表了。
一．流程图的特点在我们所介绍的流程图内，每一个框代表一道工序，流程线则表示两相邻工序之间的衔接关系，这是一个有向线，其方向用它上面的箭头标识，用以指示前森工序进展的方向．显然，在工序流程图上不允许出现几道工序首尾相连的圈图或循环回路，当然对每道工序还可以再细分，雹胡还可以画出更精细的统筹图，这一点完全类似于算法的流程图表示：自顶向下，逐步细化．
注意:在程序框图内允许有闭合回路，而在工序流程图内不允许出现闭合回路．
二．流程图的画法
1.程序流程图的画法
程序流程图是一种用规定的图形，指向线及文字说明来准确表示算法的图形，具有直观、形象的特点，能清楚地展现算法的逻辑结构．画程序框图的规则：使用标准的框图符号；框图一般按从上到下，从左到右的方向画；除判断框外，大源悔拦多数程序框图的符号只有一个进入点和一个退出点，而判断框是具有超过一个退出点的唯一符号．
2.工序流程图的画法
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）