经典畅销书全新升级，近20年长销不衰，被翻译为近10种文字在全球范围内出版，广受好评
紧随市场变化，新版更关注用户，深入探讨打造良好用户体验的原则、方法、工具及实践

用户体验是网站设计过程中一个十分重要的考虑因素，它涉及能够影响网站用户体验的每一个决策和行动。网站开发团队中的每个人都有自己的角色。在许多网站上，用户也是活跃的贡献者，这意味着他们也会影响网站的体验性和可访问性。提供良好的用户体验是一个企业成功的关键因素。良好的用户体验能够让人们在访问网站时成功找到他们所需要的信息，这也是企业能够维护忠实用户群体的最好方式。
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这样的商业领袖并不仅仅是科技行业的领导者—在这些公司里，人们最欣赏的是优秀的设计。在功能上，在其创造的用户体验中，在产品服务的外观和整体性上，设计是贯穿各个业务层面的关键策略。我们看到，优秀企业的设计成熟度曲线在稳步攀升，它们也从中获得了巨大的商业价值。为满足各种各样的人群而进行的多样性设计，已经被视为公司的一种独特优势。如果一家公司将可访问的用户体验设计作为核心价值，并且以用户为中心执行设计实践，它就会获得成功的、满意且忠诚的客户群。

计算机\网络

来自Ethan Marcotte的推荐序
你正在阅读的不是一本书，而是一张地图。《Web风格》可以为你以后的项目提供很多好的方法，并介绍一些你应该会想再次重温的想法、概念和地标。

对于从事互联网工作的人来说，这是一本很好的入门书籍，Horton和Lynch将现实可行的技术与实际案例结合起来，为如今复杂的网络项目提供了一个全面且实用的指南。
——　Sara Wachter-Boettcher，《Design for Real Life and Content Everywhere》作者

一本管理现代网页设计复杂性的实用手册。它强调了可塑的、响应式的内容，这为创造良好数字体验打造了重要的基础。
——　Senongo Akpem

《Web风格》概述了一个复杂的网站项目中出现的每一个步骤，并且出色地展示出每一个步骤是如何组合在一起的；对于任何一个参与网站项目的人来说，这都是一本必读书籍。
——　 Aaron Gustafson, 《Adaptive Web Design》作者

网站设计师的风格指南。
——　J. D. Biersdorfer, 《纽约时报》

本书一直被誉为网站设计领域的经典著作，已翻译成多种文字在全球发行。随着网站设计师不再从零开发网站，而是转向利用内容管理和聚合工具来协助开发网站，本书的重点也从代码示例转向了良好实践，特别是关于移动体验、社交媒体和可访问性的实践案例。本书不仅阐述了很多普遍的设计原则，还深入探讨了网页设计的方方面面 ——从计划到生产，再到维护。另外，本书还举例说明了这些原则是如何应用在网站设计过程中的，可以帮助你更好地完成信息设计、界面设计以及高效的搜索和导航设计。

我最喜欢的高中英语老师有一个小习惯：初秋时节，在每一个新班级开始之前，他都会倚靠着教室前面的黑板，将满是粉笔灰的手插在口袋里。只要他一站在那里，就会开始给我们讲关于教学的趣事，比如接下来一年中我们将阅读什么样的作品，了解什么样的作者，我们会探索怎样的主题，进行怎样的课堂讨论。
在介绍的末尾他也会提醒我们，尽管大家有一整年的时间待在一起，却没有足够的时间让整个班级完全深入探索一个主题。他说：“这门课程就像一场国外旅行。接下来我们将花费几个月探索这一新的领域，并一起讨论那些精彩的书籍。像所有的旅行一样，我们只有很少一段时间是在一起的……但如果我做足功课，并竭尽所能向你们展示我所看到的风景，这样条件成熟时你们一定会再回来这里。我也会提供足够多的地标，这样你们就可以用自己的方式尝试更多的探索。”
现在我想告诉读者一个小秘密：这不是一本仅供阅读的图书。这是一张地图。
网站是一个广阔而又陌生的地方，充斥着丰富的专业术语。的确，它是一个可以令人心生畏惧的探索之地。但庆幸的是你拥有了本书。本书由Patrick Lynch和Sarah Horton撰写，他们都是优秀的教育家兼作家，同时也是制图师，即绘制网站图表领域的专家。Patrick和Sarah十分了解网页布局的复杂性，并且精通如何定义设计项目的范围、网页基本排版等内容。
无论你是新手还是有经验的设计师，本书都可以为你以后的项目提供很多好的方法，并介绍一些你应该会想再次重温的想法、概念和地标。
那么就让我们开启本书之旅吧。

