软件UI设计规范

软件UI设计规范

目录

UI规范 (1)

1用户界面设计理念 (4)

1.1美观 (4)

1.2易理解 (6)

1.3鼓励 (6)

1.4一致 (6)

1.5交互 (9)

1.6效率 (12)

1.7熟悉 (13)

1.8灵活 (14)

1.9容错 (15)

1.10可预测 (16)

1.11简洁 (16)

1.12透明 (16)

1.13权衡 (16)

2通用设计原则 (17)

2.1字体使用原则 (17)

2.1.1中文字体 (17)

2.1.2英文字体 (17)

2.2文字对齐原则 (17)

2.3界面配色原则 (19)

2.4按钮设计原则 (20)

2.5文本校验原则 (22)

2.6兼容性和个性化原则 (25)

2.7键盘响应 (26)

2.7.1TAB键 (26)

2.7.2Enter键 (27)

2.7.3导航键（上下左右） (27)

2.7.4DEL键 (27)

2.8鼠标 (27)

3各模块设计原则 (28)

3.1启动/登录界面 (28)

3.2主界面 (29)

3.3导航 (29)

3.4窗体布局 (31)

3.5提示信息 (32)

3.6文本框 (34)

3.7弹出框/弹出窗口 (36)

3.8下拉框/单选框/复选框 (37)

3.9列表页面 (38)

3.10报表规范 (41)

3.11附件 (41)

3.12各类控件的标准大小 (42)

建立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文字对齐原则

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