定义
页面流程图表现页面之前的流转关系——用户通过什么操作进了什么页面及后续的操作及页面。
为什么做，好处
一下子进入单页面，不先系统性规划，考虑每项功能的前置和后置，每项操作的上下文，容易顾此失彼，遗漏重要状态或忽视本应简化的任务。
好处之于对于设计师或产品经理：
- 页面流程图一张页面助你讲完完整的用户与系统的交互故事，借助它，你更容易知道流程中的潜在地雷是什么，哪里的效率比较低，有助于系统化、全局化、周全性的思考
- 细化工作量的基础，通过页面流程图可准确评估需要多少张页面。
- 聚焦：页面流程图中的每个页面都不必追求精细——你的目标是规划行为路径，而不是单页面交互设计，所以完全无需考虑页面内容、布局。所以你会更加聚焦于用户目标和任务的完成。不必过早陷入细节。
- 关键是很快。线框图有可能有几十张，你画起来没那么快，而且一旦进入细节，则还需要慢慢深究。但是页面流程图也许就是几个小时的事情。你就可以对整个项目心中有数了。
好处之于开发工程师：
- 可作为评估工作量的重要依据——可帮助他们对工作量也心中有数。
- 可做为开展代码工作的重要参考——特别是前端开发，必须得知道每一种操作指向什么页面。
- 他们会映射功能逻辑，会给你更多好的建议。
页面流程图简要
- 页面流程图目标：表现用户的不同的操作指令下不同页面流转关系。
2.** 页面=操作+内容**，操作是需要用户触发的，包含链接、按钮、表单等等。用户通过这些操作，看到同一个页面上不同的内容，或者跳转到其他的页面。
- 页面流程图元素：页面、操作或状态、连接线
页面用矩形表示，页面上要体现关键的内容块及主要操作。
操作用圆角矩形表示，放在连接线上。一个页面可引出多个操作指向不同的页面。
用椭圆表示意图，比如：购物页面，用户喜欢这个商品的话，可能会想做什么？目前我们提供了哪些功能可以继续往下走？当不喜欢的话，他们可能想要做什么？我们目前又做了什么挽留？
-
页面也有分类：请注意有些操作可能不会带你去一个实际的页面，而是有可能发个短信、发个邮件等，这些也需要被表现出来。
-
也有不适合用页面流程图去表现的网站，如果操作不是纵深型的一步步流程，而是平行中跳转，如门户类网站查看新闻的用例、如音乐类网站等等。这种情况下，最好用站点地图（site map）去表达页面从属关系就可以了。
6.移动APP需考虑系统物理返回键的状况，这也是操作的一种
页面流程图
怎么做
- 从第一个页面开始
- 不分用户类型，根据页面穷举各项操作，基于假设判断用户若点击什么就会到哪里。
原文给出了一个公益捐赠网站的例子，从idea到功能列表到业务流程图，在到页面流程图：
公益捐赠衣物网站
笔者试着画了一个在线购物网站的页面流程图，有几点感受：
微店页面流程图
- 流程图本来是为了全局思考，那种很大的页面排成一排再组连接线的，很漂亮，但很快画不下
- 复杂流程很容易交叉，混乱，和业务流程图一样，先主干再枝干，先画核心流程，放置于画布正中间利于扩充
- 关键功能，内容放置于页面不如放置于注释，清晰，利于扩充
- 页面，操作，判断，注释不同底色利于阅读
网友评论