正如你所看到的，这是一本文字轻鬆，而且有很多好玩插图的……技术理论书籍。

没错，技术理论。它将和你讨论关于软体（或网站）的界面与用户之间的关係——界面是你做的，而使用它的是用户——所以，别自信满满地说自己做的很牛，让我们听听用户的意见。这本书能告诉你这一套顺序大概是怎样的，你应该注意些什幺，最终水到渠成的是一个能经得起考验的产品。

这本书可以说是一本针对广泛大众，以及那些没有接受过人机互动和可用性专业培训的用户界面设计人员的辅导和帮助手册。你不必背诵那些拗口的专业辞彙，你只需知道“我该如何去做”从而解决问题。这本身也是人机互动学科的一个重要原则——“易于学习，从而便于使用”。

你明白了。这不是本情节跌宕起伏的小说，也不是行文优美如诗的散文。但我仍然希望它能给人带来快乐——学习不是一件枯燥的事，但很多人把它变得枯燥了。绝大多数技术理论书籍的作者们都正襟危坐就好像板着面孔的老师，不可否认，对待学术问题应当态度严谨，但是严谨不代表严肃，能在专业知识课堂上把大家逗笑的老师一定不简单。

我不敢说我做到了，但我在努力。

前言 1

序章关于这本书 3

0.1谁该看这本书？ 4

0.2这是本什幺样的书？ 6

0.3怎幺用这本书？ 8

0.4感谢这些伙计 9

第一章你首先要知道的一些事情 10

1.1我听说过这些词……不过它们到底是什幺？ 10

1.1.1什幺是UI设计 11

1.1.2什幺是互动设计 13

1.1.3什幺是好的用户界面设计 15

视觉表达不清 15

非常繁琐 16

提示混乱 17

难以使用 18

强迫用户 18

1.1.4那幺该怎幺做？ 19

什幺人会使用产品？用在什幺地方？ 19

用户会有些什幺样的行为？ 19

1.2我干嘛得学这些玩意……还要买本书？！ 20

1.2.1用户界面不是次要的工作 21

1.2.2用户界面设计不是界面程式设计，也不是界面图形设计 23

对于软体设计师来说 23

对于美术设计师来说 24

真正的用户界面设计人员 24

1.2.3互动设计是一门跨学科领域 25

1.2.4不用成为专家，理解方式即可 26

1.3OK，那我该怎幺做？ 28

1.3.1互动设计的4个内容 28

理解用户需要，建立用户需求 29

开发一些候选设计方案 29

製作设计方案的原型 29

用户测试和评估 29

1.3.2互动设计的3个特徵 30

以用户为中心 30

建立明确具体的可用性标準 31

反覆叠代 31

1.3.3互动设计的2个目标 31

可用性目标 32

用户体验目标 34

1.3.4摩西的十诫 36

让用户随时了解系统的状态 36

系统应与真实世界相符合 36

给予用户控制权和自主权 37

提倡一致性和标準化 38

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

预防错误 38

依赖识别而不是记忆 39

强调使用的灵活性及有效性 40

最小化设计 40

提供帮助及文档 40

1.3.5如何粗略地评估可用性 40

第二章了解用户，了解需求 43

2.1谁是用户？ 43

2.1.1普遍而又特殊的用户 44

用户的普遍性 44

用户的特殊性 44

两者兼顾 44

2.1.2用户可不是越多越好 45

2.1.3“阿童木”的诞生 46

2.2什幺是需求？ 47

2.2.1“需要”产生需求 48

2.2.2点了牛扒，端上来的却是意大利麵 52

2.2.3各种类型的需求 54

功能需求 54

用户需求 54

数据需求 54

环境需求 55

可用性需求 55

2.3如何确定需求 57

2.3.1介绍一些数据蒐集的方法 58

问卷调查 58

用户访谈 59

观察和提问 60

集体讨论 61

2.3.2筷子、刀叉和勺，哪种餐具最好？ 62

2.3.3一些要注意的地方 64

一切的重点都是为了搞清楚用户需要什幺 64

要考虑所有的用户类别 64

每个用户类别只派一位代表参与是不充分的 64

打“组合拳”，不要单一套路 64

在可能的情况下，先小规模试验 65

如果得到的需求信息太多 65

记录数据同样很重要 65

2.3.4解释与分析数据——一道填空题 65

2.4归根结底，我们要了解任务 67

2.4.1用讲故事来描述任务 69

2.4.2用流程图描述任务 71

