Logicdesign 专访:探寻草莓音乐节网站背后的技术故事

阅读数:2667 2012 年 5 月 10 日

五一假期,喜欢音乐的朋友一定在草莓音乐节享受了一次饕餮大餐,本次草莓音乐节网站首次使用HTML5 技术开发,采用了诸如Parallax 视差滑动效果、H.264 视频背景和Canvas 技术。笔者特别采访到 @Logicdesign 官方 负责此项目的技术团队,以下是访谈的详细内容:

InfoQ:请首先介绍下 Logicdesign?

Logicdesign:Logicdesign( @Logicdesign 官方)是一家设计公司。Logicdesign 顾名思义,我们更看中图形背后的所隐藏的逻辑、内容和观点是否可以得到有效的传播。专注于内容策略、市场传播解决方案方面的研究。比如过去两年,我们为微软 (中国) 6 位 CEO/VP/GM 级别管理层以及超过 10 场的重要产品发布会 / 媒体沟通会提供了内容优化和观点输出。同时我们也帮助很多重要产品比如 Windows 7、IE、Office……的产品以及不同的 IT 类受众,在各个市场传播层面做了非常多的传播工作。草莓音乐节是我们在沉浸式体验上一个全新的尝试。

InfoQ:请做下自我介绍,目前主要负责的工作和在“草莓音乐节”项目中担任的角色?

Logicdesign:Saber Zou(邹颂兵),项目总监,我主要负责在线项目,包括项目的前期创意策划,执行和质量控制等。在草莓音乐节这个项目中,整个创意开发团队包括我,Hory (张昊,负责项目沟通执行),Logicdesign 设计团队(林媛、哈达、薛凯),以及 Alex Wang(王怀远,负责开发)。

InfoQ:请介绍一下草莓音乐节网站建设的背景?使用 HTML5 技术带来了哪些改变和提升?

Logicdesign:微软 IE9 推出一年时间,在市场获得了很好的反响,但是国内由于历史原因,一方面旧版 IE 仍有不少消费者在使用,另一方面由于国内企业对 HTML5 这一未来发展趋势并没有太多认知,使得其在商业领域的应用更是凤毛麟角,微软一直希望通过和一些具有影响力的品牌合作,以推进国内 HTML5 的普及和发展,让更多人了解 HTML5 的优势和在商业上可以带来的价值。其实这种跨界的合作在国外已经很常见,著名的 SWSX 音乐节就已成为 IT 界的一个盛会。而草莓音乐节正是国内最有影响力的一个音乐节,微软 IE9 选择跟它合作,也正是希望双方不但在 HTML5 方面有所合作,更是品牌层面的相互促进,艺术和科技的结合是一件很有意思的事情。

草莓音乐节的网站运用 HTML5 进行开发带来了几个层面的改进:

  • 首先是交互体验上的提升。以前的网站仅仅是简单地把音乐节的信息简单的罗列,而现在这个网站给人一种故事的感觉,通过鼠标滑动,登陆草莓星球,查看信息,整个过程变得更加有趣,用户可以参与其中;
  • 第二是跨平台的完美体验。它不需要任何插件就能让平板体验到像 PC 上一样的浏览效果,不像目前很多 Flash 的商业推广案例,因为硬件对 Flash 的不支持,而导致在平板上无法浏览;
  • 第三是整个网站更加轻盈,即便是嵌入了视频背景。由于 HTML5 不需要插件就原生支持 H.264 编码视频,不但保证了速度,也大大降低浏览器因为插件问题而导致的崩溃。

InfoQ:草莓音乐节网站采用的主要技术有哪些?

Logicdesign:草莓音乐节网站主要采用了 HTML5 的文本标记,JavaScript 控制的 Parallax 效果(视觉差,不同层次的元素按照不同的速率位移),H.264 视频背景和 Canvas 绘图,就是网站最后一部分移动的星空,整个背景是 Canvas,而上面的星星都是即时运算画出来的。

InfoQ:您认为设计优良的网站应该具备的特质有哪些(请列举三点)?

Logicdesign:主要分为以下几点,

  • 清晰简洁的信息架构。用户每天在网站接触到的信息是海量的,他们对很多网页内容都不是在认真的阅读,而仅仅是 skim,所谓的“扫视”的形式,这就需要尽量简洁和逻辑性强的信息架构,什么信息更重要要突出,什么信息无关紧要要去掉,什么内容是需要用户第一时间了解的,什么内容可以让用户去自己探索的,不同内容区块之间的主次逻辑等,都需要认真考虑,信息安排上有主有次,让用户一眼就能了解大致内容,这是良好用户体验的第一步;
  • 好的内容和经过斟酌的文案。这一点其实被很多人忽视。互联网发展到今天其实很多技术上的呈现并不是问题,而一个网站(除了 Web Application)总是需要向受众展示,告知或者宣传某些东西,让用户愿意花时间去了解就需要在内容上花功夫,这里的内容包括页面上的每一句话,每一张配图,这和我提到的第一点也是紧密相连的,如果内容足够吸引用户是愿意花时间停留的,甚至是再次回来;
  • 良好的视觉和交互设计。任何东西都是经过设计的,但优秀的设计和交互会让人感觉不到设计的痕迹,因为很自然地让人觉得这就是这样的。就像是草莓音乐节的网站,整个体验过程只需要用户向下滑动鼠标滚轮,这时最普遍和普通的交互方式,不需要用户去思考,也不会变得做作。

