一、流程图的定义、优势及作用、基本构成元素
1. 什么是流程图?
ISO(国际标准化组织)对于流程图的定义,读起来有些晦涩难懂。通俗而言:流程图是通过使用箭头和不同形状的框,将流程中的关键操作路径呈现出来。
2. 流程图的优势及作用
流程图是对流程路径的一种可视化表达,易于理解,便于准确判断步骤之间的逻辑关系。规范的绘制思路和方法,可减少上下游不必要的沟通。
流程图对于记录复杂的操作任务流程很有帮助,在交互稿或交互文档中呈现流程图,有以下作用:
帮助交互设计师理清需求的关键任务路径。便于产品上下游人员快速了解核心操作流。有助于交互设计师对照复查页面流,避免缺漏或错误页面。
3. 流程图的基本构成元素
二、互联网产品设计中的流程图,大致可以分为三种类型
1. 业务流程图
表达产品业务逻辑的流转路径,不涉及具体操作与执行细节。通常使用“泳道图”来呈现多角色的配合,一般产品经理使用的较多。
2. 任务流程图
表达产品功能逻辑的流转路径,指完成某个具体任务的操作流程。这个相比业务流程图,已经落实到界面设计的流程中了。通常产品经理和交互设计师使用的较多。
3. 页面流程图
表达页面元素及页面之间的逻辑跳转关系。流程中流经的每个矩形框均对应一个页面,通常交互设计师使用的较多。
我把页面流程图细分为两种:
(1)流程图路径的每个矩形框均对应一个页面
下图1以Keep首页寻找训练课程的流程举例说明:
(2)将流程图和原型图结合的方式呈现,通常是呈现判断逻辑及相关页面
这种方式的优点:对页面逻辑判断更加直观。缺点是:针对一些判断比较复杂的功能页面,反而不利于呈现。
下图2以PC端“验证邮箱”举例说明:
三、交互设计师绘制任务流程图,需要注意的事项
(1)在绘制流程图时,需要将业务、功能和页面三者的描述区分清楚,避免不同类型的流程图混杂在一起
下图1是正常的邮箱注册任务流程图,但下图2的流程中红色框选路径,混入了有关业务的数据库匹配校验,以及具体的跳转页面名称,这些不是用户操作时关心的事情,属于多余的步骤。
(2)绘制流程图一般遵循从上往下,从左往右的结构,从整体的主流程到局部的分支流程
比如画流程图时,先把正常的流程梳理清楚(主流程),