Design Guideline for NC (An ERP System) - Vanbin Fan 2010.01.28

NC 用户体验系列文档

-1-

NC 用户体验原则版本:V1.0

NC 产品管理与应用规划部\樊旺斌

2010.1.28


-2-

目录

1 以用户为中心的设计（UCD） ........................................................................ - 4 -

n 什么是 UCD？ ...................................................................................... - 4 -

n 基本原则 ................................................................................................ - 5 -

2 优化用户体验 ...................................................................................................... - 7 -

n 一致性 .................................................................................................... - 7 -

n 易理解性 ................................................................................................ - 9 -

n 高效性 ................................................................................................. - 11 -

n 指导性 ................................................................................................. - 12 -

n 吸引性 ................................................................................................. - 13 -

3 高效顺畅的交互流程 ....................................................................................... - 14 -

n 导航 ..................................................................................................... - 14 -

n 输入高效 ............................................................................................. - 16 -

n 连贯 ..................................................................................................... - 18 -

n 提供捷径 ............................................................................................. - 18 -

n 防错、容错、修复 ............................................................................ - 20 -

4 简洁清晰的界面布局 ....................................................................................... - 21 -

n 简单原则 ............................................................................................. - 21 -

n 信息的组织与展现 ............................................................................ - 22 -

n 排版原则 ............................................................................................. - 23 -

n 窗体 ..................................................................................................... - 25 -

5 合理规范的界面元素 ....................................................................................... - 25 -

n 标题 ..................................................................................................... - 25 -

n 页签 ..................................................................................................... - 26 -

n 文本 ..................................................................................................... - 26 -

n 菜单 ..................................................................................................... - 27 -

n 按钮 ..................................................................................................... - 27 -

n 输入框 ................................................................................................. - 28 -

n 单选框、复选框 ................................................................................. - 28 -

n 列表框、下拉框 ................................................................................. - 29 -

n 表格 ..................................................................................................... - 29 -


-3-

n 图标 ..................................................................................................... - 30 -

n 工具栏 ................................................................................................. - 30 -

n 工具箱 ................................................................................................. - 30 -

n 状态栏 ................................................................................................. - 31 -

n 进度条 ................................................................................................. - 31 -

n 滚动条 ................................................................................................. - 31 -

n 图表 ..................................................................................................... - 31 -

变更记录：变更日期变更项位置变更内容提出人变更人


-4-

1 以用户为中心的设计（UCD）

n 什么是 UCD？

以用户为中心的设计（UCD，User-CenteredDesign ），是指在进行产品设计、开发、

维护时从用户的需求和用户的感受出发，围绕着用户进行产品设计，而不是让用户去适

应产品，要充分考虑用户的使用习惯、所处的环境、预期的交互方式及视觉感受等方面。

1.1 软件的界面表现模型尽量与用户心理模型一致

软件产品其后台程序是如何运作实现的，这种模型反映的就是软件产品的“技

术实现”，称作“技术实现模型”。这种模型，对于我们的程序员来说，很受用。从使用软件产品的角度看，用户只知道按着他的期望和想象去使用产品，完成

他的任务或目标。而用户并不关心软件本身的技术架构，内部处理逻辑，实现中会

用到 if 语句，也不知道有什么“数据库”，更不知道“云计算”之类的东西。这种

模型，反映的就是用户对软件产品的期望和愿景，我们称之为“用户心理模型”。软件展示给用户的就是其“界面”，通常由界面设计师来完成。界面设计师的

职责就是将“技术实现”后的软件产品尽量以一种用户更容易理解的方式呈现出来，

防止软件内部的程序“走光”：被用户看到。这种模型，就是“界面表现模型”。以用户为中心的设计，就是要让软件的界面表现模型尽量与用户心理模型一

致，这样，用户使用软件的过程就会更加顺畅、高效，用户就会对产品满意，软件

产品的用户体验水平就会大大提高。


-5-

n 基本原则

1.2 尽早持续地关注真实的用户

• 在设计软件功能前，要明确使用该功能点的用户是谁。• 针对不同的用户进行设计

– 每一项设计都要聚焦于某一类重要的用户，兼顾其他类型的用户。– 考虑新手用户和熟练用户的不同“用户目标”和期望。没有人愿意停

留在新手级别，软件界面要重点为中间用户进行优化，为熟练用户提

供高级操作支持。

