5.1 原型设计 - 页面流程图

业务流程图重要的是说清楚了做什么事，而页面流程图则侧重在功能设计中，页面与页面之间的流转关系，即用户通过什么操作进入了什么页面及后续的操作及页面。由于这个属性，它一般处于业务流程图和原型制作之间。

1. 页面流程图是什么

a、处于业务流程图与原型设计之间，是交互设计、原型设计的基本依据。
b、用户视角的操作流程，把自己想成用户，完全模拟用户去思考页面流向，探索用户体验的合理性，发现体验上的问题。
c、大致元素及模型如下：
-编号代表页面编号，后续在原型中可延续使用，便于查找页面
-名称代表页面名称
-操作名称代表用户的动作
-核心元素代表页面中需要重点体现和表达的功能/内容
-注：有些时候有些操作并不会指向页面，而是发个短信等，也要在页面流程上表现出来，后面有举例

页面流程图概念模型

1.1 工具
a、建议Axure，页面流程图与信息架构图都是原型的底子
b、Visio，这个是便于跨部门沟通，office办公全家桶，你懂的
c、PPT，上台必备

2. 为什么要有页面流程图

a、突出页面元素和逻辑之间的关系，大致清楚页面中元素的跳转是怎样，提升原型设计的效率。
b、代表用户的操作流程，做页面流程图能够快速发现交互问题。（页面流程图是用户视角，业务流程图是后端视角）
c、成本低，一张图也许几个小时就能够完成，但是每一个页面的线框图全部画完可远不止这些时间。
d、能够让你更关注问题本质——行为路径，而不是过早陷入细节思考，并且还能够通过优化路径减少不必要的页面。

3. 怎么画页面流程图

3.1 回归业务流程，明确主线
a、页面流程一定来自于业务流程
b、一般为业务流程中的方形部分（大方形）
c、异常流程一般为弹层或者弹窗
d、业务流程画得好，页面流程就很简单

案例：需求梳理模块以及功能流程设计模块，咱们都举过一个优惠码功能的例子，这里咱们继续这个案例进行举例：

需求点：产品增加一个优惠码功能，让运营人员能够给用户发优惠码，用户下单时使用优惠码，抵扣相对应的折扣/金额。

业务流程图：