Web风格：用户体验设计基本原则及实践(原书第4版)

从1999年出版第1版到今天，《Web Style Guide》已经更新到了第4版。相对于之前的版本，新版本不再局限于关注如何从零开发一个网站，而是告诉读者如何选择和利用市面上的内容管理系统，并将更多的关注点放在讨论如何建立良好的用户体验、信息结构以及内容策略上。另外，新版本中列举了网站制作过程中的很多佳实践，例如针对很多设计师关注的移动优先设计方法，以及网站的可访问性和搜索优化问题等，作者都给出了很多建议以及相应的案例分析。

用户体验是网站设计过程中一个十分重要的考虑因素，它涉及能够影响网站用户体验的每一个决策和行动。网站开发团队中的每个人都有自己的角色。在许多网站上，用户也是活跃的贡献者，这意味着他们也会影响网站的体验性和可访问性。提供良好的用户体验是一个企业成功的关键因素。良好的用户体验能够让人们在访问网站时成功找到他们所需要的信息，这也是企业能够维护忠实用户群体的最好方式。
1993年，当我们出版本书的第一个版本时，“用户体验”并未受到很大的重视。网站只提供基本的设计选项，并且通过超链接实现一些基本的交互。我们的指南主要集中于有限可用选项中的基础型最佳实践：比如，如何给页面加标题以方便在书签列表中进行扫描，如何构造文本以便适应在线读者的阅读习惯。随着时间的推移和随后版本的出现，由于网站技术变得更加强大和完善，我们也因此能够提供更多关于网站设计方面的指导，例如页面设计和平面设计。我们的早期版本专注于网页设计技艺，讲授如何使用可用的工具和材料来达到最佳效果。这些版本有很多代码示例并涵盖了技术细节，如图像和视频压缩算法，因为建设网站必须知道如何将基本的超文本标记语言转换为可动态运行的平面设计，以及如何向还在使用低速调制解调器的用户提供高像素图像和媒体。在早期的网络中，科学技术比艺术美感重要得多。
时代已经改变了，我们的书也一样。现在，20多年过去了，技术平台变得更加成熟。用户的要求变得更高—更不愿意妥协—他们希望能拥有易访问且好用的网站。各组织开始认识到设计的重要性，并且正在采用更有策略的方法来设计并实现高质量的用户体验（如图1所示）。
本书第4版提供了一个更严谨、更成熟的环境—它关注的是用户，而不是技术。它的代码样本较少。关于HTML和CSS的知识不再是成为一名高效的网站专业人员所必备的要求（尽管知道技术原理仍然是一个明显的优势）。我们加入了新的一章“策略”（第1章），在阅读该章时你会发现良好的用户体验和有效的设计需要独特的视角和认知。在第2章“调研”中你会发现，达成这种认知需要与各种各样的即将使用网站的参与者接触，而不可能简单地从团队会议或白板上总结出来。你会发现一个贯穿本书的重点内容，那就是内容和交互的质量，只有这两者达到高质量水平，才能满足用户的需求和偏好。以前版本的副书名是“Basic Design Principles for Creating Web Sites”。第4版的副书名修订为“Foundations of User Experience Design”。
随着我们将焦点转向用户体验设计，我们会将章节与Jesse James Garret所著的《The Elements of User Experience》中描述的五种用户体验维度相对应（如图2所示）。他的经典图表既可以看作是对用户体验设计维度的阐述，也可作为设计和开发过程中的用户体验指导路线图（可以在wsg4.link/ux-elements中找到）。

图2　对设计策略价值的认识、设计的全面一体化、用户体验和通用性标志着企业成熟度
对本书的已有章节和新章节的理解过程也正在逐渐变得更加清晰。随着时间的推移，我们越来越重视在框架的基础上，为策略和范围层面框架上的活动提供指导。良好的用户体验需要明确的目标以及对用户需求和偏好的深刻了解以及精心的项目规划。我们新增加了一个层面，称为物质层面。物质层面位于框架顶端，包括文本、图像和视频。在过去的几年里，人们越来越认识到“内容至上”，再多华而不实或炫酷的组件都无法与一段吸引用户的文本相媲美。
自从23年前开始创作本书第1版以来，我们看到的另一个令人耳目一新的变化就是对各种设计价值有了更加广泛而深刻的认识，包括：用户体验设计、界面设计、内容设计和视觉交流设计。如今，像Apple、Google、Amazon、Facebook和Adobe这样的商业领袖并不仅仅是科技行业的领导者—在这些公司里，人们最欣赏的是优秀的设计。在功能上，在其创造的用户体验中，在产品服务的外观和整体性上，设计是贯穿各个业务层面的关键策略。我们看到，优秀企业的设计成熟度曲线在稳步攀升，它们也从中获得了巨大的商业价值。为满足各种各样的人群而进行的多样性设计，已经被视为公司的一种独特优势。如果一家公司将可访问的用户体验设计作为核心价值，并且以用户为中心执行设计实践，它就会获得成功的、满意且忠诚的客户群。