• 用户总是对的，但用户不是设计师。• 要进行用户研究，终建立人物角色库（Personas）。• 确立用户目标

– 交互设计不是凭空猜测在设计产品“如何”行为之前，要先定义产品

“做什么”。– 避免无目标地盲目崇拜功能。 – 用户目标先于界面交互，界面交互先于视觉风格

• 明确用户的日常任务和场景，并按重要等级进行排序– 数据量大小– 重要程度– 周期性操作– 批操作– 耗时操作（分步操作、间歇性操作）– 有顺序的相关操作– 任务的触发（上下文、功能关联）

• 考虑用户的使用环境

– 物理环境（办公环境、是否移动办公、噪音、光线）– IT 环境（CPU 速度、针对流行的操作系统进行设计、输入/输出设备、

网络环境等）


-6-

1.3 迭代设计：尽早可视化、多验证、快修改

• 迭代就是反复求精的过程，是不断地对备选方案改进并选择更优方案的过

程。在迭代过程中，功能的不确定性逐渐减小，我们对功能的描述越来越

明确。

• 尽早提供界面原型进行评估和验证：低保真原型和高保真原型。

1.4 并行设计

并行设计就是要在选择优设计方案前，尽量遍历所有的“设计空间”。选择

方案时考虑的独立设计思路越多，终设计出的产品就越完美。虽然并行设计乍看起来好像是一个比较费时费力的方法，因为很多想法产生了

却别没有被采用。可实际上，它却是一个探索大量可能方案来选择优方案的、非

常廉价、高效的方法。例如：初始概念是画一个美女，通过并行设计后，可能会得到 3 中不同的方案：

芙蓉姐姐、林妹妹、蒙娜丽莎，经大家终的评议选择后，蒙娜丽莎的方案可能会

终胜出（当然，为了追捧网络流行趋势，芙蓉姐姐必将胜出）！


-7-

♀美女

2 优化用户体验

n 一致性

2.1 遵守规范

• 在开发过程中，应遵循界面及交互规范，就可以在一定程度上保证产品的

一致性。

2.2 界面内/界面间的元素及元素组合显示一致

• 为了便于识别、查找和理解，同样的信息或功能在所有屏幕和对话框中显

示的位置和形式应当一样。


-8-

• 研究发现，使用非一致视觉元素的更容易出错• 一致的视觉效果包含文本的尺寸大小和间隔，标签颜色，字体和背景，标

签的位置，文本和图片• 视觉一致性能降低任务完成所需尝试的次数、错误降低、用户满意度增加、

学习时间减少• 用户趋向于快速克服某些类型的矛盾。使用不同尺寸的外在表现（按键，

输入区域，列表框）并不会对用户产生明显的影响

2.3 相同或相类似界面的交互行为一致

• 如果用户知道同样的命令或操作总会产生同样的效果，那么他们在使用系

统时就会更自信，同时也鼓励他们进行探索性学习，因为他们具备了使用

系统其它功能的基础知识。• 类似的功能在不同的地方都暗示着同样的操作，那么将会减少用户思考和

重复学习的过程，提高操作效率。

2.4 常用条目的格式一致

• 确保常用条目的格式在不同界面间一致• 常用条目要使用用户熟悉的格式，如电话号码（800-511-xxxx），日期时间(年

-月-日)等

2.5 界面元素命名一致

• 例如：相同功能的按钮名称一致。

2.6 术语一致

• 针对用户的专业术语要统一。

2.7 信息反馈一致

• 相同或类似功能的状态提示、对话框提示及方式一致性。• 反馈信息或提示用语在各个地方都应该保持一致


-9-

2.8 尽量重用

• 在系统内或系统之间组件和设计的重用对用户是有益的，因为这样的界面

更具有可预测性和更容易理解，还因为用户需要学习和记忆的东西将会减

少。• 利用可以重用的组建来构建用户界面及功能，不仅可以保证外观的一致性，

还可以保证行为上的一致性。• 重用程度越高，一致性就越好。

n 易理解性

2.9 界面展现应与用户的理解一致

• 例如：菜单的分组，按钮的排序应符合用户的预期和习惯。

2.10 信息的呈现应采用目标用户最容易理解的格式

• “克”还是“千克”• “元”还是“万元”

2.11 要使用用户熟悉的术语（使用用户的语言）

