后台界面统一规范

目录

1. 目的 .......................................................................................................................................... 2

2. 范围 .......................................................................................................................................... 2

3. 定义 .......................................................................................................................................... 2

4. 测评指标................................................................................................................................... 2

5. 关键角色及应付责任............................................................................................................... 2

6. 内容描述................................................................................................................................... 2

7. 其他要求................................................................................................................................... 8

8. 相关文件................................................................................................................................... 8

9. 附件 .......................................................................................................................................... 8

1. 目的

规范后台系统的风格，使最终设计出来的界面风格一致化，遵循统一的操作规范，以标准化的方式设计界面，提高工作效率。减少和改变责任不明，任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。 产品设计通过规范的方式来达到以用户为中心的目的。

2. 范围

适用于公司所有内部系统。

3. 定义

无

4. 测评指标

无

5.

关键角色及应付责任

序号 角色 应负责任

001 美工 按照规范要求进行切图，界面设计。

002 开发工程师 系统功能编码、开发

003 测试工程师 验证系统界面是否符合规范要求。

6. 内容描述

(一) 遵循的基本原则

1) 显示信息一致：无论是控件使用，提示信息措辞，还是颜色、窗口布局风格，遵循统一的标准，做到真正的一致。

2) 以用户为主导，明确用户是所有系统处理的核心

3) 易用性：用户不用查阅帮助就能知道该界面的功能并进行相关正确的操作。做到望文知意最好。

4) 系统响应时间：0-5秒鼠标显示成为沙漏；5秒以上显示处理窗口，或显示进度条； 一个长时间的处理完成时应给予完成警告信息。

5) 出错信息和警告原则： 信息以用户可以理解的术语描述；信息简明扼要，指出出错原因并提供解决办法提示。

6) 信息显示：只显示与当前用户语境环境有关的信息；使用一致的标记、标准缩写和颜色，显示信息的含义应该非常明确，用户不必再参考其它信息源；

7) 数据输入：尽量减少用户输入动作的数量；维护信息显示和数据输入的一致性；可能的话提供默认值、绝不要让用户提供程序中可以自动获取或计算出来的信息。

8) 合理性：与正在进行的操作无关的按钮应该加以屏蔽（使用灰色显示）；对可能造成数据无法恢复的操作必须提供确认信息，给用户放弃选择的机会；非法操作或输入有足够的提示说明

9) 美观与协调：界面风格要保持一致，字的大小、颜色、字体要相同，除非是需要艺术处理或有特殊要求的地方；如果窗体支持最小化和最大化或放大时，窗体上的控件也要随着窗体而缩放；切忌只放大窗体而忽略控件的缩放。

(二) 界面设计规范

1) 【功能名称】分辨率

【功能简述】

【功能要求】

i. 所有系统能自适应1366*768及以上的测试分辨率，适应14英寸笔记本的分辨率（1366*768）。

ii. 默认窗口设置下，不应该出现水平、垂直滚动条。

iii. 当界面内容超出显示区域时，以浮动层的形式显示

iv. 弹出页面要保证768高度的分辨率显示正常，同时能移动查看弹出框内容。弹出框高度为不超过450

v. 弹出页面内容过多时，使用tab页显示

2) 【功能名称】浏览器兼容性

【功能简述】

【功能要求】

i. 所有系统后台必须兼容Chrome浏览器；

ii. 前台系统兼容主流的浏览器，如：IE8及以上，firefox ，chrome

3) 【功能名称】登录框

【功能简述】

【功能要求】

i. 所有系统做统一的登录框，当退出系统时，跳转到当前系统的登录页面

ii. 登录页面用户名、密码宽度应该上下对齐；

iii. 鼠标点击登录、重置按钮应该显示手型，而不是箭头；

iv. 支持按Tab键切换用户名/密码输入框；

v. 支持按Enter 键登录系统。

4) 【功能名称】默认值

【功能简述】各个页面都会存在默认值

【功能要求】

i. 打开一个新界面，光标停留在第一个可操作的数据项上。

ii. 当单选框不存在默认值时，则默认为单选项“非选中”；当存在默认值时，则绑定显示默认值；

iii. 当复选框不存在默认值时，则默认为复选项“非选中”；当存在默认值时，则绑定显示默认值；

