为体验而设计——渐进增强

互联网中，唯一不变的就是变化。四下观望，永远都有新的设计风格，新的语言、框架、工具、新的上网设备在博人眼球。乱花渐欲迷人眼，城头变幻大王旗，连“上网行为”这个概念本身都不能保证难免一天不会被重定义。

在这样一个日新月异的行业，人们普遍感到一种技术焦虑，作为置身互联网行业中的你，我猜也有和我相同的感受。

在处理浏览器兼容方面，尤其是现在，我们要面对如此多的浏览器、移动设备，与其使用优雅降级的方案，使用渐进增强的方案会节省大量的资源，从而在单位时间内产出更多的价值。在效率方面，优雅降级在渐进增强面前就是个毫无战斗力的渣渣，注定要被吊打。

好吧，说了这么多，怎么做才能实现渐进增强呢？

渐进增强，简单说，就是创造连续的用户体验。

你满足不了所有的人

首先你要明白：你满足不了所有人。

在今天的Web环境中，按照PSD文件的像素去还原一个网页，然后在任何设备上都展示成一个模样的时代已经过去了。我们要考虑的因素越来越多。

在技术实现方面，屏幕尺寸、像素密度、CPU运算速度、内存大小、传感器的支持程度、功能差异、不同接口，乃至不同的操作系统、同一操作系统的不同版本、不同的浏览器，同一浏览器的不同版本、插件、插件版本、网速、网络延迟、防火墙、用户自己设置的代理、路由器，以及日新月异的技术发展，让我们的Web环境愈发复杂起来。

技术实现方面之外，我们还要考虑到用户的交互习惯。

考虑到用户习惯之后，我们间接就要考虑到使用产品的用户的文化水平、知识结构、可能存在的认知障碍—如学习和阅读障碍、注意力分散、视力障碍、听觉障碍、运动障碍等，我们的用户对设备和浏览器的理解和使用达到了什么样的程度？用户的各种感性因素，我们也需要注意和考虑。

每个人都是不一样的个体，每个人上网都有不一样的环境、需求、习惯或目的。有些人因为一些障碍，在网页上停留的时间较长—如借助语音辅助设备的盲人。有一些人是为了寻找资料来到你的网站，看一眼标题不合需要，马上离开走人。还有一些人缘分似的来到这里，成为你访客的数据长尾，使用着各种各样的设备，在各种环境和你的网站偶遇。

考虑到如此复杂的技术环境和用户环境，想做一个能够满足任何人个性化要求的网站，几乎是不可能的。如果你有无限的时间和经费，你可以做一个庞大的用户调研，然后花大量的时间去写定制化的代码，理论上没有问题。但是实际上没有人会这么干[9] 。关于用户，我们懂的太少了。

Tim Berners Lee，发明万维网（World Wide Web）的这位仁兄这么形容Web：无所不能，无所不在 。兄弟说得太对了。

向后兼容，向前适应

中学时代，我经常用MS-DOS系统上的Word文字编辑软件写作业。这是个特别专业的软件，因为打开它就只能写字，别的什么都干不了 。那时的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的版本说明中是这么描述的 ：

“为了保证不同版本HTML之间的兼容，用户浏览器中包含的HTML解析器里面会包含一个HTML2.0的超集，使用户访问的代码能够被HTML2.0标准所解释。如果一个HTML标签未被HTML2.0声明的话，这个标签会被自动忽略掉。同理，如果一个HTML标签的某个属性未被声明的话，这个属性也会被忽略掉。”

这就是说，浏览器会自动忽略它不认识的HTML标签和属性。这种容错处理的方式是HTML语言乃至后来的CSS的核心思想之一 。

HTML和CSS这两种语言都被设计为“向前兼容”。这样设计的好处在于，你今天使用这两种语言写下的文档，无论再过多少年你都可以正常浏览。HTML和CSS通过忽略它们所不认识的标签或属性来保持自身的可扩展性。每一代HTML和CSS通过新增标签或属性来发展自身，而这些新增的标签或属性并不会在旧版本浏览器上报错。

甚至，你可以在20世纪90年代的Lynx浏览器***问最新的使用HTML5技术开发的网页。你也不必担心如果你在网页中使用了过多CSS3属性，IE6会不会崩溃。理解了这种Web天生的容错处理手段，你就会很容易理解渐进增强。渐进增强正是合理利用了这种Web的容错特性，让Web设计的可用性大大提高了。

