在一次去西雅圖的商業(yè)旅行中，我花了兩個(gè)晚上品嘗地方菜。我對(duì)每頓飯都很滿(mǎn)意，單其中一餐卻要比另一餐好出許多。為什么？

　　從飯菜方面來(lái)說(shuō)，兩家?guī)缀醵家粯?。菜肴都很有吸引力，并且很?yōu)美地?cái)[放在盤(pán)子里；就餐場(chǎng)所都讓人感到溫暖愜意；兩家的菜單都提供了多種多樣的選擇，而且價(jià)格也都很合理；兩家的服務(wù)員也都很有魅力。那么是什么讓第二家餐館的體驗(yàn)比第一家好這么多呢？

　　就像人生中的大多數(shù)事情，小事往往卻是最重要的。拿水來(lái)說(shuō)吧。一個(gè)粗心的服務(wù)員可能會(huì)等你快喝完了，甚至是杯子都已經(jīng)干了以后才會(huì)來(lái)幫你續(xù)杯。一個(gè)關(guān)心你體驗(yàn)的服務(wù)員則從不會(huì)讓液面低于半杯。而最好的服務(wù)員會(huì)讓你驚訝地發(fā)現(xiàn)剛剛喝掉的水又被續(xù)到幾乎要溢出來(lái)了。

　　作為網(wǎng)站的用戶(hù)體驗(yàn)的設(shè)計(jì)人員，我們可以從很多類(lèi)似水杯一樣簡(jiǎn)單的事情中學(xué)到很多東西。

　　顧客是誰(shuí)？

　　作為一名服務(wù)員，你應(yīng)該知道，人們是有一些需要，甚至是帶著一些期望來(lái)就餐的。在大多數(shù)餐館中，水杯都是第一個(gè)“觸點(diǎn)”，，或者說(shuō)是與顧客的聯(lián)系點(diǎn)。良好的第一印象是通過(guò)及時(shí)的續(xù)杯來(lái)創(chuàng)造的，但是那還只是開(kāi)始。有些人喝水比別人快一些，需要更多的續(xù)杯；有一些人在上菜之前則不喝水；還有一些人干脆一口不碰，他們可能會(huì)叫一些冰茶或是其它飲料。一個(gè)人坐在這，你真的猜不到他是哪一類(lèi)人。而當(dāng)那是一張四人、六人甚至是十個(gè)人的桌子時(shí)，就需要做一些準(zhǔn)備了。

　　網(wǎng)絡(luò)也一樣。我們?cè)O(shè)計(jì)漂亮的網(wǎng)站(希望是)來(lái)取得優(yōu)秀的第一印象，但是我們要確認(rèn)每一個(gè)觸點(diǎn)來(lái)守護(hù)在關(guān)鍵的前幾秒所許下的承諾，否則就會(huì)浪費(fèi)掉在在開(kāi)始的過(guò)程中積累的那一點(diǎn)親善感覺(jué)。這種想法催生了Progressive enhancement的概念。

　　在Web上，我們一點(diǎn)也不了解訪問(wèn)我們網(wǎng)站的人。不知道她在用什么瀏覽器；不知道她是否在使用手機(jī)瀏覽網(wǎng)站；不知道她是不是更喜歡用鍵盤(pán)而不是鼠標(biāo)；不知道她的設(shè)備是否支持Javascript(甚至是CSS)；不知道她是否想打印網(wǎng)頁(yè)；不知道她是否在使用屏幕閱讀器。我們真的一無(wú)所知。

　　那么，當(dāng)你什么也不知道的時(shí)候怎么辦呢？預(yù)測(cè)。

　　作為網(wǎng)站設(shè)計(jì)師，我們需要有能力滿(mǎn)足用戶(hù)的需求。如果我們足夠敏捷，我們甚至可以在他們沒(méi)有注意到的情況下就做到這點(diǎn)。

　　就像把水潑在顧客的腿上

　　Lala.com是圍繞這一個(gè)音樂(lè)迷社區(qū)建立的。它的網(wǎng)站系統(tǒng)可以協(xié)助社區(qū)內(nèi)郵遞等方式的CD交換。

　　Lala homepage

圖 1-1. Lala主頁(yè)

　　我勉強(qiáng)地說(shuō)這個(gè)網(wǎng)站(圖1-1)還算有吸引力，但是……除非你把JS關(guān)閉，它才可用(圖1-2)。

　　Lala sans JavaScript

