软件UI设计标准规范.docxVIP

软件UI设计规范

目录

TOC\o1-3\h\z\uUI规范 1

1 用户界面设计理念 5

1.1 美观 5

1.2 易理解 7

1.3 鼓励 7

1.4 一致 7

1.5 交互 10

1.6 效率 13

1.7 熟悉 14

1.8 灵活 15

1.9 容错 16

1.10 可预测 17

1.11 简洁 17

1.12 透明 17

1.13 权衡 17

2 通用设计原则 18

2.1 字体使用原则 18

2.1.1 中文字体 18

2.1.2 英文字体 18

2.2 文字对齐原则 18

2.3 界面配色原则 20

2.4 按钮设计原则 21

2.5 文本校验原则 23

2.6 兼容性和个性化原则 26

2.7 键盘响应 27

2.7.1 TAB键 27

2.7.2 Enter键 28

2.7.3 导航键（上下左右） 28

2.7.4 DEL键 28

2.8 鼠标 28

3 各模块设计原则 29

3.1 启动/登录界面 29

3.2 主界面 30

3.3 导航 30

3.4 窗体布局 32

3.5 提示信息 33

3.6 文本框 35

3.7 弹出框/弹出窗口 37

3.8 下拉框/单选框/复选框 38

3.9 列表页面 39

3.10 报表规范 42

3.11 附件 42

3.12 各类控件的标准大小 43

建立UI规范目标

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

用户界面设计理念

美观

使用可视元素

图1.1.1

对元素进行分组

图1.1.2

对齐

图1.1.3

图1.1.4（反例）

易了解

一个系统应该很轻易被用户学会和了解，用户应该知道：

1、看什么

2、做什么

3、何时做

4、在哪做

5、为何做

6、怎样做

信息放置次序应该经过深思熟虑，最小化用户记忆和寻求成本

必需时候，一步步引导用户进行操作

图1.2.1

激励

一旦用户完成了某个关键操作，要立即通知用户，提升用户信心

图1.3.1

一致

一个系统从头到尾外观，行为，操作应该是一致

图1.4.1（反例）

图1.4.2（反例）

一样行为，应该总是产生一样结果

图1.4.3（反例）

图1.4.4（反例）

相同功效按钮视觉上保持一致，不一样功效按钮视觉上有所区分

图1.4.5（反例）

交互

用户在交互过程中占有绝对主动权

1、动作必需是用户请求结果

2、耗时较长动作必需能够被打断

图1.5.1

从用户需求出发展现上下文

图1.5.2

图1.5.3（反例）

系统能够对用户请求快速地作出响应

对用户全部动作提供可视化反馈信息

达成目标方法应该是灵活，并和用户技能，习惯，经验，偏好相适应

图1.5.4

图1.5.5

提供反悔或取消机会（undocancel）

图1.5.6

效率

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

图1.6.1

简化用户操作步骤

图1.6.2（反例）

图1.6.3

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

图1.6.4

熟悉

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

尽可能使界面自然，模拟用户行为模式

完美地兼容老产品

灵活

系统必需对不一样用户需求很敏锐，而且提供不一样层次类型功效，基于：

1、用户知识和技能

2、用户经验

3、用户个人偏好

4、用户习惯

5、当初条件

图1.8.1

容错

对于常见人为失误有妥善应对方法

图1.9.1

当错误发生时，提供建设性提醒

图1.9.2

不管发生什么错误，尽最大努力确保用户不丢失工作结果

图1.9.3

可估计

用户能够估计到每个任务正常进度

图1.10.1

全部用户期望达成目标全部应该完成

简练

尽可能简练用户界面：突出关键功效，隐藏复杂，不常见功效

图1.11.1

透明

让用户关注她任务而不是实现机制

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

权衡

最终设计应该是基于一系列设计标准相互权衡结果

大家需求总是凌驾于技术之上

通用设计标准

字体使用标准

汉字字体

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

图2.1.1.1

使用字体大小要规范：正文通常采取12px。图形字体和标题字体通常采取14px。

图2.1.1.2

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

图2.1.1.3

英文字体

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

图2.1.2.1

文字对齐标准

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