Ethan Marcotte

从1999年出版第1版到今天，《Web Style Guide》已经更新到了第4版。相对于之前的版本，新版本不再局限于关注如何从零开发一个网站，而是告诉读者如何选择和利用市面上的内容管理系统，并将更多的关注点放在讨论如何建立良好的用户体验、信息结构以及内容策略上。另外，新版本中列举了网站制作过程中的很多最佳实践，例如针对很多设计师关注的移动优先设计方法，以及网站的可访问性和搜索优化问题等，作者都给出了很多建议以及相应的案例分析。
很多人认为本书是一本实用手册，或者像作者说的，将它视为“一张地图”。书中包含了网站建设的方方面面，从开始的计划和决策，到上线后的维护和内容运营。因此，无论你是UI/UX设计师、程序员、内容编辑，还是产品经理、项目赞助商，你都可以从本书中发现日常工作中易被遗漏或忽视的细节，同时也能对其他各角色的工作有所了解。如果你是刚进入互联网行业的从业者，那么相信这本书可以帮助你快速入门，了解创建网站项目的全部流程。
关于如何使用这张“地图”，以下是个人对全书的概括总结。希望我的总结可以帮助你针对项目目前所处的状态进行跳跃式阅读，如果你对某些环节很感兴趣，想要做深入的学习和研究，我也根据个人经验提供了一些扩展读物。
相信绝大多数互联网从业者都会接触网站设计与开发，有人也许会说传统网站已经过时了，我们现在做的都是移动端应用或者HTML5小程序，但是从第一个网站诞生（要了解更多网站的历史，请访问http://info.cern.ch/）到今天，虽然其形式在变，承载媒介在变，推广方式也在变，一些基本流程却没有发生太大的改变。如果你想做一个成功的互联网产品（无论是网站、App还是小程序），首先你都需要有一个明确的战略规划（见本书第1章），你的产品愿景是什么？用户是谁？要解决什么问题？如何解决？怎样才算成功？俗话说“不打没准备的仗”，在开始启动项目之前，这一系列问题都需要有个明确的答案。
在做足准备工作后，你需要开始思考你的产品，怎样才能做出一个让人爱不释手的产品呢？这个问题当然需要去问你的用户。本书第2章介绍了很多经典的用户调研和分析方法，以及如何产生创意，并将其做成简单原型去验证。用户调研对于产品设计来说是非常重要的一环，如果对产品的前期探索阶段感兴趣，想要了解和学习更多方法论知识，推荐阅读与Design Thinking（设计思维）以及Service Design（服务设计）相关的书籍和文章。
当你完成前面一系列动作后，你的产品方向基本已经明确了。你会发现到目前为止你还不需要投入大量的人力和物力，也就是说，一旦前面任何一个环节出现问题，终止项目的成本都还是比较低的。如果一切进行得都很顺利，那么你将进入具体的设计和开发环节，这也就意味着更多人力和物力的投入，因此在开始之前你需要先明确项目的管理模式。如果管理模式出现问题，不是耸人听闻，你的后期损失将是巨大的。本书第3章介绍了两种管理模式—瀑布式以及敏捷式，作者对每一种模式都做了利弊分析，且在最后提出了一种混合管理模式，可以兼顾两种模式的优势。敏捷对组织和团队来说不仅仅是一个管理工具，它更是一套思维模式，可以帮助到组织运营的方方面面。想要了解更多关于敏捷实践以及大规模敏捷推广的内容，推荐阅读《精益企业》，并了解SAFe、LeSS和EDGE等框架。
在团队和管理模式确定下来后，就可以进入网站的具体设计和开发环节了。如同盖房子一样，首先要打好地基，并搭建好钢筋骨架。本书第4章介绍了支撑一个成功网站的重要骨架—信息架构。如果说网站的每一个内容块都是一颗珍珠，那么信息架构就是把它们穿起来的线。信息架构设计在设计过程中很容易被忽视，因为人们在设计程序时很容易会陷入系统的思维模式，而忽视终端用户在与系统交互过程中也会为其所见到的信息建立心智模型。做好网站内容信息的分类可以为后续的导航和搜索系统设计打下良好基础。
本书第7章进一步讲述了导航设计以及网站整体交互设计对于用户体验的重要性，另外对移动端的体验设计也做了一些讨论。对于一个新用户来说网站是一个完全陌生的空间，因此页面的导航和搜索设计十分重要，它们可以帮助用户在各个页面之间自由地跳转而不会迷失方向。随着网站功能复杂性的提升，对用户体验的要求也随之提升。作者在书中倡导使用标准化的设计组件，避免形式大于功能，并让用户来决定需求的相关性。作者也提到了“响应式”设计以及“移动优先”（mobile first）设计。随着移动端（手机、平板、智能手表等）用户的增多，移动端设备的使用体验对设计师提出了更大的挑战。只做到自由“响应”不同屏幕尺寸是远远不够的，还需要考虑用户的使用环境、使用习惯以及可访问性等。关于交互设计推荐阅读的书籍有很多，例如“VB之父”Alan Cooper所著的《交互设计之路》，唐纳德·诺曼的《设计心理学》系列等。想要更深入地了解设计方法背后的科学依据，推荐阅读《认知与设计》（Jeff Johnson）。
有了坚实的钢筋骨架后，该开始粉刷墙壁了。本书第8章介绍了很多平面设计的基本原则，例如颜色和对比度的使用原则，以及设计中的格式塔心理学原则。作者强调了视觉美学对用户体验的重要性，因为用户对网站的本能情感反应（只需50ms）会持续影响他们对所见事物的信任度，以及对其价值的判定。关于人的视觉认知对设计的影响，如果想要深入了解，推荐阅读《Visual Thinking for Design》（Colin Ware），该书的作者通过揭示人们在看到事物时大脑的认知反映过程，来反推设计师在通过图像做视觉传达时应该注意哪些细节。
虽然有了好看的图纸，但是如果没有工程人员的施工搭建，房子也无法最终与世人见面。本书第5章和第6章介绍了如何通过使用WordPress和Drupal等内容管理平台来搭建自己的网站，其中涉及很多前端代码的内容。如果你对开发不是很感兴趣，或者做的是移动端原生App开发，那么可以跳过这两章。不过，我认为对于交互设计师来说，懂一些前端知识还是很有必要的。前端知识可以为原型设计提供指导性的帮助，避免想法太过天马行空。另外，在对设计进行组件化拆分时，懂得一些前端知识也可以帮助你做得更快更好。
到此为止，房屋已经基本搭建完毕，剩下的就是室内装修了。网站的“室内装修”是一个长期的过程，因为你希望用户每次进来都能够看到不一样的东西。界面设计师和内容编辑人员对排版（见本书第9章）和编辑样式（见本书第10章）一定不会觉得陌生。但是对于初次接触网站的新人，或者开发团队中的其他角色，你可以从本书中了解很多在做网站编辑和排版时的注意事项和基本原则。在编辑网站内容时一定要把握好网络媒介的特殊性，网络读者（尤其是手机端用户）习惯于快速浏览内容，并在短时间内决定是否继续浏览，因此快速抓取到用户的兴趣点十分重要。
第11章以及第12章介绍了更多更丰富的网站内容形式。第11章介绍网站中可能会用到的各种图像格式，在编辑时可以按需选择。无论使用哪种格式的图片，都需要注意适应不同屏幕分辨率，以保证清晰度；另外要考虑视觉障碍的用户，为图片添加alt标签。第12章介绍了网站短视频的拍摄和编辑技巧，以及社交媒体的使用。对于国内读者来说，在阅读时可以将书中所列举的社交媒体例子转换为国内的社交媒体。书中讨论的视频不同于当下如火如荼的自媒体短视频，更偏向于人物专访类，不过其中讲述的视频拍摄技巧以及注意事项还是十分值得借鉴和学习的。
本书是我翻译的第一部作品，因为只能利用业余时间，所以前前后后经历了近一年的打磨。在此过程中，我深刻体会到了读懂≠翻译，很多时候会遇到句子读起来很顺，但是转换成中文就有些词不达意的情况，所以说仅仅读懂书中的文字是不够的，更需要理解作者想要表达的意思。如果读者有兴趣做翻译，建议试着一段一段地去翻译，而不是一句一句地看，因为当你逐字逐句地翻译时，很容易被词性或语序困住，既阻碍了进度也打击了翻译的积极性。由于经验和时间的原因，如果读者在阅读过程中发现了表述不合理的地方，欢迎指正和交流。

陈颖婕
2018年3月

译者序
序言
前言
致谢
第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