技术服务于内容

我们知道，设备和浏览器的碎片化，以及用户使用环境和交互习惯的多样化，使得我们不得不考虑页面的可用性问题，即为不同的设备设计差异化的体验。Brad Frost—这位Web设计师将此形容为“支持程度与优化设计之间的平衡”。

“除非你有预知未来的能力，否则你不可能为未来的每一款浏览器去单独优化你的Web设计。所以我们应该寻找一种通用方法来解决问题。

而所谓的通用方法，也并非要强制让所有浏览器显示一致。话说那些只能支持WAP网络的手机，要想达到iOS或Android手机那样的渲染程度，也没什么可能性。但是，我们可以多了解一些我们要支持的设备，体会不同平台设备对交互方式的支持程度。这样，在满足最先进平台的优化设计的同时，也保留对老旧平兼容设计，也不是不可能的。 ”

如上所言，优化设计需要考虑到不同设备的交互支持性。在此前提下，我们需要注意，内容是Web页面的核心。我们希望所有的用户都能在自己的设备上看到根据自己机器的交互特性所优化过的内容。首先，我们要保证在比较落后的设备上能够正常访问核心内容，然后在比较先进的设备上利用设备性能来逐步增加用户的交互体验—这就是渐进增强思想的核心。

渐进增强无关浏览器、设备和任何技术手段，它是一种让用户脱离设备制约，从而极大提升Web可用性的方法。渐进增强为用户提供的是差异化的体验，它并不在意你使用的是最先进的设备还是快淘汰的浏览器。设备和技术都只是形式。渐进增强的思想让网页回归了它要传达的内容本身，无论技术如何发展，都是为内容穿上了一层层更优雅的外衣，无论用户用什么设备访问，我们都能让它看到本质的内容，而外衣在不同的设备下，会呈现得略有不同。

设备的更迭和技术的发展就像开来开走的列车，赶得上这趟，未必追得上那趟。而运用渐进增强的思想去改造你的Web，会让你对用户关心的内容更加注意，而不容易被新技术迷惑，做出一些买椟还珠的事情。

适应未知的设备

然而，还是有人认为，设计思想这东西看不见摸不着，扯那些没用的是在浪费时间。在Web设计师Tim Kadlec的博文“我们的设计并没有真正理解Web”的后面，有个读者的留言是这么说的：

“说得好听，但是不接地气。你得算一下捕捉用户的成本。如果一些用户根本不是你的目标用户，不能为你带来任何收益，那么，干嘛为他们进行优化？根据这种设计思想，本质上你是要为所有用户的体验负责，无形中会大量增加开发成本。但是，恕我打个比方—我们都知道成衣的尺码分大中小号，我们大多数人也都是到成衣店试衣，觉得尺码差不多合身就买回家了。为什么呢？因为绝大多数人雇佣不起一个裁缝来为自己的每件衣服量体裁衣，这样成本太高了！除非你能让我看到这么做的回报，否则我很难接受这种设计思想。”

Tim是这么回答的：

“我认为，所谓优雅降级式的向下逐级支持，和渐进增强式的向上逐级优化，是完全不同的两个概念。首先，我说的为所有的设备优化，并不是我真的在京东下单买下了网站上所有的手机，拿回来一台台测试，来保证所有设备上的网页都运行正常。实际上，我们并不需要测试每一台设备，很多设备都可以归为同一个类别，对有限几个类别的机器进行测试，不会花太长时间。

渐进增强，即向上逐级优化，先在一类旧设备和浏览器上实现较为基础的功能，再为能够支持较新技术的设备和浏览器逐级丰富它们的体验。比如说，一开始你要考虑到，一些设备可能对JavaScript的支持不是很好，那么你在一开始构建网页的时候，需要利用HTML和CSS的特性，让网页在脱离JavaScript支持的情况下，也能保证内容的可读以及最起码的交互可用性。”

在设计和写代码的过程中，没有人能够预料到用户在何种使用场景下，使用哪种浏览器或设备去访问这个网页—就算你们的预算再充足，也没人傻到干这种出力不讨好的事。就如Brad Frost所说的，你需要考虑的只是“支持程度与优化设计之间的平衡”。在一步步进行设计创意的时候，不要让高级功能伤害到旧设备的可用性。

