微软IE 10与HIT FM 打造全新HTML5官网

　　作为用于取代1999年所制定的 HTML4.01的下一代HTML标准版本，当前的HTML5标准正处于一个高速发展阶段。HTML5浪潮有两个最大特点：强化 Web 网页的表现性能，并追加本地数据库等Web应用下的功能特性，旨在通过减少浏览器对于需要插件（如Adobe Flash、Microsoft Silverlight等）的网络服务需求，提供更多能有效增强Web应用的标准集。

图1

　　HIT FM劲曲调频，作为IE 10浏览器的深度合作伙伴之一，继2003年4月开始在北京试播后，于随后的十年内陆续落地广州、上海、重庆、南京、天津等城市，作为国内唯一一家全天候播出的国际流行音乐频率，已经成为都市时尚人群生活中不可或缺的音乐伴侣。 现在，伴随着采用新一代HTML5网页标准打造的全新官网正式上线，实现了包括Live Streaming实时收听、折页Parallax视觉效果，以及为触控而生的沉浸式界面等在内的一系列炫酷特性。

　　对此，HIT FM频率总监赵健谈到：“在当下这个音乐早已被人们视为同空气、饮水一样重要的时代，我们急切地需要一个合适的平台，让HIT FM官网能够发挥出自身的特色与优势，将其从简单的功能和千篇一律的设计中解放出来，给600万听众眼前一亮的感觉，以进一步完善网络浏览器下的电台收听体验。”

　　挑战：

　　早先的HIT FM官网设计单调，功能性较为单一，响应效率较低，已经无法同HIT FM一直以来动感、时尚、与国际接轨的品牌形象定位相匹配。

　　面对几乎成为标配的多点触控屏幕和随之而来的触控体验需求，全新的HIT FM官网需要从设计上就充分考虑到针对用户触控操作的优化。

　　在如今设备分辨率异常混乱的大环境下，除传统的台式电脑外，越来越多的用户开始使用智能手机、平板电脑等移动设备来浏览网页，传统固定样式的页面已经不能应付此类需求。

　　解决方案：

图2

　　借力于全新的IE 10浏览器中对HTML5标准和硬件加速功能的全面支持，改版后的官网只需要128Kbps的极小带宽就可以进行在线收听，且相关软件工程师们通过将MMS流媒体经过转换成为HTML5支持的音频流媒体格式，并使用HTML5支持的<Audio>标签实现无插件播放功能，使得听众在不需要任何浏览器插件的条件下即可在IE 10、Safari、Chrome、Firefox等主流桌面或移动平台浏览器上收听，解决了以在线收听广播电台必须使用WMP插件的问题。

图3

　　针对触控操作的优化不仅表现在整个页面上多采用高清大图和大尺寸图标，还在一些滑动操作和特效的展现上都进行充分地考量，并针对来自不同设备（智能手机、平板电脑、超极本）的访问逐一优化，以保证不同用户的统一化完美触控体验。同时，IE 10在上一代浏览器的基础上进一步缩减自身界面所占用的屏幕区域，将窗口及控件所占用的像素面积缩减到0，通过完全没有边框、没有按钮、没有输入栏的设计，整个浏览器窗口完全用于展示网页内容。正是凭借上述的诸多创新设计，全新HIT FM官网在IE 10中的运行效果仿佛本地应用程序一样流畅，并且沉浸式的界面也使得用户更加投入于音乐内容本身。

图4

　　在实现流畅触控操作的同时也在视觉效果上加以提高：例如通过What’s Hot页面中的折页和News & Events中的视差效果，在拖动的过程中就给用户带来3D般的立体视觉感受，大大增强了交互体验。在以往的开发过程中，对于类似特效的实现较为困难，经常需要复杂的代码和效率较低的Flash插件来完成。得益于IE 10所拥有的硬件加速能力以及对于全新HTML5和CSS3标准的全面支持，网页工程师采用了CSS3中Transform和Transition变形处理来实现网站的过渡效果，给用户炫酷视觉体验的同时也拥有流畅和快速的加载性能。

　　利用HTML5标准及CSS3中的Media Query属性将页面实现响应式设计，从此整个版面可为屏幕和分辨率进行适配，向不同用户提供同样友好的Web界面，在降低开发成本的同时使得页面更具“弹性”，在页面布局不被破坏的前提下保证不同分辨率的用户都能得到最佳的浏览体验。

图5

　　为了进一步保证听众的收听持续性，相关工程师采用了HTML5网页标准中全新加入的History API特性，实现了全站AJAX，当用户在点击内容时，页面只会加载需要更新的内容而不会加载外层不变的框架，同时标题栏、地址栏以及前进后退等按钮也会发生相应变化，和整页刷新几无二致，这大大降低了移动数据网络下的用户流量消耗。整个过程都不会影响到后台Live Streaming的实时播放，有效提升听众的局部刷新体验。

　　优势：

　　正如微软IE部门企业副总裁迪恩·哈查莫维奇在MIX 11大会开场演讲时所说：“本地化的体验才是最好的体验。在Windows平台上通过IE 10的HTML5标准和硬件加速功能，使得浏览网页如同打开本地应用程序一样流畅。”作为HTML5网页标准的参与构建者之一，微软在全新的IE 10浏览器在全新HTML5网页标准下的运算处理能力，特别是当用户在进行高保真音频在线播放和网页游戏时，IE 10浏览器具备的强大渲染性能和处理速度前所未有地提升了用户体验。

　　作为微软Windows生态下的新一代浏览器，IE 10为诸如HIT FM一样的新生代Web应用提供了绝佳的展示平台，能够让Web App抛开其传统概念中表现力不足的短板，发挥统一化、跨平台的优势，与近年来持续火爆的本地移动应用程序一争高下。而随着互联网产品移动化的趋势越发明显，Web浏览器作为终端上重要的一环对移动产品有着重要的作用，配合新一代HTML5标准的普及，IE 10正凭借不断进化的技术追求，成为微软移动服务的重要支点。