建站
咨詢
售后
建站咨詢
新聞中心
今天，消費者們可以與我一同看看，一個優(yōu)秀的 HTML5 站點能給我們大家?guī)碓鯓拥男麦w驗，而開發(fā)者們也可以參考這個網(wǎng)站所使用的一些 HTML5 特性，去開發(fā)出您自己的優(yōu)秀 HTML5 站點。
網(wǎng)站亮點
從功能上看，該網(wǎng)站為所有的影迷們提供了一站式的影訊資源平臺，不僅可以看到獅門公司所發(fā)布的官方訊息，更可以實時查看到來自全球的社交媒體上關于饑餓游戲的討論。所有的內(nèi)容，包括圖像、視頻和文字，都是通過一個個的方塊區(qū)域組織到一起的，內(nèi)容也是直觀地呈現(xiàn)在了不同的方塊里面，并且很多區(qū)塊中的內(nèi)容是動態(tài)的，給網(wǎng)站增添了視覺上的活力。而且如果您有觸摸屏的話，不難發(fā)現(xiàn)，這個站點是支持多點觸控的，用雙指可以進行自然的縮放，來調(diào)整頁面內(nèi)容的呈現(xiàn)，很好地支持直接用手指去與整個網(wǎng)站進行交互。
這些社交媒體的數(shù)據(jù)抓取和整合自全球熱門的社交媒體網(wǎng)站，例如 Facebook、Twitter、YouTube、Pinterest 和 Tumblr. 同時這個饑餓游戲瀏覽器網(wǎng)站也支持通過 Facebook 和 Twitter 賬號登錄，登錄后用戶可以創(chuàng)建自己的頁面來組織你所關注的資源和內(nèi)容，也可以去"贊"別人發(fā)布的內(nèi)容，因此，這個站點本身通過對第三方社交媒體網(wǎng)絡的整合，為用戶輕松提供了一個新的影迷專用社交平臺。這樣的做法是值得推薦給開發(fā)者們的。
在UI設計方面，網(wǎng)站整體呈現(xiàn)出一種現(xiàn)代感，借助 HTML5 的一些功能，網(wǎng)站可以使用自定義的字體，并且可以設計出與影片主題契合的配色風格和界面元素。在我們點擊某一內(nèi)容方塊時，可以看見該方塊放大且周遭方塊縮小重排的動畫效果，這樣會讓內(nèi)容的切換不顯得過于突兀。用戶在剛打開這個網(wǎng)站的同時，也可以看見方塊向中間堆疊鋪陳的效果，雖然很快，但能給人舒適的感受。在功能上，用戶還可以對某一關鍵字進行檢索，也可以進行篩選。該網(wǎng)站也采用了瀑布流的方式，網(wǎng)站不設底邊，一直往下滾動會看見越來越多的來自社交媒體網(wǎng)站的內(nèi)容被整合進來，并得以呈現(xiàn)。
橫跨不同設備并提供一致用戶體驗也是該網(wǎng)站的一個亮點，因為不論是從 PC 端的 IE10 ，還是智能手機或平板的支持 HTML5 的瀏覽器訪問該站點，都可以看到一致的內(nèi)容與風格，只不過，里面的方塊大小和排列方式會根據(jù)用戶的屏幕分辨率來自動調(diào)整。對于這樣的自適應效果，我們也可以通過 PC 端的 IE10 瀏覽器看到，具體做法是改變窗口的尺寸。
幕后的技術
網(wǎng)站的瀑布式內(nèi)容呈現(xiàn)方式，借助了 JavaScript 將大大小小的信息方塊無縫地組織到一起。這是一個典型的網(wǎng)格布局，只不過它使用的不是傳統(tǒng)的網(wǎng)格布局技術，而是使用了 JS 將每一塊內(nèi)容放到合適的位置，并且使用 3D CSS 變換來實現(xiàn)塊移動和旋轉(zhuǎn)時候的效果。
而對于觸摸的支持，它利用了 Microsoft Pointers Model，因此可以做到使用一個 API 就可以同時管理鼠標和手指觸摸這兩種用戶輸入。
對于 3D 翻轉(zhuǎn)動畫，網(wǎng)站運用了使用 requestAnimationFrame API 優(yōu)化的 CSS3 變換，這樣能確保動畫效果在不同的瀏覽器和設備上都一樣流暢。requestAnimationFrame 技術能夠在不犧牲運算能力的同時進一步提高響應度，響應度的提高也是讓用戶感覺到動畫流暢的一個關鍵。
如果您想查看這些技術范例的代碼，可以移步此處： http://www.thehungergamesexplorer.com/behind-the-scenes
創(chuàng)作用戶喜愛的網(wǎng)站
如今的互聯(lián)網(wǎng)不再單以信息內(nèi)容為第一要務，用戶對參與和交互的要求已經(jīng)越來越高，因為 Web 2.0 是一個強調(diào)用戶為中心、用戶創(chuàng)造內(nèi)容和參與交互的一個時代。因此，用戶體驗是越來越重要的一個環(huán)節(jié)。要做好用戶體驗，并且兼顧這一需求在未來的發(fā)展，舊有的一些技術似乎已不再能很好地支撐用戶體驗的今天和明天。雖然現(xiàn)在 Flash 等插件在網(wǎng)頁中有很多運用，但是我們已經(jīng)通過這些優(yōu)秀的 HTML5 網(wǎng)站看到了無插件網(wǎng)頁帶來的一些優(yōu)勢，例如高性能、省電與渾然天成的視覺效果等。對于熟知舊有技術的開發(fā)者而言，做出改變雖然看似有些困難，但是我們應當看到現(xiàn)代網(wǎng)頁技術的發(fā)展給我們帶來的喜悅，以及能夠給用戶帶來的驚喜與價值。我們值得為用戶做出改變，也同樣值得為網(wǎng)站用戶體驗及網(wǎng)頁技術的未來做出改變。
微軟通過參與研究和推動 HTML5 等現(xiàn)代網(wǎng)頁技術規(guī)范，改進了 IE 瀏覽器對 HTML5 等現(xiàn)代網(wǎng)頁技術的支持，也正不斷為開發(fā)者提供越來越多的指引和資源。我們看到，已經(jīng)有越來越多的開發(fā)者步入到 HTML5 開發(fā)的行列中來，也期待在不久的將來，能有更多的網(wǎng)站構建于新的技術之上！
如果您需要更多了解HTML5 等現(xiàn)代網(wǎng)頁技術，可以前往 http://www.ietestdrive.com 查看更多技術示例及代碼。前不久，微軟也新推出了 http://www.modern.ie 網(wǎng)站，幫助開發(fā)者更輕松地評估現(xiàn)有在線網(wǎng)站，當然，您也可以選擇下載一個用于本地的 modern.IE 程序，用來簡化您的開發(fā)測試工作。試試身手吧！
原文鏈接：http://www.cnblogs.com/mvperic/archive/2013/05/09/3069250.html
【編輯推薦】
- 8個效果驚人的WebGL/JS演示
- WebGL: 為瀏覽器提供3D顯示支持
- JavaScript，只有你想不到
- 如何優(yōu)化你的JS代碼
- 另一款有意思的JS圖片放大鏡
分享名稱：優(yōu)秀HTML5網(wǎng)站范例：從“饑餓游戲瀏覽器”談用戶體驗
文章分享：http://www.5511xx.com/article/cdjdgsg.html
