本节书摘来自异步社区《渐进增强——跨平台用户体验设计》一书中的第1章，第1.8节，作者 【美】Aaron Gustafson，更多章节内容可以访问云栖社区“异步社区”公众号查看

1.8　分层次设计

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

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

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

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

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

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

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

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

视觉设计让你的页面显得更有层次。你可以运用一些平面构成的方法，如对比、重复、将类似的元素放在同一个区域、控制内容的对齐方式等，让页面的结构更清晰。视觉设计还可以加深用户对页面的印象，提升用户的阅读体验。

一些交互设计的手段可以让界面更友好。例如，有些内容，用户是不需要马上看到的，我们可以先隐藏起来，当用户进行页面交互的时候，我们再让用户看到这些内容。再如，我们可以在用户在输入框中填写内容的时候给予一些实时反馈，让用户知道自己填写的内容是否符合表单的要求。一些细节的交互，用户会觉得很贴心，从而对你网站的印象大大提升。

语义化、视觉手段、交互手段——我们把这些提升用户体验的手段分了级，却并不意味着，所有的用户都能享受到这些手段所带来的便利。这些设计手段构成了我们所能提供的用户体验的一个阶梯——从最基本的体验到最复杂的体验（图1-6）。用户在不同场景下，获取到的体验是不同的，但是他获取到的，都是在该场景下我们所能提供的最好的体验。

当我们使用渐进增强的思想设计开发了一个网站，就意味着，无论任何用户、通过任何设备或浏览器来访问它，网站的可用性都是没有问题的。有用户可能会使用Lynx这种命令行浏览器来访问你的网站，当然他只能看到纯文本，不可能和使用最新版Chrome浏览器的用户获得同样的视觉体验，但是他依然能够获得关于网站的文本介绍信息，对于使用Lynx浏览器的用户来说，这足够了。

渐进增强思想就是这样一种神器：结合用户所使用的设备和浏览器的状况，考虑到用户的使用环境，为用户提供我们可以提供的，放弃此时不能支持的，让用户得到他可以得到的最好的体验。