行业关键字
UI设计UI理论和资料 → 正文
张海龙-多产品统一化设计思考与实践
作者: 张海龙 来源: 视觉同盟 时间: 2011年9月19日
9月17日,备受瞩目的“2011中国交互设计体验日”在北京新世纪日航饭店拉开帷幕。据悉,本次大会由IxDC(广东省工业设计协会交互设计专业委员会)和UCDChina联合主办,作为北京国际设计周的重要组成部分,2011中国交互设计体验日围绕“善意设计.交互未来”的主题,一方面传达交互设计"与人为善"的本质,另一方面放眼未来,探讨未来人类的生活形态和交互方式。

张海龙 百度用户体验部 高级经理

1997年开始从事UI设计工作,曾任职于多家知名互联网公司,包括中华网、Yahoo China,拥有丰富设计与设计管理经验。现任百度用户体验部高级经理,从事用户体验界面、交互设计及团队管理,致力于产品可用性与视觉的平衡设计方法研究。

演讲实录:

非常高兴能够有机会为大家做这样一个主题分享,我不太想谈一些思考的理论上的东西,我先直奔主题做一些分享。

一谈到统一化,很多设计者和公司就会比较头疼,这个东西从我们底层来看,作为一个设计师我们如何推动统一化的设计,它是一个什么样的高度。在公司层面上它如果没有一个从上至下的对这个工作的认可,我如何去把它做出来,这就是我们要去解决的问题,就是说要跟你的老板,你的同事要讲清楚统一化本身的重要性,它具有什么样的战略意义,长远来看对公司有一些什么样的好的促进,等等这样一些问题需要先搞清楚,然后才能够真正的推动你的工作。

我的分享分四个部分,首先我们说:要做统一化

要了解做统一化设计对我的产品有什么样的好处。从四个方面给大家举几个例子,这是索尼公司出的界面设计,PSP上会应用的比较广泛,并且得到了很多用户的认可,觉得这样的设计很炫、很酷、操作非常便捷。这个界面是一个新的交互方式,但是从设计者来讲,我们需要去考虑更多一些,当我们在PS2、PS3的时候,如何把这样好的交互设计传承下来,从用户使用它的便捷性上,包括对我们的整个体验上,包括产品开发层面,如何让它形成一种更加便捷,更加低成本的工作的方式等等这样一些一系列的情况都需要我们去考虑。这是PS3的界面,很好的传承交互的设计,这个东西减少了用户对它认知的习惯。

这是招商银行的表单设计,很多时候大家在银行办公的时候,去做一些填表工作的时候,会发现很头疼,表格有非常多复杂的项目,哪些是该填的,哪些是不需要填写的,我应该怎么样填更加正确,往往你会找到他的业务员,或者你会找到他的一个范本的案例,逐条的填写下来。但是招商银行做了这样一件事情,他将格式,将所有需要你填写的项做了明确标注,包括本身格式化的信息。在你第一次完成这样一个操作体验之后,再到银行中填写这样表格的时候,你会发现我已经很习惯,很熟悉这样的填写过程增强品牌影响力,举一个阿迪达斯的例子,阿迪达斯logo原自于对山的创意,它寓意着不断的接受挑战,成就未来,勇攀高峰。三条杠设计也是在产品当中得到了很好的应用。比如很多人都在穿这样的衣服,他把一种精神,把阿迪达斯的三条杠植入到不同产品里,不管它的服装、鞋子还是日常用品等等一系列的传承一样统一化的设计,最后给它的品牌带来双赢的局面。

产品统一化由品牌出发,当我们需要建立一套统一化的思路,去完成一个对品牌上的诠释的时候,最终的产生结果也会作用到我们的品牌上。

另外这个网站仍然是阿迪达斯的,这里有一个交互行为,既然我是一个品牌,作为体育品牌的公司,在做它的网站的时候,里面交互的动态、视觉交互的动态是否能够跟产品品牌形成一种关联,形成一种灵魂上的沟通,这个也是需要思考的问题,所以统一化不只是在视觉层面统一化,更多也是在交互层面,交互是一种行为,又是人们在情感,包括你内心深处习惯的反映。如果这种反映定义一个好的交互的话,它其实使一种自然流露。

