互动设计:鲜为人知却让网站屡获殊荣的秘密

2016/12/09

website-design-academy-awards-1

编者按:现在很多人都没听过互动设计了,它和交互设计不同,不过当年它可是红极一时,大部分包揽网站的“奥斯卡奖”的秘密就在这里。今天由互动设计的前辈@苏哲 来给大家介绍什么是互动设计,为什么要那样做网站以及互动行业的兴衰史。涨姿势走起!

FWA相当于互动网站的奥斯卡,由Rob Ford创立Group94设计制作,自2000年起开始收录全球最优秀的网站作品,是世界范围内极具权威网站评奖平台,这几乎是所有互动人的梦想。大家熟知的灰昼前辈,就曾是获得过FWA 金奖的大神,来这儿看他的访谈:《优设访谈!灰昼:从非科班生到首席美术总监的15年设计路》

  1. 互动设计是什么?
  2. 为什么要这样做网站?
  3. 行业教育现状
  4. 以及国内互动业的发展兴衰历程(什么?还没介绍已经衰了吗……其实并没有,只不过好多老互动前辈已经在被拍沙滩上,后文详述)

01 什么是互动设计(Interactive Design)

听上去很类似现在互联网行业时髦的交互设计(IxD)、用户体验设计(UE/UX),但互动设计是侧重点完全不同的另一个领域。

在此我并不想搬很多概念来解释,容易混淆,只从国内招聘的职能要求来说明一下。

主流互联网公司对交互设计师要求如下:精通UI界面设计,但更重要的是深入关注和理解用户体验以及易用性,可熟练运用产品原型图、流程图表达产品方案,举个例子:

uisdc-website-201612095

主流广告公司对互动设计师的要求为:可以理解各种天马行空的创意概念,设计出独特新奇、精彩有趣的互动体验,关注互动网站的体验趣味、实时交互及用户连接等。

静态的例子不太能表达,我就援引一下优秀互动设计师的DEMO:

uisdc-website-201612096

体验链接 – OXIK | Monalisa
作者 – Masayuki Kido,互动业早期的技术标杆,受邀于Adobe开发者大会做演讲嘉宾

优秀的互动设计师更像设计师和程序员的结合体,十分稀有。对他们来说,互动业是一个极具想象空间的事业,关联的领域非常广泛。从早期的矢量动画、3D动画、脚本编程开始,发展到现在的图形学、三维、全景、面部识别、声音识别等等。只要创意十足,能带给用户体验的冲击,都可以制作成互动网站作品,引领潮流并让客户埋单。

例举一家世界上最杰出的互动制作公司之一:MediaMonks,目前FWA名人墙的首位(Google Creative Lab也在其中,排名第八),官方介绍如下:

uisdc-website-201612092

他们这样定义自己 – 广告代理公司和知名品牌的“创意制作合伙人”,将概念、策略、IP转化为获奖级别的互动网站、影视、内容以及产品平台。

uisdc-website-201612097

这是他们的作品集视频 – Mediamonks Mixtape VoI.I

02 解读丨为什么网站要这样做?

我将以此例做详细解读。

uisdc-website-201612094

网站链接 – http://resn.co.nz/

这是RESN互动公司的官网,他们也是FWA的常客,以技术先进和创意丰富为著称。可以注意一下他们网站的标题:

Infecting your screen for your enjoyment
为你的愉悦而感染你的屏幕

概括非常精髓,他们创造的东西像细菌感染一样具备令人无法抗拒的能力,带给用户体验上的乐趣。

这就是第一个层面(I):通过精彩的互动体验,影响到用户,使其沉浸其中。说直白一点就是酷炫!

大部分人看到这个互动作品都会情不自禁:哇!先不论作者想表达什么,我都是服气的。

再深入一层(II):

网站一打开,是一颗钻石模样,这究竟是什么呢?按照提示触摸并按住(Touch & Hold),钻石颤动直到爆裂,出现了万花筒模样的画面。

uisdc-website-2016120910

我姑且以自己的共鸣来解释一下:我们不仅外表像华丽,而且内在更加丰富,震撼用户的方式,绝不只有一种。

