准备工作：

打开页面任务列表、打开信息结构图(如何查看 项目的信息结构图)、浏览器中打开页面

页面截图工具

描述：

对页面进行截图,通过在页面中标注相关的信息点、逻辑、循环体等来对页面逻辑进行梳理。

通常页面中包含的数据分为公有数据(所有用户访问这个页面时看到的信息点[值和样式]都一样)和私有数据(用户访问页面时看到的信息点[值和样式]会出现不同)。

步骤：

1.打开页面任务列表，选择某一任务页面，并在浏览器中打开此页面，然后使用页面截图插件fireshot截图,根据页面的情况，如果存在弹窗或者tab都截一张图；如果tab中存在大量重复，可以选择性的少截一部分。

截图命名：页面名称+数字.jpg(或png)

2.将页面截图与信息结构图(记录系统包含了多少表,每个表的名字是什么,表中的记录都应该包含哪些字段.每个字段的类型是什么等详细信息的图表, 更多)对应

        页面截图与信息结构图对应实质是将截图的信息点与信息结构图中的字段对应并根据第三步形成框架图。

           * 扩展:  页面的本质是在于通过合理的样式以及交互形式向用户展示信息结构图中的字段,进而引导用户按既定流程执行来满足用户需求。

3.在Shutter(Ubuntu)中打开截图，并使用不同颜色或者不同形状区分信息点、逻辑、循环体形成框架图

使用红色方框圈出信息点(属于公有数据的)并使用箭头指向文字描述，描述包括表名和字段名(中文和机读名称，可通过信息结构图表间关系直接复制)，也可选择性的加上其他描述如:我的消息、购物车的商品等

使用紫色方框圈出信息点(属于私有数据的)并使用箭头指向文字描述，描述包括表名和字段名(中文和机读名称，可通过信息结构图表间关系直接复制)，也可选择性的加上其他描述如:我的消息、购物车的商品等

使用绿色圆框圈出存在逻辑事件的元素或者位置并使用箭头指向文字描述，描述包括事件的触发条件(如点击或者选项值改变等等)，跳入或者跳出该页面的参数名(参数名以及参数所对应的是那张表的哪个字段或者某条记录的_id或者其他)，触发结果：修改某个被监听页面层变量的值来同步数据或提交数据、直接打开页面等等

使用蓝色方框圈出循环体(循环部分)箭头指向文字描述，描述包括：循环部分所涉及的表（列出中文）

提示：当页面中存在循环体时，也就意味着下一步骤中需要用到数组绑定！

4.确定页面数据结构

确定信息点的模式：
(1)普通(单个信息点)
(2)下拉选项存在其他配置项(或者受其他表或字段控制，如：多级联动)

(3)树状(多数组嵌套)

数据结构是(2)(3)的情况：查看对应的表中是否存在控制信息parent字段，如果没有立即反馈项目经理

5.打开信息结构图，确定主体的循环体部分是否是只属于一张表中的信息

如果不属于，请询问技术经理；
如果技术经理不能立即给出回复，请切换下一个任务;
如果在修改或者新建或者删除过程中涉及到添加有lv标示的字段或者表，请咨询或者反馈给技术经理，正常情况中创建C修改U操作是不涉及带有lv标识的缓冲表的

6.确认逻辑部分的事件触发条件并添加逻辑描述

更新操作注意在提交数据时上传id(或_id或作为id的唯一性字段的值)

确定的内容：触发元素位置、传递参数(参数名以及参数所对应的是那张表的哪个字段或者某条记录的_id或者其他内容)

如：搜索按钮，列出搜索条件或者搜索输入框所对应的表的字段；修改按钮，可能是弹窗或者页面跳转进入下一个修改页面。

7.保存截图

在编辑完成后，保存截图，在SVN的项目文件夹的 workspace/printscreen 文件夹下创建以页面名称为名字的目录文件夹，如“a/3_1.html”,创建目录为“a_3_1”，完成之后提交SVN