web元素描述规范

来源：互联网发布：sql case when 编辑：程序博客网时间：2024/04/26 04:35

类型

功能要求

规范要求

适用范围

菜单

横排主菜单

1、菜单个数：

2、各项名称及顺序

3、对齐方式：

1、主菜单数目不应太多，以单排能全显示为优

2、主菜单的各菜单项宽度要接近，以字数一致为优

3、选择某一菜单项时，能有与其他项明显区分的标志（如：颜色区别，样式区别）

4、一组菜单的使用有先后要求或有向导作用时，应该按先后次序排列。

5、没有顺序要求的菜单项按使用频率和重要性排列，常用的放在开头，不常用的靠后放置；重要的放在开头，次要的放在后边。

6、如果菜单选项较多，应该采用加长菜单的长度而减少深度的原则排列

7、菜单项名称不建议换行

8、展开的菜单层不允许影响页面其他控件

添加主菜单（CRM主菜单，CSS主菜单）

横排子菜单

1、菜单个数：

2、各项名称及顺序

3、对齐方式：

添加子菜单（CRM子菜单，CSS子菜单）

竖排子菜单

1、菜单个数：

2、各项名称及顺序

3、对齐方式：

添加子菜单

（shipping页面的各市场的竖排子菜单）

输入框

单行文本框

1、类型：字母，中文，数字……

2、长度： 0 ---- 100 （具体设定）

3、对齐方式：

4、必填/非必填

1、控制不允许输入其它类型字符，而不是输入非法值后给予提示

2、当输入的内容达到了字段的长度限制时，请控制不允许再输入，而不是保存后自动截断或保存时给予提示

地址

姓名

……

多行文本框

1、类型：字母，中文，数字……

2、长度： 0 ---- 1000 （具体设定）

3、对齐方式：

4、必填/非必填

1、控制不允许输入其它类型字符，而不是输入非法值后给予提示

2、当输入的内容达到了字段的长度限制时，请控制不允许再输入，而不是保存后自动截断或保存时给予提示

3、滚动条：行数长度超过文本框的固定长度时使用滚动条。

4、回车换行进行下一行录入，不进行焦点转换

5、不能因为特殊的多行文本输入框而影响整个页面的效果，不能引起位置错乱现象

备注

说明

……

数字输入框

1、类型：数字

2、长度： 0 ---- 10 （具体设定）

3、对齐方式：

4、必填/非必填

1、控制不允许输入其它类型字符，而不是输入非法值后给予提示

2、当输入的内容达到了字段的长度限制时，请控制不允许再输入，而不是保存后自动截断或保存时给予提示

电话号码

员工号

数值输入框

1、类型：数值（正负数，小数）

2、长度：小数点前后各几位

3、对齐方式：

4、必填/非必填

1、控制不允许输入其它类型字符或超长度的字符，而不是输入非法值后给予提示

2、采用“千位记数”格式显示，每三位用“，”分隔

充值

返费

密码输入框

1、类型：字母（大小写区分），数字……

2、长度： 6 ---- 12 （具体设定）

3、对齐方式：

4、必填/非必填

1、显示：隐藏显示

2、控制不允许输入其它类型字符或超长度的字符，而不是输入非法值后给予提示

密码

邮件输入框

1、格式：11@123.com

2、对齐方式：

3、必填/非必填

1、输入非邮件格式时，给予提示。

邮件

10.

邮件确认框

1、格式：11@123.com

2、对齐方式：

3、必填/非必填

1、输入非邮件格式时，给予提示。

2、确认邮件与原邮件不一致时，直接提示，而不是在提交表单后提示。

确认邮件

11.

特定输入框

1、格式：特定格式

2、限制要求

3、对齐方式：

4、必填/非必填

1、满足特定格式，超出格式外的输入无效。

2、满足限制要求，超出限制的输入给予提示。

比较严格的限定条件

12.

日期选择输入框

1、格式：2010-11-01

2、功能：可选择，可输入

3、对齐方式：

4、必填/非必填

1、只允许输入日期、时间的输入框请给予格式化，而不是输入非法值后再给予提示

2、默认值为当天

日期控件

13.

