|
通過最優秀的 Web 2.0 應用程序學習改進用戶體驗
 |
 |
|
級別： 初級
Jack D Herrington (jherr@pobox.com), 高級軟件工程師, Leverage Software Inc.
2007 年 5 月 21 日
跟隨本文一起游覽 Web 2.0 世界中的一些頂尖的 Asynchronous JavaScript + XML (Ajax) 應用程序。探索這些應用程序在用戶層面上獲得成功的秘決，發現各種技巧并著手開發自己的 Web 2.0 應用程序，創造令人興奮的用戶體驗。
這篇文章著眼于一些最優秀的新一代 Web 應用程序，向大家展示了從中能學到什么 —— 模仿最優秀的應用程序是引以自豪的傳統。我相信這些站點不會介意的， 畢竟模仿是最誠摯的敬佩。
|
|
請訪問 Ajax 技術資源中心，這是有關 Ajax 編程模型信息的一站式中心，包括很多文檔、教程、論壇、blog、wiki 和新聞。任何 Ajax 的新信息都能在這里找到。
|
|
然而，我沒有把技術層面的問題放在首位。因為這些站點的技術問題 —— 數據如何在 Ajax 中傳遞，固然重要，但是并不是某個站點賴以成功的關鍵因素。應該要重點考慮站點是如何使用瀏覽器的 Ajax 特性結合動態 HTML （Dynamic HTML，DHTML ）創建杰出的用戶體驗的，以及站點是如何與它們的用戶社區進行交互的。我將探究所有這些因素，它們和技術一樣在站點獲得成功的過程中發揮著重要作用。
Google 地圖
如果 “最具影響力的 Web 2.0 應用程序” 設有奧斯卡獎或者金球獎，那么得獎者非 Google 地圖 莫屬。我清晰地記得我的一些同事第一次看到 Google 地圖時的反應：瀏覽器竟然可以完成這些任務？ 在我的印象中，Google 地圖重新定義了用戶對瀏覽器中的應用程序的期許，引領了一場 Web 2.0 的運動。
我不太確定這篇文章的讀者是否曾經使用過 Google 地圖，但不管怎樣我還是在 圖 1 中展示一下這個站點。
圖 1. Google 地圖的最新版
瀏覽地圖的操作很簡單，只需點擊和拖拽地圖即可，就像是在紙制地圖中操作一樣。 如果您要尋找路線，則它們會以線條的形式出現在地圖中，屏幕不會閃爍、地圖也不會移動（除非需要這樣做）。 實際上，Google 地圖大部分功能的實現都不需要重新與服務器交互以獲取一個新的 HTML 頁面。
Google 地圖誕生之后，Ajax 和 Dynamic HTML這幾個詞語永久地刻入了第二次 Web 革命的語言中。但是最讓人興奮地是，嚴格來講 Google 地圖并不是運行在 Ajax 之上（如果把 Ajax 定義為使用 XMLHTTP 對象發送和接收請求）。Google 地圖動態地使用生成的 <script> 標記與服務器來回傳遞數據。提前定義 XMLHTTP 對象是一個技巧。
但是 Google 地圖為什么不使用 Ajax 呢？ 我不能代表 Google 的工程師發言，但是我感覺 Google 地圖的設計靈感來自于 JavaScript 的 “mashup 能力”。
Mashup
在文章開頭，我談到了對用戶社區的支持。我承認，這有點兒官腔，但我認為這很重要。Mashup 是支持用戶社區的根本。 mashup 的意思就是把某個站點的功能與另一個站點的功能合并到一起，然后創建出更加有趣的一些東西。Mashup 的一個很好的例子就是從 Craigslist 獲取房屋出租列表并使用 Google 地圖反映其位置的站點。
MapMyRun.com 是Google 地圖 mashup 的另一個例子，它使用 Google 地圖讓賽跑者（或者任何其他人）能計算出地圖上各路線的距離。圖 2 顯示這個功能。
圖 2. Map My Run 界面
此處，我在左窗格的輸入字段中輸入起點。然后使用鼠標指定跑步的經過點。當我單擊鼠標時，左窗格立刻動態地更新顯示出距離。我可以放大地圖獲得更詳細的內容或者切換到衛星模式（如果路線超過了視圖）。
所有繁重的地圖繪制工作都是由 Google 地圖完成的。MapMyRun 站點只是在地圖的表層添加了一些 JavaScript 代碼，用于處理鼠標點擊和計算距離。
這樣，當我要成功地構建 Web 2.0 應用程序時可以從 Google 地圖中獲得哪些靈感呢？？
- 使用瀏覽器： Google 地圖大量地利用了如今瀏覽器的動態性。使用這些瀏覽器使用戶獲得令人贊嘆的體驗，在體驗中用戶會對瀏覽器能完成的功能大為驚訝。
- Ajax 的純度并不重要：只有少數人知道 Google 地圖不是純粹的 Ajax 應用程序。但是誰會真的在乎這點呢？Google 地圖為用戶提供了非常優秀的功能。程序中未使用
XMLHTTP 并沒有什么關系。不要太專注于一些特定的技術方法了。
- JavaScript mashup：可以通過 JavaScript 編碼把某一站點的功能嵌入另一個站點中，這一功能極其令人贊賞。它可提供 viral edge，將您帶入實現某種特定功能的源代碼。
TaDaList
Google 地圖為 Web 2.0 應用程序設置了很高的門檻。但是可以使用 Ajax 在應用程序中快速添加大量的數值。TaDaList 就是這種數值的一個例子。TaDaList 是一個非常簡單并且免費的 to-do 列表管理程序。為了演示這個站點，我創建了一個帳戶和游泳列表，用來提醒我繼續完成游泳訓練的各種事項。列表如 圖3 所示。
圖 3. 游泳列表
如果我想要添加購買護目鏡的事件，便可以在文本字段中填寫該事件然后單擊 Add to list。該項內容立刻被添加到列表中相應的位置，而不需要刷新頁面，顯示界面如 圖 4 所示。
圖 4. 添加 “Buy New Goggles” 之后
這看上去沒什么打不了的，而且使用 Ajax 實現這個功能也不難，但是最終用戶卻會感到這像是從桌面應用程序得到的結果。
請注意，TaDaList 是在 Rails 框架之上編寫的，這點很重要。實際上，這個程序是人們學習 Rails 時使用到的一個演示應用程序。而且 Rails 框架使這種類型的 Ajax 應用程序的開發極為輕松。
為了演示，我使用 Rails 花了幾分鐘時間編寫了一個簡化版的 TaDaList 應用程序。to-do 項的列表如 圖 5 所示。
圖 5. to-do 項的列表
然后鍵入 Buy earplugs 并單擊 Add。該項內容出現列表中，并且而不需要刷新頁面，顯示界面如 圖 6 所示。
圖 6. 添加 “Buy earplugs” 之后
為了實現這個功能，我創建了一個小型的數據庫用來保存 to-do 項。然后再創建一個 Rails 控制器，如 清單 1 所示。
|
清單 1. Todo_controller.rb
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 中的代碼使用了兩個方法。list() 方法用于顯示頁面。add() 方法用于在列表中添加新的項目，然后再在 HTML 中返回列表。
list() 方法的 RHTML 如 清單 2所示。
清單 2. List.rhtml
<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>
這個頁面使用 form_remote_tag 把簡單表單的內容提交到控制器中的 add() 方法。add() 方法把 to-do 項添加到表中，然后為得到的 <div> 標記返回新的內容。這一功能的代碼如 清單 3所示。
清單 3. Add.rhtml
<% @tasks.each { |t| %>
<%= t.name %><br/>
<% } %>
那么，我可以從 TaDaLists 中學到些什么呢？ 第一，少許 Ajax 應用程序會花大力氣使 Web 應用程序感覺更像是桌面應用程序。第二，選擇使用 Web 框架 —— 特別是那些包含 Ajax 的框架 —— 可以使這種類型的工作相當簡單。
Campfire
Campfire 是 TaDaLists 的同伴，它們都是由相同的工作組開發的(37signals)。在本例中，應用程序將會模擬一個虛擬的 campfire 站點，它托管一個在線聊天室，使遠程團隊可以相互聊天，并方便地傳送文件。
我設置了一個試用帳號，并進行了聊天和上傳文件的操作。結果如 圖 7 所示。
圖 7. 為遠程團隊設計的虛擬 campfire
顯示界面的左側是一個簡單的聊天窗口，在這個窗口中用戶可以隨時提交新的消息。界面的右側顯示了在線用戶，還有一個區域用于上傳文件。
文件的上傳是就地完成的，適用JavaScript 代碼來監控文件上傳過程。這意味著，我們可以在會話的同時添加文件和圖像，而不會因為要移到另一個不同的頁面而離開會話窗口。
從 Campfire 中可以學到一些有趣的東西。第一，它大膽地替換了用戶在桌面應用程序中常用到的聊天服務的類型。在團體會議的上下文中托管聊天的，并以此替換了原來的服務，同時構建了一個系統，這個系統和桌面應用程序比起來特性相當局限，但是因為它獨到地使用了會議的上下文,所以顯得更加有價值。
第二，一些通常會造成頁面刷新的操作，如上傳一個文件，都得到了處理，從而不再需要加載頁面。這可以使用戶的注意力保持在當前的任務上，并且加強了桌面應用程序的感覺。
YourMinis
如果說一些站點少量地使用了 Web 2.0，那么 YourMinis 則恰恰相反，它足以成為 Web 上的小部件/小工具站點。使用它，我們可以創建和定制載有各種小部件（或者是小工具，如果您更喜歡微軟的行業用語）的頁面。頁面的功能相當于控制板，它能以引人注意的方式及時地提供信息。
圖 8 中顯示了在頁面中添加一個 Rottentomatoes 電影小部件后的站點。
圖 8. 顯示電影評論的 YourMinis
Rottentomatoes 是一個電影評論站點。它依據數百個電影評論為電影給定一個總分并提供了一個百分比。分數等于或者高于 60% 的電影被認為是 新鮮的（也就是好的意思）。在本例中，我選擇查看 Bridge To Terebithia，只需提供我的郵政編碼便可以馬上在同一個部件中獲得該電影分數。圖 9 顯示了這個功能。
圖 9. 顯示本地電影分數的電影小部件
界面干凈、打開快速，并且在流行的瀏覽器上運行良好。同時這些小部件可以放置在各種不同的位置 —— 比如說，站點創建者的博客中。
除了站點之外，YourMinis 還有一個 Firefox 擴展，用于在用戶瀏覽頁面時監視瀏覽器。當它發現一些 YourMinis 有可能使用的東西，比如 RSS feed 或者 MP3，它會彈出提示告訴用戶這些資源是可用的。與瀏覽器的這種集成相對來說比較簡單，使用這種方法把站點集成到用戶的桌面中是很不錯的選擇。
在 Web 2.0 方面，從 YourMinis 中還可以學到一些東西。第一，minis 和框架是在 Macromedia Flash 中實現的。從用戶的視角看，這算不上真正的問題。這又回到了另一個問題，即選擇一個特定的技術并沒有最終產生的用戶利益重要。
他們鼓勵開發人員站在用戶社區的角度思考，為整個用戶社區貢獻自己的頁面設計。這是與用戶社區協作的另一種表現形式，它將使用戶社區能以我們從未想到過的方式推進站點的發展。
Lightbox
雖然 Lightbox 非常具體站點，但是我想指出 Lightbox 技術在當今許多站點中都發揮了很大的作用。lightbox 是用戶界面技術與一些 Ajax 技術的結合體。Web 頁面的例子如 圖 10 所示。
圖 10. Lightbox JS 主頁
如果單擊某個圖像，那么整個頁面會變暗，同時一個方框出現在頁面中間，顯示放大后的所選圖片。圖 11 顯示這個功能。
圖 11. 單擊圖像后 lightbox 出現
這種技術具有很多優勢。它可以把用戶的注意力從頁面的其他區域到轉移選擇的圖片。因為用戶可以單擊 Close 返回正常的瀏覽頁面，因此這種技術可以為用戶顯示很多詳細內容而又不必離開當前頁面。
這種 lightbox 技術不僅適用于圖像或者視頻，也適用于文本內容。我經常訪問的一個站點就是使用 lightbox 技術在主頁上合適的區域顯示了每一篇文章的概要。但是用戶只有在單擊了 lightbox 鏈接（通過 Ajax）之后，頁面才會加載該篇文章的概要。因此，用戶可以在一個頁面中同時閱讀幾篇文章的概要內容，并且構建大量的頁面會使服務的帶寬不夠，雖然用戶并不會同時訪問所有的頁面。這于對于計算機和用戶來說都是最好的。
一些開源的 JavaScript 庫可用于開發 lightbox。上圖所顯示的是 Lightbox JS version 2。
其他 Web 2.0 站點
在撰寫這篇文章時，我訪問了大量的 Web 2.0 站點。大多數站點都沒有應用上述技巧 —— 盡管本文所有的技巧都值得應用。Google 有一些尤為出色的內容。Google 文檔 和電子表格 （ Spreadsheets ） 演示了在瀏覽器中使用 WYSIWYG 編輯可以完成哪些任務。Google 閱讀器 演示了如果應用 RSS feed 并提供了一個解決方案使用戶在任何地方都能夠查看新聞。Google 電子郵件 使用了 Ajax、JavaScript、DHTML 和 Google 地圖。
另一個應用領域就是 Google 表格處理軟件可以移動訪問。他們所有的服務都有簡潔版，可以在電話和其他小型設置中良好地運行。使用一個 Googel 帳號，您可以在 Web 上定制自己的主頁，同時還可以為移動電話定制一個主頁。
Google 并不是惟一使用 Ajax 創造驚人之舉的。Meebo 就是一個出色的例子。它是一個托管的聊天應用程序，運行于 Ajax 之上，并且擁有一個簡單但雅致的界面。Kiko 是一個日歷應用程序，它很巧妙地利用了 DHTML 來編輯日歷，并使用 Ajax 更新服務器中的約會、聯系方法和相關信息。
結束語
這篇文章中出現的所有站點都值得我們學習和借鑒。尤其是可以從中學到一些非常有用的技巧。所有這些站點共同的特點就是尊重結合 HTML 和 JavaScript 代碼的威力。近來，編程界常有關于 JavaScript 代碼的負面消息。我認為這是不公平的，因為就我所聽到的大多數缺點而言，與其說是 JavaScript 語言自身的問題，倒不如說是瀏覽器與文檔對象模型（Document Object Model，DOM）之間的兼容性問題。很顯然，如果想要開發一個出色的 Web 2.0 應用程序，就應該把 JavaScript 作為一門編程語言使用，并且應當給予它應有的尊重。業內的頂尖企業無一不照此行事。
正如我在文章開頭所提到的，這篇文章并不僅限于討論技術。同時還討論了如何創建令人贊嘆的用戶體驗。本文中挑選的所有站點都在業內開拓了新天地。有的是封裝在一個簡單的表單中（Google 地圖），有的是利用 Ajax 無縫地增強了界面。
Web 2.0 應用程序歡迎社區。Google 地圖允許用戶分離出其技術以應用于自己的應用程序中。Campfire 之類的站點更加注重于增強社區體驗。
當然，您可以學到很多。但額外令人高興的是，構建 JavaScript 和 DHTML 應用程序的簡便使得構建 Web 2.0 應用程序更加輕松愉快。
參考資料
學習
posted on 2007-07-10 10:44
冰封的愛 閱讀(131)
評論(0) 編輯 收藏 所屬分類:
J2EE