BT

如何利用碎片时间提升技术认知与能力? 点击获取答案

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

| 作者 贾国清 关注 0 他的粉丝 发布于 2012年5月11日. 估计阅读时间: 12 分钟 | GMTC大前端的下一站,PWA、Web框架、Node等最新最热的大前端话题邀你一起共同探讨。

五一假期,喜欢音乐的朋友一定在草莓音乐节享受了一次饕餮大餐,本次草莓音乐节网站首次使用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账号 或者 才能进行评论。在您完成注册后还需要进行一些设置。

获得来自InfoQ的更多体验。

告诉我们您的想法

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

... by 张 鑫

要是win xp也支持ie9就好了

可用性不好 by 田 美嘉

试了一下,用了不到3分钟,网页就崩溃了
可用性应该是最基础标准,不可用,其他都白搭

感觉挺一般 by dou zhaojian

着重强调html5有什么特色,网站体验很一般!!!

Re: 感觉挺一般 by biao jiang

我基本上没看到啥html5特效

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p

当有人回复此评论时请E-mail通知我

4 讨论

登陆InfoQ,与你最关心的话题互动。


找回密码....

Follow

关注你最喜爱的话题和作者

快速浏览网站内你所感兴趣话题的精选内容。

Like

内容自由定制

选择想要阅读的主题和喜爱的作者定制自己的新闻源。

Notifications

获取更新

设置通知机制以获取内容更新对您而言是否重要

BT