下拉选择输入框

1、类型：字母

2、功能：可选择，可输入

3、对齐方式：

4、必填/非必填

5、数据来源：

1、输入值不存在于下拉列表中，提交后，即存入下拉列表

2、输入值存在于下拉列表中，不重复保存到列表中

3、默认值为空

下拉框

选择框

14.

单选Radio

1、选择项名称及顺序

2、唯一单选

3、默认值

4、对齐方式：

5、必填/非必填

6、只读/可写

1、一个Radio对应一个选择项

2、避免两个单选按钮表示同一内容的两种状态（例如YES/NO）

3、必须有一个选项是选中的

4、在表单录入页面中，单独成行，集中水平放置；在列表中应集中竖排放置

5、为只读时，显示默认值，变为灰色，不可修改

选盒子，选号

选计划

15.

复选Checkbox

1、选择项名称及顺序

2、默认值

3、对齐方式：

4、必填/非必填

5、只读/可写

1、选项标记为可以打勾的方框，选项之间没有互斥关系，可以选择一个或者多个。

2、为只读时，显示默认值，变为灰色，不可修改

查询条件

16.

下拉选择框

1、选择项名称及顺序

2、默认值：“请选择”

3、对齐方式：

4、必填/非必填

5、只读/可写

6、数据来源：

1、保证选择框的宽度能显示最长的选择项。

2、有默认选项的，显示为默认选项，没有默认选项的，给予提示选项，如“—请选择—”

3、打开下拉框时，框体须在当前屏完整显示，即下拉框在屏幕下方时，向上延展，反之，向下延展。选项过多时，应用滚动条。

4、为只读时，显示默认值，变为灰色，不可修改

固定条件的下拉框

17.

级联下拉框

1、选择项名称及顺序

2、默认值：“请选择”

3、对齐方式：

4、必填/非必填

5、只读/可写

6、数据来源：

1、保证选择框的宽度能显示最长的选择项。

2、有默认选项的，显示为默认选项，没有默认选项的，给予提示选项，如“—请选择—”

3、打开下拉框时，框体须在当前屏完整显示，即下拉框在屏幕下方时，向上延展，反之，向下延展。选项过多时，应用滚动条。

4、为只读时，显示默认值，变为灰色，不可修改

5、前一级下拉框选择后，才能显示下一级选择框的选项，并进行选择。

6、选择不同的选项时，保证各级下拉框位置和宽度不发生变化。

选号

按钮

18.

提交按钮

样式：button

描述：“提交”

1、当提交所费的时间较长时，需给予进度界面提示。

2、必须控制不可以重复提交

3、提交失败后必须保存用户已经输入的内容，以便再次提交。

19.

返回按钮

样式：button

描述：“返回”

1、当从一个页面点击按钮或链接进入子页面时，子页面必须提供返回按钮

20.

取消按钮

样式：button

描述：“取消”

1、在数据量较多的页面中，当进行了修改后，取消请给予提示。

2、取消返回到原记录所在的位子

21.

重置按钮

样式：button

描述：“重置”

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

22.

新增、保存按钮

样式：button

描述：“新增”

1、新增的记录必须排在首页首行。

2、提交失败后必须保存用户已经输入的内容，以便再次提交。

3、提交时需对主要标识字段进行重复值、空值（空格）判断。

23.

修改按钮

样式：button

描述：“修改”

1、如界面存在复选按钮，勾选多条记录进行修改时，需给予只能对一条记录进行修改，默认为第一条的提示信息。

2、修改加载的内容都为该记录的实际内容，而不再为默认值。

3、修改完成后必须回到原记录所在位置，且刷新显示修改后的值。

4、提交失败后必须保留用户修改的内容，以便再次提交。

5、在查询条件下修改返回后，如不满足查询条件则不显示。

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

24.

删除按钮

样式：url

描述：“删除”

1、必须有确认删除的提示信息。

2、删除成功后刷新不现实删除的记录。

3、删除成功后返回到原记录所在页面，而当原记录所在页不存在时，则返回上一页。

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

25.

步骤按钮

样式：button

描述：“下一步”