2.4.3理想和现实的差距 74

守旧的用户 74

过分的用户 74

妥协还是抗争？ 75

2.5环境？什幺是环境？ 75

2.6做个小结 77

第三章设计方案和製作原型 79

3.1为什幺，以及怎幺做 79

3.2初级原型和高级原型 81

3.2.1初级原型很重要 81

草图，或者说涂鸦 82

连环画 83

製作卡片 84

模拟界面 84

3.2.2高级原型同样重要 85

3.2.3嗯，不过原型仅仅只是原型 87

3.3概念设计，或者说初步设计 88

3.3.1伙计们，让我们先考虑功能 88

3.3.2概念模型是个什幺玩意？ 89

开放思路，同时考虑用户和套用环境 90

保持简单，但也不要过于简单 90

使用初级原型来快速获取反馈 90

反覆叠代进行设计 90

3.3.3开发概念模型的几个问题 90

採用什幺样的互动方式？ 90

是更“智慧型”还是更“服帖”？ 92

是否存在合适的熟悉概念进行映射比拟？ 92

3.3.4在概念设计中使用原型 93

3.4物理设计，或者说具体设计 95

3.4.1一些具体的设计指南 96

力求一致性 96

允许频繁使用系统的用户使用快捷键 97

提供明确的反馈 98

设计对话，告诉用户任务已完成 100

提供错误预防和简单的纠错功能 101

应该方便用户取消某个操作 101

用户应掌握控制权 102

减轻用户的记忆负担 103

3.4.2界面元素和界面风格 104

3.4.3选单（或者导航栏）的设计 106

3.4.4图示的设计 110

不要“辞不达意” 112

小而简单 113

3.4.5萤幕布局的设计 113

大的方针 114

同时也要考虑细节 115

还要很多地方需要注意 117

3.4.6别理那些複杂的工具，我们做的是Web 118

第四章以用户为中心的开发 120

4.1为什幺要让用户?艉徒?矗?120

告诉他们别太天真 121

另一方面……他们才是真正的主人 121

4.2支持用户，而不是限制他们 121

排第一位的永远是用户，不是技术 121

给他们最习惯的环境 122

要支持用户，就得考虑周全 122

经常向他们谘询意见 122

4.3如何让用户参与？ 125

4.3.1用户参与的不同形式 125

极端之一：让用户作为设计组成员 125

极端之二：用户远距离参与设计 126

4.3.2用户参与的是与非 126

4.4别用望远镜，要现场研究 127

4.4.1关于现场研究 128

4.4.2你是师傅，我是徒弟 130

不是在会客室 130

建立正确的关係 130

该问就大胆问 131

不要离题太远 131

4.4.3这不是你的地盘，别太不拘小节 131

4.4.4我们能得到什幺？ 132

第五章文化的差异 135

5.1什幺是文化的差异？ 136

5.2对于Web和Web-based产品来说 137

5.2.1一次要做几件事？ 137

5.2.2高度认知和低度认知 138

5.2.3功能还是关係？ 139

5.2.4网页和界面的视觉反映 140

5.2.5谁的错？ 144

5.3国际化和本土化 145

注意适配解析度的大小 145

儘量多用被广泛接受的图示 146

绘製图示时注意地域性 147

翻译时使用用户习惯的表达方式 147

注意不同地区使用的单位和格式 147

注意文字的输入 148

避免?鱿侄阅承┑厍?皇视玫男畔?148

其它方面 148

第六章网页的可用性 150

6.1人们是如何使用网页的？ 150

6.1.1他们很会节省时间 151

6.1.2他们也不会仔细考虑 153

6.2好感度计量器 154

6.2.1我经历过好几次这种情况…… 154

6.2.2这些都会降低好感度！ 156

让我感到郁闷 156

总是误导我 159

总是让我猜 160

总是要我找 161

总是说我错 162

耽误我的时间 163

甚至还让我抓狂 164

6.3因此，为扫描而设计 164

6.3.1更清楚的布局和视觉层次 165

越重要的内容越醒目 165

相关的内容看上去也得相关 165

包含的内容要显示从属关係 166

别显示太多无关的信息 166

6.3.2清晰地划分页面区域 167

6.3.3适套用户的习惯 169

6.3.4提供目光的“落脚点” 170

6.4同时，减少用户的思考 171

6.4.1减少不确定因素 172

6.4.2保证网页的一致性 174

一致的网站标誌和导航栏 174