从统一化产品设计降低成本角度来看,从我们一开始有了劳动行为,燃烧就在不断的去创造新的工具,然后找到一些能去省力省时的方法完成我们工作的状态。统一化不能直接作用于开发成本的节省,包括提高效率,我们需要做的是需要把统一化的工作更进一步的深化,把它形成规范,规范的推进形成多版本的时候,你开发产品才会降低,所以统一化不等于直接降低成本,而是说你需要把它标准化、规范化之后形成一种复用的状态,它的成本就会降低下来。

如果在路上有一个人背着包,上面有一个小小的红点,大家就可以知道是IBM的产物,我们叫做DNA。

如果我把它标盖住以后,大家仍然知道这是一款什么样的车,因为它有统一的气质氛围,它有统一的运动线条,它有统一的设计,这些东西不断的传承在他一代一代的产品里,使得我们对这个品牌有更深刻的印象。

这是Window8,有很多的设计在统一性上,统一性设计在色彩上,切块的板式上,会看到这是一个公司的产品,它会形成一种对品牌上的升华。

基于百度无线端的产品给大家举一个例子,我们在做同一款内部产品的时候,我们做了两次的迭代,如果我们想做好这种统一化的工作,我们需要做一些什么样的流程,首先你要提取可以统一的元素,这些都是在传承你的设计未来有可持续可发展的设计阶段来提供提前的设计源做这个思考和准备,后续就跟正常的产品开发是一样的,研究、测试、制定规划,最后形成应用,在不断的闭环里实现这种迭代,使得我们前期的DNA得以传承使之品牌升华。

很多用户在提前做一些调研,说你们了解百度的产品或者是使用百度产品的时候是什么样的感受,这是对百度产品的感受,比如说简单的,贴近生活的,它可以解决人们生活中的问题,比如说百度知道,它是非常简单便捷易用的,还有百度搜索,非常简单易用,而且是信息直达便捷的方式,这是用户对百度的品牌认知。

这是几款产品界面的设计,百度身边、百度地图等等一些设计,这些设计对于这个产品来说是成功的,它符合这个产品用户的定位和用户的使用习惯,并且有它的便捷性,它的易用性,肯定是要得到保证的。通过这些界面,通过这样一些设计,我们去做用户研究以后,我们发现整体来讲确实跟用户对百度本身的体验是一样的。

我们还可以做一些什么样的事情呢?我们再深挖它的时候,会发现每一款产品反映出来的情感的曲线是不一样的,是不吻合的,我们可以从正向和反向来看,从反向来看,它对本身产品有一个很好的特性展现,比如地图作为一个定位工具来讲,它的易用性方面会突显出来。我们基于这样一些思考,如果我们将它的统一化在这种体制上,比如视觉层面,如果做到更加统一,并且能够反映客户对它情感感受的话是不是更好,那么我们需要做什么事情,这是我们设计需要继续思考的问题。我们会从百度本身气质里提取设计源和DNA,来形成为我们优化它的设计提出一些更好的要求,并且萃取里面一些元素。

这是一个框的理念,09年百度世界推出框计算理念,围绕这种框的理念,我们可不可以植入到产品里,让更多的人了解百度设计是有很强的传承。这些简约图形也许就是我们的设计源,可以在未来产品当中植入的元素,并且让用户认知百度的元素,这些就是理念。当这些理念放大,系统的时候,就会更加的统一,在后期复用的时候,前期需要考虑到这一点。

我们不能只是在图景层面做到统一,这个东西真能做到一种神似,但是不能把精神贯穿到里面,仍然不能解决开发的成本,所以我们需要在整个界面系统上进行分级,分成底层、内容层和操作层,哪一层可以被统一化,哪一层可以高度统一,哪一层可以在统一的情况下更多的延展开来,有了这样的分层以后在后期就会更好的规划它,更好的研究它。