1、有步骤关系的，中间步骤需提供上一步，下一步功能，第一步只需提供下一步功能，最后一步只需提供上一步功能。

2、表单上一步，需加载上一步操作的内容。

注册步骤

26.

查询按钮

样式：button

描述：“查询”

1、每次查询后定位到首页。

2、每次查询后保留当前查询条件

3、当查询条件较多时，请配以重置按钮一同使用。

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

5、除用户明确要求不需要外，需提供模糊查询及组合查询功能。

27.

上传按钮

样式：button

上传文件格式：

上传文件大小限制：

1、弹出上传文件选择窗口

2、提示格式要求

3、超出大小限制给予提示

4、显示进度条

5、需要显示上传文件的，能明显显示，提示已上传完成

6、需要校对上传文件内容的，提示上传文件是否匹配。

7、需要显示上传文件内容的，能正确显示。

load 盒子

28.

下载按钮

样式：button

1、弹出下载窗口

2、显示下载进度条

29.

导出按钮

样式：button

导出格式：

1、弹出文件保存窗口

2、格式默认为导出格式；有多种格式的可以进行选择。

3、导出文件内容是否按要求显示

导出报表

30.

打印按钮

样式：button

1、弹出本机打印设置页面

打印控件

表单

31.

表单必填项

是否必填

1、界面的必填项必须以红色*号标识出来。

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

3、当界面排列较紧时，必填项没有填可以以弹出信息的方式来提示，光标移走时弹出或最后提交时

32.

表单输入提示

输入提示：

1、一般标注在该数据项后或下一行，提示文字较多时，合理安排显示样式。

33.

表单显示

只读

1、表单中内容如为定长，则为居中显示；如为不固定的中英文内容，则为居左显示；如为数值形式，则为居左显示。

2、保证表格的宽度不被挤变形，对于不定长的内容，可固定显示宽度，当超出此显示宽度后，换行显示或以……显示，光标停留后，详细内容再在浮动层显示。

报表

34.

报表显示

表头：

1、表头固定，不因为表格内容使表格宽度发生变化

2、除非必要，不建议横排滚动

分页

35.

分页

样式：

单页显示记录数：

1、带条件进行翻页时，翻页同时可执行查询功能。

2、如翻页后进入子页面，子页面需从首页开始显示。

3、如有单页复选功能，翻页后不保留选中状态。

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

弹出框

36.

弹出框

样式：居中最上层独占

内容：

1、弹出框置于主窗体之上的中心位置

37.

弹出层

样式：居中最上层显示，下层变灰，独占

提示信息

38.

提示信息

1、提示信息中标点符号请统一为全角符号。

2、提示信息如有主语，请统一为‘您’。

3、复杂的操作在成功后给予提示信息。

4、需要后续操作的操作在成功后给予提示信息。

5、提示信息不宜太长，宽度不能超过当前窗口的1/2；当超过此比例时，请视具体情况进行换行。

6、当功能按钮为图片按钮时，光标停留需给予浮动提示信息。

键盘支持

39.

常用键

1、支持回车键提交。

2、支持TAB键、Shift+tab键移动光标焦点。

3、 TAB键移动遵循从左上至右下的原则。

4、剪切，复制，拷贝，回车等快捷键

其他细则

40.

控件布局

1、重要的命令按钮与使用较频繁的按钮要放在界面上注目的位置

2、错误使用容易引起界面退出或关闭的按钮不应该放在易点位置。横排开头或最后与竖排最后为易点位置。

3、按钮大小基本相近，忌用太长的名称，免得占用过多的界面位置

4、按钮的大小要与界面的大小和空间要协调

5、避免空旷的界面上放置很大的按钮

6、放置完控件后界面不应有很大的空缺位置

7、当选项特别多时，可以采用列表框，下拉式列表框

41.

完整性考虑

1、应当注意尽可能避免用户无意录入无效的数据。

2、对可能发生严重后果的操作要有补救措施。通过补救措施用户可以回到原来的正确状态

3、对一些特殊符号的输入、与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符

4、对可能造成等待时间较长的操作应该提供取消功能

42.

容错性

1、对错误操作最好支持可逆性处理，如取消系列操作

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

3、对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