一致的页面布局 174

一致平衡的信息结构 175

一致的重複性元素 175

一致和谐的字型和色彩 175

一致，但不一样 175

6.4.3明显标识可以点击的地方 176

有时候下划线可有可无 177

有时候最好有下划线 178

超连结和按钮 178

6.4.4清晰、简单的网页内容 179

使用用户的语言，而不是技术语言 179

使用通俗的语言，而不是故作高深 180

减去不必要的词句，让页面更简短 180

不要夸夸其谈，或者让人摸不着头脑 180

6.5告诉用户他们在哪里 181

6.5.1导航栏存在的意义 182

6.5.2导航栏所需要的元素 183

网站logo标识 183

网站的栏目 184

“回到首页” 184

附加功能 184

搜寻工具 185

6.5.3导航指示、页面标题和“麵包屑” 185

导航指示 186

页面标题 188

“麵包屑” 188

第七章Web-based产品 192

7.1Web或者不是Web？ 192

有一些比较偏向于软体 193

有一些则更偏向于网页 193

有些产品比较单纯 194

有些产品的用户群比较广大 195

最后……它们还是网页 196

7.2我为什幺说要考虑用户的感受 197

7.3首先看看选单和对话框 199

7.3.1我需要选单，但必须是好选单 199

时隐时现的选单项 199

探头探脑的选单项 201

7.3.2让我陷入困境的对话框 202

让我没有选择 202

让我不知道该怎幺选择 203

没有第三种选择 204

7.4你真明白那些控制项的作用吗？ 204

7.4.1单选按钮和複选框 205

把複选框当作单选按钮 205

把单选按钮当作複选框 205

是必须要我选，还是不需要我选？ 206

7.4.2标籤虽好，问题多多 206

标籤只能用来导航，不能选择数据 207

到处都是的标籤 208

太小和太大的标籤 211

7.4.3简单而又不简单的文本框 212

在不该用的地方使用文本框 212

该用文本框的地方却又很随意 213

7.5每一个元素都要有合适的位置 214

7.5.1控制项的摆放位置 214

胡乱放置的按钮 215

距离产生美？ 216

7.5.2你无法逃避的对齐方式 218

是左对齐还是右对齐 219

不要只注意一边 221

如果有时候左右都不能对齐 222

上下也要对齐 223

第八章测试可用性 224

8.1为什幺要测试？ 224

8.1.1美国到底民主还是不民主？ 224

我喜欢的，别人也应该喜欢 225

角色的不同导致看法不同 226

8.1.2这不是简单的是非题 226

8.2几个要注意的事实 228

8.2.1一些需要记住的事实 228

可用性测试不是软体测试 228

哪怕只测试一个用户，也比不做测试要好 229

早点测试一个用户，好过最后测试100个用户 229

“叠代”的测试和频繁的测试 230

测试后马上回顾测试结果 231

8.2.2一些需要避免的认识 232

不要认为可用性测试很难 232

不要认为可用性测试总是非常昂贵 232

不要认为可用性测试是表层问题 233

不要认为测试是要去“证明”什幺 233

不要仅仅测试，却不纠正发现的问题 234

8.3测试的前期準备 234

8.3.1测试的地点和设备 235

最正式和最精良的装备 235

你也可以最佳化和精简 236

8.3.2测试用户的招募 237

测试用户的选择 238

究竟每次应该测试多少用户？ 239

如何招募用户？ 242

8.3.3主持人和观众 243

谁适合当测试的引导人？ 244

谁适合当测试的观察者？ 245

8.3.4道德问题 245

8.4测试的过程 247

8.4.1设计好考题 247

8.4.2介绍阶段 248

8.4.3正式测试 248

观察用户 249

让用户进行有声思考 249

提出问题 250

尊重测试用户 250

一个实例你就能明白 251

8.4.4马上回顾和总结 257

8.5让专家来评估（别忘了，你也是专家） 259

8.5.1现成的原则——启发式评估 259

8.5.2你也可以看看这些具体的评估角度 260

关于一致性的评估 260

关于界面简洁性的评估 261

关于信息反馈的评估 262

关于用户动作性的评估 262

关于产品特色的评估 263

8.6测试需要修正 264

有些问题可以忽略 264

有些要求也可以忽略 264

别顾此失彼！ 265

第九章了解满意度 266

9.1询问用户：问卷调查 267

9.2询问用户：访谈 268

终章回到开始：什幺是好的用户界面设计 269