• 许多术语对设计者和内容作者来说很熟悉，但对用户很陌生• 一个字典或者术语表，对新用户有帮助，但不能作为使用术语的理由• 业务术语本土化，符合目标用户的语言习惯

2.12 优先使用常用词汇

• 使用经常看到和听到的词语• 使用典型用户熟悉和常用的词语，这类词语能够更好、更快的被识别• 常用词汇收集方式：通过检查用户输入到你的网站或相关网站的术语，其

他形式的市场调查

2.13 慎用缩略语

• 尽可能使用全称，而不是使用缩略语• 唯一使用缩略语的时候是当需要节省空间的时候


-10-

2.14 避免仅使用颜色传递信息

2.15 避免潜规则

• 用户反感的就是软件里存在一些非常隐晦，像“隐藏的锁”一样的潜规

则，它们总是存在，但用户又不知道为什么或如何处理。比如对于一个长

期不可用按钮，用户会产生疑惑：“不知道这个按钮为什么一直不可用呢？

但我却总是看见它呆在那里。我该如何才能使用它呢？”• 可以通过出错后的详细提示信息尽量让用户知道这些复杂的业务控制规

则。除非是一些很直观的，众人皆知的一般规则可以不作提示，可交由用

户直接控制。

2.16 为框架或界面分区提供标题

2.17 合适地应用注意力吸引特征

• 网页注意力吸引特征主要如下：移动的物体，条目尺寸的变化，图片，亮

色的条目，以及变化的字体特征• 重要的吸引注意力字体包括：大写字母，粗体，斜体，下划线，和增大字

号• 用户会跳过某些他们认为是广告或是装饰的东西

2.18 信息的组织要清晰

• 信息的组织要符合用户的需要和目标• 不论架构级、界面级、甚至是段落级都应该有良好的信息组织

2.19 使用熟悉的组件

• 使用用户熟悉的组件，并采用常见的方式• 研究表明，某些用户，特别是老年用户，不会用下拉菜单• 对性能和组件的接受度，进行可用性测试，以保证用户体验


-11-

2.20 模仿现实世界中的物体（形状）

• 按键或者导航符这类图片被设计得类似现实世界形状的时候，会被认为是

链接• 如果一个物体不能使其看起来像真实世界的物体，这个图片需要增加一个

可点击提示• 例如：音乐播放器，会模拟 DVD 播放机的按键外形

n 高效性

2.21 降低用户的工作负荷

• 尽可能消除每一项附加工作。“鼠标点击 2 次能完成的，不要点击 3 次。”

2.22 减少用户的记忆负担

• 设计时应考虑工作记忆（即短期记忆）的限度

2.23 界面载入的时间应尽量短

2.24 尽量减少用户的数据输入量

• 不要让用户重复输入信息 • 当在其他界面要求重复输入某些信息，应自动从前面获取，而不是要求重

新输入

2.25 提供捷径

• 如：搜索（或查找）、批操作、快捷键等。

2.26 易于浏览

• 使用清晰易查找的标题，短语和短句，短小精悍的段落保证内容界面易于

浏览


-12-

• 将重要标题放到界面顶部中间部分，设计者应该帮助用户忽略掉界面中大

部分内容• 研究表明，80%的用户对任何新网页都采用浏览的方式。只有 16%的用户

每个词都读；用户耗费大约 12%的时间用来寻找自己想要的信息

n 指导性

2.27 向用户提供帮助信息

• 当应用很复杂时，有些用户可能需要完整的帮助系统，但是大部分用户不

会花时间去使用这个帮助系统。应尽可能地为那些没有耐心的用户，以及

那些偶尔使用的用户提供快速支持。特别是，怎样帮助新手用户快速获得

帮助，以便从新手成为专家。• 因此，完整的帮助文档在很多情况下并不能帮助用户。应提供轻量级和重

量级两种不同的帮助系统来支持用户的不同需要。而且帮助文档应该从用

户使用软件的角度来描述，重点描述如何操作、示例和问题。

2.28 使用图解提高学习速度

• 图片对文字的优势在解决学习问题上表现突出• 常见物体的图片比文字更容易被识别和回忆,但当各条目在概念上很类似


-13-

2.29 需要用户等待时应提供相应的反馈

• 系统应该不断告诉用户目前它正在做什么，它是如何响应用户输入或操作

的。不应当等到系统出错时才给出反馈。反馈信息应当重述或改述用户的

输入以提示现在正在干什么。• 如果系统所进行的操作需要很长的响应时间，反馈就变得很重要了。