圖 1-2. 沒(méi)有JavaScript的Lala, 大約在2006年7月

　　你肯定喜歡那個(gè)“Loading”消息，就算沒(méi)有東西在讀取的時(shí)候他也一直在那。

　　當(dāng)然了，這張圖片是一段時(shí)間之前截取的，但是在我第一次舉這個(gè)網(wǎng)站作為“不要做什么”的例子之后間隔的幾個(gè)月中，他們所做的就是草率地拼湊了一條消息(圖1-3)，著實(shí)讓人想起令人頭痛的瀏覽器大戰(zhàn)。

圖 1-3. Lala帶回有趣的回憶

　　
　　這里的問(wèn)題不在于lala使用了Js，而是把JS作為了基本需求。理由？好吧，他們顯然很喜歡用AJAX讀取所有的內(nèi)容。在急于把所有的Web2.0要素都塞到面罩里的過(guò)程中，他們疏遠(yuǎn)了大部分的Web1.0用戶(hù)，丟失了很大一塊手機(jī)市場(chǎng)。而且，他們并不是個(gè)例。

　　考慮一下：你是一個(gè)lala用戶(hù)，你正在瀏覽一個(gè)音像店，然后偶然發(fā)現(xiàn)了一張Arcade Fire的專(zhuān)輯，你沒(méi)有意識(shí)到它已經(jīng)發(fā)行了，想要在你忘記之前把它加到你的lala許愿表里。如果你手機(jī)的瀏覽器不支持JS(或是你關(guān)閉了JS以節(jié)省下載時(shí)間/使用費(fèi)用)，你就得盯著屏幕上告訴你什么是lala的信息(圖1-4)，后面還附上了信息，要使用這個(gè)網(wǎng)站就必須有JS功能。

　　你不能訪問(wèn)你的許愿列表或者站點(diǎn)的其他任何地方。甚至搜索框都不工作了(在頁(yè)面下方)。如果是只限于少數(shù)人的應(yīng)用程序或者是服務(wù)還可以接受，但是對(duì)一個(gè)公共網(wǎng)站來(lái)說(shuō)，這簡(jiǎn)直是一場(chǎng)災(zāi)難。

圖 1-4. Lala 哪里都別想去

　　在潑水之前想一想
　　
　　作為網(wǎng)頁(yè)設(shè)計(jì)師，我們已經(jīng)塑造了自己的形象，我們面對(duì)用戶(hù)的需求時(shí)簡(jiǎn)直就是瞎子。我們所能做好的事情就是去預(yù)測(cè)他們可能的需求，并滿(mǎn)足每一層次的需求，盡可能給他們最好的用戶(hù)體驗(yàn)。這就是Progressive enhancement起作用的地方——我們需要考慮每一個(gè)層次的需求并考慮如何滿(mǎn)足他們。

　　第一層：不要多余的裝飾

　　有一些用戶(hù)只想閱讀內(nèi)容。他們可能在使用移動(dòng)設(shè)備，想要打印一些信息，或用一些附注設(shè)備瀏覽web——他們甚至有可能關(guān)閉了圖像功能。讓你的標(biāo)簽清晰、良構(gòu)和有語(yǔ)義對(duì)這些用戶(hù)來(lái)說(shuō)是十分關(guān)鍵的。他們想要的是輕量的，快速下載的、不分散注意力的頁(yè)面。

　　第二層：漂亮

　　有一些用戶(hù)想要有一點(diǎn)窗花或者是一片檸檬。為這些用戶(hù)，你可以提供一個(gè)設(shè)計(jì)美觀，布局良好的網(wǎng)站。你甚至可以添加一些花朵或者是一點(diǎn)Flash特效來(lái)取悅用戶(hù)。只要你的設(shè)計(jì)沒(méi)有打亂頁(yè)面內(nèi)容的優(yōu)先級(jí)，在瀏覽器測(cè)試中留心一些，再提供其他設(shè)備的CSS，你就應(yīng)該贏得金牌。

　　第三層：盡情發(fā)揮(Make it sing)

　　有一些用戶(hù)可能希望全部功能，對(duì)于這些用戶(hù)，你可以全力以赴地構(gòu)造一個(gè)“Web2.0，哦我的天啊”體驗(yàn)的站點(diǎn)(Web 2.Oh-my experience),黃的褪色、滑動(dòng)widget、還有Ajax，能用的全都用上。

