微軟IE 10與HIT FM 打造全新HTML5官網(wǎng)

　　作為用于取代1999年所制定的 HTML4.01的下一代HTML標(biāo)準(zhǔn)版本，當(dāng)前的HTML5標(biāo)準(zhǔn)正處于一個高速發(fā)展階段。HTML5浪潮有兩個最大特點：強化 Web 網(wǎng)頁的表現(xiàn)性能，并追加本地數(shù)據(jù)庫等Web應(yīng)用下的功能特性，旨在通過減少瀏覽器對于需要插件（如Adobe Flash、Microsoft Silverlight等）的網(wǎng)絡(luò)服務(wù)需求，提供更多能有效增強Web應(yīng)用的標(biāo)準(zhǔn)集。

圖1

　　HIT FM勁曲調(diào)頻，作為IE 10瀏覽器的深度合作伙伴之一，繼2003年4月開始在北京試播后，于隨后的十年內(nèi)陸續(xù)落地廣州、上海、重慶、南京、天津等城市，作為國內(nèi)唯一一家全天候播出的國際流行音樂頻率，已經(jīng)成為都市時尚人群生活中不可或缺的音樂伴侶。 現(xiàn)在，伴隨著采用新一代HTML5網(wǎng)頁標(biāo)準(zhǔn)打造的全新官網(wǎng)正式上線，實現(xiàn)了包括Live Streaming實時收聽、折頁Parallax視覺效果，以及為觸控而生的沉浸式界面等在內(nèi)的一系列炫酷特性。

　　對此，HIT FM頻率總監(jiān)趙健談到：“在當(dāng)下這個音樂早已被人們視為同空氣、飲水一樣重要的時代，我們急切地需要一個合適的平臺，讓HIT FM官網(wǎng)能夠發(fā)揮出自身的特色與優(yōu)勢，將其從簡單的功能和千篇一律的設(shè)計中解放出來，給600萬聽眾眼前一亮的感覺，以進一步完善網(wǎng)絡(luò)瀏覽器下的電臺收聽體驗。”

　　挑戰(zhàn)：

　　早先的HIT FM官網(wǎng)設(shè)計單調(diào)，功能性較為單一，響應(yīng)效率較低，已經(jīng)無法同HIT FM一直以來動感、時尚、與國際接軌的品牌形象定位相匹配。

　　面對幾乎成為標(biāo)配的多點觸控屏幕和隨之而來的觸控體驗需求，全新的HIT FM官網(wǎng)需要從設(shè)計上就充分考慮到針對用戶觸控操作的優(yōu)化。

　　在如今設(shè)備分辨率異�；靵y的大環(huán)境下，除傳統(tǒng)的臺式電腦外，越來越多的用戶開始使用智能手機、平板電腦等移動設(shè)備來瀏覽網(wǎng)頁，傳統(tǒng)固定樣式的頁面已經(jīng)不能應(yīng)付此類需求。

　　解決方案：

圖2

　　借力于全新的IE 10瀏覽器中對HTML5標(biāo)準(zhǔn)和硬件加速功能的全面支持，改版后的官網(wǎng)只需要128Kbps的極小帶寬就可以進行在線收聽，且相關(guān)軟件工程師們通過將MMS流媒體經(jīng)過轉(zhuǎn)換成為HTML5支持的音頻流媒體格式，并使用HTML5支持的<Audio>標(biāo)簽實現(xiàn)無插件播放功能，使得聽眾在不需要任何瀏覽器插件的條件下即可在IE 10、Safari、Chrome、Firefox等主流桌面或移動平臺瀏覽器上收聽，解決了以在線收聽廣播電臺必須使用WMP插件的問題。

圖3

　　針對觸控操作的優(yōu)化不僅表現(xiàn)在整個頁面上多采用高清大圖和大尺寸圖標(biāo)，還在一些滑動操作和特效的展現(xiàn)上都進行充分地考量，并針對來自不同設(shè)備（智能手機、平板電腦、超極本）的訪問逐一優(yōu)化，以保證不同用戶的統(tǒng)一化完美觸控體驗。同時，IE 10在上一代瀏覽器的基礎(chǔ)上進一步縮減自身界面所占用的屏幕區(qū)域，將窗口及控件所占用的像素面積縮減到0，通過完全沒有邊框、沒有按鈕、沒有輸入欄的設(shè)計，整個瀏覽器窗口完全用于展示網(wǎng)頁內(nèi)容。正是憑借上述的諸多創(chuàng)新設(shè)計，全新HIT FM官網(wǎng)在IE 10中的運行效果仿佛本地應(yīng)用程序一樣流暢，并且沉浸式的界面也使得用戶更加投入于音樂內(nèi)容本身。

