通過最優(yōu)秀的 Web 2.0 應(yīng)用程序?qū)W習(xí)改進(jìn)用戶體驗(yàn)

文檔選項(xiàng) 將此頁作為電子郵件發(fā)送 未顯示需要 JavaScript 的文檔選項(xiàng) 討論 級(jí)別： 初級(jí) Jack D Herrington (jherr@pobox.com), 高級(jí)軟件工程師, Leverage Software Inc. 2007 年 5 月 21 日 跟隨本文一起游覽 Web 2.0 世界中的一些頂尖的 Asynchronous JavaScript + XML (Ajax) 應(yīng)用程序。探索這些應(yīng)用程序在用戶層面上獲得成功的秘決，發(fā)現(xiàn)各種技巧并著手開發(fā)自己的 Web 2.0 應(yīng)用程序，創(chuàng)造令人興奮的用戶體驗(yàn)。 這篇文章著眼于一些最優(yōu)秀的新一代 Web 應(yīng)用程序，向大家展示了從中能學(xué)到什么 —— 模仿最優(yōu)秀的應(yīng)用程序是引以自豪的傳統(tǒng)。我相信這些站點(diǎn)不會(huì)介意的， 畢竟模仿是最誠摯的敬佩。 請(qǐng)?jiān)L問 Ajax 技術(shù)資源中心，這是有關(guān) Ajax 編程模型信息的一站式中心，包括很多文檔、教程、論壇、blog、wiki 和新聞。任何 Ajax 的新信息都能在這里找到。 然而，我沒有把技術(shù)層面的問題放在首位。因?yàn)檫@些站點(diǎn)的技術(shù)問題 —— 數(shù)據(jù)如何在 Ajax 中傳遞，固然重要，但是并不是某個(gè)站點(diǎn)賴以成功的關(guān)鍵因素。應(yīng)該要重點(diǎn)考慮站點(diǎn)是如何使用瀏覽器的 Ajax 特性結(jié)合動(dòng)態(tài) HTML （Dynamic HTML，DHTML ）創(chuàng)建杰出的用戶體驗(yàn)的，以及站點(diǎn)是如何與它們的用戶社區(qū)進(jìn)行交互的。我將探究所有這些因素，它們和技術(shù)一樣在站點(diǎn)獲得成功的過程中發(fā)揮著重要作用。 Google 地圖 如果 “最具影響力的 Web 2.0 應(yīng)用程序” 設(shè)有奧斯卡獎(jiǎng)或者金球獎(jiǎng)，那么得獎(jiǎng)?wù)叻?Google 地圖 莫屬。我清晰地記得我的一些同事第一次看到 Google 地圖時(shí)的反應(yīng)：瀏覽器竟然可以完成這些任務(wù)？ 在我的印象中，Google 地圖重新定義了用戶對(duì)瀏覽器中的應(yīng)用程序的期許，引領(lǐng)了一場(chǎng) Web 2.0 的運(yùn)動(dòng)。 我不太確定這篇文章的讀者是否曾經(jīng)使用過 Google 地圖，但不管怎樣我還是在 圖 1 中展示一下這個(gè)站點(diǎn)。 圖 1. Google 地圖的最新版 瀏覽地圖的操作很簡單，只需點(diǎn)擊和拖拽地圖即可，就像是在紙制地圖中操作一樣。 如果您要尋找路線，則它們會(huì)以線條的形式出現(xiàn)在地圖中，屏幕不會(huì)閃爍、地圖也不會(huì)移動(dòng)（除非需要這樣做）。 實(shí)際上，Google 地圖大部分功能的實(shí)現(xiàn)都不需要重新與服務(wù)器交互以獲取一個(gè)新的 HTML 頁面。 Google 地圖誕生之后，Ajax 和 Dynamic HTML這幾個(gè)詞語永久地刻入了第二次 Web 革命的語言中。但是最讓人興奮地是，嚴(yán)格來講 Google 地圖并不是運(yùn)行在 Ajax 之上（如果把 Ajax 定義為使用 XMLHTTP 對(duì)象發(fā)送和接收請(qǐng)求）。Google 地圖動(dòng)態(tài)地使用生成的 <script> 標(biāo)記與服務(wù)器來回傳遞數(shù)據(jù)。提前定義 XMLHTTP 對(duì)象是一個(gè)技巧。 但是 Google 地圖為什么不使用 Ajax 呢？ 我不能代表 Google 的工程師發(fā)言，但是我感覺 Google 地圖的設(shè)計(jì)靈感來自于 JavaScript 的 “mashup 能力”。 Mashup 在文章開頭，我談到了對(duì)用戶社區(qū)的支持。我承認(rèn)，這有點(diǎn)兒官腔，但我認(rèn)為這很重要。Mashup 是支持用戶社區(qū)的根本。 mashup 的意思就是把某個(gè)站點(diǎn)的功能與另一個(gè)站點(diǎn)的功能合并到一起，然后創(chuàng)建出更加有趣的一些東西。Mashup 的一個(gè)很好的例子就是從 Craigslist 獲取房屋出租列表并使用 Google 地圖反映其位置的站點(diǎn)。 MapMyRun.com 是Google 地圖 mashup 的另一個(gè)例子，它使用 Google 地圖讓賽跑者（或者任何其他人）能計(jì)算出地圖上各路線的距離。圖 2 顯示這個(gè)功能。 圖 2. Map My Run 界面 此處，我在左窗格的輸入字段中輸入起點(diǎn)。然后使用鼠標(biāo)指定跑步的經(jīng)過點(diǎn)。當(dāng)我單擊鼠標(biāo)時(shí)，左窗格立刻動(dòng)態(tài)地更新顯示出距離。我可以放大地圖獲得更詳細(xì)的內(nèi)容或者切換到衛(wèi)星模式（如果路線超過了視圖）。 所有繁重的地圖繪制工作都是由 Google 地圖完成的。MapMyRun 站點(diǎn)只是在地圖的表層添加了一些 JavaScript 代碼，用于處理鼠標(biāo)點(diǎn)擊和計(jì)算距離。 這樣，當(dāng)我要成功地構(gòu)建 Web 2.0 應(yīng)用程序時(shí)可以從 Google 地圖中獲得哪些靈感呢？？ 使用瀏覽器： Google 地圖大量地利用了如今瀏覽器的動(dòng)態(tài)性。使用這些瀏覽器使用戶獲得令人贊嘆的體驗(yàn)，在體驗(yàn)中用戶會(huì)對(duì)瀏覽器能完成的功能大為驚訝。 Ajax 的純度并不重要：只有少數(shù)人知道 Google 地圖不是純粹的 Ajax 應(yīng)用程序。但是誰會(huì)真的在乎這點(diǎn)呢？Google 地圖為用戶提供了非常優(yōu)秀的功能。程序中未使用 XMLHTTP 并沒有什么關(guān)系。不要太專注于一些特定的技術(shù)方法了。 JavaScript mashup：可以通過 JavaScript 編碼把某一站點(diǎn)的功能嵌入另一個(gè)站點(diǎn)中，這一功能極其令人贊賞。它可提供 viral edge，將您帶入實(shí)現(xiàn)某種特定功能的源代碼。 回頁首 TaDaList Google 地圖為 Web 2.0 應(yīng)用程序設(shè)置了很高的門檻。但是可以使用 Ajax 在應(yīng)用程序中快速添加大量的數(shù)值。TaDaList 就是這種數(shù)值的一個(gè)例子。TaDaList 是一個(gè)非常簡單并且免費(fèi)的 to-do 列表管理程序。為了演示這個(gè)站點(diǎn)，我創(chuàng)建了一個(gè)帳戶和游泳列表，用來提醒我繼續(xù)完成游泳訓(xùn)練的各種事項(xiàng)。列表如 圖3 所示。 圖 3. 游泳列表 如果我想要添加購買護(hù)目鏡的事件，便可以在文本字段中填寫該事件然后單擊 Add to list。該項(xiàng)內(nèi)容立刻被添加到列表中相應(yīng)的位置，而不需要刷新頁面，顯示界面如 圖 4 所示。 圖 4. 添加 “Buy New Goggles” 之后 這看上去沒什么打不了的，而且使用 Ajax 實(shí)現(xiàn)這個(gè)功能也不難，但是最終用戶卻會(huì)感到這像是從桌面應(yīng)用程序得到的結(jié)果。 請(qǐng)注意，TaDaList 是在 Rails 框架之上編寫的，這點(diǎn)很重要。實(shí)際上，這個(gè)程序是人們學(xué)習(xí) Rails 時(shí)使用到的一個(gè)演示應(yīng)用程序。而且 Rails 框架使這種類型的 Ajax 應(yīng)用程序的開發(fā)極為輕松。 為了演示，我使用 Rails 花了幾分鐘時(shí)間編寫了一個(gè)簡化版的 TaDaList 應(yīng)用程序。to-do 項(xiàng)的列表如 圖 5 所示。 圖 5. to-do 項(xiàng)的列表 然后鍵入 Buy earplugs 并單擊 Add。該項(xiàng)內(nèi)容出現(xiàn)列表中，并且而不需要刷新頁面，顯示界面如 圖 6 所示。 圖 6. 添加 “Buy earplugs” 之后 為了實(shí)現(xiàn)這個(gè)功能，我創(chuàng)建了一個(gè)小型的數(shù)據(jù)庫用來保存 to-do 項(xiàng)。然后再創(chuàng)建一個(gè) Rails 控制器，如 清單 1 所示。

