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

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

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

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

　　顾客是谁？

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

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

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

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

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

　　就像把水泼在顾客的腿上

　　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 experien🐭ce),🙈黄的褪色、滑动widget、还有Ajax，能用的全都用上。

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

　　默默地行动

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

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

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

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

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

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

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

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

　　总结为一条

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