n 吸引性

2.30 软件的第一印象要积极、专业

• 首页是传递软件定位的关键要素 à 首页是软件重要的界面 • 给用户留下第一印象的机会只有一次


-14-

2.31 传递软件的价值和意图

• 大多数用户在浏览、搜索网页时，在每个网站上停留的时间都很有限 • 一项研究表明：大多数用户期望看到一项研究工作的结果，而非仅仅是对

研究方法的描述 • 网站的目的要以一句简短的话概括，不要指望用户会通过大段的阅读或多

次点击去主动了解网站的目的 • 明确地告诉用户，本产品可以向用户提供何种有价值的信息，并且要有别

于竞争对手的产品

2.32 避免屏幕的闪烁

2.33 使用肯定语气而非否定语气进行说明

• 写指示说明（instruction）时使用主动语态是通用的规则• 当给出建议时候，尽力告诉用户怎样去做，而不是告诉他们不要去做什么• 否定语态更容易造成误解

2.34 用户具有控制权与自主权

• 提供标记醒目的“紧急出口”，便于用户退出异常状况。

2.35 帮助用户识别、诊断和修复错误

3 高效顺畅的交互流程

n 导航

3.1 任何界面都应该提供有效、清晰的导航

• 避免让用户进入“界面孤岛”，保证用户可以在任何一个界面中都可以跳转


-15-

到软件的其它位置。

3.2 清晰显示用户当前所在位置和状态

• 显示用户当前位置的方式：– 页签– 界面标题– 面包屑导航

3.3 保证在软件的任何位置都能直达首页

• 随时易返回，可以放弃所做修改

3.4 导航要避免层级关系过深

• 软件的导航应避免具有很深的层级关系（尽量不多于 2 层），但有时候多层

级关系是不可避免的，在这种情况下就要进一步研究用户的实际应用，针

对经常使用的功能或访问的地址，提供一些快速入口，而对于用户并不经

常使用的功能以及访问的地址，则可以隐藏在较深的层级下。

3.5 区分导航元素并对其分组

• 建立一个全产品的导航结构，以帮助用户了解产品的结构 • 所有界面的导航结构要一致，这些元素包括：标签、标题、列表、搜索等 • 导航选项间的区别要明显，以便用户理解导航元素的意义及所要链接到的

地方 • 对导航元素进行分组，可以大大缩短用户对其定位、识别的时间

3.6 使用“注释”来辅助导航

• 什么是“注释”？当用户的光标悬停在链接上时，会自动在弹出框中显示关于该链接的说明

信息 • 用户希望在链接附近提前预览链接的信息，但，又同时不希望这些信息直

接显示出来，因为这样会破坏主要文本信息的连续性 • 避免“舍本求末”：不要过多指望“注释”，因为它并不能取代链接本身的

清晰标签说明


-16-

3.7 当动作或任务有内在顺序时，清晰显示动作或任务的先

后顺序

• 具体方法：可以利用向导界面，也可以利用数字（如：步骤 1）标明界面

中的先后顺序。• 注：以时间为基础的先后顺序更容易让用户理解，切忌让用户学习不经常

使用的或者复杂难懂的任务顺序。

n 输入高效

3.8 区分必填项和选填项

• 必填项与选填项区分清晰、一致。• 必填项的一些常用显示方式：

方式 1：*姓名：方式 2：（必填）姓名：方法 3：姓名：

3.9 重要输入项往前放

• 必填项以及重要输入项往前放，并且尽量处于界面的第一屏，便于用户查

找，并提高用户填写表单的效率。

3.10 自动将光标置于第一个数据输入框内

• 打开数据输入界面，光标应自动放在第一个输入框内，以便于用户快速进

入数据输入过程。

3.11 使用单一的数据输入方式（鼠标或键盘）

• 尽可能保证让用户使用一种输入方式完成任务。应避免用户来回切换输入

方式，这样会造成速度降低，也会影响用户的思维流和操作流的连贯性。


-17-

3.12 界面要支持键盘切换焦点功能。即按 Tab 键的自动切

换功能。

• 在输入过程中，自动切换焦点可大幅度减少高级用户的输入时间，提高效

率。

3.13 Tab 键的顺序与控件排列顺序要一致，总体遵守从上到

下，同时行间从左到右的方式。

3.14 默认按钮要支持“Enter”选定及鼠标选择操作，即按