Class TodoControllerclass TodoController < ApplicationController
  def list
    @tasks = Todo.find(:all)
  end
  def add
    task = Todo.new
    task.name = params[:task][:name]
    task.save

    @tasks = Todo.find(:all)
  end
end

清單 1 中的代碼使用了兩個(gè)方法。list() 方法用于顯示頁面。add() 方法用于在列表中添加新的項(xiàng)目，然后再在 HTML 中返回列表。

list() 方法的 RHTML 如 清單 2所示。

<html>
<head>
<%= javascript_include_tag :defaults %>
</head>
<body>

<div id="results">
<% @tasks.each { |t| %>
<%= t.name %><br/>
<% } %>
</div>

<%= form_remote_tag :url => { :action => 'add' }, :update => 'results' %>
<%= text_field :task, :name %>
<%= submit_tag 'Add' %>
<%= end_form_tag %>

</body>
</html>

這個(gè)頁面使用 form_remote_tag 把簡單表單的內(nèi)容提交到控制器中的 add() 方法。add() 方法把 to-do 項(xiàng)添加到表中，然后為得到的 <div> 標(biāo)記返回新的內(nèi)容。這一功能的代碼如 清單 3所示。

<% @tasks.each { |t| %>
<%= t.name %><br/>
<% } %>