传递深意却无需一字一句,全凭用户共鸣,这正是高超的表达技巧 – 互动作品可以用来当作表达自己的工具,并收获共鸣。这也正是商用广告之所需,抓住用户眼球目的是要表达广告主的诉求,传递品牌价值。

第三层(III):体现制作者具备业界最先进的技术水平以及设计能力。比如这颗钻石一样的东西,对于普通网页开发者来说,是做不到的。

uisdc-website-2016120914

想实现这种效果:

  1. 需要使用H5支持的三维标准 – WebGL
  2. 需要掌握三维建模 – 钻石模型(或许实现原理是程序生成的模型,但我觉得至少会有软件建模作为参考,或者提供模型数据)
  3. 需要掌握实时镜面材质 – GLSL(使用电脑或手机GPU硬件计算特效渲染输出)

接下来,一个球和一个圆柱要表达什么呢?

uisdc-website-201612093

这是三维物体的碰撞检测,也就是做物理模拟的基础,用于判断在三维空间里一个物体的边缘或Bounding Box,是否与另一个物体有接触。这个需要比三维模型展示更深入一层的研究,更能说明作者的研发能力(不然他们也不会将其选为代表作)。

其他的DEMO不赘述了,如果我是这家公司的老板,拿着这样的作品,足以展现高超设计&技术水平,轻而易举征服客户。

总结一下,一个好的互动网站是艺术和技术的完美结合的作品,可以传染用户获得共鸣。
于我,从事互动这么久,其实并没有太多其他的原因,就是因为想做出更多这样的作品。

03 发源

最早一批网页制作的开发者都经历过网页三剑客时代(Flash/Dreamweaver/Fireworks),当时这些工具都在Macromedia旗下,还没被Adobe收购。

互动网站的发源,正是基于Flash多媒体插件提供的动画能力和用户交互能力。Flash技术出现后发展很快,插件在各大浏览器广泛普及,网站便有了各种形式的互动可能。而将整个网站以全Flash的互动形式表现,是由美国和日本创造的流行,并传向世界。

国内Flash大热始于2005年前后,当时有一种种时髦的职业叫“闪客”,比较有名的是“小小”的火柴人动画和互动小游戏,是当年国内最先进的闪客作品,下图是《第八部》终极代表作品,我可以断言:现在很多Flash动画师依然无法用矢量做出三维的镜头感。

uisdc-website-201612099

视频链接 – http://v.youku.com/v_show/id_XNjA1OTU1MTI==.html

闪客时代国内对Flash的理解大多为动画工具,最多也只是为现有的网站加点动画,但相对水平不高。我对互动网站认知的三观被刷,是因为看到了当年最顶尖的高手:

2advanced Studio

uisdc-hb-20161209

被收录32个作品的2A几乎是当时互动业的代言人,也是Adobe公司的设计合作伙伴。

其中的

2advanced V4 Prophecy (2006)

uisdc-website-2016120915

这个作品在当时风靡一时,引领了全球互动网站潮流,同时对Flash开发工具的推广也起到了巨大的推动。虽然整体风格可能有些过时了,但我觉得就其设计和动画水平来讲,哪怕是现如今十年后的设计师,仍然不容易模仿。十分可惜在线的版本已经找不到了,2A官方也删除了存档。

我在校时也正是因为对这个公司的崇拜,才立下职业梦想,在电信or互动中选择了后者。

04 教育

前面提到过,互动是艺术和技术的结合体,但由于国内教育体系将理工和艺术的界限划分的很清晰,对于懵懂的学子来说,就算有意识走向互动设计的道路,也基本上没有土壤。

正所谓立志容易成志难,我自己就是这么一个例子,起朝着这条路走过来相当不易。眼睛盯着2A立志,但不知从何入手,当年能找到的书本知识基本上是空白,其实现在也比空白好不到哪去。10本Flash书籍里大概只有1本能看,绝大部分都是为了追赶潮流的吸金科普读物。比如教你做一个小鸡吃米的渐变过渡动画,一本书就过去一半了,这种怎么可能做出2A级别作品啊!