“Enter”后自动执行默认按钮对应操作。

3.15 除非特定用途，不要区分用户输入代码的大小写

• 用户输入代码时候，不对大小写做区分• 如果需要大小写，明确告知用户他们使用特定样式输入代码• 当保留用户输入的数据时候，将数据按照用户输入原封不动的呈现。例如，

用户输入不论为 ABCD,abcd，AbCd 或者 ABcd，均应按照输入原样显示

3.16 提供默认值

• 只要有默认值一定要显示，这样可以提高输入速度• 默认值或默认选项可以是经常被选择的或者上一次被该用户选择的那一

个

3.17 尽量避免使用 Shift 键

• 应尽可能避免用户输入需要按 Shift 才能出现的字符（如：￥、%），因为这

样会分散用户精力。• 需要输入这类字符时，软件尽量提供这类符号在输入框旁边显示，以减少

使用 shift 的次数。• 同样软件可以将输入时的大小写同等对待。

3.18 完成同一功能或任务的元素应集中放置，这样可以减少

鼠标移动的距离。


-18-

n 连贯

3.19 慎用自动弹出式窗体或图形

3.20 任务操作程式化

• 用户一旦熟悉某项任务的一系列操作步骤后，在以后的工作中就可以重复

这一操作流程

3.21 交互流程与用户实际业务流程相符

• 流程可预知，界面结构能够清晰的反映工作流程（信息导航清晰），以便用

户按部就班地工作。

3.22 业务衔接要连贯，相关信息可以顺畅查询

n 提供捷径

3.23 批操作

• 针对需要大批量处理的用户，提供批操作。如：批量添加、导入、全选、

清空等。• 但某些批操作（如清空）需要同时提供多次确认过程或撤销操作。

3.24 快捷操作

• 一些需要用户经常完成的任务，考虑提供快捷操作。• 快捷添加，只提供给用户少的输入项（必填项以及重要项），让用户可以

在短的时间内完成添加任务。

3.25 快捷键

• 常用菜单按钮要有命令快捷方式。

3.26 快捷入口

• 对于用户经常用到的功能，经常访问的模块，应提供快捷入口。


-19-

3.27 自动化处理

• 如：自动向公司员工发送生日祝福。

3.28 考虑复用

• 如：复制新增单据。

3.29 每个界面或数据集都应提供搜索（或查找）

• 每个界面都提供搜索，可以避免用户返回主页才能搜索——对大数据量的

操作更有意义• 不能因此而代替网站内容的组织优化，而且搜索本身也并不能保证一定能

提高用户效率

3.30 提供不同范围的搜索

• 搜索引擎要能够全站搜索，或者明确告知用户搜索产品的哪个部分• 用户通常默认搜索引擎是全局搜索的，但是也要将搜索范围清晰的表现出

来• 设计者的“全局”概念往往不等同于用户的“全局”，用户可能会认为是一

个功能点，而设计者则个会认为是整个功能模块甚至整个产品

3.31 默认提供简单的、常用的搜索方法和范围

• 搜索方法应当简单易用，因为大多数用户倾向于使用简单的搜索策略• 如果产品的大多数用户都是非熟练用户，就应该提供简单搜索模式并给出

例子• 注意：要提供简单搜索功能，但不能指望以此来改善搜索引擎的效率

3.32 不区分搜索词条大小写

• 大写、小写、大小写混合在搜索中应一视同仁• 用户输入时并不重视大小写，设计者也不应当强迫用户去区分• 如果存在必须大小写区分的情况，应提供“精确匹配”的搜索方式


-20-

n 防错、容错、修复

3.33 预料用户的典型错误

• 预期用户可能犯的错误和犯错时间，并在识别出错误后给出修改建议• 比如，如果日期输入 2 月 31 日，系统应该给出错误提示，要求重新填入• 设计搜索引擎（和其他有用户输入的地方）时，要检查拼写及其他错误

3.34 对“超时”的情况提前警告

3.35 在较容易出错的地方，提供简要的说明文字

3.36 对较长的数据项进行分割

• 将长数据项进行分割，无论输入还是输出项均是如此• 分割输入的长数据能帮助用户发现录入错误，降低录入错误的几率• 举例：电话号码、身份证号码等

3.37 标出各度量尺度的单位

• 当使用数据输入框时候，详细定义度量单位• 将度量单位放置在标签上，以提高用户效率，降低出错概率