那么，我可以從 TaDaLists 中學(xué)到些什么呢？ 第一，少許 Ajax 應(yīng)用程序會(huì)花大力氣使 Web 應(yīng)用程序感覺更像是桌面應(yīng)用程序。第二，選擇使用 Web 框架 —— 特別是那些包含 Ajax 的框架 —— 可以使這種類型的工作相當(dāng)簡單。

回頁首

Campfire

Campfire 是 TaDaLists 的同伴，它們都是由相同的工作組開發(fā)的(37signals)。在本例中，應(yīng)用程序?qū)?huì)模擬一個(gè)虛擬的 campfire 站點(diǎn)，它托管一個(gè)在線聊天室，使遠(yuǎn)程團(tuán)隊(duì)可以相互聊天，并方便地傳送文件。

我設(shè)置了一個(gè)試用帳號(hào)，并進(jìn)行了聊天和上傳文件的操作。結(jié)果如 圖 7 所示。

顯示界面的左側(cè)是一個(gè)簡單的聊天窗口，在這個(gè)窗口中用戶可以隨時(shí)提交新的消息。界面的右側(cè)顯示了在線用戶，還有一個(gè)區(qū)域用于上傳文件。

文件的上傳是就地完成的，適用JavaScript 代碼來監(jiān)控文件上傳過程。這意味著，我們可以在會(huì)話的同時(shí)添加文件和圖像，而不會(huì)因?yàn)橐频搅硪粋€(gè)不同的頁面而離開會(huì)話窗口。

