web元素描述规范
| NO |
类型 |
功能要求 |
规范要求 |
适用范围 |
菜单 |
||||
| 1. |
横排主菜单 |
1、 菜单个数： 2、 各项名称及顺序 3、 对齐方式：
|
1、 主菜单数目不应太多，以单排能全显示为优 2、 主菜单的各菜单项宽度要接近，以字数一致为优 3、 选择某一菜单项时，能有与其他项明显区分的标志（如：颜色区别，样式区别） 4、 一组菜单的使用有先后要求或有向导作用时，应该按先后次序排列。 5、 没有顺序要求的菜单项按使用频率和重要性排列，常用的放在开头， 不常用的靠后放置；重要的放在开头，次要的放在后边。 6、 如果菜单选项较多，应该采用加长菜单的长度而减少深度的原则排列 7、 菜单项名称不建议换行 8、 展开的菜单层不允许影响页面其他控件 |
添加主菜单（CRM主菜单，CSS主菜单） |
| 2. |
横排子菜单 |
1、 菜单个数： 2、 各项名称及顺序 3、 对齐方式： |
添加子菜单（CRM子菜单，CSS子菜单） |
|
| 3. |
竖排子菜单 |
1、 菜单个数： 2、 各项名称及顺序 3、 对齐方式： |
添加子菜单 （shipping页面的各市场的竖排子菜单） |
|
输入框 |
||||
| 4. |
单行文本框 |
1、 类型：字母，中文，数字…… 2、 长度： 0 ---- 100 （具体设定） 3、 对齐方式： 4、 必填/非必填 |
1、 控制不允许输入其它类型字符，而不是输入非法值后给予提示 2、 当输入的内容达到了字段的长度限制时，请控制不允许再输入，而不是保存后自动截断或保存时给予提示 |
地址 姓名 …… |
| 5. |
多行文本框 |
1、 类型：字母，中文，数字…… 2、 长度： 0 ---- 1000 （具体设定） 3、 对齐方式： 4、 必填/非必填
|
1、 控制不允许输入其它类型字符，而不是输入非法值后给予提示 2、 当输入的内容达到了字段的长度限制时，请控制不允许再输入，而不是保存后自动截断或保存时给予提示 3、 滚动条：行数长度超过文本框的固定长度时使用滚动条。 4、 回车换行进行下一行录入，不进行焦点转换 5、 不能因为特殊的多行文本输入框而影响整个页面的效果，不能引起位置错乱现象 |
备注 说明 …… |
| 6. |
数字输入框 |
1、 类型：数字 2、 长度： 0 ---- 10 （具体设定） 3、 对齐方式： 4、 必填/非必填 |
1、 控制不允许输入其它类型字符，而不是输入非法值后给予提示 2、 当输入的内容达到了字段的长度限制时，请控制不允许再输入，而不是保存后自动截断或保存时给予提示 |
电话号码 员工号 |
| 7. |
数值输入框 |
1、 类型：数值（正负数，小数） 2、 长度：小数点前后各几位 3、 对齐方式： 4、 必填/非必填 |
1、 控制不允许输入其它类型字符或超长度的字符，而不是输入非法值后给予提示 2、 采用“千位记数”格式显示，每三位用“，”分隔 |
充值 返费 |
| 8. |
密码输入框 |
1、 类型：字母（大小写区分），数字…… 2、 长度： 6 ---- 12 （具体设定） 3、 对齐方式： 4、 必填/非必填 |
1、 显示：隐藏显示 2、 控制不允许输入其它类型字符或超长度的字符，而不是输入非法值后给予提示 |
密码
|
| 9. |
邮件输入框 |
1、 格式：[email protected] 2、 对齐方式： 3、 必填/非必填 |
1、输入非邮件格式时，给予提示。 |
邮件 |
| 10. |
邮件确认框 |
1、 格式：[email protected] 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、 对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽 |
|