第一部分 基本原则 1
第1章 一致性 1
1.1 什么是一致性 2
1.1.1 一致性和市场 2
1.1.2 建立一致性 3
1.2 一致性在应用设计中的作用 5
1.2.1 布局的一致性 6
1.2.2 排版的一致性 6
1.2.3 色彩的一致性 8
1.2.4 图像的一致性 9
1.2.5 控件和可供性的一致性 12
1.2.6 选择正确的范式 13
1.2.7 跨平台的审美一致性 16
1.3 如果不能实现一致性，该怎么办 18
1.4 关于无障碍功能的简短题外话 18
1.5 避免犯常见错误 19
1.5.1 一致地设计内容和图像 19
1.5.2 为色彩的使用制定一致的规则 20
1.5.3 一致地设计控件以揭示可供性 20
1.6 做合理的决定 20
1.6.1 检视已有的规则和惯例 20
1.6.2 记录与一致性相关的决策 20
1.7 超越平凡 22
第2章 层级 24
2.1 什么是层级 26
2.2 层级的特征 28
2.3 特征的相互作用 33
2.4 定义一个层级 34
2.4.1 定义元素 35
2.4.2 流程 36
2.4.3 模式 37
2.4.4 不同应用级别和跨平台的层级 37
2.4.5 原型制作和测试一致性 38
2.5 避免犯常见错误 39
2.6 做合理的决定 39
2.7 超越平凡 39
第3章 个性 41
3.1 界面个性的元素 46
3.2 为个性建立标准 63
3.2.1 用户模型中的个性线索 64
3.2.2 发掘公司需求 64
3.2.3 评估商标需求 65
3.2.4 处理偏好和不同意见 65
3.2.5 内容 66
3.2.6 呈现的形式——整合技术需求 67
3.3 案例分析——定义SuperTracker的个性 70
3.3.1 SuperTraker用户模型 70
3.3.2 SuperTracker需求 73
3.4 发掘一种个性的可能性 76
3.5 避免犯常见错误 79
3.6 做合理的决定 79
3.7 超越平凡 80
第二部分 视觉可用性工具 81
第4章 布局 81
4.1 布局的语言 82
4.1.1 屏幕尺寸 82
4.1.2 位置 83
4.1.3 空白区域 84
4.1.4 接近度、比例和对齐 86
4.1.5 网格 88
4.1.6 模板 92
4.2 布局与基本原则 93
4.2.1 布局与一致性 93
4.2.2 布局与层级 94
4.2.3 布局与个性 95
4.3 案例分析：建立一个布局——为位置摆放定义一套基础理论 96
4.3.1 功能及数据的考虑 97
4.3.2 将功能绘制到页面和布局上 98
4.3.3 从页面到模板 99
4.4 是大而全，还是小而精 104
4.5 避免犯常见错误 107
4.5.1 在一个页面上放太多信息 107
4.5.2 随意对齐 108
4.5.3 随意分组 108
4.6 做合理的决定 108
4.6.1 清晰的层级 108
4.6.2 为可扩展性而设计 109
4.7 超越平凡 109
第5章 字体 110
5.1 字体的语言 111
5.1.1 字型基础 111
5.1.2 字型粗细度和样式 114
5.1.3 字体的种类 115
5.2 排版需考虑的因素 118
5.2.1 字体尺寸 118
5.2.2 粗细度 119
5.2.3 行间距 119
5.2.4 列宽和对齐 119
5.2.5 大写字母 120
5.2.6 字母间距 120
5.2.7 色彩 121
5.2.8 特效 122
5.3 字体影响基本原则的方式 123
5.3.1 一致性 123
5.3.2 层级 123
5.3.3 个性 125
5.4 为字体定义基本原理 125
5.5 案例分析——定义Super-Tracker的字体基本原理 128
5.5.1 应用目的 128
5.5.2 相关应用和品牌标准 128
5.5.3 用户和个性 129
5.5.4 平台方面的考虑 129
5.6 选择和运用字体 129
5.7 避免犯常见错误 132
5.7.1 统一地使用字体 132
5.7.2 为可读性而排版 133
5.8 做合理的决定 134
5.8.1 建立一个字体层级 134
5.8.2 限定字体和字型 134
5.9 超越平凡 135
第6章 色彩 136
6.1 色彩的用途 137
6.1.1 建立并传递视觉层级 139
6.1.2 使元素关系可见 140
6.1.3 增加美学表现并传达个性 143
6.2 色彩基础 146
6.2.1 传统色彩模型 146
6.2.2 红、绿、蓝模型 147
6.2.3 色相与饱和度 147
6.2.4 色值、亮度和色调 148
6.2.5 对比色 149
6.3 为色彩定义基本原理 154
6.3.1 了解你的要求和限制 155
6.3.2 了解想要传达的个性的特点 155
6.3.3 指出页面上的“明星” 155
6.3.4 确定额外的色彩需求 156
6.4 案例分析：在实践中为色彩定义基本原理 157
6.4.1 色彩搭配 160
6.4.2 色彩与基本原则 163
6.5 避免犯常见错误 165
6.5.1 对比不足 165
6.5.2 对比过多 166
6.5.3 色彩过多 166
6.5.4 色彩不足 166
6.5.5 将色彩作为唯一的区分方法 167
6.5.6 随便地、不系统地运用色彩 167
6.6 做合理的决定 167
6.7 超越平凡 168
第7章 图像 169
7.1 用图像交流 172
7.1.1 吸引注意力 173
7.1.2 提供解读和展示细节 174
7.1.3 表现内容 174
7.1.4 表达感觉、品牌或者风格 175
7.1.5 吸引用户互动 176
7.1.6 强化相似性与差别 177
7.2 图像的类别和使用 177
7.2.1 摄影照片 177
7.2.2 视频 181
7.2.3 插画 182
7.2.4 动画 182
7.2.5 Logo 184
7.2.6 图标 185
7.2.7 符号 187
7.2.8 数据可视化 187
7.2.9 互动图表 191
7.2.10 地图 192
7.2.11 图案、纹理、背景和渐变 194
7.3 在应用中使用图像 200
7.3.1 战略 200
7.3.2 战略和战术 201
7.3.3 战术 201
7.4 案例分析：定义图像基本原理的实践 201
7.4.1 评估图像——从“是什么”到“能变成什么” 203
7.4.2 Logo的探索 204
7.4.3 图标的探索 205
7.4.4 图表的探索 207
7.4.5 跨页面的图片 208
7.5 图像与基本原则 209
7.5.1 统一性 209
7.5.2 层级 210
7.5.3 个性 211
7.6 避免犯常见的错误 211
7.6.1 不使用无意义的图像 211
7.6.2 对图像数量应用“Goldilocks准则” 211
7.6.3 清晰地展现图像 211
7.6.4 在一张图中只展现核心信息 212
7.6.5 对同类图像进行统一设计 212
7.6.6 对同类图像进行统一展示 212
7.6.7 引入说明文字或帮助信息，当图片的含义非常明显时可不用 212
7.7 做合理的决策 212
7.7.1 注意文化习俗，看它们是否会影响用户对图像的解读 212
7.7.2 注意图像风格和内容的趋势，以及这些趋势的内涵 212
7.7.3 不要让默认的图表设计抢了内容的风头，也不要让它们操控个性 213
7.7.4 为图像定义规则和标准 213
7.8 超越平凡 213
7.8.1 作为界面的图像 213
7.8.2 专业的品质会使应用变得与众不同 214
第8章 控件和可供性 215
8.1 用设计来揭示可供性 216
8.1.1 控件及可供性的类型 217
8.1.2 导航控件 217
8.1.3 数据操作控件 220
8.1.4 信息显示控件 231
8.1.5 整合动作来显示可供性 236
8.2 控件、可供性以及基本原则 240
8.2.1 一致性 240
8.2.2 层级 241
8.2.3 个性 242
8.3 案例分析：为控件定义基本原理 242
8.4 避免犯常见错误 246
8.4.1 交互区域应该给人互动的感觉，只读区域则相反 246
8.4.2 提供反馈 246
8.4.3 让控件拥有设计感 246
8.5 做合理的决定 248
8.6 超越平凡 248
8.6.1 用适当个性化的控件来改进流程并提高视觉吸引力 248
8.6.2 利用反馈来表达个性 248
总结 作为视觉对话的界面设计 250
推荐的资源 251
参考资料 254