软件UI设计规范

软件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.1

1.3鼓励

●一旦用户完成了某个关键操作，要及时告知用户，提升用户的信心

图1.3.1

1.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.6

1.6效率

●最小化用户眼和手的移动幅度

图1.6.1

●简化用户操作的步骤

图1.6.2（反例）

图1.6.3

●尽可能预料用户的想法和需求

图1.6.4

1.7熟悉

●尽可能使用用户熟悉的概念和语言

●尽可能使界面自然，模仿用户的行为模式

●完美地兼容老产品

1.8灵活

●系统必须对不同用户的需求很敏锐，并且提供不同层次类型的功能，基

于：

1、用户的知识和技能

2、用户经验

3、用户的个人偏好

4、用户的习惯

5、当时的条件

图1.8.1

1.9容错

●对于常见的人为失误有妥善的应对措施

图1.9.1

●当错误发生时，提供建设性的提示

图1.9.2

●无论发生什么错误，尽最大努力确保用户不丢失工作成果

图1.9.3

1.10可预测

●用户能够预测到每个任务的正常进度

图1.10.1

●所有用户希望达成的目标都应该完成

1.11简洁

●尽可能简洁的用户界面：突出重要的功能，隐藏复杂的，不常用的功能

图1.11.1

1.12透明

●让用户关注他的任务而不是实现机制

●计算机内部的工作内容应该是不可见

1.13权衡

●最后的设计应该是基于一系列设计原则相互权衡的结果

●人们的需求总是凌驾于技术之上

2通用设计原则

2.1字体使用原则

2.1.1中文字体

●同级菜单，字体大小格式统一。

图2.1.1.1

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

般采用14px。

图2.1.1.2

●推荐使用“微软雅黑”和“华文细黑”字体。不宜使用艺术字体，如华文彩

云、隶书。

图2.1.1.3

2.1.2英文字体

●默认字体使用“Tahoma”，大小12px。标题字体使用“Trebuchet MS。”

图2.1.2.1

2.2文字对齐原则

●表单字段名左对齐，或者中线对齐。

图2.2.1

图2.2.2

2.3界面配色原则

●产品背景色体现浪潮品牌的蓝色；项目产品背景色体现客户行业品牌色，

如深圳药监的天蓝色。

图2.3.1

图2.3.2

●要统一色调，颜色的使用要正确：如安全软件用黄色；高科技软件使用

蓝色；环保软件易用用绿色。

●界面配色要有对比，在浅色背景上使用深色文字，深色背景上使用浅色

文字

●同一页面，不宜采用3种以上颜色。

图2.3.3

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

图2.3.4

2.4按钮设计原则

●宜使用圆角图标、渐变效果。

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

图片。

图2.4.1

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

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

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

图2.4.2

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

●按钮应具备简洁的图示效果，应能够让使用者产生功能关联反应，群组

内按钮应该风格统一，大小相似，标题字体保持一致，在整个系统中的显示位置要统一。功能差异大的按钮应该有所区别。