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

五一假期，喜欢音乐的朋友一定在草莓音乐节享受了一次饕餮大餐，本次草莓音乐节网站首次使用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，比如说原来网页代码中很多

会被

和

等代替，这时候应该是 HTML5 开始普及的时候了。

相关报道

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

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