流程图应用于许多领域，在互联网产品设计中，无论是产品经理、交互设计师，或者开发人员，都经常接触到各种类型的流程图。流程图不应该考验阅读者的理解能力，因此如何绘制清晰简洁的流程图，值得深入思考。本文将结合案例，说明互联网产品设计中，交互设计师绘制相关流程图需要注意的事项。
一、流程图的定义、优势及作用、基本构成元素
1. 什么是流程图？
ISO（国际标准化组织）对于流程图的定义，读起来有些晦涩难懂。通俗而言：流程图是通过使用箭头和不同形状的框，将流程中的关键操作路径呈现出来。
2. 流程图的优势及作用
流程图是对流程路径的一种可视化表达，易于理解，便于准确判断步骤之间的逻辑关系。规范的绘制思路和方法，可减少上下游不必要的沟通。
流程图对于记录复杂的操作任务流程很有帮助，在交互稿或交互文档中呈现流程图，有以下作用：
帮助交互设计师理清需求的关键任务路径。
便于产品上下游人员快速了解核心操作流。
有助于交互设计师对照复查页面流，避免缺漏或错误页面。
3. 流程图的基本构成元素
二、互联网产品设计中的流程图，大致可以分为三种类型
1. 业务流程图
表达产品业务逻辑的流转路径，不涉及具体操作与执行细节。通常使用“泳道图”来呈现多角色的配合，一般产品经理使用的较多。
2. 任务流程图
表达产品功能逻辑的流转路径，指完成某个具体任务的操作流程。这个相比业务流程图，已经落实到界面设计的流程中了。通常产品经理和交互设计师使用的较多。
3. 页面流程图
表达页面元素及页面之间的逻辑跳转关系。流程中流经的每个矩形框均对应一个页面，通常交互设计师使用的较多。
我把页面流程图细分为两种：
（1）流程图路径的每个矩形框均对应一个页面
下图1以Keep首页寻找训练课程的流程举例说明：
（2）将流程图和原型图结合的方式呈现，通常是呈现判断逻辑及相关页面
这种方式的优点：对页面逻辑判断更加直观。缺点是：针对一些判断比较复杂的功能页面，反而不利于呈现。
下图2以PC端“验证邮箱”举例说明：
三、交互设计师绘制任务流程图，需要注意的事项
（1）在绘制流程图时，需要将业务、功能和页面三者的描述区分清楚，避免不同类型的流程图混杂在一起
下图1是正常的邮箱注册任务流程图，但下图2的流程中红色框选路径，混入了有关业务的数据库匹配校验，以及具体的跳转页面名称，这些不是用户操作时关心的事情，属于多余的步骤。
（2）绘制流程图一般遵循从上往下，从左往右的结构，从整体的主流程到局部的分支流程
比如画流程图时，先把正常的流程梳理清楚（主流程），再考虑判断标识中的逆流程（分支流程）。
下图以印象笔记的手机号注册流程举例说明：左侧为主流程，右侧为分支流程。
（3）流程图的路径走向需要有始有终，形成闭环。不能存在某个步骤中断找不到解决办法的情况
下图在邮箱注册流程中，红色框选部分判断“邮箱是否有效”时，没有说明邮箱无效时该如何解决，这里的流程是缺失的。
（4）灵活使用子流程
某些子流程可能被频繁复用，如果每次都把子流程展现出来，一方面增加绘制时间成本，另一方面使流程图变得冗余，降低了可阅读性。因此被频繁复用的子流程可以绘制后存入“流程图库”中，这样再次使用该子流程时，只需要用子流程标识说明即可。
“流程图库”是指某个产品中经常需要被复用的基础流程图的集合。依据不同的产品建立不同的流程图库，也便于多位交互设计师协同工作。
如下图，某后台用户需要修改更换手机号，但是在修改手机号之前需要该用户输入账号的密码，出于安全性考虑需要二次确认用户身份。图中蓝色框选区域是“手机验证码校验”的子流程。
（5）流程图的结构大致分为：顺序结构、条件结构和循环结构
至于结构更复杂的流程图基本也是由这几种结构组合而成。
下图以keep健身应用查找训练课程的流程为例说明：
顺序结构：一般指主流程。
条件结构：牵扯到逻辑判断。经常遇到需要处理的是“是或否”的选择。
循环结构：条件本身的满足状态处于可激活状态，通过重复某一要素可满足该状态。常见形式是形成小范围的闭环，比如：上面提到的输入账号密码错误的情况。
（6）按照模块绘制
往往一个大的需求中包含多个任务流程图，这种情况可以按照不同的任务绘制。比如一个App包含“登录注册、购买支付、身份验证等功能”，其中每个功能都对应一个或多个任务流程图。
（7）流程图中的连接线避免出现交叉，否则会降低可阅读性
总结
以上内容简单介绍了互联网产品设计中常用流程图的基本概念，着重介绍了与交互设计师工作相关的流程图类型，以及绘制任务流程图需要注意的事项。
目的是帮助交互设计师绘制出清晰简洁的流程图，也便于产品上下游工作人员快速理解需求的核心任务路径。
需要注意的是，以上提及的内容是普遍适用的规则，希望大家能根据实际项目的具体情况灵活使用。规范只是给你提供一个指引避免方向错误，切记不要被规范约束而无法因地制宜。
参考文献：
原创文章，作者：研究院精选，如若转载，请注明出处：https://www.pmtemple.com/academy/8270/
微信扫一扫
支付宝扫一扫
相关推荐
-
一张纸秒破屏下指纹锁，全面屏手机纷纷中招,产品安全设计须谨慎
屏下指纹解锁安全漏洞不容忽视，产品安全设计须谨慎。 建议各互联网企业针对此漏洞赶紧制定应对方案，金融行业APP、社交行业APP、政务类APP等都须针对安卓全面屏下解锁功能的手机停用指纹授权的功能，如指纹支付和指纹登录等应用场景。 10月24日，GeekPwn2018国际安全极客大赛在上海开幕。继前年的鼻尖解锁、去年的照片解锁之后，手机解锁又被破解高手们“盯上…
-
[HTTP-4]-HTTP协议中的状态码（下）
接上节的内容，本节我们将4XX和5XX的状态码。 4XX客户端错误 4XX的响应结果表明客户端时发生错误的原因所在。 （1）400 Bad Request 该状态码表示请求报文中存在语法错误。当错误发生时，需修改请求的内容后再次发送请求。另外，浏览器会像200 OK一样对待该状态码。 （2）401 Unauthorized 该状态码表示发送的请求需要有通过H…
-
6.6 其他重要市场研究工具
近年来，计算机和社交媒体开辟出了产品开发中市场研究的新路径，包括中包和大数据。这些技术并不完全落入定性或定量的框架。从统计信度的角度拍，研究成本不是遵循统计方法而获取的。但是两种方法收集的受访者数量众多，能够在很大程度上弥补统计信度的缺失。 一、众包 众包的定义是：通过大量征集他人的解决方案，从中获取信息并将其用于特定任务或项目的一些工具。该服务可以是有偿的…
-
2020敏捷年度状态报告十大看点
一年一度的敏捷状态报告又新鲜出炉了，敏捷年度报告至今已有14年，超过4万企业高管、敏捷实践者和顾问参与了调研。2020年黑天鹅不断，这个世界越来越不确定了，面对世界的不确定性，企业界对敏捷的关注和认知、敏捷的实施状况、行业趋势是怎样的呢？ 2020敏捷年度报告基于全球范围内的1100个IT和业务专业人士的深度调查，为您呈现敏捷最新行业趋势和动态。在本文中…
-
图解产品经理与项目经理的区别
产品经理：做正确的事情（前期） 项目经理：把事情做正确（过程） 区别一 项目经理要求技术背景，一般团队的项目经理由非常有项目经验的RD担当，他的职责在于将目标转化为可量化可实现的项目计划，偏重于执行层面。而产品经理的知识领域较泛，且不一定非要求懂技术。 区别二 从责任周期来说，项目经理职责有始有终，他可以负责完一个项目后，再无缝切换到另外一个项目，而产品…
-
产品经理需清楚产品也是有“生命”的，否则很容易“夭折”！
导读：任何一个产品都是有生命的，都会从幼小期发展到成熟，直到最终老去。即使是一款APP产品，也像一个生命一样，有自己的诞生、成长和进化或者消亡。这些产品的生命周期不仅取决于创造者，还取决于使用者。 任何一个产品都是有生命的，都会从幼小期发展到成熟，直到最终老去。即使是一款APP产品，也像一个生命一样，有自己的诞生、成长和进化或者消亡。这些产品的生命周期不仅取…
-
最新Axure RP 9.0.0.3630 Beta版软件与汉化下载
Axure RP 9.0.0.3630 Beta版在北京时间今天上午8:06发布。 此次更新内容如下： 修复从另一个程序将焦点返回到Axure RP时可能出现的错误循环。 是的，就这么一个问题修复，就发了个新版本，可见问题还挺严重的。 不过，这一次的汉化文件也补充了一些遗漏的词条。 官方软件下载地址（慢）：【Windows版下载】【Mac版下载】 软件与汉化…
-
5F产品工作法：寻找、过滤、方案、功能和反馈
工作以来，接触过很多类型的产品，做过客户端、玩过网站、钻研过APP、体验过做营收。产品的类型不一样，可能工作内容也有所不同。如果你每做一个需求，每换一个项目，都需要从头冥想，这并不是一个高效的做事方法。做人讲究随遇而安，但做产品不是的。无论设计什么类型的产品，最重要的是标准化流程，组件化需求，提炼出可迁移、可复制的工作方式。下面分享一下Glen总结的5F产品…
-
1.1 & 1.2 战略定义与角色
一、什么是战略？ 1、广义定义 能够引向理想未来的一个方法或计划。例如，某个目标的实现路径或某个问题的解决方案。 2、商业环境下的定义 战略能够定义与传播一个组织的特定定位，说明应当如何整合组织的资源技能与能力，以获取竞争优势。 或者： 基于行业定位、机遇和资源，企业为实现长远目标而定制的规划。 二、战略的角色 一份定义明确的产品开发战略是新产品取得成功的关…
![[HTTP-4]-HTTP协议中的状态码（下）](https://pmtemple.oss-cn-hangzhou.aliyuncs.com/wp-content/uploads/2020/09/2-1600334199.jpeg?x-oss-process=image/resize,m_fill,w_480,h_300,limit_0)
