软件UI设计规范软件UI设计规范建立UI规范的目的将阳春白雪式的用户体验细化到具体的可执行的要求，建立各行业线关于界面元素设计及界面布局的通用规则及要求，提升公用组件复用度及用户体验，从而增加浪潮软件的产品竞争力。

1用户界面设计理念1.1美观●使用可视元素图1.1.1●对元素进行分组图1.1.2对齐图1.1.3图1.1.4（反例）1.2易理解●一个系统应该很容易被用户学会和理解，用户应该知道：1、看什么2、做什么3、何时做4、在哪做5、为何做6、如何做●信息的放置顺序应该经过深思熟虑，最小化用户记忆和寻找的成本●必要的时候，一步步引导用户进行操作图1.2.11.3鼓励●一旦用户完成了某个关键操作，要及时告知用户，提升用户的信心图1.3.11.4一致●一个系统从头到尾的外观，行为，操作应该是一致的图1.4.1（反例）图1.4.2（反例） 同样的行为，应该总是产生同样的结果图1.4.3（反例）图1.4.4（反例）●相同功能的按钮视觉上保持一致，不同功能的按钮视觉上有所区别图1.4.5（反例）1.5交互●用户在交互过程中占有绝对主动权1、动作必须是用户请求的结果2、耗时较长的动作必须可以被打断图1.5.1从用户的需求出发呈现上下文图1.5.2图1.5.3（反例）●系统能够对用户的请求快速地作出响应●对用户的所有动作提供可视化的反馈信息●达成目标的方式应该是灵活的，并和用户的技能，习惯，经验，偏好相适应图1.5.4图1.5.5●提供反悔或取消的机会（undo cancel）图1.5.61.6效率●最小化用户眼和手的移动幅度图1.6.1●简化用户操作的步骤图1.6.2（反例）图1.6.3●尽可能预料用户的想法和需求图1.6.41.7熟悉●尽可能使用用户熟悉的概念和语言●尽可能使界面自然，模仿用户的行为模式●完美地兼容老产品1.8灵活●系统必须对不同用户的需求很敏锐，并且提供不同层次类型的功能，基于：1、用户的知识和技能2、用户经验3、用户的个人偏好4、用户的习惯5、当时的条件图1.8.11.9容错●对于常见的人为失误有妥善的应对措施图1.9.1●当错误发生时，提供建设性的提示图1.9.2●无论发生什么错误，尽最大努力确保用户不丢失工作成果图1.9.31.10可预测●用户能够预测到每个任务的正常进度图1.10.1●所有用户希望达成的目标都应该完成1.11简洁●尽可能简洁的用户界面：突出重要的功能，隐藏复杂的，不常用的功能图1.11.11.12透明●让用户关注他的任务而不是实现机制●计算机内部的工作内容应该是不可见1.13权衡●最后的设计应该是基于一系列设计原则相互权衡的结果●人们的需求总是凌驾于技术之上2通用设计原则2.1字体使用原则2.1.1中文字体●同级菜单，字体大小格式统一。

图2.1.1.1●使用的字体大小要规范：正文一般采用12px。

图形字体与标题字体一般采用14px。

图2.1.1.2●推荐使用“微软雅黑”和“华文细黑”字体。

不宜使用艺术字体，如华文彩云、隶书。

图2.1.1.32.1.2英文字体●默认字体使用“Tahoma”，大小12px。

标题字体使用“Trebuchet MS。

”图2.1.2.12.2文字对齐原则●表单字段名左对齐，或者中线对齐。

图2.2.1图2.2.22.3界面配色原则●产品背景色体现浪潮品牌的蓝色；项目产品背景色体现客户行业品牌色，如深圳药监的天蓝色。

图2.3.1图2.3.2●要统一色调，颜色的使用要正确：如安全软件用黄色；高科技软件使用蓝色；环保软件易用用绿色。