3.38 用户应该可以方便地撤销操作以及重做

• 每个人都会犯错，软件应该提供撤销这种弥补措施。它能够为用户带来更

多的安全感并提高工作效率。

3.39 提供好的出错信息，并标明错误位置

• 出错信息应遵循以下四个简单原则：– 出错信息应当用清晰的语言来表达，而不要使用难懂的代码。– 出错信息使用的语言应当精炼准确，而不应空泛、模糊。比如：“无法

打开此文档！”– 出错信息应当对用户解决问题提供建设性帮助，有指导意义。– 出错的信息应当友好，不要威胁或责备用户。比如“非法用户操作，

任务被中止”


-21-

• 不要在提示信息中包含所有可能有用的信息，而应使用简短信息，以方便

用户快速阅读，只要用户能容易访问更详细的信息即可。比如提供“更多

详细信息”的按钮或链接。

3.40 链接到相关帮助信息

• 使用链接提供用于阐明技术概念和行业术语的定义和描述• 例如，提供链接到一个字典、术语表和提供更多信息的部分。

4 简洁清晰的界面布局

n 简单原则

4.1 简单=无冗余+无缺失+内容条理

• 不要使多余信息造成界面或交互的负担• 通过任务分析和可用性测试，取消与当前任务不相关的内容，保证用户注

意力聚焦于当前任务

4.2 从简单到复杂，而不是一开始就复杂

• 在设计中将一些重要的信息放到一个界面上，而将一些不太重要的信息放

到一个收缩的辅助界面上，只要以某种方式能展开它们即可。如果用户群

体较广泛，不能明确重要层级，好支持用户自定义功能。

4.3 化繁为简

• 步骤：1）考虑用户在界面上可能用到的所有信息和功能；2）将所有界面内容（信息+功能）按重要程度排序3）将界面内容归类、分组4）将界面内容删减到小化5）针对无法删减的界面内容，优化界面布局6）兼顾考虑可删减的界面内容（可不提供，也可作为隐藏功能）


-22-

n 信息的组织与展现

4.4 分组是保持界面简单清晰的重要手段

• 按用户的需求进行分组• 在逻辑上、业务上相关的界面内容要相互靠近，不相关的界面内容之间要

隔离• 界面布局的分组手段有：留白、分组框/分割线、分组标题、颜色• 利用颜色对信息进行分组

– 色彩编码可以使用户迅速浏览并判断组件的分组情况– 人眼能够辨别 10 种颜色，但一般仅仅使用不多于 5 种颜色进行色彩分

组– 色彩分组不适合单独使用

4.5 相关信息要易于对比

• 当用户需要分析相关条目间的相似性、区别、趋势及关系时，界面的布局

要易于用户对不同条目进行比较。

4.6 关键数据应突出显示

• 从视觉上区别需要用户注意的重要界面条目，特别是那些不经常显示的条

目• 需要高亮显示的如近变化的数据，超过可接受限制的数据，未达到定义

标准的数据• 高亮显示不宜滥用

4.7 重要信息要始终显示

• 重要的可点击条目要始终在界面顶部的固定位置显示。• 界面元素位置比较固定时，用户习得该知识后，将有利于提高用户效率。• 熟练用户的鼠标将先于视线到达目标区域。• 用户对顶部元素的位置估计要比底部位置更准确。• 理想状态下，logo 应当位于每个界面的同样位置；通常放在顶部左侧。

4.8 避免滥用粗体字

• 当非常需要吸引用户注意力的时候才使用粗体。


-23-

4.9 避免使用两种以上的强调方式

n 排版原则

4.10 界面布局要有秩序、层次：从上到下，从左到右

• 界面内容要按重要程度、使用频率、业务顺序排布 • 界面的布局应有助于用户找到重要的信息• 不常用的信息应置于界面底部 • 用户习惯于以层级方式浏览信息，他们每次关注的都是同一层次的信息 • （相关信息/链接对于用户的重要程度可通过问卷调查、访谈或网络日志数

据分析得到）

4.11 合理运用对比、重复、对齐、邻近

• 对比：有利于区分不同类型的信息• 重复：有利于识别相同信息，引导用户的视觉轨迹• 对齐：

– 界面元素之间要水平、垂直对齐– 界面元素要与左/右边线、中线等“无形”的几何线对齐– 所有界面的文本块、行/列、单/复选框、数据输入框等都应对齐 – “留白”作为重要、但容易被忽略的界面元素，要特别注意对齐