我还记得,在校时学过多媒体设计课上,一位的女教师在制作类似“小鸡吃米”的Flash动画时,动作不受控制,导致小鸡的脑袋不慎掉在地上,引来哄堂大笑。当时还是我上去手把手调好为她解决的尴尬。

我在大学里都是靠自己的想法来自学,动画、脚本、3D建模、渲染技术等等。毕业设计是一个可交互的3D手机展示,用自己的手机Dopod C858(很自豪的说,那是在校时为企业制作互动网站赚钱买的,5500大洋)进行建模再加载到Flash,可以进行手机开合、菜单交互等操作模拟。

以上为我亲身经历的国内教育现状,现如今可能有所改善。而经过跟国外的朋友咨询,美国大学很多都有专门的互动艺术设计专业。

纽约的NYU ITP(Interactive Telecommunication Program),Parsons DT(Design and Tecnology),SVA Computer Arts,鸣谢@黄瓜

还有加州极富盛名的是CIA New Media,由迪士尼投建为好莱坞培养顶尖动画及新媒体人才。还有德国ZSMD,瑞典UMEA Institute of Design等等,鸣谢留学建筑的小表妹。

互动领域教育差距可见一斑,而这也更使我一路走来坚信自学可以成才。有人帮你时,就珍惜学习的机会;没人帮你时,就自己多看多想多研究。

总之,

路是你的,不能让它停下。

05 兴衰

随着Flash的更新换代,互动业在Web2.0的PC时代取得了长足的发展。当时,人人网、开心网大热,似乎包括阿姨妈妈等所有人都在电脑上“偷菜”。大家对网页上可以玩游戏达成了共识,也变成了习惯。

那个时代,是Flash最好的时代。

随着Flash技术的发展,每一个版本增加新的功能特性,互动人就为之振奋。我对互动行业认知的升华,就是在这个阶段。

我通过对FWA网站的分析,技术资料收集,案例代码学习,广泛扩展了互动领域的眼界,研究了基本上Flash技术可达到的所有艺术表现形式,以及功能特性:三维原理及构建(自制三维引擎)、模型互动、全景、语音识别(DTW、HMM、MFCC)、音频波形频谱分析与表现、MIDI、物理碰撞模拟、流体模拟、图像表现、图像识别、摄像头动作捕捉、AR识别、多人实时互动、GPU渲染等等等等。

其实目前的HTML5,很多方面的标准和性能依然达不到Flash的水准。虽然我对某些特定领域不精深,只达到理解原理和基础应用的层面,但这足以建立我对互动事业坚实的信心。

互动作品除了技术,还有设计和动画,我感觉自己非常幸运,毕业后第一份简历就入对了公司,结识了上海互动圈子的第一批互动人才,每个人都可以称作我的导师。

Manson,当年我在华扬联众广告公司的创意主管 – 国内FWA收录作品第一人(2005)

uisdc-website-2016120911

北邦 – 当代新锐艺术家,当年我在知世营销(现已被Aegis收购,更名isobar)的互动美术指导,被FWA两次作品收录(2005、2007)。

uisdc-website-2016120913

uisdc-website-201612091

回首当年跟着他们混的日子,是我职业生涯最幸运的时光,也是我现在依然选择互动业并无悔坚持的巨大动力,我希望把各位大神们的奇迹传承下去。

正所谓时移势易,成败萧何,很可惜Flash没能坚持到最后。

移动互联时代网悄然而至,用户习惯从PC大界面赚到了手机的方寸间,加之苹果拒绝Flash,安卓的Flash也并不像PC时代那么普及,Flash迅速衰落了,互动业也发生了巨大的震荡。最直接的表现就是:互动业公司接不到活了。

大浪淘沙,就像2.0时代最火的人人、开心网没有把握移动互联网的机遇纷纷衰败,转型脚步落后的互动公司也逆流而逝,很多互动设计师都被迫找寻新的方向。

那一批曾经辉煌的“闪客”,消失了。
那一批曾经名噪的互动人,转行了。

