在一次去西雅图的商业旅行中，我花了两个晚上品尝地方菜。我对每顿饭都很满意，♐单其中一餐却要比另一餐好出ꦜ许多。为什么？

　　从饭菜方面来说，两家几乎都一样。菜肴都很有吸引力，并且很优美地摆放在盘子里；就餐场ꦉ所都让人感到温暖惬意；两家的菜单都提供了多种多样的选择，而且价格也都很合理；两🍃家的服务员也都很有魅力。那么是什么让第二家餐馆的体验比第一家好这么多呢？

　　就像𓄧人生中的大多数事情，小事往往却是最重要的。拿水来说吧。一个粗心的服务员可能会等你快喝完了，甚至是杯子都已经干了以后才会来帮你续杯。一个关心你体验的服务员则从不会让液面低于半杯。而最好的服务员会让你惊讶地发现刚刚喝掉的水又被续到几乎要溢出来了。

　　作为网站的用户体验的设计人员，我们可以从很多类似水杯一样简单的事情中学到很多东西。

　　顾客是谁？

　　作为一名服务员，你应该知道，人们是有一些需要，甚至是带着一些期望来就餐的。在🦹大多数餐馆中，水杯都是第一个“触点”，，或者说是与顾客的联系点。良好的第一印象是通过及时的续杯来创❀造的，但是那还只是开始。有些人喝水比别人快一些，需要更多的续杯；有一些人在上菜之前则不喝水；还有一些人干脆一口不碰，他们可能会叫一些冰茶或是其它饮料。一个人坐在这，你真的猜不到他是哪一类人。而当那是一张四人、六人甚至是十个人的桌子时，就需要做一些准备了。

　　网络也一样。我们设计漂亮的网站(希望是)来取得优秀的🍌第一印象，但是我们要确认每一个触点来守护在关键的前几秒所许下的承诺，否则就会浪费掉在在开始的过程中积累的那一点亲善感觉。这种想法催生了Progressive enhancement的概念。

　　在Web上，我们一点也不了解访问我们网站的人。不知道她在用什么浏览器；不知道她是否在使用手机浏览网站；不知道她是不是更喜欢用键盘而不是鼠标；不知道她的设备是否支持Java🃏script(甚至是CSS)；不知道她是否想打印网页；不知道她是否在使用屏幕阅读器。我们真的一无所知。

　　那么，当你什么也不知道的时候怎么办呢？预测。

　　作为网站设计师，我们需要有能力满足用户的需求。如果我们足够敏捷，𒐪我们甚至可以在他们没有注意到的情况下就做到这点。

　　就像把水泼在顾客的腿上

　　Lala.com是围绕这一个音乐迷社区建立的。它的网站系统可以协助社区内邮递等方式的CD交换。

　　Lala homepage

图 1-1. Lala主页

　　我勉强地说这个网站(图1-1)还算有吸引力，但是……除非你把JS关闭，它才可用(图1-2)。

　　Lala sans JavaScript

图 1-2. 没有JavaScript的Lala, 大约在2006年7月

　　你肯定喜欢那个“Loading”消息，就算没有东西在读取的时候他也一直在那。

　　当然了，这张图片是一段时间之前截取的，但是在我第一次举这个网站作为“不要做什么”的例子之后间隔的几个月中，他们所做的就是草率地拼凑了𝔍一条消息(图1-3)，着实让人想起令人头痛的浏览器大战。

图 1-3. Lala带回有趣的回忆

　　
　　这里的问题不在于lala使用了Js，而是把JS作为了基本需求。理由？好吧，他们显然很喜欢用AJAX读取所有的内容。在急于把所有的Web2.0要素都塞到面罩里的过程中，他们疏远了大部分🏅的Web1.0用户，丢失了很大一块手机市场。而且，他们并不是个例。

　　考虑一下：你是一个lala用户，你正在浏览一个音像店，然后偶然发现了一张Arcade Fire的专辑，你没有意识到它已经发行了，想要在你忘记之前把它加到你的lala许愿表里。如果你手机的浏览器不支持JS(或是你关闭了JS以节省下载时间/使用费用)，你就得盯着屏幕上告诉你什么是lala的信息(ܫ图1-4)，后面还附上了信息，要使用这个网站就必须有JS功能。

　　你不能访问你的许愿列表或者站点的其他任何地方。甚至搜索框都不工作了(在页面下方)。如果是只限于少数人的应用程序或者是服务还🐲可以接受，但是对一个公共网站来说，这简直是一场灾难。