●界面配色要有对比，在浅色背景上使用深色文字，深色背景上使用浅色文字●同一页面，不宜采用3种以上颜色。

图2.3.3●链接应该有3种颜色：未点击，点击中，点击后。

图2.3.42.4按钮设计原则●宜使用圆角图标、渐变效果。

●图标大小通常为8的倍数，最小图标12px、16px，顶部24px或32px图片。

图2.4.1●图标树的大小是16px，树的大小适合宽度为210px。

●保持与系统整体特点以及风格一致。

●使用让用户容易联想到的事物，按钮能清晰表达意思。

图2.4.2●内页中按钮使用平面效果、不使用三维效果图。

●按钮应具备简洁的图示效果，应能够让使用者产生功能关联反应，群组内按钮应该风格统一，大小相似，标题字体保持一致，在整个系统中的显示位置要统一。

功能差异大的按钮应该有所区别。

图2.4.3●按钮应该至少有4种状态效果：点击前鼠标未放在上面时的状态；鼠标放在上面但未点击的状态；点击时状态；不能点击时状态。

图2.4.4●按钮上若没有文字，必须提供鼠标悬停提示信息；按钮上有文字但是不足以准确传达按钮的功能时，也应该提供鼠标悬停提示信息。

图2.4.5●操作功能按钮向左对齐，按照使用频度（重要程度）从左到右排列；设置功能按钮和帮助按钮向右对齐。

图2.4.6●折叠菜单的标题栏应该做成”展开/折叠”的响应区域，方便鼠标点击。

图2.4.7●有图标和功能说明文字的，实现点击图片和说明文字，都可以达到预期的页面图2.4.8●相同功能按钮的描述一致性表2.4.1统一名称操作描述增加对“新增”“添加”的统一描述修改对“修改”、“管理”、“维护”的统一描述2.5文本校验原则●必填项给出必填标识，使用校验机制确保不为空（包括仅有空格的情况）。

若必输项未填写完毕或者填写不符合规则就提交，应给出说明信息并能自动获得焦点。

图2.5.1●非必填项字段，Null插入数据库不会出错，读取显示为正常留空（不能显示为Null）。

●焦点从当前输入框移开后，立即对当前输入框进行校验，不合格则给出提示，引导用户更正。

●身份证号、电子邮箱地址等特定字段的格式须符合需求的规定。

图2.5.2●所有字段必须有长度限制，并在激活输入框时给出明确提示，直到焦点从当前输入框移开。

若用户在输入字符达到最大允许的长度后继续输入，则不再响应超出字符。

（粘贴超出给出提示）●密码输入框内容显示为”*”或者”•”。

图2.5.3●用户名输入框应注明是否允许输入汉字等。

图2.5.4●日期显示格式为：yyyy-mm-dd。

尽量使用时间控件，并屏蔽手动输入。

如果允许手动输入，则不允许字符串、汉字、特殊字符等。

不允许截止日期小于开始日期。

图2.5.5图2.5.6（反例）图2.5.7图2.5.8（反例）●没有类型限制的输入区域，应可录入汉字、字母、数字、*&%$#@!~等所有类型字符。

●数值字段只能输入0~9，视情况决定是否可以输入”-”以及”.”。

2.6兼容性和个性化原则表2.6.12.7键盘响应2.7.1TAB键●界面支持TAB键自动切换功能。

●Tab键的切换顺序与控件排列顺序要一致，一般情况下采用总体从上到下，行内从左到右的方式。

2.7.2Enter键●焦点在文本输入框时，按下Enter可以触发查询/提交/确定/执行等操作。

2.7.3导航键（上下左右）●选中下拉框的某一项后，上下键可以切换邻近选项。

●选中某一单选项/复选项后，上下左右键可以切换到邻近的项。

2.7.4DEL键●选中一条或多条可以删除的条目，按DEL键能够触发删除事件。

2.8鼠标●鼠标为不可点击状态时显示为，可点击状态显示为，系统忙时显示为，经过文本框显示为。