据了解圈内朋友有的去做APP,有的去做智能硬件,有的去创办互联网平台,其实我的确也在互动业最困难的时代,选择了去腾讯闭关修炼。学前端优化、学后台架构、学运维安全,我也逐渐的发现,缺少了这些素质,也无法做好最优化的互动网站,再次深感幸运。

有些人在责怪Adobe,责怪这个时代。但其实Flash死了并不可怕,Flash带来的互动精神依然活着,动画表达依然活着,三维互动依然可以应用于WebGL,图形识别依然可以应用于后台开发。非要要责怪的话,其实只能责怪自己不够努力,才错过了Flash提供过的,打开眼界的机会,提升各方面能力的机会。

如果知乎能插音乐,我一定会放这首做背景:

被遗忘的是

那些放开手的人

被遗忘的是

放开手的人

因为不甘被遗忘,

因为有梦还没做完,

我选择重整行囊,

继续互动之路……

06 结尾

最后,谢谢所有耐心读到这里的朋友们,作为一个互动人,我充满感激。

希望这篇文章不只是记录一个互动业的幸存者,而是可以唤起更多国内有志的伙伴可以跨入互动,让梦想启程,让中国的互动行业早日回归世界舞台。

另外,不知有没有在互动设计路上,有兴趣做很酷的网站,或半路感到困惑的同学,可以私我进个群,抱团取暖,同舟共济。

最最后,想以自己的拙句做结:

梦里南柯,且无痕,浮生若是;

生非苦短,知天命,则无所怠。

此致

「优设名师专访系列」

1、曾任腾讯大粤网设计主管的跨域达人:《优设访谈!腾讯设计师米田的设计之道与成长之路》

2、没有听过冯叔的设计师不是好设计师:《优设访谈!著名设计师冯铁的设计思考与经验之谈》

3、前端重构视觉交互无一不精的设计师:《优设访谈!腾讯高级交互设计师C7210的十年设计路》

4、非议不断前行不止,用心的设计团队:《优设访谈!国内知名设计团队专访之滴滴DISIGN》

5、前网易现阿里写的书是交互领域必读:《优设访谈!阿里交互设计专家刘津的设计管理之路》

6、职业路径最为清晰的科班交互设计师:《优设访谈!LBE安全大师产品总监晓生的职场进阶之路》

7、能靠脸吃饭偏偏不的设计界「鹿晗」:《优设访谈!阿里资深设计师的自学设计之路》

8、300多人的百度设计团队该如何运转:《优设访谈!国内知名设计团队专访之百度大UE》

9、百度上海团队负责人的非科班设计师:《优设访谈!百度设计大咖JJ YING的自学成才之路》

10、他带的学生已经是国内的设计大咖了:《优设访谈!灰昼:从非科班生到首席美术总监的15年设计路》

11、设计的产品有几亿人在用的非科班生:《优设访谈!腾讯电脑管家视觉负责人张晓翔的UI自学之路》

12、英雄联盟穿越火线天天爱消除都有他:《优设访谈!腾讯游戏Tgideas团队设计总监李若凡的十年设计路》

13、高考一百多分现任UC艺术指导的大神:《优设访谈!小火:从非科班生到UC艺术指导的励志设计路》

14、可能是颜值最高的全能设计师网红咯:《优设访谈!锤子科技设计总监罗子雄的全能自学之路》

原文地址:https://zhuanlan.zhihu.com/p/24148329

2016uisdc-classroom-new

【优设网 原创文章 投稿邮箱:yuan@uisdc.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量180万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:http://www.uisdc.com/website-design-academy-awards

界面设计 HTML5 素材 交互设计师 好文 UI 用户体验设计 转场动效 设计师专访 设计师 排版布局 扁平化设计 设计规范 素材下载 视觉设计 职场 产品设计 设计趋势 配色 web前端开发 海报设计 AI教程 字体下载 设计理论 动效设计 神器下载 图标设计 psd下载 logo设计 神器推荐 ICON 职场规划 App设计 酷站推荐 字体设计 交互设计 ui设计 用户体验 设计师职场 优秀网页设计 酷站 ps技巧 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里