InfoQ:用到了哪些主要的 HTML5 API 或开发框架,请分享下使用的感受(如采用 Parallax 视差滑动效果、H.264 视频背景、Canvas 等)?

Logicdesign:这个网站主要使用了 HTML5 标记,Canvas API,H.264 解码的视频。其实 HTML5 还有很多很多 API,而且还有 CSS3 和一些强大的 JS Library 可以实现很多不同的效果,我们仅仅使用了很少的一些,但是效果也是显而易见的。我们觉得目前 HTML5 优势很多,但一个很让人头疼的问题还是不同浏览器之间的兼容测试,当然现代的浏览器(支持 HTML5)在呈现上不会有太大差异了,但很多小的地方,如元素的位置,JavaScript 的执行效率,音频格式的不统一等都是需要做优化的。

InfoQ:请分享下您对沉浸式跨平台设计体验的理解,目前在 Logicdesign 的项目中得到了哪些应用?

Logicdesign:沉浸式跨平台体验是一个趋势,这个体验主要是让用户充分享受内容,界面元素不成为阻隔阅读和浏览的障碍。比如说最新的 Internet Explorer 9 和 Chrome 等浏览器边框都简化到了极致,让用户完全关注网页内容本身,而这些想法也会越来越多地迁移到其他平台和应用中。比如说苹果 Mac 中的全屏应用模式和即将到来的 Windows 8 Metro 界面,都是这个思路。为什么会是这样的趋势呢?其实跟我前面谈到的“内容为王”是分不开的,无论技术怎么变化,人们获取高质量内容的需求是始终不变的,反而随着信息的爆炸式增长而更加需要简单无阻隔的体验。这个理念其实就是我们 Logicdesign 的一个设计原则,无论是平面还是在线的项目,我们都希望用户首先关注的是内容本身,这就需要我们去研究和挖掘有意思的内容和信息,分清主次,我们反而不会特别在意呈现的方式。

InfoQ:我们看到了在官网上很醒目的 IE9 图标,请介绍下在草莓音乐节的项目上 IE9 担任着怎样的角色?

Logicdesign:IE9 是这一界草莓音乐节的合作伙伴,主要在网站方面为草莓音乐节提供一个酷炫的体验。IE9 还在国内和 adidas Origianls 三叶草合作推出了一个推广网站( info.msn.com.cn/adidasoriginals )以及在全球范围内推出了众多 HTML5 体验(详情可以查看 www.beautyoftheweb.com

InfoQ:在对 HTML5 技术的支持上,您认为 IE9 在哪些地方的支持最有帮助?

Logicdesign:IE9 其实是微软一款非常有诚意的产品,由于历史原因(盗版 XP,IE 内核浏览器的普及等等),IE6、7 等旧的浏览器在国内仍然占据很大一部分份额(可以参考 www.theie6countdown.cn ),  而这些老版本的浏览器对于新技术如 HTML5 是不支持的,速度慢,安全性也会有问题,但是市场份额在,网站就还是会为他们兼容,导致国内的前端开发举步维艰,增加开发的难度和成本,用户体验也没有任何的提升。而 IE9 一改 IE 品牌给人慢、落后的印象,从根本上采用了硬件加速功能和新的 JavaScript 引擎,浏览速度和图形渲染方面的表现非常优秀,也支持大量 HTML5 最新标准,这些特点都让我们的开发带了很大的方便。特别是 IE9 的硬件加速,让我们的开发人员放心地在页面嵌入大量图形、视频和动画而不用担心浏览起来会卡的问题,因为与其他浏览器不一样,IE9 可以让 CPU 和 GPU(显卡)协同工作,CPU 来执行程序代码,而 GPU 来渲染图形文字和视频等,效率更高。所以我们大量采用这些甚至不进行特殊优化,也不用担心在 IE9 上面会不顺畅。

InfoQ:如何看待 HTML5 的发展,您认为 HTML5 在未来还有哪些创新的应用,例如在商业设计领域?

Logicdesign:HTML5 是未来的发展方向这是毋庸置疑的,特别是随着移动设备的不断发展,HTML5 的跨平台优势会越来越突出,让开发者真正可以一次开发实现在多个设备和平台上使用,而不必过分担心兼容性问题。目前 HTML5 还是 W3C 组织的一个草案,主流浏览器对它的支持也不完全一致,另外目前还没有比较全面的专门针对 HTML5 的开发工具,这些都对 HTML5 的发展造成一定的阻碍,但是我相信随着各大科技巨头的推动(微软,Apple 和 Google 等)和目前移动设备的发展势头,会有越来越多的开发人员考虑使用 HTML5 来进行开发。

未来 HTML5 的应用反而会越来越注重细节,目前 HTML5 是一个很火的商业概念,很多网站采用 HTML5 主要是为了显示技术的酷炫呈现,而并没有考虑太多 HTML5 作为网络文本标记语言本身的意义(更具备语义识别性的网络标记语言),未来大家还会看到更多类似草莓音乐节这样 Cool 的网站,但是也会有越来越多的网站抛弃旧版(HTML4.0)的标记方式,而采用 HTML5,比如说原来网页代码中很多 <div> 会被 <article> 和 <section> 等代替,这时候应该是 HTML5 开始普及的时候了。

相关报道

草莓音乐节官网之HTML5 技术剖析


给 InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ )或者腾讯微博( @InfoQ )关注我们,并与我们的编辑和其他读者朋友交流。

收藏

评论

微博

发表评论

注册/登录 InfoQ 发表评论