從 Campfire 中可以學(xué)到一些有趣的東西。第一，它大膽地替換了用戶在桌面應(yīng)用程序中常用到的聊天服務(wù)的類型。在團(tuán)體會(huì)議的上下文中托管聊天的，并以此替換了原來的服務(wù)，同時(shí)構(gòu)建了一個(gè)系統(tǒng)，這個(gè)系統(tǒng)和桌面應(yīng)用程序比起來特性相當(dāng)局限，但是因?yàn)樗?dú)到地使用了會(huì)議的上下文,所以顯得更加有價(jià)值。

第二，一些通常會(huì)造成頁面刷新的操作，如上傳一個(gè)文件，都得到了處理，從而不再需要加載頁面。這可以使用戶的注意力保持在當(dāng)前的任務(wù)上，并且加強(qiáng)了桌面應(yīng)用程序的感覺。

回頁首

YourMinis

如果說一些站點(diǎn)少量地使用了 Web 2.0，那么 YourMinis 則恰恰相反，它足以成為 Web 上的小部件/小工具站點(diǎn)。使用它，我們可以創(chuàng)建和定制載有各種小部件（或者是小工具，如果您更喜歡微軟的行業(yè)用語）的頁面。頁面的功能相當(dāng)于控制板，它能以引人注意的方式及時(shí)地提供信息。

圖 8 中顯示了在頁面中添加一個(gè) Rottentomatoes 電影小部件后的站點(diǎn)。

Rottentomatoes 是一個(gè)電影評(píng)論站點(diǎn)。它依據(jù)數(shù)百個(gè)電影評(píng)論為電影給定一個(gè)總分并提供了一個(gè)百分比。分?jǐn)?shù)等于或者高于 60% 的電影被認(rèn)為是 新鮮的（也就是好的意思）。在本例中，我選擇查看 Bridge To Terebithia，只需提供我的郵政編碼便可以馬上在同一個(gè)部件中獲得該電影分?jǐn)?shù)。圖 9 顯示了這個(gè)功能。

界面干凈、打開快速，并且在流行的瀏覽器上運(yùn)行良好。同時(shí)這些小部件可以放置在各種不同的位置 —— 比如說，站點(diǎn)創(chuàng)建者的博客中。

除了站點(diǎn)之外，YourMinis 還有一個(gè) Firefox 擴(kuò)展，用于在用戶瀏覽頁面時(shí)監(jiān)視瀏覽器。當(dāng)它發(fā)現(xiàn)一些 YourMinis 有可能使用的東西，比如 RSS feed 或者 MP3，它會(huì)彈出提示告訴用戶這些資源是可用的。與瀏覽器的這種集成相對(duì)來說比較簡單，使用這種方法把站點(diǎn)集成到用戶的桌面中是很不錯(cuò)的選擇。

在 Web 2.0 方面，從 YourMinis 中還可以學(xué)到一些東西。第一，minis 和框架是在 Macromedia Flash 中實(shí)現(xiàn)的。從用戶的視角看，這算不上真正的問題。這又回到了另一個(gè)問題，即選擇一個(gè)特定的技術(shù)并沒有最終產(chǎn)生的用戶利益重要。

他們鼓勵(lì)開發(fā)人員站在用戶社區(qū)的角度思考，為整個(gè)用戶社區(qū)貢獻(xiàn)自己的頁面設(shè)計(jì)。這是與用戶社區(qū)協(xié)作的另一種表現(xiàn)形式，它將使用戶社區(qū)能以我們從未想到過的方式推進(jìn)站點(diǎn)的發(fā)展。

Lightbox