图 1-4. Lala 哪里都别想去

　　在泼水之前想一想
　　
　　作为网页设计师，我们已经塑造了自己的形象，我们面对用户♍的需求时简直就是瞎子。我们所能做好的事情就是去预测他们可能的需求，并满足每一层次的需求，尽可能给他们最ܫ好的用户体验。这就是Progressive enhancement起作用的地方——我们需要考虑每一个层次的需求并考虑如何满足他们。

　　第一层：不要多余的装饰

　　有一些用户只想阅读内容。他们可能在使用移动设备，想要打印一些信息，或用一些附🍌注设备浏览web——他们甚至有可能关闭了图像功能。让你的标签清晰、良构和有语义对这些用户来说是十分关键的。他们想要的是轻量的，快速下载的、不分散注意力的页面。

　　第二层：漂亮

　　有一些用户想要有一点窗花或者是一片柠檬。为这些用户，你可以提供一个设计美观，布局良好的网站。你甚至可以添加一些花朵或者是一点Flash特效来取悦用户。只要你的设计没有打乱页面内容的优先级，在浏览器测试中留心一些，再提供其他设备的CSS💯，你就应该赢得金牌。

　　第三层：尽情发挥(Make it sing)

　　有一些用户可能希望全部功能，对于这些用户，你可以全力以赴地构造一个“Web2.0，哦我的天啊”体验的站点(Web 2.Oh-my e♚xperience),黄的褪色、滑动widget、还有Ajax，能用的♉全都用上。

　　不过别忘了，层次划分的并不那么清晰。你可能要支持一个介于一、二层之间的中间层ꦇ，给Netscape4.0和IE5/Mac提供一些基本的打印样式和颜色。或者你可能考虑给支持JS的浏览器添加一些JS改进，在二层和三层之间加点奶油果仁。

　　默默地行动

　　一旦你确定了粗略的层次，你就可以开始构建你的网站了。

　　从内容开始。有时设计师和开发人员忘记了这才是人们访问站点的原因。把它雕琢地可读，并且在呈现给用户的时候，要尽量减少分散注意力的事物，就像摆放地很好的一道菜；别像自助🎶餐一样把东西简单地堆积到一🧔起。你在内容上下了大工夫……突出这一点。

　　调整完内容之后，你就可以开始确ꩵ立网站的外观和感受了。使用你掌握的各种技巧，定义站点样式以满足每一层的用户；对老版本的浏览器隐藏一些CSS文件，给需要特殊照顾的浏览器一些专有的处理。条件注释在这一领域内已经十分流行💦，但是看看老的@import和特定的媒质组合，它允许你有选择性地给老式的浏览器提供一些特别照顾。

　🐻　一定要考虑内容在打印设备和移动设备上的呈现方式。你给他们提供了专用布局或是基本印刷排版和色彩调整吗？你如何处理图像？表格？试着预测以下一个手机用户会想要哪些功能，然后再删除冗余以简化体验。如果你设置:hover的样式属性，被忘了给:focus定义同等的考虑，键盘和手机用户会为此感谢你的。

　　一旦设计综合起来，添加一点聪明的JS。你已经知道利用对象和方法侦测的方法来确定一个脚本是否可以在用户的浏览器中运行了。但是考虑以下你的脚本如何与收藏夹和后退✅按钮等常见的浏览器接口相交互。而且不要忘记了脚本间的依赖性。如果一个脚本工作而另一个不工作，你的网站会不会不可用了呢？

　　如果你在制作一个widget或其他的界面控件，添加一些额外的标签，只要你希望widge🦩t运行的时候，其他的情况能保持一切正常。如果你把 widget相关的CSS从JS中分离出来以标准化时，确🐼定CSS在脚本只是widget可运行以前是未被激活的。一个好的办法就是使用类名替换(见表 1)。

　　最后，如果你计划使用Ajax，一定要谨慎。用Ajax读取页面的所有内容是完全不必要的；他会成为用户和你的内容之间的一块挡路石。而且，它还会增加服务器开支，让你的内容不能被搜索引擎收录，使你的网站对那些使用屏幕🥀阅读器和大多ꩲ数的手机用户不可用。

　　🎶别误会我，Ajax有用武之地，但是重要的是一定要了解Aj꧒ax应该用在何处，更重要的是知道哪里不能用。

　　总结为一条

　　仔细地预测用🎐户的需求并，且✱尽可能不引起注意地解决这些需求是最可能留下良好印象的。就好像水杯一样，你的用户永远都不应该需要招呼服务员来倒水。