第1章 为体验而设计
渐进增强——跨平台用户体验设计
“总有些人干过这种事，在网页顶部或底部搞一个小黄条，写上‘请使用XX浏览器(如IE6)访问本网站以获得最佳访问效果’。要我说，这种人到底是多么想回到过去啊，回到Web诞生之前吗？那样你就不可能在别的电脑、别的文字处理器，或者别的网络来访问你这个不想让别人看的网站啦！”
——Tim Berners Lee
互联网中，唯一不变的就是变化。四下观望，永远都有新的设计风格，新的语言、框架、工具、新的上网设备在博人眼球。乱花渐欲迷人眼，城头变幻大王旗，连“上网行为”这个概念本身都不能保证难免一天不会被重定义。
在这样一个日新月异的行业，人们普遍感到一种技术焦虑，作为置身互联网行业中的你，我猜也有和我相同的感受。
在我近20年的互联网从业经验中，我目睹了太多技术的变迁，从Java applets、Shockwave、Flash、Prototype、jQuery、960gs、Bootstrap，到Angular、React，等等，技术的发展就像长江后浪推前浪；在技术发展的同时，设备的屏幕也由小变大，又由大变小，设备的更迭也犹如花开花谢；然后，我们还经历了因设备碎片化导致的开发混乱，面临过为不同设备独立开发，还是一套代码兼容不同设备的概念挣扎。后之视今，亦犹今之视昔。大江东去浪淘尽，唯有Web这个概念，在不断发展变化中保留了下来。
Web的概念之所以经久不衰，是因为它无关设备和屏幕尺寸；Web不是软件，不需要用户去安装；Web本身对其承载的内容具有良好的适应性和无限的延展性；Web可以作为内容访问的窗口，集成在任何需要的地方；Web可以触及每个用户；当今的Web几乎能够胜任一切。
1.1 优秀的代码，麻烦的设备
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]。