这是操作栏的一些变化,在我们设计过程当中需要考虑到的就是我们会做一个服务层的(把儿) ,其实在小屏界面的时候,很多时候希望最大化桌面,游览的便捷性会使它对这个产品的体验有一定的提升,这个也是做了一些改良。

这是一个读图的产品,当我读图的时候,这是有很强的通透性,是一个无边界的概念,当我阅读这个图的时候,把儿会收起来了,让你感觉更加舒服。

通过一系列的研究、分层,逐步去模块化它的设计,包括它最小的NDA元素,提取出来之后,会发现当我们再做这样几款产品的时候,是不同的产品界面,但是有了相同的品牌答案,相同的统一性,在开发完一个产品的时候,再开发其他产品的时候,工程师对这个控件的复用性也非常好。

再看看用户对它的情感认知,仍然是之前的方向,没有太多的变化。另外看一下蜘蛛模型,这些产品在这方面是非常接近的,使得我们既有了用户对它的认知性,又有了整个产品间统一的关联性,这是一个双赢的结果。所以这方面的提升不管是为开发层面还是品牌上的促进,再去迭代的时候会发现这是你的一个(B),在这个基础上再升华,仍旧是按照统一化的步骤在往前走,这样推动就会非常的顺畅。

如果你想开发成本的降低,应该把它规范化、统一化,这样才会有复用的价值,而不是为了形似统一而去做,继续把规范化推动到视觉的规范,移动端的界面指南等等一系列规范化的工作,才会使得你公司整个的设计体系有了更好的前瞻布局和发展。

下面是百度在无线端的具体案例,这是提取百度NDA时的研究报告,会引入一些中国风的元素在整体设计里,怎么样对它传承下来,这些都是一些设计源,最后推出百度整个视频界面设计,它是一套整体的概念,有中国的元素。

刚才我提到过一个观点,统一化不是为了统一而做的,而是说你应该去把它逐一的分解,什么样的产品形态是可以被聚合的,什么样的产品形态可以区分的,统一到什么样的层级,这些方面都是需要我们去思考的。比如拿无线端的界面来说,我分为三个等级,第一个等级是icon,一个公司如果不统一怎么能谈呢,所以这个不谈,因为icon就是需要统一化。第二在启动界面上面,是不是能够把原本不是一类的产品但是通过它界面的设计使得这些界面给用户的第一认知的情感是一致的,让它形成品牌的认知。再往后是用户界面整个的控件就是高度统一化。

哪些元素是你不可变的,哪些元素是可以变的,仍然需要在简单的界面上需要做分层,做处理,这样才能更好指导未来的设计,根据整个统一化的设计目标走下去。

最后给大家展示一下最终的成果,这是整套的产品。这套整套产品跟以前全是白色的产品不一样,传统的留白不只是留有白色,而是留有空间、留有气场,让客户产品联想。当这个产品更适合于黑色、更适合于蓝天白云的时候,应该赋予他本身的特色,在原有的框架上要有一个很好的结合,我们有不同的颜色,也有不同的背景的门路,但是仍然会看到整体是非常统一化的设计,而且不影响本身产品的特性。

最后简单做两个广告,一个是我们的招聘网站,百度这边需要有很多的优秀人加入进来和我们一起做这样的事情。另外请大家敬请期待XDC上线。

谢谢大家。
(责任编辑: 徐大维

作品欣赏

欢迎关注视觉同盟微信公众号:
微信公众平台:搜索“vudn2004”或扫描下面二维码:
English | 关于我们 | 站点地图 | 联系热线 | 合作伙伴 | 艺术顾问 | 订阅 | 手机版
版权所有 © 2004-2024 视觉同盟 visionUnion.com)
Copyright © 2004-2024 VisionUnion.com Incorporated. All rights reserved
京ICP备09005192号
视觉同盟旗下子站:品牌专区 | 创意设计人才网 | 视觉同盟社区 | 视觉同盟论坛 | 英文版