后台界面统一规范_V10

后台界面统一规范目录1.目的..........................................................................................................................................22.范围..........................................................................................................................................23.定义..........................................................................................................................................24.测评指标...................................................................................................................................25.关键角色及应付责任...............................................................................................................26.内容描述...................................................................................................................................27.其他要求...................................................................................................................................88.相关文件...................................................................................................................................89.附件..........................................................................................................................................81.目的规范后台系统的风格，使最终设计出来的界面风格一致化，遵循统一的操作规范，以标准化的方式设计界面，提高工作效率。减少和改变责任不明，任务不清和由此产生的信息沟通不畅、反复修改、重复劳动、效率低下的现象。产品设计通过规范的方式来达到以用户为中心的目的。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，chrome3)【功能名称】登录框【功能简述】【功能要求】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)【功能名称】修改单条记录【功能简述】修改单条