●系统除了文本输入外，其他所有功能都应该能通过鼠标来完成。

3各模块设计原则3.1启动/登录界面●软件启动封面要高清晰度的图像●软件启动封面大小多为主流显示器分辨率的1/6大(微软标准)●LOGO要弱化、系统名要强化图3.1.1●插图要有意义、象征性强●使用的字体大小要规范：一般正文使用12px，图标文字或标题使用14px●图像的格式宜使用gif和png●插图宜使用独立版权的图片●使用摄影图像时应该进行数位处理，比如做高斯模糊处理等●打开新增（修改）页面时，光标初始定位在第一个待输入的文本区。

图3.1.23.2主界面●遵循的总体规则为：导航优先、分层显示、功能按重要度排序。

●主界面比例狭长型为宜，最佳比例为16:9●界面配色要形成对比：背景和前景要对比，如背景复杂+前景简单，前景深色+背景白色（或是浅色系）●banner图标宜用平面图图3.2.1●色调使用：宜使用白色、浅色，如浅蓝色、浅绿色等；不建议大范围的使用深色系的纯色3.3导航●导航方式有纯头部导航、头部导航+左侧导航、头部+右侧导航、图标导航等●导航中显示主要功能，最多不超过8个；不常用功能加“更多…”来显示●如果有下级菜单应该有下级箭头符号标示图3.3.1●导航中有选中状态和未选中状态要有区分，选中状态要突出、高亮或不同颜色显示●不同功能区间应该用线条分割或是用空白分割图3.3.2●菜单深度一般尽量不超过三层，菜单层次太多时，应给出返回主窗口、主分支的快捷链接。

●目录树中，鼠标悬停于非叶子节点时出现子节点，减少用户点击数。

图3.3.3●将重要信息放在上边和左边，左上角最容易吸引用户的注意力。

图3.3.43.4窗体布局●窗体进行最大化操作和最小化操作以及任意更改窗体大小时，页面排版均正常。

窗体缩放时，窗体内的控件也要随窗体进行缩放。

●窗体有最小化、最大、关闭按钮●控件对齐：控件水平排列成一行时，采用水平中对齐，控件间隔按要求基本保持一致；行与行之间间隔相同；窗体边界距离应大于行间间隔图3.4.1●控件对窗体的覆盖率以不高于75%为宜●按钮与窗体上、下、左、右之间的间距为14px，按钮之间的间距为6px图3.4.2●并列关系的控件间应该左对齐，同行的控件应该横向对齐，有从属关系的应该缩进。

图3.4.33.5提示信息●提示消息尽量不抢夺用户的操作权利，尽量不强制用户进行操作。

通知类的消息（不需要用户反馈信息），不能强制用户进行操作。

图3.5.1（正反例对比）●用户进行危险性操作或破坏性操作、运行状态错误时，系统应该有简洁易懂、口语化的提示信息。

一切含有计算机专业术语的提示信息都应该杜绝（尤其是诸如SQL错误，空指针异常等信息）。

图3.5.2（正反例对比）●同一系统内同类交互信息（提示信息、询问信息、警告信息、错误信息）风格要统一，避免大量使用大红色。

图3.5.3（反例）●耗时的操作系统有反馈信息，在进行长时间的操作时，要有等待光标、进度条或其他的可视反馈。

图3.5.4●四种类型的交互信息的颜色选择a) 系统提示信息：提示需要让用户注意的问题。

用蓝色b) 询问信息：如是否继续某个操作。

用蓝色图3.5.5c) 警告信息：如提示某个安全问题。

用橙色d) 错误信息：系统运行时出现的错误信息。

用红色3.6文本框●如果单行文本框能够满足需求，就不采用多行文本框。

图3.6.1（反例）●单行文本框不宜过长或过短，以可完整显示最大可输入内容为最佳。

图3.6.2●多行文本框录入内容超过文本框宽度能够自动换行。