后台界面统一规范_v1.0.doc

后台界面统一规范目录1. 目的 32. 范围 33. 定义 34. 测评指标 35. 关键角色及应付责任 36. 内容描述 37. 其他要求 88. 相关文件 89. 附件 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高度的分辨率显示正常，同时能移动查看弹出框内容。

弹出框高度为不超过450v. 弹出页面内容过多时，使用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. 输入框支持多内容查询，内容之间使用半角逗号隔开（该条规则视业务情况而定），如：vi. 输入内容查询是，自动去掉输入查询条件的首尾空格13) 【功能名称】页面操作按钮【功能简述】列表页面操作和查看按钮【功能要求】i. 列表的操作按钮统一固定在列表头部，左对齐如：ii. 操作按钮根据操作类型不同使用不同的图标。

如：14) 【功能名称】列表界面【功能简述】列表界面规范要求【功能要求】i. 菜单页之间切换时，使用标签页展示：如：ii. 所有系统进入时显示主页，主页内容显示：待办事项、系统公告、常用功能iii. 列表默认显示10条数据，可切换为：10、20、50、100条显示iv. 翻页显示应该放在当前页面的最底部，且切换每页显示条数和翻页时，应保留当前的查询条件v. 列表中没有数据时，显示“本列表暂无记录！”15) 【功能名称】一般编辑界面【功能简述】对一般编辑界面规范要求【功能要求】i. 文本框，只读文本框和输入文本框在颜色上要区分，可输入文本框以白色为背景，只读文本框以灰色为背景ii. 文本框左右对齐，一行最多显示三列；iii. 当一个文本框长度过长，如身份证号，一个文本框占两个输入框的位置iv. 编辑页面内容过多时，增加竖着的滚动条v. 弹出框说明，弹出式窗口居中显示，必须有关闭的按钮；如果是关闭按钮，名称必须叫做“关闭”，不能写成“取消”或其它类似的名字vi. 多行文本框说明：多行文本框必须有提示剩余输入字数的功能，且文字为黑色，数字为突出的红色字体16) 【功能名称】新增一条或多条记录【功能简述】新增记录规范【功能要求】i. 新增的记录必须排在首页首行；ii. 所有列表页面默认按数据ID倒序排列，同时在建表时，所有的表都需要自增序列IDiii. 提交失败后必须保存用户已经输入的内容，以便再次提交。

iv. 提交时需对主要标识字段进行重复值、空值（空格）判断17) 【功能名称】修改单条记录【功能简述】修改单条记录规范【功能要求】i. 修改完成后必须回到原记录所在位置，且刷新显示修改后的值ii. 提交失败后必须保留用户修改的内容，以便再次提交iii. 在查询条件下修改返回后，如不满足查询条件则不显示iv. 需对主标识字段进行重复值、空值（空格）判断18) 【功能名称】删除一条或多条条记录【功能简述】删除记录规范【功能要求】i. 必须有确认删除的提示信息ii. 删除成功后刷新不现实删除的记录iii. 删除成功后返回到原记录所在页面，而当原记录所在页不存在时，则返回上一页iv. 当被删除的记录与其他记录存在关联时，请示需求界面给予不允许删除、更明细提示等信息19) 【功能名称】实现单页全选功能【功能简述】【功能要求】i.  勾选全选则选中当页所有记录ii. 去掉当页某个记录的勾选，则全选也去掉勾选iii. 翻页后，自动去掉已勾选的记录及全选的勾选iv. 翻页后是否进行选择记录的保留应试具体业务而定20) 【功能名称】字体【功能简述】各个页面必须使用统一的字体样式（特殊要求除外）【功能要求】i. 查询条件名称字体及字号：微软雅黑、12pxii. 查询条件内容字体及字号：微软雅黑、12pxiii. 查询结果列表头字体及字号：加粗、微软雅黑、12pxiv. 查询结果列表内容字体及字号：微软雅黑、12pxv. 操作按钮字体及字号：微软雅黑、12pxvi. 操。