web功能界面设计规范标准[详]

Web页面通用规XXXX软件技术

修订记录

目录WEB页面通用规1

1引言1

1.1目的1

1.2围1

2一般页面功能说明1

2.1新增1

2.2修改1

2.3删除1

2.4查询2

2.5取消2

2.6提交2

2.7重置2

2.8返回2

2.9分页2

2.10全选3

3一般页面规则说明3

3.1默认值3

3.2必填项3

3.3界面传递3

3.4窗口嵌套3

3.5输入框4

4页面元素交互4

4.1操作结果确认4

4.2其他规则4

1 引言

1.1 目的

本文用于规我公司所开发的产品中对于页面的通用需求设计工作，明确在设计中所要遵循的准则和方法，web页面中各个通用功能元素的规格要求，确保所实现的通用功能按钮在结构和功能上的统一，提升软件产品的品质。

1.2 围

本规适用于公司所有的软件产品。

2 一般页面功能说明

2.1 新增

当新增一条或多条记录，要求：

●新增的记录必须排在首页首行；

●必填项字段必须有特殊标示；

●提交时需对必填项字段进行重复值、空值（空格）判断；

●新增容提交失败后，须保留用户修改的容，以便再次修改提交；

●新增成功后必须有成功提示。

2.2 修改

当进行单条或多条记录的修改时，要求：

●如界面存在复选按钮，勾选多条记录进行修改时，每次只能对一条记录进行修改，默认修改

容为第一条的提示信息；

●必填项字段必须有特殊标示；

●修改后加载的容应为的实际容，而不再为默认值；

●修改完成后须回到原记录所在位置，且刷新显示修改后的值；

●修改容提交失败后，须保留用户修改的容，以便再次修改提交；

●在查询条件下修改后返回，如不满足查询条件则不显示；

●需对主标识字段进行重复值、空值（空格）判断；

●修改成功后必须有成功提示。

2.3 删除

当删除一条或多条记录，要求：

●必须有确认删除的提示信息；

●删除成功后刷新，不显示删除的记录；

●当被删除的记录与其他记录存在关联时，提示界面给予不允许删除、更明细提示等信息；

●删除成功后必须有成功提示。

2.4 查询

当按照条件查询时，要求：

●每次查询后保留当前输入的查询条件；

●当未查询到任何记录时，需给予未查找到相关记录的提示信息；

●除了用户明确要求不需要外，需提供模糊查询功能；

2.5 取消

当进行取消当前修改并返回时，要求：

●取消请给予提示；

●取消返回到原记录所在状态；

2.6 提交

当提交容时，要求：

●当提交所费的时间较长时，需给出等待的提示，如：沙漏；

●提交成功后不可重复提交；

2.7 重置

重置是恢复变更前的状态，要求：

●必须保证重置后与初始进入此页面时一致性；

2.8 返回

当需要返回前一个页面时，要求：

●当从一个页面点击按钮或进入子页面时，子页面必须提供返回按钮；

2.9 分页

当需要分页显示数据时，要求：

●当对查询结果进行分页时，分页的同时需要能够执行查询功能；

●当页数较多时，允许输入具体页数进行查询；

2.10 全选

当在一个页面上存在多个同类容的复选框时，需要提供全选的功能，要求：

●勾选全选，则选中当前页面所有记录；

●去掉当前页面某个记录的勾选，则全选也去掉勾选；

●刷新页面后，自动去掉已勾选的记录及全选的勾选；

3 一般页面规则说明

3.1 默认值

各个页面都会存在默认值。

要求：

●当输入框不存在默认值时，默认为空，当存在默认值时，请显示默认值

●当选择下拉框不存在默认值时，则默认为“请选择”，当存在默认值时，请显示默认值；

3.2 必填项

对界面必填项的要求：

●界面的必填项必须以红色*号标识出来（或者有特殊提示说明）。

●当必填项没有填写时，可在光标准备移走时，在文本框后以“请输入”红色文字标识；

●如果必填项没有填，可以通过弹出信息的方式来提示，或者光标移走时弹出，或者最后提交

时弹出。

3.3 界面传递

对于程序执行过程中，会出现父窗体与子窗体参数同步传递的情况，规则是：

●当父窗体与子窗体都存在同样的查询条件时，父窗体已输入的查询条件必须被带到子窗体

中；

●当子窗体的任何操作影响了父窗体的数据时，子窗体关闭返回，但必须刷新父窗体的数据；

●关闭父窗体必须连同子窗体一同关闭；

●子窗体的大小不能超过父窗体，且不要遮住父窗体的主要信息；

3.4 窗口嵌套

针对多层页面窗口的嵌套情况，要求：

●如果存在多层嵌套页面窗口，每层页面窗口弹出时都自动往右下移动一点点，以保证不遮盖

上层页面窗口标题为准；

●页面窗口嵌套层次最好不超过3层；

3.5 输入框

对于输入框操作的限制，规则是：

●只允许输入数字的输入框需要控制其它字符的输入，或在输入非法值时给予提示，或在输入

框不再捕获非法值；

●只允许输入日期、时间的输入框需要通过格式化方式约束输入，而不是输入非法值后给出提

示；

●当输入的容达到了字段的长度限制时，不显示新输入的的数值，并提示不允许再输入，而不

是保存后自动截断；

4 页面元素交互

4.1 操作结果确认

在提交数据，或是载有数据的页面关闭，或其他需要和用户进行确认交互的场景，需要软件能够提供一个以弹出页面形式，要求用户确认执行结果的对话框，包含的情况有：

●提示确认输入信息正确：弹出对话框，给出“确定”和“取消”的选择按钮；

●提示确认数据更改是否保存：弹出对话框，提示当前页面容已经改变，要求用户确认是否保

存更改的信息，给出“是”和“否”的选择按钮；

●确认删除数据容：弹出对话框，提示用户删除了当前选择的容，要求用户确认是否继续删除

的操作，给出“确定”和“取消”的选择按钮；

4.2 其他规则

对于信息交互过程中，其他需要遵守的规则有：

●重要的命令按钮与使用较频繁的按钮要放在界面上相对固定的位置上；

●容易引起操作错误或使程序退出、关闭的按钮应不醒目，放在不易点位置；

●与正在进行的操作无关的按钮应该加以屏蔽，例如：按钮背景为灰色显示；

●对可能造成数据无法恢复的操作必须提供确认信息，给用户放弃选择的机会；

●非法的输入或操作应有足够的提示说明；

●对运行过程中出现问题而引起错误的地方要有提示，让用户明白错误出处，避免形成无限期

的等待；