雖然 Lightbox 非常具體站點(diǎn)，但是我想指出 Lightbox 技術(shù)在當(dāng)今許多站點(diǎn)中都發(fā)揮了很大的作用。lightbox 是用戶界面技術(shù)與一些 Ajax 技術(shù)的結(jié)合體。Web 頁面的例子如 圖 10 所示。

如果單擊某個(gè)圖像，那么整個(gè)頁面會(huì)變暗，同時(shí)一個(gè)方框出現(xiàn)在頁面中間，顯示放大后的所選圖片。圖 11 顯示這個(gè)功能。

這種技術(shù)具有很多優(yōu)勢(shì)。它可以把用戶的注意力從頁面的其他區(qū)域到轉(zhuǎn)移選擇的圖片。因?yàn)橛脩艨梢詥螕?Close 返回正常的瀏覽頁面，因此這種技術(shù)可以為用戶顯示很多詳細(xì)內(nèi)容而又不必離開當(dāng)前頁面。

這種 lightbox 技術(shù)不僅適用于圖像或者視頻，也適用于文本內(nèi)容。我經(jīng)常訪問的一個(gè)站點(diǎn)就是使用 lightbox 技術(shù)在主頁上合適的區(qū)域顯示了每一篇文章的概要。但是用戶只有在單擊了 lightbox 鏈接（通過 Ajax）之后，頁面才會(huì)加載該篇文章的概要。因此，用戶可以在一個(gè)頁面中同時(shí)閱讀幾篇文章的概要內(nèi)容，并且構(gòu)建大量的頁面會(huì)使服務(wù)的帶寬不夠，雖然用戶并不會(huì)同時(shí)訪問所有的頁面。這于對(duì)于計(jì)算機(jī)和用戶來說都是最好的。

一些開源的 JavaScript 庫可用于開發(fā) lightbox。上圖所顯示的是 Lightbox JS version 2。

回頁首

其他 Web 2.0 站點(diǎn)

在撰寫這篇文章時(shí)，我訪問了大量的 Web 2.0 站點(diǎn)。大多數(shù)站點(diǎn)都沒有應(yīng)用上述技巧 —— 盡管本文所有的技巧都值得應(yīng)用。Google 有一些尤為出色的內(nèi)容。Google 文檔 和電子表格 （ Spreadsheets ） 演示了在瀏覽器中使用 WYSIWYG 編輯可以完成哪些任務(wù)。Google 閱讀器 演示了如果應(yīng)用 RSS feed 并提供了一個(gè)解決方案使用戶在任何地方都能夠查看新聞。Google 電子郵件 使用了 Ajax、JavaScript、DHTML 和 Google 地圖。

另一個(gè)應(yīng)用領(lǐng)域就是 Google 表格處理軟件可以移動(dòng)訪問。他們所有的服務(wù)都有簡潔版，可以在電話和其他小型設(shè)置中良好地運(yùn)行。使用一個(gè) Googel 帳號(hào)，您可以在 Web 上定制自己的主頁，同時(shí)還可以為移動(dòng)電話定制一個(gè)主頁。

Google 并不是惟一使用 Ajax 創(chuàng)造驚人之舉的。Meebo 就是一個(gè)出色的例子。它是一個(gè)托管的聊天應(yīng)用程序，運(yùn)行于 Ajax 之上，并且擁有一個(gè)簡單但雅致的界面。Kiko 是一個(gè)日歷應(yīng)用程序，它很巧妙地利用了 DHTML 來編輯日歷，并使用 Ajax 更新服務(wù)器中的約會(huì)、聯(lián)系方法和相關(guān)信息。

回頁首

結(jié)束語