• 邻近：体现信息之间的亲疏关系

4.12 界面显示要符合用户纸面阅读和浏览互联网时的习惯

4.13 界面布局要有“弹性”

• 根据分辨率、窗口大小自动调整界面布局• 不论整体界面是左对齐还是居中，都会有部分屏幕空间未被利用 • 可变界面布局对用户任务的完成效率没有显著影响，但对用户满意度有一

定影响（用户更喜欢可变界面布局）


-24-

4.14 注意显示密度的优化

• 界面信息不应太“拥挤”，这样有助于用户快速找到目标信息 • 在过密的显示区域查找信息，要比在稀疏区域内花费更长时间 • 在显示密集的区域内，用户在每个词上的驻留点很少，但驻留的时间要更

长 • 用户更倾向于优先浏览“稀疏”区域

4.15 “留白”的使用要适度

• 搜索/扫描页的“留白”使用要限量• 用户喜欢有适度的“留白”，但空白的多少对他们搜寻信息的效率没有影响 • 内容页要注意用“留白”对文字分段

4.16 界面长度要适当

• 短界面的使用：主页、导航界面，或其它需要快速浏览的界面 • 长界面的使用：

1）需要不间断阅读的界面，特别是内容界面2）需要与纸质文档的信息组织结构相对应的界面3）为了减少界面维护的工作量4）便于界面的下载或打印

4.17 优先使用分页

• 如果用户系统响应时间足够快，使用分页更好。• 用户可以通过选择链接来在界面间移动，而不必滚动以找到重要信息。


-25-

4.18 滚屏不宜太多

• 用户青睐短小但组织良好的信息• 有研究表明，互联网用户有 13%的时间用于滚动界面。

4.19 避免错误的滚屏截止符

• 避免某些界面元素给用户造成错觉：已经到达界面顶部/底部 • 不恰当的界面元素可能包括：水平分割线、类似界面底部介绍网站信息的

“小字”、背景颜色/图片的突变等

4.20 避免水平滚屏

• 使用合适的界面布局，避免水平滚屏 • 水平滚屏会降低浏览效率• 应避免低分辨率下的水平滚屏

n 窗体

4.21 父窗体或主窗体的中心位置应该在对角线焦点附近。

4.22 子窗体位置应该在主窗体的左上角或正中。

4.23 多个子窗体弹出时应该依次向右下方偏移，以显示窗体

出标题为宜。

5 合理规范的界面元素

n 标题

5.1 提供清晰的描述性的界面标题

• 界面标题应该独特、简练，且具有描述性。


-26-

• 使用独特的内容标题，切实描述所表达的内容。• 如果标题过于类似，用户会犹豫并且重新阅读以比较各界面之间的不同

5.2 界面元素的名称要与其目标界面标题相匹配

n 页签

5.3 页签上文字的表述要清楚

• 当没有足够的空间清楚地对标签名进行详细描述时，应避免使用页签

5.4 页签的呈现要有效

• 导航页签应在界面的顶部，以使其与现实生活中的真实标签相对应，这样，

更利于用户方便地点击

n 文本

5.5 字体不小于 12Pix

• 研究显示小于 12Pix 的字体会导致用户阅读变慢• 目标用户群超过 65 岁，建议使用大于 14Pix 的字体• 应当充分考虑不同显示器、分辨率以及浏览器下的字体显示情况

5.6 大小写的使用要恰当（适用于英文）

• 使用小写来保证阅读速度• 要使用大小写混合，以小写为主• 多数用户更习惯于阅读小写的单词，并且效率很高

5.7 列表中各条目，只有第一个单词的首字母要大写（适用

于英文）

• 大写字母仅仅用在列表条目首字母、列表框条目、复选框标签、单选按键


-27-

标签上• 一般只有首字母大写，除非包含其他约定俗称的大写关键字

5.8 每行文字的长度要合适

• 对纸质文档的研究表明：中等长度的文本行的阅读速度快

n 菜单

5.9 使用静态菜单

• 使用静态菜单更利于用户定位• 设计者应当把常用的选项放在菜单开始的位置上，还应当根据使用频

率来设计顺序• 允许用户自定义菜单，也能够适当提高效率

5.10 完成相同或相近功能的菜单用横线隔开放在同一位置。