iv. 当选择下拉框不存在默认值时，则默认为“请选择”；当存在默认值时，则绑定显示默认值。

5) 【功能名称】必填项

【功能简述】界面必填项规范

【功能要求】

i. 界面的必填项以红色*号标识出来；标识在文字前面，如：。

ii. 存在必填项未填写时，点击保存弹出提示：红色框重点标识出必填项。如：

iii. 查询页面，当查询条件有必填项时，也需要要红色*标识。

6) 【功能名称】控件显示

【功能简述】

【功能要求】

i. 可输入/选择框以正常色显示；不可输入/选择框以灰色显示；

ii. 对于不可输入/选择框，通过鼠标或键盘都不可让光标定位至此控件。

7) 【功能名称】颜色

【功能简述】各个页面必须使用统一的颜色设置

【功能要求】

i. 尽可能通过选择合适的主题颜色或系统颜色来选择颜色

ii. 使用颜色应当保持一致性，例如：错误提示使用红色标识，正常和成功信息用绿色表示。

8) 【功能名称】提示语

【功能简述】提示信息规范

【功能要求】

i. 提示信息中标点符号统一使用全角符号

ii. 功能按钮为图片按钮时，光标停留需给予文字浮动提示信息

iii. 按照用户意愿的处理成功提示信息，位置在右下角给予提示信息，如：处理成功，处理成功的提示信息需要能自动消失。

iv. 请选择需要处理的记录，不同的提示信息中要用不同的颜色标识；如：

v. 重要的提示信息需要弹出确认提示框，如：删除记录、操作失败，指出出错原因并提供解决办法提示。

vi. 提示框图标根据内容显示不同，分为：错误、警示、成功。

9) 【功能名称】输入框限制

【功能简述】各种输入框的限制

【功能要求】

i. 只允许输入数字的输入框请控制为只允许输入数字，不允许输入其它字符。

ii. 只允许输入日期、时间的输入框给予格式化；而不是输入非法后再给予提示；

iii. 当输入的内容达到了字段的长度限制时，请控制为不允许再输入

iv. 对于非法字符的控制，限制为焦点离开输入框时，给予提示；同时在提交保存的时候再次校验。

v. 特殊类型的需要在输入时不让其输入，如：电话、身份证号、金额

vi. 金额输入时需格式化，界面显示千分位分隔符，但在数据库中不存储。

10) 【功能名称】表单列表

【功能简述】各个页面必须使用统一的颜色设置

【功能要求】

i. 表头水平/垂直居中对齐

ii. 表单中内容为定长，则居中对齐；不固定内容的中英文内容，则居左显示；如为数值形势，则居右显示；金额默认保留两位小数，如有特殊说明另做处理。

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

11) 【功能名称】防错和出错处理

【功能简述】

【功能要求】

i. 对于输入数据进行校验

ii. 对于某些情况下不应该使用的菜单项或命令按钮，应将其“失效”或者隐藏

iii. 执行破坏性操作前，应当获得用户的确认；如：删除记录

iv. 如果发生意外或错误，应当及时给予警告信息或错误信息，提醒用户做出正确的处理。

v. 当系统某个功能出错时，应给出联系系统工程师的联系方式（邮箱和客服电话），在报错页面应显示报错的系统名称和功能模块。

vi. 当系统某个功能出错或者系统宕机以后，需要给相关人员（系统工程师和项目负责人）发送邮件，

vii. 前台不能直接显示后台的错误信息。

12) 【功能名称】查询条件

【功能简述】规范查询条件

【功能要求】

i. 查询条件一行最多显示3个查询条件

ii. “查询”和“清空”按钮放在所有查询条件的下一行，并且靠所有查询条件的最右边对齐，当不足3个时，靠最后一个查询条件的最右边对齐。

iii. 查询条件的名称命名不能超过四个汉字，不足四个汉字时，补齐四个汉字的长度，并且名称后面增加冒号。

iv. 下拉选择框中内容有多级时，只显示一级，如：部门作为查询条件时，点击下拉框，默认只显示一级部门，点击一级部门再展开显示二级部门。

v. 输入框支持多内容查询，内容之间使用半角逗号隔开（该条规则视业务情况而定），如：。