页面流程图是处于业务流程图与原型设计的中间环节，借助页面流程图，可以让产品设计逻辑更清晰，把需要的内容和功能分配到不同页面。

一、什么是页面流程图

（1）交互设计/原型设计的底子，基本依据

（2）站在用户视角，代表用户所有可能的操作过程，页面流程能快速发现体验问题

（3）突出页面元素与逻辑关系，提升原型设计的效率

页面流程图

二、页面流程图和信息架构图的区别

页面流程图：以用户视角，主要看流程的合理性

信息架构图：以产品视角，主要看包含多少功能点

页面流程图适合于跳转比较复杂的产品功能，如电商、社交产品

信息架构图适合于层级分明的，如音乐产品、新闻客户端、阅读类产品等

三、如何画页面流程图

1.回归业务流程，明确主线

（1）页面流程一定来自于业务流程

（2）一般为业务流程中的方形部分

（3）异常流程一般为弹层或弹窗

2.明确页面中的重要元素

（1）功能在页面中，有哪些是需要变现元素

（2）增加异常流程的处理逻辑

（3）增加辅助的帮助页面

（4）考虑下游触发点

Tips：

页面一般用矩形表示，页面要体现关键的内容及主要操作按钮

使用圆矩形表示页面中各项操作。一个页面可以有多个操作，指向不同的页面

只体现系统的判断，用户本本身的判断不需要体现出来

案例一：

给产品增加一个优惠码功能，可以让运营人员通过向用户发放优惠码，用户在下订单的时候使用优惠码，抵相应折扣（金额）的功能

案例中，页面流程图只需要展示出用户前端的操作——用户使用优惠券进行兑换的操作路径。

（1）在购物车页面进行“提交订单”进行结算

（2）输入优惠码页面突出“什么是优惠码”的辅助内容。输入优惠码后点击“ 确认订单”，触发相关判断。

（3）订单确认页面重点突出金额相关信息，操作“去支付“，支付完成后跳转订单成功

优惠券使用页面流程图

案例二：

体验产品AppSo发布产品到「AppWall」的功能：

体验整个功能逻辑：点击发布——搜索app——编写内容——等待审核——发布成功的页面流程。

用户发布到「AppWall」页面流程图