优秀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 程序，用来简化您的开发测试工作。试试身手吧！