這篇文章中出現(xiàn)的所有站點(diǎn)都值得我們學(xué)習(xí)和借鑒。尤其是可以從中學(xué)到一些非常有用的技巧。所有這些站點(diǎn)共同的特點(diǎn)就是尊重結(jié)合 HTML 和 JavaScript 代碼的威力。近來，編程界常有關(guān)于 JavaScript 代碼的負(fù)面消息。我認(rèn)為這是不公平的，因?yàn)榫臀宜牭降拇蠖鄶?shù)缺點(diǎn)而言，與其說是 JavaScript 語言自身的問題，倒不如說是瀏覽器與文檔對(duì)象模型（Document Object Model，DOM）之間的兼容性問題。很顯然，如果想要開發(fā)一個(gè)出色的 Web 2.0 應(yīng)用程序，就應(yīng)該把 JavaScript 作為一門編程語言使用，并且應(yīng)當(dāng)給予它應(yīng)有的尊重。業(yè)內(nèi)的頂尖企業(yè)無一不照此行事。

分享這篇文章...... 將本文提交到 Digg 發(fā)布到 del.icio.us

正如我在文章開頭所提到的，這篇文章并不僅限于討論技術(shù)。同時(shí)還討論了如何創(chuàng)建令人贊嘆的用戶體驗(yàn)。本文中挑選的所有站點(diǎn)都在業(yè)內(nèi)開拓了新天地。有的是封裝在一個(gè)簡單的表單中（Google 地圖），有的是利用 Ajax 無縫地增強(qiáng)了界面。

Web 2.0 應(yīng)用程序歡迎社區(qū)。Google 地圖允許用戶分離出其技術(shù)以應(yīng)用于自己的應(yīng)用程序中。Campfire 之類的站點(diǎn)更加注重于增強(qiáng)社區(qū)體驗(yàn)。

當(dāng)然，您可以學(xué)到很多。但額外令人高興的是，構(gòu)建 JavaScript 和 DHTML 應(yīng)用程序的簡便使得構(gòu)建 Web 2.0 應(yīng)用程序更加輕松愉快。

參考資料

• 您可以參閱本文在 developerWorks 全球網(wǎng)站上的 英文原文。
  
  
• Ajax 技術(shù)資源中心：developerWorks 上所有有關(guān) Ajax 的問題都可以在這里找到解答。
  
  
• developerWorks 中國網(wǎng)站 XML 專區(qū)：通過 developerWorks XML 專區(qū)了解 XML 的方方面面。
  
  
• Meebo：進(jìn)一步學(xué)習(xí)用于任何地點(diǎn)之間即時(shí)消息傳送的托管聊天應(yīng)用程序
  
  
• Google 地圖：使用 Google 的地圖繪制應(yīng)用程序在各地點(diǎn)之間標(biāo)示線路、找尋企業(yè)和進(jìn)行更多操作。
  
  
• GMail：查閱 Google 的支持 Ajax 電子郵件應(yīng)用程序，這些應(yīng)用程序內(nèi)建有 Google 搜索技術(shù)和兆字節(jié)存儲(chǔ)技術(shù)。
  
  
• Campfire：了解來自 37signals 的群體聊天和文件交換應(yīng)用程序
  
  
• Kiko：查閱 Ajax 日歷應(yīng)用程序。
  
  
• Map My Run：使用這個(gè)作者最喜愛的 Google 地圖 mashup 之一標(biāo)示跑步線路并獲得準(zhǔn)確的距離。
  
  
• TaDaList：看看來自 37signals 的一個(gè)共享 to-do 列表系統(tǒng)可以完成哪些任務(wù)。
  
  
• YourMinis：在這個(gè)小部件/小工具站點(diǎn)上。創(chuàng)建您自己的控制板，貢獻(xiàn)您的小部件。
  
  
• Ajaxian：緊跟Ajax 和前端小部件發(fā)展的步伐，利用這個(gè)非常有用的資源。
  
  
• IBM XML 認(rèn)證：看看如何才能成為一名 IBM 認(rèn)證的 XML 及相關(guān)技術(shù)的開發(fā)人員。
  
  
• XML 技術(shù)文檔庫：查看 developerWorks XML 專區(qū)提供的大量技術(shù)文章、技巧、教程、標(biāo)準(zhǔn)和 IBM 紅皮書。
  
  
• developerWorks 技術(shù)活動(dòng) 和 網(wǎng)絡(luò)廣播 ：通過這些活動(dòng)隨時(shí)關(guān)注技術(shù)的最新進(jìn)展。