页面结构图2018-07-10

什么时候需要画页面结构图？

在业务建模、模块划分，功能设计完毕后，出于以下目的会由产品出具页面结构图。

1.需要给到前端完整的页面清单，以及页面间的逻辑关系以便开发。

2.更清楚了解用户在使用产品时的跳转路径，使用是否流畅，是否存在断点，是否可以进行优化提高用户体验。

如何画页面结构图？

1.构图要素

（1）页面

表示页面。

（2）关系

表示页面间的逻辑关系，行为关系。

（3）判断

以上为构成页面结构图的主要要素。

2.需要注意的点

（1）元素只有页面，没有功能

页面结构图是用来展示页面，以及页面逻辑关系的图，最小单元为页面，不用在图中说明页面有什么功能，只需要描述清楚相关页面是因为什么事件、逻辑而发生关系。

（2）流程的包装

用户在完成一项目标时，会跳转多个页面，几个页面的组合构成一个完整的页面流程，可以将其进行包装成一个页面流程，在构图时仅展示页面流程元素，而不需要每次都画出全部相关页面。

（3）弹窗的描述

后面再补

总结

页面流程图是用来描述前端页面逻辑关系的图，对外可以捕捉用户产品使用路径，对内可以指导开发。

页面流程图和业务流程图不同，业务流程是藐视对象之间如何协作以完成一项目标，而页面结构图描述的是页面及其关系，两者并不一致，不能混用。

同一个业务流程图，在不同的产品方案中有会有不同的页面流程图，这取决于产品设计，用户体验设计等等。

关系