渐进增强的思想，是一种平衡各种设备间交互可用性的思想。在写代码的过程中，一些代码是任何浏览器或设备都能解读的。我们先以健壮的方式写下这些安全的代码，保证所有的设备和浏览器可以访问，然后再为技术支持程度更高的设备和浏览器去优化，所以渐进增强并不要求技术追新，我们希望可以利用现有的技术让所有的用户都能获得可接受范围内的交互体验。

如果你应用了渐进增强的思想来设计和编写网页，当用户通过一些你们没有测试到的奇葩设备或浏览器来访问，你会发现，在这些意料之外的设备上，你的页面依旧显示得不错。举例来说，2013年，TechCrunch进行了一次改版，这次改版并没有专门为特别小的屏幕进行优化，但是当智能手表流行起来之后，用户发现，在智能手表上，网页也显示得很好（图1）。

渐进增强是面向未来友好设计的核心思想之一。原因就是用这种思想，你可以做到兼容未知的设备。

图1 使用安卓智能手表访问TechCrunch

提升Web的可访问性

Tim关于Web的看法是：任何Web页面，我们都可以把它看成一个文档。同样内容的文档，我们只需要保留一份就够了。不论用户通过何种浏览器或设备访问，内容是唯一的，不同的只是呈现形式。这样做的好处显而易见—Web世界是由“超媒体” 联系起来的庞大网络，我在一个页面中添加了一个超链接，却不能预料到用户是通过什么设备访问并点击的这个链接。如果文档是唯一的，那么入口链接也一定是唯一的。我只需要添加一个链接，用户无论从任何设备点击它，都能获得最佳的访问体验。

总体来说，Tim反复强调的是：确保Web的可访问性，Web的可访问性，Web的可访问性！—重要的话说三遍。

可访问性这个概念近年来逐渐被重视起来了，与之伴随，大家近几年都在说“以用户为中心”，很多交互设计师也会在各种场合分享相关话题，比如为视觉有障碍的用户提供优化体验等（比较常见的技术就是兼容屏幕阅读器，如国内杨永全推广的“争渡读屏软件”）。大家开始重视可访问性了，这是一个好的现象。

但是我们也要知道，提升可访问性和兼容屏幕阅读器并不是划等号的。就算是盲人，也有各种各样获取内容的方式。比方说有人使用盲文触摸反馈阅读器，有人用盲文打印机，有的盲人重度依赖键盘，也有人使用一个带有声音反馈的触摸屏，甚至他们可能会使用相机拍下内容，然后导入到OCR光学字符识别系统里，然后把文本转换成语音来获取他想要的内容。存在视觉障碍的用户其数量非常多（考虑到随着每个人的长大变老，每个人都可能会遇到视觉障碍的问题），但是解决视觉障碍的可访问性，也只是广义“可访问性”要解决的问题的一小部分。

每个人都是不同的个体，彼此有着不同的特点。所以设计师所面对的用户也是千变万化的。用户总有一些特殊的情况，比如惯用左手、色弱等。首先，设计师需要考虑这些人的需求，在设计中考虑是否可以为这些用户提供一些便利的设置。然后，再结合各种设备的不同特点，来优化不同的交互方式—这样做，Web的可访问性无疑会大大提升。

下面，我们来举例谈谈Web的可访问性都体现在哪些方面。

在交互设计方面，我们的Web页面上，总有一些链接、按钮等，这些需要用户操作的元素，它们之间的布局关系可能会影响到你的产品的可访问性。设想一下，如果你是一个经常使用右手操作鼠标的人，某一天你的右手受伤了而不得不使用左手来操作，那些网站上的按钮设计得那么小，按钮又靠得那么近，你点击起来多费劲啊！所以，交互设计对于实现可访问性来说，是非常重要的。

在视觉设计方面，Web页面上的文字和页面的背景颜色的对比度也是需要考虑的。我们要保证在不同的照明条件下文字在页面上清晰可读。这个是可以通过做实验来反复推敲的。有些网站的内容在PC上阅读没有问题，但是如果用户拿着手机跑到户外的大太阳下看，文字却基本不可读。文本颜色的考虑也是非常重要的。

在文案设计方面，语文上的考虑对于提升可访问性来说也是非常重要的。文本的可读性决定了你想要传达的信息是不是可以为用户所理解，这是网站必须要重视，却最容易被忽略的。举例来说，有谁好好读过任意网站的注册协议吗？这种臭长的东西没有人愿意读，因为没有人好好考虑过注册协议的文案设计 。文案设计的缺位，对Web的可访问性的影响是非常巨大的。

