優(yōu)秀HTML5網(wǎng)站學(xué)習(xí)范例：從“饑餓游戲?yàn)g覽器”談?dòng)脩趔w驗(yàn)

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

今天，消費(fèi)者們可以與我一同看看，一個(gè)優(yōu)秀的 HTML5 站點(diǎn)能給我們大家?guī)?lái)怎樣的新體驗(yàn)，而開(kāi)發(fā)者們也可以參考這個(gè)網(wǎng)站所使用的一些 HTML5 特性，去開(kāi)發(fā)出您自己的優(yōu)秀 HTML5 站點(diǎn)。

網(wǎng)站亮點(diǎn)

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

這些社交媒體的數(shù)據(jù)抓取和整合自全球熱門的社交媒體網(wǎng)站，例如 Facebook、Twitter、YouTube、Pinterest 和 Tumblr. 同時(shí)這個(gè)饑餓游戲?yàn)g覽器網(wǎng)站也支持通過(guò) Facebook 和 Twitter 賬號(hào)登錄，登錄后用戶可以創(chuàng)建自己的頁(yè)面來(lái)組織你所關(guān)注的資源和內(nèi)容，也可以去"贊"別人發(fā)布的內(nèi)容，因此，這個(gè)站點(diǎn)本身通過(guò)對(duì)第三方社交媒體網(wǎng)絡(luò)的整合，為用戶輕松提供了一個(gè)新的影迷專用社交平臺(tái)。這樣的做法是值得推薦給開(kāi)發(fā)者們的。

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

橫跨不同設(shè)備并提供一致用戶體驗(yàn)也是該網(wǎng)站的一個(gè)亮點(diǎn)，因?yàn)椴徽撌菑?PC 端的 IE10 ，還是智能手機(jī)或平板的支持 HTML5 的瀏覽器訪問(wèn)該站點(diǎn)，都可以看到一致的內(nèi)容與風(fēng)格，只不過(guò)，里面的方塊大小和排列方式會(huì)根據(jù)用戶的屏幕分辨率來(lái)自動(dòng)調(diào)整。對(duì)于這樣的自適應(yīng)效果，我們也可以通過(guò) PC 端的 IE10 瀏覽器看到，具體做法是改變窗口的尺寸。

幕后的技術(shù)

網(wǎng)站的瀑布式內(nèi)容呈現(xiàn)方式，借助了 JavaScript 將大大小小的信息方塊無(wú)縫地組織到一起。這是一個(gè)典型的網(wǎng)格布局，只不過(guò)它使用的不是傳統(tǒng)的網(wǎng)格布局技術(shù)，而是使用了 JS 將每一塊內(nèi)容放到合適的位置，并且使用 3D CSS 變換來(lái)實(shí)現(xiàn)塊移動(dòng)和旋轉(zhuǎn)時(shí)候的效果。

而對(duì)于觸摸的支持，它利用了 Microsoft Pointers Model，因此可以做到使用一個(gè) API 就可以同時(shí)管理鼠標(biāo)和手指觸摸這兩種用戶輸入。

對(duì)于 3D 翻轉(zhuǎn)動(dòng)畫，網(wǎng)站運(yùn)用了使用 requestAnimationFrame API 優(yōu)化的 CSS3 變換，這樣能確保動(dòng)畫效果在不同的瀏覽器和設(shè)備上都一樣流暢。requestAnimationFrame 技術(shù)能夠在不犧牲運(yùn)算能力的同時(shí)進(jìn)一步提高響應(yīng)度，響應(yīng)度的提高也是讓用戶感覺(jué)到動(dòng)畫流暢的一個(gè)關(guān)鍵。

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

創(chuàng)作用戶喜愛(ài)的網(wǎng)站

如今的互聯(lián)網(wǎng)不再單以信息內(nèi)容為第一要?jiǎng)?wù)，用戶對(duì)參與和交互的要求已經(jīng)越來(lái)越高，因?yàn)?Web 2.0 是一個(gè)強(qiáng)調(diào)用戶為中心、用戶創(chuàng)造內(nèi)容和參與交互的一個(gè)時(shí)代。因此，用戶體驗(yàn)是越來(lái)越重要的一個(gè)環(huán)節(jié)。要做好用戶體驗(yàn)，并且兼顧這一需求在未來(lái)的發(fā)展，舊有的一些技術(shù)似乎已不再能很好地支撐用戶體驗(yàn)的今天和明天。雖然現(xiàn)在 Flash 等插件在網(wǎng)頁(yè)中有很多運(yùn)用，但是我們已經(jīng)通過(guò)這些優(yōu)秀的 HTML5 網(wǎng)站看到了無(wú)插件網(wǎng)頁(yè)帶來(lái)的一些優(yōu)勢(shì)，例如高性能、省電與渾然天成的視覺(jué)效果等。對(duì)于熟知舊有技術(shù)的開(kāi)發(fā)者而言，做出改變雖然看似有些困難，但是我們應(yīng)當(dāng)看到現(xiàn)代網(wǎng)頁(yè)技術(shù)的發(fā)展給我們帶來(lái)的喜悅，以及能夠給用戶帶來(lái)的驚喜與價(jià)值。我們值得為用戶做出改變，也同樣值得為網(wǎng)站用戶體驗(yàn)及網(wǎng)頁(yè)技術(shù)的未來(lái)做出改變。

微軟通過(guò)參與研究和推動(dòng) HTML5 等現(xiàn)代網(wǎng)頁(yè)技術(shù)規(guī)范，改進(jìn)了 IE 瀏覽器對(duì) HTML5 等現(xiàn)代網(wǎng)頁(yè)技術(shù)的支持，也正不斷為開(kāi)發(fā)者提供越來(lái)越多的指引和資源。我們看到，已經(jīng)有越來(lái)越多的開(kāi)發(fā)者步入到 HTML5 開(kāi)發(fā)的行列中來(lái)，也期待在不久的將來(lái)，能有更多的網(wǎng)站構(gòu)建于新的技術(shù)之上！

如果您需要更多了解HTML5 等現(xiàn)代網(wǎng)頁(yè)技術(shù)，可以前往 http://www.ietestdrive.com 查看更多技術(shù)示例及代碼。前不久，微軟也新推出了 http://www.modern.ie 網(wǎng)站，幫助開(kāi)發(fā)者更輕松地評(píng)估現(xiàn)有在線網(wǎng)站，當(dāng)然，您也可以選擇下載一個(gè)用于本地的 modern.IE 程序，用來(lái)簡(jiǎn)化您的開(kāi)發(fā)測(cè)試工作。試試身手吧！