5.11 菜单前的图标能直观的代表要完成的操作。

5.12 菜单深度一般要求最多控制在三层以内。

5.13 右键快捷菜单采用与菜单相同的准则。

n 按钮

5.14 按钮的取名要简晰

5.15 按钮和操作对象要就近

5.16 要对按钮进行排序、分组


-28-

n 输入框

5.17 说明项要与数据输入框很接近

• 说明项要靠近输入框，以保证用户能很好地识别要输入的内容• 所有标签和相关信息都应该靠近输入项，这样用户就可以很容易地将两者

联系起来

5.18 让用户看到输入的数据

• 输入框的大小应以允许用户在不需要滚屏的前提下，就能看到所有的输入• 如果某输入区域有字符限制，应该在输入框附近予以说明• 一项研究表明，搜索时候至少要 35-40 个字符长度的支持，才能满足 95%

的搜索词汇要求

5.19 数据输入框的说明项要一致

5.20 数据输入框的说明项要清楚

5.21 提供直接输入匹配和辅助列表，以便提高用户操作的效

率

• 两项研究表明，使用数据输入，效率更高，但同时更容易出错• 一般的，不容易定义的条目采用数据输入的方式更好

n 单选框、复选框

5.22 只有一个选项时，不能使用单选框

5.23 多选条目时，使用复选框

• 用户需要做出多项选择时，使用复选框• 每个复现框均可以被选中，不受其他复选框影响• 研究显示，复选框在支持多选条目方面是佳的• 用户应当既能通过点击方框和文本两种方式选中条目


-29-

5.24 复选框应按选择频率的高底排列

n 列表框、下拉框

5.25 界面空间较小时使用下拉框而不用列表框。选项较少时

使用列表框，较多时则使用下拉框

5.26 按用户使用频率来排列列表框中的条目

• 优先考虑采用惯用顺序• 若无惯用顺序，则使用字母顺序或者数字顺序

5.27 从众多选项中选择某一选项时，宜使用列表框

• 开放式列表更快，出错几率更少，用户不滚动就应看到所有选项

5.28 最大限度地显示列表框中的选项

• 使用列表框时，应同时显示尽量多的选项• 在列表框中滚动寻找某条目，会增加额外的时间

n 表格

5.29 表格列数、行数不宜过多

5.30 按照常规字段进行排序

• 一般情况为编码升序排列，若有组织字段则优先按组织排序。


-30-

5.31 支持调整列顺序和设置列宽

5.32 重要字段往前放

n 图标

5.33 图标向用户所传达的信息要准确

5.34 图标的风格要一致

5.35 用户不熟悉的图标，要辅以文字

n 工具栏

5.36 工具栏的长度最长不能超出屏幕宽度。

5.37 工具栏的图标应该直观地表示要完成的操作。

5.38 系统常用的工具栏应设置默认的放置位置。

n 工具箱

5.39 工具箱要具有可增减性，由用户自己根据需求定制。

5.40 工具箱的默认总宽度不要超过屏幕宽度的 1/5。


-31-

n 状态栏

5.41 状态栏要能显示用户切实需要的信息，常用的有：目

前的操作、系统状态、用户位置、用户信息、提示信息、

错误信息。

n 进度条

5.42 如果某一操作需要的时间较长，则应该显示进度条和进

程提示

• 如果计算机无法立即给出反馈，应当用进度指示器给用户提供连续反馈，

根据经验，超过 10 秒的操作就应当使用进度条指示器。• 如果界面一动也不动，没有什么反应，用户会失去耐心。• 另外，用户会改变主意，一旦一个耗费时间的操作开始了，由于等待很久

了，用户可能会想要停止它。应该提供用户可以取消一个很耗费时间的操

作，而没有任何负面影响。• 如果实在无法做到使用准确的进度条指示器，可以使用旋转球、屏幕上忙

碌的蜜蜂或在状态栏上不断打点等一些通用的进度指示器，它们至少可以

表明系统正在运转。

n 滚动条

5.43 滚动条的长度要根据显示信息的长度或宽度能及时变

换，以利于用户了解显示信息的位置和百分比。

n 图表

5.44 数据图例应附带显示真实的数据值

• 需要精确阅读数据时，同时提供真实数据和数据图形


-32-

• 数据注释要添加到柱状图中数据柱的顶端以及曲线图的节点上• 某些图形要求全部数据注释，而另一些则只需要对特定数据进行标注