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，比如说原来网页代码中很多 <div>会被<article>和<section>等代替，这时候应该是HTML5开始普及的时候了。

相关报道

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