　　不過(guò)別忘了，層次劃分的并不那么清晰。你可能要支持一個(gè)介于一、二層之間的中間層，給Netscape4.0和IE5/Mac提供一些基本的打印樣式和顏色?；蛘吣憧赡芸紤]給支持JS的瀏覽器添加一些JS改進(jìn)，在二層和三層之間加點(diǎn)奶油果仁。

　　默默地行動(dòng)

　　一旦你確定了粗略的層次，你就可以開(kāi)始構(gòu)建你的網(wǎng)站了。

　　從內(nèi)容開(kāi)始。有時(shí)設(shè)計(jì)師和開(kāi)發(fā)人員忘記了這才是人們?cè)L問(wèn)站點(diǎn)的原因。把它雕琢地可讀，并且在呈現(xiàn)給用戶(hù)的時(shí)候，要盡量減少分散注意力的事物，就像擺放地很好的一道菜；別像自助餐一樣把東西簡(jiǎn)單地堆積到一起。你在內(nèi)容上下了大工夫……突出這一點(diǎn)。

　　調(diào)整完內(nèi)容之后，你就可以開(kāi)始確立網(wǎng)站的外觀和感受了。使用你掌握的各種技巧，定義站點(diǎn)樣式以滿(mǎn)足每一層的用戶(hù)；對(duì)老版本的瀏覽器隱藏一些CSS文件，給需要特殊照顧的瀏覽器一些專(zhuān)有的處理。條件注釋在這一領(lǐng)域內(nèi)已經(jīng)十分流行，但是看看老的@import和特定的媒質(zhì)組合，它允許你有選擇性地給老式的瀏覽器提供一些特別照顧。

　　一定要考慮內(nèi)容在打印設(shè)備和移動(dòng)設(shè)備上的呈現(xiàn)方式。你給他們提供了專(zhuān)用布局或是基本印刷排版和色彩調(diào)整嗎？你如何處理圖像？表格？試著預(yù)測(cè)以下一個(gè)手機(jī)用戶(hù)會(huì)想要哪些功能，然后再刪除冗余以簡(jiǎn)化體驗(yàn)。如果你設(shè)置:hover的樣式屬性，被忘了給:focus定義同等的考慮，鍵盤(pán)和手機(jī)用戶(hù)會(huì)為此感謝你的。

　　一旦設(shè)計(jì)綜合起來(lái)，添加一點(diǎn)聰明的JS。你已經(jīng)知道利用對(duì)象和方法偵測(cè)的方法來(lái)確定一個(gè)腳本是否可以在用戶(hù)的瀏覽器中運(yùn)行了。但是考慮以下你的腳本如何與收藏夾和后退按鈕等常見(jiàn)的瀏覽器接口相交互。而且不要忘記了腳本間的依賴(lài)性。如果一個(gè)腳本工作而另一個(gè)不工作，你的網(wǎng)站會(huì)不會(huì)不可用了呢？

　　如果你在制作一個(gè)widget或其他的界面控件，添加一些額外的標(biāo)簽，只要你希望widget運(yùn)行的時(shí)候，其他的情況能保持一切正常。如果你把 widget相關(guān)的CSS從JS中分離出來(lái)以標(biāo)準(zhǔn)化時(shí)，確定CSS在腳本只是widget可運(yùn)行以前是未被激活的。一個(gè)好的辦法就是使用類(lèi)名替換(見(jiàn)表 1)。

　　最后，如果你計(jì)劃使用Ajax，一定要謹(jǐn)慎。用Ajax讀取頁(yè)面的所有內(nèi)容是完全不必要的；他會(huì)成為用戶(hù)和你的內(nèi)容之間的一塊擋路石。而且，它還會(huì)增加服務(wù)器開(kāi)支，讓你的內(nèi)容不能被搜索引擎收錄，使你的網(wǎng)站對(duì)那些使用屏幕閱讀器和大多數(shù)的手機(jī)用戶(hù)不可用。

　　別誤會(huì)我，Ajax有用武之地，但是重要的是一定要了解Ajax應(yīng)該用在何處，更重要的是知道哪里不能用。

　　總結(jié)為一條

　　仔細(xì)地預(yù)測(cè)用戶(hù)的需求并，且盡可能不引起注意地解決這些需求是最可能留下良好印象的。就好像水杯一樣，你的用戶(hù)永遠(yuǎn)都不應(yīng)該需要招呼服務(wù)員來(lái)倒水。