在网页资源方面，如果页面请求的资源过多过大，用户的体验是非常不好的，千万不要考验用户的耐心，也千万不要认为用户的流量是免费的。一次，我在国外不小心打开了一个视频网站，因为这个网站是自动播放 的，所以那个月运营商直接扣了我30美元的流量，心都碎了啊。所以，我的建议是，根据用户的使用环境去提供不同的体验，至少，在户外3G环境下，不要让视频自动加载吧（腾讯视频是这么做的—译者注）？提升可访问性，网页资源的优化也是应该重视的。

类似的例子还可以举出很多，但是我想你们应该明白“可访问性”大概包含哪些内容了。

每个人可以有不同的理解，我个人认为，可访问性就是确保每个人都能平等地访问Web上的内容，无论用户是有一些生理上的缺陷，还是受网络条件或设备条件的限制。作为Web设计师，我们要考虑到不同的用户体验场景，有针对性地优化Web设计，让大家通过同一个链接入口进来，都能访问到为他优化过的，他想要看到的内容。

当通过手机访问一个网站的时候，我会受到很多限制。首先，我受到屏幕分辨率的限制，尽管我可以缩放页面来放大我要看的内容，但是和PC上的感觉还是相差很多。其次，我会受到交互手段的限制。在PC上，我已经很熟悉使用鼠标了，点击很小的按钮也没有困难。但是在手机上，我的手指傻大笨粗，如果页面的链接密密麻麻，我想要准确点击一个链接，也是非常困难的。我希望获得一个针对移动设备优化过的页面，我相信这是很多手机用户的呼声。

用户会抱怨。收集这种抱怨，提炼出问题，并且解决问题，这一过程就是用户体验的优化。

针对不同的用户，我们可以有不同的优化方法，而前提是，我们不应该抛弃任何用户。渐进增强，就是这种不抛弃、不放弃的用户体验优化的方法之一。

分层次设计

渐进增强是一种设计的思考方式，关于这种思考方式，我经常拿M&M豆来打比方（图2）。我特别喜欢吃M&M豆，所以我们想一下，是不是所有的M&M豆最里面都有一颗花生啊？M&M豆为什么要在最里面包含一颗花生，而不是别的什么东西呢？我猜，因为花生是一种普遍都能接受的食品，除了少数过敏者，很少有人不喜欢吃花生。所以，花生是M&M豆的核心，正如一个网页的内容是网页的核心。广告啊、导航啊，这些都是次要的，大家来到你的网页是来看内容的，别的都不重要。

图2　从一颗花生到一颗M&M豆的变化过程

发明M&M豆的人显然深谙花生的美味之道。他为花生涂了厚厚的一层巧克力，巧克力也是大多数人都爱吃的东西，于是这颗花生进化了！就好像我们为网站的内容写了一些CSS样式表，让内容更加易于阅读，同时视觉上也更好看，道理是一样的。

然后，他们为这颗包裹着巧克力的花生涂了一层糖衣，完成了花生的终极进化！一颗M&M豆诞生了！这就好像你为网页增加了一些基于JavaScript的交互行为，满足了用户和内容进行交互的需求。用户因此更喜欢你的网站了。

这就是基本的渐进增强的思想，我们首先创建了内容，然后逐级往内容上应用技术，每一层技术带来不同的增强体验，但是，内容始终是一切的核心。

渐进增强的设计思想，就是要求设计师从内容核心开始设计，如果没有那些增强的技术支持，Web页面的体验是什么样子的？然后我们逐层增加了一些技术，同一个Web页面的体验又是什么样子的？Benjamin Hoh曾经这么描述过这种设计思路 ：

“渐进增强”的设计是一种开放的设计，允许我们为不同的设备和场景做逐级增强的优化，而不是一开始设计出一整套看似完美的体验方案，然后在各种设备上出问题。

内容，通常是用户体验的核心。结构清晰、文字晓畅、组织得当的内容，是一个网页的基础。内容的可读性和可用性是如此的重要，因为内容是网页的核心，“没有内容，你的网页从技术上相当于不存在”。

为了让内容更有意义，我们为内容添加了各种各样的HTML标签。有些标签是为了标记某些内容更重要，如；有些标签是为了标记一些内容是作为特殊用途而存在的，如