详情
本书展现给我们的是一种符合Web标准的适应多平台的优化设计实践。
随着移动设备逐渐代替PC成为了人们访问互联网的入口，其特殊性决定了产品的设计必须要适应更多不同的设备，这种适应原则是建立在HTML5、CSS3等技术，以及利用手势操作的交互设计方案之上的。
书名：渐进增强——跨平台用户体验设计
ISBN：978-7-115-44848-4
本书由人民邮电出版社发行数字版。版权所有，侵权必究。
您购买的人民邮电出版社电子书仅供您个人使用，未经授权，不得以任何方式复制和传播本书内容。
我们愿意相信读者具有这样的良知和觉悟，与我们共同保护知识产权。
如果购买者有侵权行为，我们可能对该用户实施包括但不限于关闭该帐号等维权措施，并可能追究法律责任。
• 著 [美] Aaron Gustafson
译 翟东方 任 洁
责任编辑 赵 轩
• 人民邮电出版社出版发行 北京市丰台区成寿寺路11号
邮编 100164 电子邮件 315@ptpress.com.cn
• 读者服务热线：(010)81055410
反盗版热线：(010)81055315
Authorized translation from the English language edition, entitled ADAPTIVE WEB DESIGN, 2nd Edition, 9780134216140 by GUSTAFSON, AARON, published by Pearson Education, Inc, publishing as New Riders, Copyright © 2016.
本书中文简体字版由美国Pearson Education授权人民邮电出版社出版。未经出版者书面许可，对本书任何部分不得以任何方式复制或抄袭。版权所有，侵权必究。
大多数有关Web设计的图书都采取了“技术+案例”的形式，以便让读者迅速掌握某项技能。这类图书会用很大篇幅讲述如何应用HTML标签，CSS代码的每个属性是如何生效的，等等。此外，这些图书还会附带一个一个的小项目，通过带着读者一步一步写出代码，来观察项目是如何成型的，让读者形成自己的认识，从而掌握设计和开发技巧。
这本书和上面所说的模式不同。这本书讨论的是设计师如何应对一个不断发展变化的Web环境，本质上，这是一本设计哲学书。
市面上已经存在大量的技术图书，网上也有大量的技术文章可以读。这些书很多写得都非常好，但是，如你所知，大多数图书和文章在几个月到一年的时间之后就被淘汰了，因为技术过时了。
实现技术、浏览器、工具包……这些东西变化得太快。我自己经常因为学习这些东西导致不堪重负。在一片动荡不安的技术海洋里，到底有多少种方法可以学习啊！我只是想做一个小网站，这片大海简直把我吓坏了！当我被技术的浪潮推到这边，拍到那边，因为晕船吐得一塌糊涂之后，我终于发现了大多数技术都在围绕一个中心在发展自己——这个中心就是“渐进增强”。
“渐进增强”的哲学可以称之为适应性Web设计方法的核心和灵魂。以它为核心，我终于能够正确理解很多技术和思路是如何产生的。甚至，理解了这种思想之后，我做出来的新网站变得更加健壮，而且很多用户表示我的网站访问起来终于不那么头疼啦，因此，这些网站的访问量也一天天增长起来。对“渐进增强”的理解使我成为了一名更优秀的Web设计师，我相信这种魔力也会让你变得更优秀。
至今我依然清楚地记得，本书第一版刚刚面世，我用双手捧着它的那种感觉。我早知道这是本好书，彼时的我就像孩子剥开糖果一样，期待着满心甜蜜。结果，这本书的第1章就完全超过我的预期，让我佩服得五体投地。在第1章中，Aaron明确而具体地解释了那个我为之思考多年，却总是不能想明白说清楚的设计原则——渐进增强的真谛。
事后想来，我本不该如此惊讶。Aaron本是一个Web领域的多面手，在很多方面都有深入的研究——特别是可用性方面。但是他并没有像很多人一样，做一个技术领域的专家，而是不吝把他的思想分享给更多的人，让更多的人受益。
对于我们这些Web设计师和开发者来说，跟随技术趋势、学习实现技巧就像家常便饭一样，我们也乐得沉溺其中，被技术左右，为一些效果的实现方式而百思不解。我们常常忘记问自己一个根本问题，Web的设计和开发最初是为了什么呢？而Aaron除了能够引导读者进入技术的细微末节之外，关键他能够时刻提醒你，时刻不要忘了，技术只是产品的一部分，你的产品设计最终还是要考虑到用户的因素。
我时常怀疑，Aaron是不是会纠结于如何描述自己的工作性质。开发者？布道者？作者？所有这些名词都只描述了他工作的一部分，我们无法通过这些头衔来真正了解他做的事情。我觉得，Aaron最适合的头衔也许是——老师。
一位好老师总是具有神奇的魔力。他能够一边传授知识一边像讲故事一样娓娓道来，让听众欣然接受。Aaron的这本书正是具有这样的魔力。
我相信你会喜欢这本书的。像读故事书一样翻开后面的篇章吧，你收获的可不仅仅是故事。 开始吧，老师！
Jeremy Keith，Clearleft
2015 年8 月
本书作者Aaron Gustafson是Web标准化项目的前项目经理，一直致力于Web的标准化和可访问性方面的工作，并且积累了丰富的经验。
在近二十年的 Web 从业生涯中， Aaron 服务过众多我们所耳熟能详的企业，包括 Box、Happy Cog、美国职棒大联盟、 McAfee、纽约时报、SAS、StubHub、美国国家环境保护局、Vanguard、Walgreens和Yahoo等。Aaron亦作为 Web 标准化的顾问参加了微软浏览器团队的研发工作。
Aaron善于通过写文章来分享他的经验和知识。他为《A List Apart》杂志撰写的“渐进增强三部曲”长期以来备受读者欢迎。他围绕渐进增强这个主题写成的图书《自适应Web设计》也获得了非常好的口碑和销量。除了写作，Aaron现在经常参加各种Web大会，与大家分享Web技术和设计方面的思考，并在世界各地和当地Web从业者进行研讨会形式的交流。
在Aaron的家乡，田纳西州的查塔努加市，他建立了查塔努加开放设备实验室。在这个实验室中，Aaron和Kelly McCarthy组织了很多创意和技术的分享活动。Aaron 是Rosenfeld Media“专家”俱乐部的成员，其博客地址是aaron-gustafson.com。
翟东方，北师大文学系，互联网内容方向从业十年：苏州街角撸过码，西溪湿地画过图，中关村里奋过袖，后厂村口堵过车；曾向往入读北大哲学系，屡屡失利；热衷于用代码解决设计问题，有些心得。梁任公曾曰：“启超没有什么学问……”话锋一转，“还是有些的嘛！”既醉心之，则发展之，则分享之，独乐乐不如众乐乐。Quora上有云：“Don’t waste time on trying to find meaning and purpose in life other than your instincts.（与其努力向别人证明什么，不如跟随自己的天赋做点什么）。” 颇以为是。
任洁，北航交互设计硕士。互联网从业九年，走了一条从视觉设计到交互设计再到产品经理的道路，也因此接触了从电商门户到O2O等各种各样的产品形态。平时喜欢研究民俗和东亚志怪文献。自幼跟随老师学习工笔白描，热爱一切复杂美丽的线描图案。
最后，欢迎加入读者交流QQ群：364021031。
在一切开始之前，我要声明，这本书的成书离不开导师以及行业中众多朋友和伙伴的帮忙，实际上，如果没有大家的帮助，我一个人是不可能完成这项颇为艰巨的任务的。所以，我必须用一定的篇幅对这些帮助过我的人表示真心的感谢。
首先我要感谢Molly Holzschlag，还有Jeffrey Zeldman。感谢你们二位的指导，你们引导我走上了这条写作和分享之路。同时，我也要感谢许多行业大会的组织方，以及出版社的朋友们，给了我表达自己想法的机会。
Steph Troeth将我头脑中的凌乱思路重新疏理，是她将此书的结构反复调整，以求表达清晰。在她的支持和鼓励下，整个写书的过程变得让人非常享受。
Chris Casciano、Craig Cook，以及Steve Faulkner，是他们帮助我重新校对了我的文字，指出了我的疏忽之处，确保了内容的简洁清晰。感谢他们卓越的工作和专业精神。
感谢 Tim Kadlec、Jeremy Keith 和 Ethan Marcotte，这几位是行业中的大师级人物了，感谢他们认真读了我这本书的草稿，给出了非常多专业的意见。
VeerlePieters，感谢她在工作繁忙的间隙依然抽出时间阅读和感受这本书，并为第一版设计了漂亮的封面。
感谢Ben Dicks为这本书的排版付出的心血，以及所有这本书中引用的插画的作者的辛勤工作。
感谢Jeff、Matt、Adam，以及整个Perma网页快照维护团队，让我可以放心地在文章中添加超链接。
感谢Pearson/New Riders出版集团，其中尤其感谢Nikki McDonald对本书的引进，以及Tracey Croom和Mimi Heft在这本书出版过程中所给予的杰出帮助。
当然，最后要感谢Kelly，在你的支持下，我才有充足的时间，保持专注来写这本书。因为你的鼓舞，我才有动力完成这项工作。
“总有些人干过这种事，在网页顶部或底部搞一个小黄条，写上‘请使用XX浏览器(如IE6)访问本网站以获得最佳访问效果’。要我说，这种人到底是多么想回到过去啊，回到Web诞生之前吗？那样你就不可能在别的电脑、别的文字处理器，或者别的网络来访问你这个不想让别人看的网站啦！”
——Tim Berners Lee
互联网中，唯一不变的就是变化。四下观望，永远都有新的设计风格，新的语言、框架、工具、新的上网设备在博人眼球。乱花渐欲迷人眼，城头变幻大王旗，连“上网行为”这个概念本身都不能保证难免一天不会被重定义。
在这样一个日新月异的行业，人们普遍感到一种技术焦虑，作为置身互联网行业中的你，我猜也有和我相同的感受。
在我近20年的互联网从业经验中，我目睹了太多技术的变迁，从Java applets、Shockwave、Flash、Prototype、jQuery、960gs、Bootstrap，到Angular、React，等等，技术的发展就像长江后浪推前浪；在技术发展的同时，设备的屏幕也由小变大，又由大变小，设备的更迭也犹如花开花谢；然后，我们还经历了因设备碎片化导致的开发混乱，面临过为不同设备独立开发，还是一套代码兼容不同设备的概念挣扎。后之视今，亦犹今之视昔。大江东去浪淘尽，唯有Web这个概念，在不断发展变化中保留了下来。
Web的概念之所以经久不衰，是因为它无关设备和屏幕尺寸；Web不是软件，不需要用户去安装；Web本身对其承载的内容具有良好的适应性和无限的延展性；Web可以作为内容访问的窗口，集成在任何需要的地方；Web可以触及每个用户；当今的Web几乎能够胜任一切。
2012年初，我所在的公司接待了一个客户，这个客户被他们移动端APP的用户登录验证问题伤透了脑筋，所以想请求我们的帮助。情况是这样的，他们开发了好几个原生APP，这些APP都有一个用户登录的公用模块，是通过Web Service的方式访问服务器上的统一接口来实现的。这种技术方案虽然方便了代码的管理，却为他们后来的开发留下了麻烦。他们想在Web Service的模块中加入一个安全验证的步骤（类似“你就读的第一所学校的名称是什么？”这种验证问题），却发现部署这个页面比改这个页面麻烦多了，大概步骤如下。
1．将安全验证这个需求开发完成。
2．将代码放在Web Service上。
3．更新每个原生APP，以使新需求生效（可能需要调整每个原生APP的UI）。
4．将每个APP提交到应用市场。
5．指望用户更新到新版本的APP。
这位客户解释了他们为什么会采用原生APP内嵌Web Service的解决方案。他们的APP的版本覆盖了iPhone、iPad和Android三个平台，希望通过Web方式统一管理用户登录行为，利用Web Service和原生代码分离的特点降低代码耦合，提高重用效率，且做到功能的迅速部署和更新。事实上，这种方式确实已经被大多数网站所采用，并且收到了很好的效果。
了解了客户的困扰和需求后，我们开始了对这个项目的改造。尽管要考虑到跨三个平台的问题，但我们并没有过于纠结每个平台的技术差异和繁杂的屏幕尺寸。我们的思考方式是，设想每个组件在每个屏幕下可能的展示效果。首先，页面的布局必须设计为响应式的，无论是通过小屏幕或大屏幕设备访问，都能保证可见模块有良好的适应性。然后，我们使用了一些轻量的HTML5和JavaScript技术，希望在尽量不增加文件大小的情况下为页面加入一些新特性（例如使用HTML5原生表单验证来代替客户端JavaScript验证），这样，在CSS或JavaScript因网络或者用户设置的原因而无法加载的情况下，页面依然能够验证和响应用户输入的内容。
于是，客户得到了解决方案，高高兴兴地走了。我们也很开心，喝喝酒做点别的，时间过得很快。几个月后，这个客户又回来了。他们这次开了一个新的脑洞，想让所有访问他们触屏版网站的用户，也能通过之前那套用户验证系统来登录。他们提供了一份触屏版网站的访客UA数据（即用户通过何种设备或浏览器访问过这个登录页），数据显示，在两天之内，UA竟然有1400种，就是说，用户通过1400种不同的设备和浏览器访问了这个页面。客户拿着这份数据，说兼容问题你们能搞定吗？我们秉着客户至上的精神，认真分析他们提供的数据[1]并进行了整理。我们在数据分析结果中发现，这1400条登录记录中，有25种设备的使用频率极高，差不多覆盖了97%的用户。其他3%的用户形成了数据长尾，他们使用的设备林林总总，某些设备实在超出我们的想象之外。得到这个数据后，我们感到一阵暗爽，因为在几个月前的开发中，我们已经把97%的问题解决啦！所以我们只需要解决其他长尾设备可能出现的问题，方式是——遇见一个解决一个。
客户给我们的预算中，包括兼容1400种不同的设备或浏览器的开发成本，包括兼容一些很古老的Web设备（例如Blackberry4和Openwave这种），对这些古老设备的兼容，花去了预算的1/3。
当所有需求都厘清并完成的时候，我们盘点了我们的项目实际工时和完成时间，大约只花掉了目标预算的1/2。我们自己很开心，因为我们提前交付了项目，显得我们的团队很高效。同时我们的客户也很开心，因为他为公司节省了很多开发经费，他的老板势必会说，你真能干啊（这些是我们这群不通人情世故的程序员的想象，实际情况我们就不知道了）。
一切归功于几个月前，我们对项目的改造，几乎使我们不用做什么，就解决了97%的问题。这一个项目的快速推进，靠的不是我们解决bug的能力和执行速度，而是印证了项目遵循一个好的设计开发思想是多么重要，这种设计和开发思想，就叫做——渐进增强。
渐进增强是一种拥抱未来的设计思想。这种设计思想无关你面对的是何种设备或浏览器，也无关你的代码是HTML或CSS的哪个版本。使用渐进增强的设计思想便意味着，你为用户提供了一种无论使用什么设备和浏览器都能正确访问你的页面内容的方法。
听起来很棒啊！你可能会想，这么强大的思想，落实到代码上需要的工作量也很大吧？哈哈，你想错了，一旦你理解了渐进增强思想的实现原理，你会发现其实落实起来相当简单。
在2003年美国西南交互设计大会上，Web标准化组织的Steve Champion首次提出了“渐进增强”的概念，用来描述一种Web设计的思考角度——即围绕页面中的内容，从内容出发进行设计。一旦你明白了渐进增强这个概念的内涵，你就会不由自主地顺从某种逻辑来思考。谢天谢地，在Web诞生差不多10年之后，我们终于有了一套Web设计的指导思想[2]。
最初，我们的电脑是没有图形界面的[3]，我们看到的，只是黑色屏幕上的一行行绿色的命令行和文字[4]（图1-1），上网的用户个个看起来都和程序员没什么区别。
图1-1 2013年版的命令行模式浏览器
命令行模式的浏览器仅支持一些基本的文本格式，如缩进、对齐等，但是在1990年，Web上传输的内容基本都是些文本和用于发表的内容，所以这样的内容渲染程度也是能够满足人们的需要的。
我是从1990年开始上网的，本来一直用着这种命令行模式的浏览器，用着用着，我发现情况有了一些变化。1993年，美国国家超级计算应用中心(NCSA)的Mosaic浏览器引入了在Web中添加图片的方法。1994年，更加光鲜的Netscape浏览器诞生了[5]。
但是就个人来说，在1995年之前，我依然用着命令行模式在上网。那年，我跑去佛罗里达州的萨拉索塔市上学，于是只能通过校园网接入互联网。在那里，我第一次看到一个网站长什么样——sony.com。当然，因为浏览器的原因，我只能看见一些黑白的文本信息（图1-2）。
图1-2 我使用Lynx纯文本浏览器第一次访问sony.com，看见的就是这样的黑白信息
我满脑子神兽奔腾——这是什么！然后迅速断开了网络连接。
无论在谁看来，这样的体验确实是挺令人失望的。这个网站是宣传企业产品的窗口，但是我却什么都没看到，这个网站对于我这类使用文本浏览器访问的用户来说，是没有意义的。
造成这种结果的原因无非是，sony.com的设计师在网页中使用了一张图片，而且把关键信息设计在图片之中。如果用户的浏览器不支持图片，那么图片中的信息当然也就看不到了。此外，设计师们也忽略了为图片添加alt属性，即图片无法加载时的替换文字。在20世纪90年代中期，这种使用大图片的设计非常常见，sony.com的这些问题并不是个例。
好吧，我第一次试图访问网站的经历并不完美，因为我使用的浏览器太老了。而且当时的我还吃不到葡萄就说葡萄酸，心里想网站这种东西，我才不感兴趣，呵呵。
其实我心里还是对这种新鲜事物感到好奇，可惜我不能马上下载一个最新的Mosaic或者买一个Netscape浏览器的副本回来，原因是，当时的校园网不支持访问一个网站必需的端对端协议，就算有了屠龙刀，我也找不到龙在哪里。于是，我只能傻傻地看着Lynx浏览器里的黑底白字，憧憬无限。
越是得不到，我就越想要。我想，要是在Lynx里我能知道sony.com首页说的是什么，我就不会如此寝食难安。于是我立下了一个志愿，我要学一些技术，改造这种网站，让使用Lynx浏览器的人也能了解网站的内容，不至于被拒之门外。
早期的Web技术更新得非常快。比方说，HTML的标准还未统一，微软和Netscape两家公司争相往HTML里面添加新的元素和行为，以证明自家技术比对方更厉害。后来又有了Java applets[6]、RealMedia、Shockwave、Flash和其他的私有技术，我们的网页变得很复杂，同时用户需要安装很多插件来支持这些技术。
各家标准和技术的不统一导致了“优雅降级”概念的诞生。所谓优雅降级，指的是在用户的浏览器不能完全支持某项功能的时候，为用户提供一个在可接受范围内的浏览体验，并且告诉用户如果要提升体验的话，应该如何获取所需的技术支持。举例来说，我们在开发的时候使用了某种技术，如果用户的浏览器不支持此技术，我们会判断这些浏览器，然后给他们如下提示。
优雅降级虽然给出了这些必要的提示，但是这种差异化的体验，还是让一些用户感觉自己被忽视了。
还有一种做法更方便，不用测试任何浏览器兼容问题，在用户访问网站时，根据用户代理字符串(User Agent)判断，如果用户使用的是老旧的浏览器，那么就把他们引导到一个专门让他们下载新浏览器的页面（图1-3）[7]，这样用户当然就不会发现网站的兼容性问题了。
图1-3 一旦判断用户的浏览器过于老旧，就引导他们下载最新的浏览器
让用户看到一些内容，然后告诉他需要更新浏览器才能获得更好的体验；亦或直接告诉用户，下载新的浏览器吧，否则你什么都看不到——这两种方法哪种好呢？
我已经有点选择恐惧症了，这种瘸子里面拔将军的问题，在我看来，就是五十步笑百步。
我曾经帮WikiHow公司做过一个Chrome浏览器应用[8]。当时Chrome的“网上应用商店”还是一个新鲜事物。我们的客户希望这个Web APP可以做一些酷炫的CSS3动画，用一些高大上的Web字体，搞一个Web SQL本地数据库，要提供离线支持等。总之，客户说要用到很多“HTML5”的新属性，还要做成一个单页面APP。由于只需要兼容Chrome，所以我们觉得技术难度不大，一口答应了下来。当我们设计开发的时候，采用了优雅降级的方法，屏蔽了一切通过非Webkit内核浏览器访问的可能。
谁知，隔了一年之后，这个客户又回来了，告诉我们，让这个APP兼容Firefox和IE9浏览器吧。你们可以猜到，这时我们的心里几乎是崩溃的。
因为这个APP完全是为Webkit内核浏览器量身定制的，所以改造起来有一点麻烦。如果说仅仅是改写一些CSS代码以兼容Firefox和IE，添加一些DOM（文档结构模型）节点，改写一些Javascript的API的话，这些都容易。但是，WebSQL数据库不支持Firefox和IE浏览器，这是硬伤啊。我们表示必须放弃使用WebSQL，另寻数据库的解决方案。
如你所知，WebSQL几乎已经被W3C（万维网联盟，负责制定绝大多数的Web标准）放弃了，现在只有Webkit内核的浏览器在提供支持。Firefox和IE浏览器看样子永远也不会支持这种技术了。而IndexedDB现在的兼容情况也不是很乐观。思来想去，最终，我们选择了使用localStorage来代替数据库存储，好处是，我们可以少重构一些代码。另外我们发现，APP的运行速度可以提升不少。
项目重构下来，花费的预算和时间差不多是去年一开始做这个项目的40%。我后来做了一个估算，虽然我并不能准确地模拟一个项目计划，但是按照以往的经验来说，如果一年前我们采用渐进增强的策略，这次项目重构的预算绝对低于40%。另外，项目的稳定性、代码的健壮性肯定会更好，因为如果按照渐进增强的开发方案，则此次重构是不需要改写JavaScript代码部分的。
在和项目中的其他设计师沟通之后，我发现，40%这个数字可能还是低了。我想起一个有关Google地图的一个传说。那时Google地图项目刚启动，团队的任务是建立一个个的地图模块，他们使用AJAX拉取一个个的地图文件，当发现这些地图中的JavaScript的兼容性有问题时，重新改写这些代码的工作量已经非常大了。Google的工程师为了避免今后发生类似情况，在重构代码时使用了渐进增强的思想去指导整个流程——这个传说我忘记是谁告诉我的了，虽然细节不可尽信，但是事件本身却发人深省。
上面关于Chrome APP的故事是一个反面的例子。还记得一开始我分享的那个例子吗？之前我曾经说，我们的团队曾经兼容了1400个浏览器，只增加了客户15%的预算。而在刚才这个反面的例子里，我们只兼容了两个浏览器，却增加了客户40%的预算。哪种方案更好，我相信任何人都会算这笔账。采用渐进增强的方案可能在项目开始之前需要多花一些时间去思考，但是会给后来的设计开发节省大量的时间。
在处理浏览器兼容方面，尤其是现在，我们要面对如此多的浏览器、移动设备，与其使用优雅降级的方案，使用渐进增强的方案会节省大量的资源，从而在单位时间内产出更多的价值。在效率方面，优雅降级在渐进增强面前就是个毫无战斗力的渣渣，注定要被吊打。
好吧，说了这么多，怎么做才能实现渐进增强呢？
渐进增强，简单说，就是创造连续的用户体验。
在今天的Web环境中，按照PSD文件的像素去还原一个网页，然后在任何设备上都展示成一个模样的时代已经过去了。我们要考虑的因素越来越多。
在技术实现方面，屏幕尺寸、像素密度、CPU运算速度、内存大小、传感器的支持程度、功能差异、不同接口，乃至不同的操作系统、同一操作系统的不同版本、不同的浏览器，同一浏览器的不同版本、插件、插件版本、网速、网络延迟、防火墙、用户自己设置的代理、路由器，以及日新月异的技术发展，让我们的Web环境愈发复杂起来。
技术实现方面之外，我们还要考虑到用户的交互习惯。
考虑到用户习惯之后，我们间接就要考虑到使用产品的用户的文化水平、知识结构、可能存在的认知障碍——如学习和阅读障碍、注意力分散、视力障碍、听觉障碍、运动障碍等，我们的用户对设备和浏览器的理解和使用达到了什么样的程度？用户的各种感性因素，我们也需要注意和考虑。
每个人都是不一样的个体，每个人上网都有不一样的环境、需求、习惯或目的。有些人因为一些障碍，在网页上停留的时间较长——如借助语音辅助设备的盲人。有一些人是为了寻找资料来到你的网站，看一眼标题不合需要，马上离开走人。还有一些人缘分似的来到这里，成为你访客的数据长尾，使用着各种各样的设备，在各种环境和你的网站偶遇。
考虑到如此复杂的技术环境和用户环境，想做一个能够满足任何人个性化要求的网站，几乎是不可能的。如果你有无限的时间和经费，你可以做一个庞大的用户调研，然后花大量的时间去写定制化的代码，理论上没有问题。但是实际上没有人会这么干[9]。关于用户，我们懂的太少了。
Tim Berners Lee，发明万维网（World Wide Web）的这位仁兄这么形容Web：无所不能，无所不在[10]。兄弟说得太对了。
中学时代，我经常用MS-DOS系统上的Word文字编辑软件写作业。这是个特别专业的软件，因为打开它就只能写字，别的什么都干不了[11]。那时的Word软件没有太多的编辑选项，却也能满足大部分的需要，对于我来说，足够用了。
然而，当时我写的作业，用现在的Word软件已经打不开了。二十多年过去，这个软件已经不再支持MS-DOS版本的DOC文件。
有人说，都20多年过去了，你还惦记那些中学写的作业啊——我不是这个意思。我相信除了我之外，很多人都用过MS-DOS下的Word软件。如果说我们把文章写在纸上，可以保留上百年都不是问题，结果因为Word软件的版本更新，早年我们写下的文字，20年之后我们用同样的软件却再也看不到了。对于我们这些用户来说，这是多么尴尬的一件事情。
不光是Word，很多软件也干过类似的事情。这种情况，被称为破坏性的升级体验。就好像你好好玩着一个游戏，攒了大量经验和钱，通过努力，角色等级不知高到哪里去了。突然，游戏官方发声明说，众位玩家朋友，咱们现在在内测，游戏马上进入公测阶段，之前的数据不好意思就删档了啊。这种破坏性的升级体验在Web领域也出现过不少。比方说Angular.js这个前端框架吧，如果我们之前使用的是1.0版本，想升级到2.0版本的话，就必须重写大量的代码，因为2.0版本对老版本的代码几乎完全不兼容。
这就意味着，如果你想访问早先创建的内容，你必须维护一个可以兼容早先内容的软件环境。
Tim Berners Lee设计万维网之初意识到了这个问题。为了避免类似的情况发生，他设计了一种通用的、可扩展的描述性语言作为Web的规范，即HTML。这种对未来的兼容性，在HTML2.0的版本说明中是这么描述的[12]：
“为了保证不同版本HTML之间的兼容，用户浏览器中包含的HTML解析器里面会包含一个HTML2.0的超集，使用户访问的代码能够被HTML2.0标准所解释。如果一个HTML标签未被HTML2.0声明的话，这个标签会被自动忽略掉。同理，如果一个HTML标签的某个属性未被声明的话，这个属性也会被忽略掉。”
这就是说，浏览器会自动忽略它不认识的HTML标签和属性。这种容错处理的方式是HTML语言乃至后来的CSS的核心思想之一[13]。
HTML和CSS这两种语言都被设计为“向前兼容”。这样设计的好处在于，你今天使用这两种语言写下的文档，无论再过多少年你都可以正常浏览。HTML和CSS通过忽略它们所不认识的标签或属性来保持自身的可扩展性。每一代HTML和CSS通过新增标签或属性来发展自身，而这些新增的标签或属性并不会在旧版本浏览器上报错。
甚至，你可以在20世纪90年代的Lynx浏览器上访问最新的使用HTML5技术开发的网页。你也不必担心如果你在网页中使用了过多CSS3属性，IE6会不会崩溃。理解了这种Web天生的容错处理手段，你就会很容易理解渐进增强。渐进增强正是合理利用了这种Web的容错特性，让Web设计的可用性大大提高了。
我们知道，设备和浏览器的碎片化，以及用户使用环境和交互习惯的多样化，使得我们不得不考虑页面的可用性问题，即为不同的设备设计差异化的体验。Brad Frost——这位Web设计师将此形容为“支持程度与优化设计之间的平衡”。
“除非你有预知未来的能力，否则你不可能为未来的每一款浏览器去单独优化你的Web设计。所以我们应该寻找一种通用方法来解决问题。
而所谓的通用方法，也并非要强制让所有浏览器显示一致。话说那些只能支持WAP网络的手机，要想达到iOS或Android手机那样的渲染程度，也没什么可能性。但是，我们可以多了解一些我们要支持的设备，体会不同平台设备对交互方式的支持程度。这样，在满足最先进平台的优化设计的同时，也保留对老旧平兼容设计，也不是不可能的。[14]”
如上所言，优化设计需要考虑到不同设备的交互支持性。在此前提下，我们需要注意，内容是Web页面的核心。我们希望所有的用户都能在自己的设备上看到根据自己机器的交互特性所优化过的内容。首先，我们要保证在比较落后的设备上能够正常访问核心内容，然后在比较先进的设备上利用设备性能来逐步增加用户的交互体验——这就是渐进增强思想的核心。
渐进增强无关浏览器、设备和任何技术手段，它是一种让用户脱离设备制约，从而极大提升Web可用性的方法。渐进增强为用户提供的是差异化的体验，它并不在意你使用的是最先进的设备还是快淘汰的浏览器。设备和技术都只是形式。渐进增强的思想让网页回归了它要传达的内容本身，无论技术如何发展，都是为内容穿上了一层层更优雅的外衣，无论用户用什么设备访问，我们都能让它看到本质的内容，而外衣在不同的设备下，会呈现得略有不同。
设备的更迭和技术的发展就像开来开走的列车，赶得上这趟，未必追得上那趟。而运用渐进增强的思想去改造你的Web，会让你对用户关心的内容更加注意，而不容易被新技术迷惑，做出一些买椟还珠的事情。
然而，还是有人认为，设计思想这东西看不见摸不着，扯那些没用的是在浪费时间。在Web设计师Tim Kadlec的博文“我们的设计并没有真正理解Web”的后面，有个读者的留言是这么说的[15]：
“说得好听，但是不接地气。你得算一下捕捉用户的成本。如果一些用户根本不是你的目标用户，不能为你带来任何收益，那么，干嘛为他们进行优化？根据这种设计思想，本质上你是要为所有用户的体验负责，无形中会大量增加开发成本。但是，恕我打个比方——我们都知道成衣的尺码分大中小号，我们大多数人也都是到成衣店试衣，觉得尺码差不多合身就买回家了。为什么呢？因为绝大多数人雇佣不起一个裁缝来为自己的每件衣服量体裁衣，这样成本太高了！除非你能让我看到这么做的回报，否则我很难接受这种设计思想。”
Tim是这么回答的：
“我认为，所谓优雅降级式的向下逐级支持，和渐进增强式的向上逐级优化，是完全不同的两个概念。首先，我说的为所有的设备优化，并不是我真的在京东下单买下了网站上所有的手机，拿回来一台台测试，来保证所有设备上的网页都运行正常。实际上，我们并不需要测试每一台设备，很多设备都可以归为同一个类别，对有限几个类别的机器进行测试，不会花太长时间。
渐进增强，即向上逐级优化，先在一类旧设备和浏览器上实现较为基础的功能，再为能够支持较新技术的设备和浏览器逐级丰富它们的体验。比如说，一开始你要考虑到，一些设备可能对JavaScript的支持不是很好，那么你在一开始构建网页的时候，需要利用HTML和CSS的特性，让网页在脱离JavaScript支持的情况下，也能保证内容的可读以及最起码的交互可用性。”
在设计和写代码的过程中，没有人能够预料到用户在何种使用场景下，使用哪种浏览器或设备去访问这个网页——就算你们的预算再充足，也没人傻到干这种出力不讨好的事。就如Brad Frost所说的，你需要考虑的只是“支持程度与优化设计之间的平衡”。在一步步进行设计创意的时候，不要让高级功能伤害到旧设备的可用性。
渐进增强的思想，是一种平衡各种设备间交互可用性的思想。在写代码的过程中，一些代码是任何浏览器或设备都能解读的。我们先以健壮的方式写下这些安全的代码，保证所有的设备和浏览器可以访问，然后再为技术支持程度更高的设备和浏览器去优化，所以渐进增强并不要求技术追新，我们希望可以利用现有的技术让所有的用户都能获得可接受范围内的交互体验。
如果你应用了渐进增强的思想来设计和编写网页，当用户通过一些你们没有测试到的奇葩设备或浏览器来访问，你会发现，在这些意料之外的设备上，你的页面依旧显示得不错。举例来说，2013年，TechCrunch进行了一次改版，这次改版并没有专门为特别小的屏幕进行优化，但是当智能手表流行起来之后，用户发现，在智能手表上，网页也显示得很好（图1-4）。
图1-4 使用安卓智能手表访问TechCrunch
渐进增强是面向未来友好设计的核心思想[16]之一。原因就是用这种思想，你可以做到兼容未知的设备。
Tim关于Web的看法是：任何Web页面，我们都可以把它看成一个文档。同样内容的文档，我们只需要保留一份就够了。不论用户通过何种浏览器或设备访问，内容是唯一的，不同的只是呈现形式。这样做的好处显而易见——Web世界是由“超媒体”[17]联系起来的庞大网络，我在一个页面中添加了一个超链接，却不能预料到用户是通过什么设备访问并点击的这个链接。如果文档是唯一的，那么入口链接也一定是唯一的。我只需要添加一个链接，用户无论从任何设备点击它，都能获得最佳的访问体验。
总体来说，Tim反复强调的是：确保Web的可访问性，Web的可访问性，Web的可访问性！——重要的话说三遍。
可访问性这个概念近年来逐渐被重视起来了，与之伴随，大家近几年都在说“以用户为中心”，很多交互设计师也会在各种场合分享相关话题，比如为视觉有障碍的用户提供优化体验等（比较常见的技术就是兼容屏幕阅读器，如国内杨永全推广的“争渡读屏软件”——译者注）。大家开始重视可访问性了，这是一个好的现象。
但是我们也要知道，提升可访问性和兼容屏幕阅读器并不是划等号的。就算是盲人，也有各种各样获取内容的方式。比方说有人使用盲文触摸反馈阅读器，有人用盲文打印机，有的盲人重度依赖键盘，也有人使用一个带有声音反馈的触摸屏，甚至他们可能会使用相机拍下内容，然后导入到OCR光学字符识别系统里，然后把文本转换成语音来获取他想要的内容。存在视觉障碍的用户其数量非常多（考虑到随着每个人的长大变老，每个人都可能会遇到视觉障碍的问题），但是解决视觉障碍的可访问性，也只是广义“可访问性”要解决的问题的一小部分。
每个人都是不同的个体，彼此有着不同的特点。所以设计师所面对的用户也是千变万化的。用户总有一些特殊的情况，比如惯用左手、色弱等。首先，设计师需要考虑这些人的需求，在设计中考虑是否可以为这些用户提供一些便利的设置。然后，再结合各种设备的不同特点，来优化不同的交互方式——这样做，Web的可访问性无疑会大大提升。
下面，我们来举例谈谈Web的可访问性都体现在哪些方面。
在交互设计方面，我们的Web页面上，总有一些链接、按钮等，这些需要用户操作的元素，它们之间的布局关系可能会影响到你的产品的可访问性。设想一下，如果你是一个经常使用右手操作鼠标的人，某一天你的右手受伤了而不得不使用左手来操作，那些网站上的按钮设计得那么小，按钮又靠得那么近，你点击起来多费劲啊！所以，交互设计对于实现可访问性来说，是非常重要的。
在视觉设计方面，Web页面上的文字和页面的背景颜色的对比度也是需要考虑的。我们要保证在不同的照明条件下文字在页面上清晰可读。这个是可以通过做实验来反复推敲的。有些网站的内容在PC上阅读没有问题，但是如果用户拿着手机跑到户外的大太阳下看，文字却基本不可读。文本颜色的考虑也是非常重要的。
在文案设计方面，语文上的考虑对于提升可访问性来说也是非常重要的。文本的可读性决定了你想要传达的信息是不是可以为用户所理解，这是网站必须要重视，却最容易被忽略的。举例来说，有谁好好读过任意网站的注册协议吗？这种臭长的东西没有人愿意读，因为没有人好好考虑过注册协议的文案设计[18]。文案设计的缺位，对Web的可访问性的影响是非常巨大的。
在网页资源方面，如果页面请求的资源过多过大，用户的体验是非常不好的，千万不要考验用户的耐心，也千万不要认为用户的流量是免费的。一次，我在国外不小心打开了一个视频网站，因为这个网站是自动播放[19]的，所以那个月运营商直接扣了我30美元的流量，心都碎了啊。所以，我的建议是，根据用户的使用环境去提供不同的体验，至少，在户外3G环境下，不要让视频自动加载吧（腾讯视频是这么做的——译者注）？提升可访问性，网页资源的优化也是应该重视的。
类似的例子还可以举出很多，但是我想你们应该明白“可访问性”大概包含哪些内容了。
每个人可以有不同的理解，我个人认为，可访问性就是确保每个人都能平等地访问Web上的内容，无论用户是有一些生理上的缺陷，还是受网络条件或设备条件的限制。作为Web设计师，我们要考虑到不同的用户体验场景，有针对性地优化Web设计，让大家通过同一个链接入口进来，都能访问到为他优化过的，他想要看到的内容。
当通过手机访问一个网站的时候，我会受到很多限制。首先，我受到屏幕分辨率的限制，尽管我可以缩放页面来放大我要看的内容，但是和PC上的感觉还是相差很多。其次，我会受到交互手段的限制。在PC上，我已经很熟悉使用鼠标了，点击很小的按钮也没有困难。但是在手机上，我的手指傻大笨粗，如果页面的链接密密麻麻，我想要准确点击一个链接，也是非常困难的。我希望获得一个针对移动设备优化过的页面，我相信这是很多手机用户的呼声。
用户会抱怨。收集这种抱怨，提炼出问题，并且解决问题，这一过程就是用户体验的优化。
针对不同的用户，我们可以有不同的优化方法，而前提是，我们不应该抛弃任何用户。渐进增强，就是这种不抛弃、不放弃的用户体验优化的方法之一。
渐进增强是一种设计的思考方式，关于这种思考方式，我经常拿M&M豆来打比方（图1-5）。我特别喜欢吃M&M豆，所以我们想一下，是不是所有的M&M豆最里面都有一颗花生啊？M&M豆为什么要在最里面包含一颗花生，而不是别的什么东西呢？我猜，因为花生是一种普遍都能接受的食品，除了少数过敏者，很少有人不喜欢吃花生。所以，花生是M&M豆的核心，正如一个网页的内容是网页的核心。广告啊、导航啊，这些都是次要的，大家来到你的网页是来看内容的，别的都不重要。
图1-5 从一颗花生到一颗M&M豆的变化过程
发明M&M豆的人显然深谙花生的美味之道。他为花生涂了厚厚的一层巧克力，巧克力也是大多数人都爱吃的东西，于是这颗花生进化了！就好像我们为网站的内容写了一些CSS样式表，让内容更加易于阅读，同时视觉上也更好看，道理是一样的。
然后，他们为这颗包裹着巧克力的花生涂了一层糖衣，完成了花生的终极进化！一颗M&M豆诞生了！这就好像你为网页增加了一些基于JavaScript的交互行为，满足了用户和内容进行交互的需求。用户因此更喜欢你的网站了。
这就是基本的渐进增强的思想，我们首先创建了内容，然后逐级往内容上应用技术，每一层技术带来不同的增强体验，但是，内容始终是一切的核心。
渐进增强的设计思想，就是要求设计师从内容核心开始设计，如果没有那些增强的技术支持，Web页面的体验是什么样子的？然后我们逐层增加了一些技术，同一个Web页面的体验又是什么样子的？Benjamin Hoh曾经这么描述过这种设计思路[20]：
“渐进增强”的设计是一种开放的设计，允许我们为不同的设备和场景做逐级增强的优化，而不是一开始设计出一整套看似完美的体验方案，然后在各种设备上出问题。
内容，通常是用户体验的核心。结构清晰、文字晓畅、组织得当的内容，是一个网页的基础。内容的可读性和可用性是如此的重要，因为内容是网页的核心，“没有内容，你的网页从技术上相当于不存在”[21]。
为了让内容更有意义，我们为内容添加了各种各样的HTML标签。有些标签是为了标记某些内容更重要，如<strong>；有些标签是为了标记一些内容是作为特殊用途而存在的，如<address>；有些标签是为了体现某些内容之间的逻辑关系，如<ol>。这些HTML标签为内容赋予了结构化的意义，也就是我们常说的HTML语义化。
视觉设计让你的页面显得更有层次。你可以运用一些平面构成的方法，如对比、重复、将类似的元素放在同一个区域、控制内容的对齐方式等，让页面的结构更清晰。视觉设计还可以加深用户对页面的印象，提升用户的阅读体验。
一些交互设计的手段可以让界面更友好。例如，有些内容，用户是不需要马上看到的，我们可以先隐藏起来，当用户进行页面交互的时候，我们再让用户看到这些内容。再如，我们可以在用户在输入框中填写内容的时候给予一些实时反馈，让用户知道自己填写的内容是否符合表单的要求。一些细节的交互，用户会觉得很贴心，从而对你网站的印象大大提升。
语义化、视觉手段、交互手段——我们把这些提升用户体验的手段分了级，却并不意味着，所有的用户都能享受到这些手段所带来的便利。这些设计手段构成了我们所能提供的用户体验的一个阶梯——从最基本的体验到最复杂的体验（图1-6）。用户在不同场景下，获取到的体验是不同的，但是他获取到的，都是在该场景下我们所能提供的最好的体验。
图1-6 用户能获得的体验随着设备和浏览器的支持程度而逐渐提升
当我们使用渐进增强的思想设计开发了一个网站，就意味着，无论任何用户、通过任何设备或浏览器来访问它，网站的可用性都是没有问题的。有用户可能会使用Lynx这种命令行浏览器来访问你的网站，当然他只能看到纯文本，不可能和使用最新版Chrome浏览器的用户获得同样的视觉体验，但是他依然能够获得关于网站的文本介绍信息，对于使用Lynx浏览器的用户来说，这足够了。
渐进增强思想就是这样一种神器：结合用户所使用的设备和浏览器的状况，考虑到用户的使用环境，为用户提供我们可以提供的，放弃此时不能支持的，让用户得到他可以得到的最好的体验。
渐进增强是一种设计思想。运用这种设计思想进行设计实践，会让每个设计师和开发者节省大量的时间和成本。这种设计思想帮助你了解你所面对的真实用户和设备环境，让他们获得最适合的用户体验，从而体现出Web与生俱来的适应性。
渐进增强是一种无间断，连续的设计思想，不是为了某些设备而特殊优化，而是面向不同类型的设备，累加地提供用户体验的提升。在接下来的章节中，你会学习到如何把这种思想应用到Web设计的实践当中。
[1] 作者的分析代码详见https://perma.cc/4EAE-Y9H5
[2] 本书成书的目的即把渐进增强的思想介绍给大家。
[3] 最早的图形浏览器是一款叫做World Wide Web（后因与万维网重名，改名为Nexus）的产品。但是因为它只能运行在NeXT操作系统上，所以并未广为人知。
[4] 我的一些朋友和同事在2013年的时候回到World Wide Web浏览器的诞生地——欧洲核子研究中心（CERN），开发了一款使用现代浏览器内核技术的命令行浏览器，并撰写了相关文章。感兴趣的话点击这里：http://perma.cc/2UYR-HVWP
[5] 1994年，是微软公司的Internet Explorer浏览器的诞生之年。
[6] 当年很多网站用这种技术实现炫酷的视觉效果。
[7] User Agent 技术也在不断发展，能够准确判断用户代理字符串也是不容易的，Nicholas Zakas 有篇文章专门讲了用户代理字符串的发展史：http://perma.cc/BR7M-JEDH
[8] https://perma.cc/5KE9-GK88
[9] 如果真有土豪搞了这么一个项目，提供无限的时间和经费，请告诉我，我要和他做朋友。
[10] 这位仁兄的文章在此：http://perma.cc/H8HW-DACS
[11] 现在我更喜欢iA Writer编辑器，用起它，就让我回想起当年使用Word的感觉。
[12] http://perma.cc/H8HW-DACS
[13] http://perma.cc/MW47-P99F
[14] http://perma.cc/D9ZP-H953
[15] http://perma.cc/AR56-T6GD
[16] http://perma.cc/EG2P-DLGS
[17] Tim 用了“超媒体”这个词来代替传统意义上的“超文本”，因为他认为Web上的内容已经不仅是文本之间的互连，用“超媒体”显得更准确。
[18] medium.com的用户协议写的很好，可以作为参考：http://perma.cc/EDS6-5VZC
[19] http://perma.cc/CS5G-S72K
[20] http://perma.cc/MZK5-5AL9
[21] 正如 Web 开发者 Tantek Çelik 所说，没有内容，何谈Web；http://perma.cc/6Y8C-AZB6
