優秀HTML5網站學習范例：從“饑餓游戲瀏覽器”談用戶體驗

繼影片《饑餓游戲》獲得票房成功后，《饑餓游戲2：火星燎原》也于2012年宣布開拍，將在今年的11月22日登陸全球各大院線。值此之際，微軟攜手美國獅門影業公司和 RED Interactive Agency 一起為影迷打造了一個基于 HTML5 現代網頁規范開發的沉浸式體驗網站——饑餓游戲瀏覽器（The Hunger Games Explorer），地址為 http://www.thehungergamesexplorer.com. 在這里，全世界的饑餓游戲迷們可以獲得影片上映前的一切資訊，包括獅門影業官方放出的海報、預告片等等，同時也可以參與到全球社交媒體關于饑餓游戲的討論中來。

今天，消費者們可以與我一同看看，一個優秀的 HTML5 站點能給我們大家帶來怎樣的新體驗，而開發者們也可以參考這個網站所使用的一些 HTML5 特性，去開發出您自己的優秀 HTML5 站點。

網站亮點

從功能上看，該網站為所有的影迷們提供了一站式的影訊資源平臺，不僅可以看到獅門公司所發布的官方訊息，更可以實時查看到來自全球的社交媒體上關于饑餓游戲的討論。所有的內容，包括圖像、視頻和文字，都是通過一個個的方塊區域組織到一起的，內容也是直觀地呈現在了不同的方塊里面，并且很多區塊中的內容是動態的，給網站增添了視覺上的活力。而且如果您有觸摸屏的話，不難發現，這個站點是支持多點觸控的，用雙指可以進行自然的縮放，來調整頁面內容的呈現，很好地支持直接用手指去與整個網站進行交互。

這些社交媒體的數據抓取和整合自全球熱門的社交媒體網站，例如 Facebook、Twitter、YouTube、Pinterest 和 Tumblr. 同時這個饑餓游戲瀏覽器網站也支持通過 Facebook 和 Twitter 賬號登錄，登錄后用戶可以創建自己的頁面來組織你所關注的資源和內容，也可以去"贊"別人發布的內容，因此，這個站點本身通過對第三方社交媒體網絡的整合，為用戶輕松提供了一個新的影迷專用社交平臺。這樣的做法是值得推薦給開發者們的。

在UI設計方面，網站整體呈現出一種現代感，借助 HTML5 的一些功能，網站可以使用自定義的字體，并且可以設計出與影片主題契合的配色風格和界面元素。在我們點擊某一內容方塊時，可以看見該方塊放大且周遭方塊縮小重排的動畫效果，這樣會讓內容的切換不顯得過于突兀。用戶在剛打開這個網站的同時，也可以看見方塊向中間堆疊鋪陳的效果，雖然很快，但能給人舒適的感受。在功能上，用戶還可以對某一關鍵字進行檢索，也可以進行篩選。該網站也采用了瀑布流的方式，網站不設底邊，一直往下滾動會看見越來越多的來自社交媒體網站的內容被整合進來，并得以呈現。

橫跨不同設備并提供一致用戶體驗也是該網站的一個亮點，因為不論是從 PC 端的 IE10 ，還是智能手機或平板的支持 HTML5 的瀏覽器訪問該站點，都可以看到一致的內容與風格，只不過，里面的方塊大小和排列方式會根據用戶的屏幕分辨率來自動調整。對于這樣的自適應效果，我們也可以通過 PC 端的 IE10 瀏覽器看到，具體做法是改變窗口的尺寸。

幕后的技術

網站的瀑布式內容呈現方式，借助了 JavaScript 將大大小小的信息方塊無縫地組織到一起。這是一個典型的網格布局，只不過它使用的不是傳統的網格布局技術，而是使用了 JS 將每一塊內容放到合適的位置，并且使用 3D CSS 變換來實現塊移動和旋轉時候的效果。

而對于觸摸的支持，它利用了 Microsoft Pointers Model，因此可以做到使用一個 API 就可以同時管理鼠標和手指觸摸這兩種用戶輸入。

對于 3D 翻轉動畫，網站運用了使用 requestAnimationFrame API 優化的 CSS3 變換，這樣能確保動畫效果在不同的瀏覽器和設備上都一樣流暢。requestAnimationFrame 技術能夠在不犧牲運算能力的同時進一步提高響應度，響應度的提高也是讓用戶感覺到動畫流暢的一個關鍵。

如果您想查看這些技術范例的代碼，可以移步此處： http://www.thehungergamesexplorer.com/behind-the-scenes

創作用戶喜愛的網站

如今的互聯網不再單以信息內容為第一要務，用戶對參與和交互的要求已經越來越高，因為 Web 2.0 是一個強調用戶為中心、用戶創造內容和參與交互的一個時代。因此，用戶體驗是越來越重要的一個環節。要做好用戶體驗，并且兼顧這一需求在未來的發展，舊有的一些技術似乎已不再能很好地支撐用戶體驗的今天和明天。雖然現在 Flash 等插件在網頁中有很多運用，但是我們已經通過這些優秀的 HTML5 網站看到了無插件網頁帶來的一些優勢，例如高性能、省電與渾然天成的視覺效果等。對于熟知舊有技術的開發者而言，做出改變雖然看似有些困難，但是我們應當看到現代網頁技術的發展給我們帶來的喜悅，以及能夠給用戶帶來的驚喜與價值。我們值得為用戶做出改變，也同樣值得為網站用戶體驗及網頁技術的未來做出改變。

微軟通過參與研究和推動 HTML5 等現代網頁技術規范，改進了 IE 瀏覽器對 HTML5 等現代網頁技術的支持，也正不斷為開發者提供越來越多的指引和資源。我們看到，已經有越來越多的開發者步入到 HTML5 開發的行列中來，也期待在不久的將來，能有更多的網站構建于新的技術之上！

如果您需要更多了解HTML5 等現代網頁技術，可以前往 http://www.ietestdrive.com 查看更多技術示例及代碼。前不久，微軟也新推出了 http://www.modern.ie 網站，幫助開發者更輕松地評估現有在線網站，當然，您也可以選擇下載一個用于本地的 modern.IE 程序，用來簡化您的開發測試工作。試試身手吧！