圖4

　　在實現(xiàn)流暢觸控操作的同時也在視覺效果上加以提高：例如通過What’s Hot頁面中的折頁和News & Events中的視差效果，在拖動的過程中就給用戶帶來3D般的立體視覺感受，大大增強了交互體驗。在以往的開發(fā)過程中，對于類似特效的實現(xiàn)較為困難，經(jīng)常需要復(fù)雜的代碼和效率較低的Flash插件來完成。得益于IE 10所擁有的硬件加速能力以及對于全新HTML5和CSS3標(biāo)準(zhǔn)的全面支持，網(wǎng)頁工程師采用了CSS3中Transform和Transition變形處理來實現(xiàn)網(wǎng)站的過渡效果，給用戶炫酷視覺體驗的同時也擁有流暢和快速的加載性能。

　　利用HTML5標(biāo)準(zhǔn)及CSS3中的Media Query屬性將頁面實現(xiàn)響應(yīng)式設(shè)計，從此整個版面可為屏幕和分辨率進行適配，向不同用戶提供同樣友好的Web界面，在降低開發(fā)成本的同時使得頁面更具“彈性”，在頁面布局不被破壞的前提下保證不同分辨率的用戶都能得到最佳的瀏覽體驗。

圖5

　　為了進一步保證聽眾的收聽持續(xù)性，相關(guān)工程師采用了HTML5網(wǎng)頁標(biāo)準(zhǔn)中全新加入的History API特性，實現(xiàn)了全站AJAX，當(dāng)用戶在點擊內(nèi)容時，頁面只會加載需要更新的內(nèi)容而不會加載外層不變的框架，同時標(biāo)題欄、地址欄以及前進后退等按鈕也會發(fā)生相應(yīng)變化，和整頁刷新幾無二致，這大大降低了移動數(shù)據(jù)網(wǎng)絡(luò)下的用戶流量消耗。整個過程都不會影響到后臺Live Streaming的實時播放，有效提升聽眾的局部刷新體驗。

　　優(yōu)勢：

　　正如微軟IE部門企業(yè)副總裁迪恩·哈查莫維奇在MIX 11大會開場演講時所說：“本地化的體驗才是最好的體驗。在Windows平臺上通過IE 10的HTML5標(biāo)準(zhǔn)和硬件加速功能，使得瀏覽網(wǎng)頁如同打開本地應(yīng)用程序一樣流暢。”作為HTML5網(wǎng)頁標(biāo)準(zhǔn)的參與構(gòu)建者之一，微軟在全新的IE 10瀏覽器在全新HTML5網(wǎng)頁標(biāo)準(zhǔn)下的運算處理能力，特別是當(dāng)用戶在進行高保真音頻在線播放和網(wǎng)頁游戲時，IE 10瀏覽器具備的強大渲染性能和處理速度前所未有地提升了用戶體驗。

　　作為微軟Windows生態(tài)下的新一代瀏覽器，IE 10為諸如HIT FM一樣的新生代Web應(yīng)用提供了絕佳的展示平臺，能夠讓W(xué)eb App拋開其傳統(tǒng)概念中表現(xiàn)力不足的短板，發(fā)揮統(tǒng)一化、跨平臺的優(yōu)勢，與近年來持續(xù)火爆的本地移動應(yīng)用程序一爭高下。而隨著互聯(lián)網(wǎng)產(chǎn)品移動化的趨勢越發(fā)明顯，Web瀏覽器作為終端上重要的一環(huán)對移動產(chǎn)品有著重要的作用，配合新一代HTML5標(biāo)準(zhǔn)的普及，IE 10正憑借不斷進化的技術(shù)追求，成為微軟移動服務(wù)的重要支點。