译者序
序言
前言
致谢
第1章　策略 1
1.1　策略规划 1
1.1.1　创建一个策略规划 2
1.1.2　制定策略规划 3
1.2　便捷的用户体验 8
1.3　内容策略 11
1.4　社交媒体策略 17
1.4.1　创建一个社交媒体策略 17
1.4.2　通过社交媒体渠道获得用户 22
1.4.3　配置你的社交媒体团队 27
第2章　调研 29
2.1　头脑风暴 29
2.1.1　用设计思维指导头脑风暴 30
2.1.2　用户调研 33
2.1.3　指导设计决策 35
2.1.4　设计评估 38
2.1.5　调研的过程要考虑到残障人士 40
2.2　分析 41
第3章　流程 44
3.1　项目资源 44
3.2　项目规划 50
3.2.1　创建一个项目实现计划 50
3.2.2　避免需求扩张 57
3.3　项目管理 57
3.4　项目开发的生命周期 66
3.4.1　网站定义和计划 68
3.4.2　内容开发 68
3.4.3　信息架构 70
3.4.4　网站设计 70
3.4.5　网站构建 71
3.4.6　网站的跟踪、评估和维护 72
3.4.7　常见的项目开发事故 74
第4章　信息架构 83
4.1　网站开发中的信息架构 84
4.2　信息架构方法 85
4.2.1　盘点和审核内容 85
4.2.2　组织内容 87
4.2.3　分割信息 92
4.3　信息架构设计 94
4.3.1　支持浏览和搜索 95
4.3.2　选择网站结构 95
4.3.3　设计网页架构 100
4.3.4　展示信息架构 102
第5章　网站结构 108
5.1　网站组件 108
5.1.1　使用超文本标记语言（HTML） 109
5.1.2　使用层叠样式表 112
5.1.3　交互式脚本 114
5.1.4　其他文档格式 114
5.1.5　搭建一个坚固的结构 115
5.2　内容管理系统 117
5.2.1　建立编辑工作流程 119
5.2.2　选择一个CMS 121
5.2.3　组织内容和功能 122
5.2.4　创建主题和模板 125
5.3　SEO 128
5.3.1　了解搜索 129
5.3.2　使用关键字和关键词组 131
5.3.3　提交一个网站索引 136
第6章　页面结构 137
6.1　页面结构的基础 137
6.1.1　标记页面结构 137
6.1.2　使用CSS设计页面布局 142
6.1.3　编码网页，使其具有最佳可访问性和可读性 143
6.2　响应式设计 144
6.2.1　流式布局和比例度量 145
6.2.2　响应式设计和移动优先设计 149
6.2.3　从内容和功能开始 151
6.2.4　最佳实践总结 151
6.3　页面结构组件 152
6.3.1　构建一个页面 152
6.3.2　优化页面，提升加载速度 157
6.3.3　围绕“折叠线”进行设计 159
6.3.4　信息屏设计 161
6.4　页面模板 161
6.4.1　创建内层页面模板 161
6.4.2　设计一级页面模板 164
第7章　界面设计 166
7.1　媒介设计 166
7.1.1　无止境的页面 167
7.1.2　直接访问 167
7.1.3　简单性与一致性 167
7.1.4　完整性与稳定性 169
7.1.5　反馈和对话 169
7.1.6　带宽与交互 170
7.1.7　显示 171
7.2　导航和寻路 172
7.2.1　支持搜索和浏览导航 173
7.2.2　设计导航 175
7.2.3　提供导航系统 184
7.3　交互 186
7.3.1　交互设计 187
7.3.2　提供交互组件 190
7.3.3　引导式交互 193
7.4　信息设计 197
7.5　移动界面设计 199
7.6　企业界面设计 202
第8章　平面设计 204
8.1　利用设计逻辑 204
8.1.1　流体逻辑 204
8.1.2　商业逻辑 205
8.2　不断变化的样式 206
8.3　注重吸引力的影响 206
8.3.1　眼球追踪与美感反应 207
8.3.2　本能反应 207
8.3.3　情感反应与决策 208
8.4　视觉设计 211
8.4.1　塑造视觉平面 211
8.4.2　使用知觉完形原则 213
8.5　视觉结构 215
8.5.1　理解视觉结构的起源 216
8.5.2　建立视觉层次 219
8.5.3　使用页面网格系统 223
第9章　排版 229
9.1　网页排版的特点 229
9.1.1　语义 230
9.1.2　使用样式表 231
9.1.3　网页排版实践 234
9.2　排版设计元素 235
9.2.1　显示样式 236
9.2.2　对齐与空白空间 236
9.2.3　行宽度 238
9.2.4　行间距 238
9.2.5　缩进 238
9.2.6　文本大小 238
9.2.7　强调 240
9.3　字体 243
9.3.1　字体术语 243
9.3.2　字体大小 244
9.3.3　文字间距和字距调整 244
9.3.4　传统字体的改进 245
9.3.5　专为屏幕设计 245
9.3.6　其他媒介中的字体 245
9.4　选择字体 245
9.4.1　指定操作系统的字体 246
9.4.2　通过CSS @ font-face元素使用网络字体 246
第10章　编辑样式 249
10.1　样式 249
10.1.1　写吸引人的作品 249
10.1.2　把内容放在第一位 253
10.1.3　让链接有意义 255
10.2　文章结构 256
10.2.1　提供视觉地标 257
10.2.2　结构标记 258
10.2.3　提供清楚的链接 260
第11章　图像 261
11.1　网络图像策略 261
11.1.1　界面和品牌 261
11.1.2　内容图像 261
11.2　关于网络图像 263
11.2.1　了解图像类型 263
11.2.2　了解图像文件格式 265
11.3　使用网络图像 268
11.3.1　选择正确的文件格式 268
11.3.2　为图像提供alt标签 271
11.3.3　优化屏幕图像 271
第12章　多媒体 277
12.1　网站视频策略 277
12.1.1　提供良好的体验 278
12.1.2　为音频和视频提供其他选择 279
12.1.3　选择发布渠道 279
12.2　视频制作 282
12.2.1　制作视频短片的装备 282
12.2.2　拍摄计划 285
12.2.3　拍摄采访 286
12.2.4　拍摄b-roll和其他镜头 289
12.2.5　组合视频镜头 291
12.3　视频剪辑 292
12.3.1　构建故事 292
12.3.2　剪辑视频 293