2013年6月21日,2013中国交互设计体验周在杭州浙江省人民大会堂隆重举行,微软亚洲互联网工程院首席用户体验总监梁山鹰为大家带来题为《双剑合璧:设计与技术》的精彩演讲。
梁山鹰:现任微软亚洲互联网工程院首席用户体验总监,致力于必应搜索的用户体验中国本土化。本科毕业于北京大学广告学专业,毕业后赴美在California College ofthe Arts获得设计硕士学位。之后在硅谷地区从事互联网用户体验十余年,回国前主管雅虎全球首页用户体验设计。
微软亚洲互联网工程院首席用户体验总监梁山鹰
以下为演讲实录:
童慧明:刚才蔡明先生在最后给大家传递了好消息,这是中国的设计团队能够站到世界最高的境界里面非常标志性的事件!祝贺联想的设计中心!下面请出今天第三位讲者,来自微软亚洲互联网工程院首席用户体验总监梁山鹰先生!梁山鹰先生在北京大学完成了他的广告学学位之后,在美国的CCA读完了设计的硕士,然后在硅谷从事了十多年的跟交互设计有关的工作,回国之后加盟了微软,主要在负责必应用户研究和设计体验,他今天演讲的主题是《双剑合璧:设计与技术》。
梁山鹰:非常高兴来到这里和各位分享。简单介绍一下自己:我叫梁山鹰,水浒梁山的梁山,老鹰的鹰,出生在北京,然后在北京读了本科,从香港到旧金山去读硕士,前年回到了北京,现在在北京的微软亚洲互联网工程院在用户体验设计团队担任设计总监的职务。今天想和大家分享的是关于设计和技术之间的关系。既然讲到了设计和技术,我想先拉远一点,先分享一下历史上关于设计和技术的关系。
其实这两个词在历史上来说,并不是等同的。设计是属于一个从属的地位,有点像工业社会压迫妇女的感觉,有什么样的技术才有什么样的设计,设计一直是跟随着技术。
(PPT图示)如果大家对艺术史很熟悉,这就是法国西南部发现的拉斯科洞窟壁画,距今已经15000年。大家可以看到这样一种非常好看、但受限于当时的技术,只能做这样的设计。
(PPT图示)这个是一个艺术品雕版印刷的《金刚经》,是中国唐朝——公元868年的时候。一直到唐朝的时候,技术才有所突破,才出现了现在看起来非常漂亮的《金刚经》的艺术。
(PPT图示)这是每个人都知道的活字印刷,中国的毕昇发生了活字印刷。中国人非常自豪发明了活字印刷,但是,对西方人来说有不同的见解。他们承认是中国人最先发明了活字印刷,但他们更推崇的是约翰内斯·谷登堡发明的西方活字印刷,他没有参考中国,而他的发明知识普及到了各个阶层和层面。现在大家看到的实际上是一个铜版画的画像,这个技术也在当时被发明。版画的技术在当时发明,他们的工作环境大概是这样的。如果各位早出生几百年,这就是各位几百年前的样子。有了印刷的技术,然后也有了版画的技术,第一份报纸就应运而生。
(PPT图示)这个德国已知的第一份报纸,一般来讲就是讲《第一份报纸》,印刷术其实是一个行业发展了几百年。但是在几百年的过程中,设计师其实很少有机会去投入到印刷技术本身的领域里面去。所以,很少有看到说发生这些的本身是设计师,在当时的情况下很难想象一个平面设计师去了解真正排版技术里面的一些问题。另一方面,如果看看《纽约时报》,左边是公元1918年的一些版面,一直到公元2001年的版面,可以发现一些改变。可以看到,《时代》杂志大半个世纪之前蒋介石是封面,半个世纪之后是乔布斯的封面,没有太大的变化。
实际上,技术与设计什么时候慢慢接近呢?其实是近二三十年的技术,是因为互联网和计算机的发展。互联网和计算机和以往有不同,在于它的可应用性和操作性,任何人都可以去了解、掌握、运用,首当其冲就是苹果公司,虽然我是来自微软的,但不可否认,苹果公司做得很早,这是1984年苹果出版的产品。1994年,杨致远推出了雅虎,1993年Mark Andreessen给W3C写了一份信,当时没有这样的规范。他写了一封信给W3C,他们有很多档案,很多专家开始讨论说,所有的tag都有开始和结束,但他提出的规范并不符合当时所有权威的想法。最后这位大学生就说你们该干嘛干嘛去,我会用我自己提出的规范。所以,这个大学生本身不是设计师,他是一个程序员,他这个行为在当时互联网行业里面起到了带头作用,在互联网发展到一定程度的时候,任何人都可以和互联网相互建立联系,即使不是权威,也可以挑战权威。
(PPT图示)这是当时90年代的一些网页设计,跟现代不可比拟,但在当时的情况下设计师也根据已有的技术提出了很多新的想法,比如说所有的图像都被切割出来到每个页面去。
(PPT图示)这是我大学的时候做的一个设计,并不是想说这个设计有多好。这个特别有意思,如果鼠标点上去,会有一些效果。我深深记得在那几个晚上,我上网去找这样的资料有什么样的技术可以有这样的效果,做出来之后非常有成就感。我当时也不是学设计和技术的,自己做出来这样的东西之后感觉特别牛。到了21世纪的时候,更多的设计师参与了推动的作用。
由于当时的一些技术问题,写出来的代码就会出现很多的问题,后来Douglas Bowman写出了一个程序,他不是一个技术人员,但解决了很多技术人员都没有办法解决的问题。当时CSC都没有成为一个规范,很多公司说希望制定这样的规范,希望W3C可以批准。当时他们希望可以推动一个javaScript Style Sheets的标准,一半是开发人员,一半是设计师,幸亏有设计师,他们认为自己只是想要一个简单的、可以操作的,所以没有通过。到了2007年年,网络字体应运而生,网络字体在印刷里面想用什么字体就用什么字体,但是在网页设计上面挑战非常大,中文就是可以确定的宋体、黑体两种字体,英文可能稍微多一点,大概也不超过十个,设计师非常烦燥:为什么我们在网络设计上就不可以做到这一点?由于设计师推动网络字体的技术应运而生,中文字体好像还没有网络字体的技术,我不是很清楚,希望在近几年看到中文网络字体的发展。
近年来,炒得非常火热的“响应式网页设计”,因为设计师感觉到不同的浏览器和大小上面要有不同的呈现。渐进式设计增强,我不知道中文怎么翻译,我自己翻译的是“渐进式设计增强”,我用各种设备,各种浏览器,有大有小,有的浏览器可能是老的版本不支持一些新的技术,当时设计师和开发人员经常要用很多方法和技术确保一个网页或者是一个界面在不同的设备上面、不同的浏览器显示得一模一样,这就造成了很大的问题。这样一个渐进式的设计增强就是像电视一样,有黑白电视,有高清的电视,但节目显示是内容的,内容虽然是一样的,显示形态不同,就是说根据浏览器和设备不同显示同样的内容,但是不同的表现方式,这是近几年炒得非常火热的设计师提出的概念。
到HTML和CSS已经开始普及,这里面设计师的功劳功不可没。所以,设计和技术之间的关系不再是不协调的关系,设计终于像封建妇女大翻身的感觉,可以和技术平起平坐。在这里面有很多的规范,你仔细去看新的规范,仔细想一想都是为谁服务?都是为设计师服务的,大部分是因为设计师在自己的创作过程中感觉到新的瓶颈,要求有这样的技术出现。
回到我刚才说的Sliding Doors Css。提出移动设计优先的是我以前雅虎的老板,他是设计师,他在做设计的时候愿意把自己掌握的技术用到设计里面,由此看到行业的方向,于是他提出了移动设计优先的理念,最近被很多的开发人员、PM等等效仿。
因为我是微软的,需要做一些自己的宣传。微软之前不是一个以设计为重心的公司,就是以技术为主——这是肯定的。但是,在设计可以引领科技的这几年发展潮流当中,我们的设计师不干了!所以2010年2月份的时候,来自世界各地的设计师一起探讨如何引领科技,大家也知道微软最开始宣传了以人为本,扁平化设计也是在Windows上面实现的,接下来给大家看一个视频,就是在那次会议之后整个理念的转变。(视频播放)这个是一个从整个大的公司范围内我们对公司的产品以设计先行,引导科技的案例。
回到现在我处于微软亚洲互联网工程院,我们主要是以BING的技术到HTML5 VIDEO上面去的,接下来是一个利用BING的技术引用到HTML5 VIDEO的一些首页上。(视频播放)我们每年都会有一个HACKDAY,以前没有设计,以前HACKDAY所有人都认为是开发人员的专利,但近两年在我们的STCA里面,我们将设计一起加入HACKDAY,可以通过设计和技术的交流有一些非常好的创意,都是在HACKDAY里面设计师和开发人员一起努力的结果。
最后我想跟大家再分享一下,我觉得大家在这儿都是设计人员。我自己感觉,设计师应该不惧怕技术,设计师面对技术的时候应该做到:掌握、运用、影响、推动。
具体说一下。首先“掌握”就是说不恐惧,多实践,勤钻研。因为很多设计师都是艺术生或者是学艺术的,很多人觉得技术跟我们不一样,实际上技术在今天,我刚刚跟大家总结技术到今天的时候已经发展成为一个所有人都可以触及的、非常简单、只要勤钻研多应用就可以达到效果的东西。其实并不需要变成一个代码人员,但需要有了解、有掌握。你了解掌握了之后可以去运用。我在这里写的“模型不只是前端的事儿”,很多人以为模型都是前端开发人员的事情,但我说不是。如果设计师可以把自己的设计和技术做成模型,如果做到这一点,你可以不仅对你的技术和交互有不同的认识,因为你知道他怎么操作和影响的。那么,影响并不是“开发说什么不一定是什么”,比如说开发说不行,如果你是一个技术小白轻易蒙混过关,完全不知道他在说什么,如果是对技术有掌握的人,可以告诉他这个自己都可以实现,为什么他实现不了?这样的案例发生很多次。最后一点是推动,我之前举了很多例子,这些例子里面都说明一点就是说互联网的规范和技术的推动,很多时候是设计师造成的,但是之前举的很多例子都是发生在西方和美国。我衷心希望在将来的日子里面,在整个W3C规范的制定过程中,可以看到在座各位的影子。
这就是我想为大家分享的设计与技术,谢谢大家!
更多精彩,关注2013中国交互设计体验周官网:http://ixdc.org/IxD2013/