少年企鹅的成长之旅:QQ体验设计发展史
摘要:在过去的14年里,对于中国网民而言,QQ是仅次于电话的核心联系方式;登录QQ,是打开电脑的第一件事;急促的滴滴声,是最熟悉的网络声音。14年的时间,小企鹅的活跃账户数达到了7.826亿,相当于两个半美国的人口;同时在线人数突破了1.76亿,比俄罗斯的全国人口还要多2000万。
本次CMDN第24期活动于12月21日在北大英杰交流中心举行,由腾讯大讲堂、腾讯QQ团队和CSDN共同举办,也是QQ14周年校园行的最后一站。在本次活动中,来自腾讯用户研究与体验设计部总经理兼专家设计师陈妍结合自身经历详细地讲解了QQ14年的进化史。
图:腾讯用户研究与体验设计部总经理、专家设计师 陈妍
陈妍,腾讯用户研究与体验设计部总经理,专家设计师。2003年加入腾讯,是腾讯公司以用户为中心进行设计的倡导者之一,致力于公司产品用户体验的质量监督和提升。在体验设计领域具有逾十年的经验,主导设计过QQ、Qzone、腾讯网、QQMusic等十余款中国互联网成功产品。
以下为腾讯用户研究与体验设计部总经理陈妍的演讲实录:
我2003年加入腾讯是一个非常吉利的日子,2003年5月20号,我是腾讯第一位交互设计师,2003年那版本的QQ就是我做的,因此直到现在我都非常关注QQ的设计,虽然已经不是我动手去做了。2003年以前的设计不是我做的但我也有所了解,因为我也是QQ的老用户了,我的QQ号码是六位的,是个非常好的号码。所以在此我所分享的不仅仅是单纯的QQ14年进化史,也会融入我自己的体验与感受,特别是从2003年大变化之后在设计上的发展所带来的新气象。
功能演进:是什么让大家喜欢QQ?
QQ第一个版本诞生于1999年2月11日,我们第一个版本出来最重要的一个功能就是可以发短信到BB机,也许对于大多数的90后学生来说可能都不知道BB机是什么,我是有用到过的。在此之后就是2000年的这个版本,那时候因为是单条单条信息一个来回,所以只有输入信息的界面以及阅读信息的界面,就是你阅读完了一条之后又点回复,出来一个信息的界面再点发送,是一个单条单条操作来的。
到2000年的时候,上网的人渐渐多了起来,大家都知道1999年那时候的整个互联网环境,可能在学校得同学会比较幸福一点,当时的校园网还是比较发达的,我记得我在没有上大学之前是很难接触到互联网的,也是到了学校才真正地上起网来。当时有一个叫做聊天模式的,在聊天模式下有一个界面,用过BBS的人应该会猜出来,当时的BBS有一个二人世界,就是下面是你输入内容的操作界面,上面是对方的,你打每一个字对方那边都会有实时显示,在你这边也同样,这也是QQ设计的雏形。
从最开始1999年、2000年只有文本聊天往下发展,从2003年开始我们进入了一个叫富媒体聊天的状态,什么叫富媒体?就是你除了文字之外,还可以使用表情、图片、声音及视频等各种文件,这就是富媒体。随着技术的发展,在人与人沟通之间除了文字,我们还可以有更多实时传输的东西,比如发送表情、截图等,截图这个功能就是2003年开始做的,到现在已经是可以在截图的同时对图片进行修改,而这在当时是许多人放弃MSN转而使用QQ的一个非常重要的特性。对于MSN,相信现在已经很少有人用了,在这里我可以讲一下QQ与MSN之间的故事,其实在最开始的时候,MSN在中国还是有许多地方值得我们学习和借鉴的,但在后来的几年里,我们发现不知是因为国外的软件在中国水土不服还是什么原因,他们投入得越来越少,而QQ始终使我们公司最重要的业务之一,所以我们觉得相对于我们对QQ的投入,微软对MSN的投入是少之又少的,因此,在这中国地区,我们跑赢了他们。
对于QQ,除了截图之外,还有一个功能是让大家放弃很多其他聊天工具喜欢QQ的一个原因,就是传文件特别的方便。到现在,我们已经做到了秒传,而且每个文件最大的到2G,不超过2G的都可以直接传输。在传文件里面我们还做了许多贴心的设计,比如可以拖一个包,以前是单个单个传,但现在可以直接包传。在2003年,我们在文件传输上还做过一个尝试,可能没多少人了解,就是把文件发给对方的共享文件夹,但不是局域网的,而是在互联网里共享自己的文件夹,后来因为一些原因,这个功能还是删掉了。
另外值得大家愿意留在QQ的一个功能就是群了,群做了很多年,其实这么多年来,有点内疚地讲到今天为止我们还没有发现对它有一个更好的感召,可以让大家用得更爽,但回过头来看2003年,大家知道群是因为什么产生的吗?群对于QQ来说就是QQ所有专利里价值最优的一项专利,仅仅是处于一个很简单也很小的需求,就是2003年我们公司有一群人,我们称之为饭团,总共有8人,他们每天中午约一起吃饭,当时QQ只有一对一的功能,你得开8个窗口去问,于是乎我们就想着能不能把一群人拉到同一个窗口里去聊天,这样喊吃饭就简单多了,也就这样,群诞生了,而它也是腾讯十大发明专利里的第一位。
对于视频,我们现在已经可以支持20个人一起视频,不知道大家有没有用过,可以尝试一下,除此之外,我们还支持群语音,这也是我们技术的大发展。在2012年之前,登录QQ只有两种方式,要么电脑登录,要么手机登录,从2012年开始,QQ可以支持多终端同时登录,讲到这里,相信大家对于QQ过往比较有价值的一些特性都已经有所了解了,那么,你们知道从1999年到2012年,在QQ的开发过程中,我们一共申请了多少件专利?虽然说有些人觉得腾讯一直是一个跟随者,总会有抄袭的嫌疑,这个我可以很坦白地讲,当然,先说专利数,再说有没有抄袭的问题。当现在我们在QQ上的专利数已超过400件,已经诉权的有300件,对于创新和抄袭,举一个专利的例子,大家知道在QQ聊天窗口上显示的对方“正在输入”是MSN的专利,其实QQ也有这个专利,只是和他们的不一样,最大的不同点就是MSN用图表代替一串文字,而在QQ界面上寸土寸金,这么长一串文字QQ界面没法容纳,所以我们就用了一个正在写的动画,表示对方正在输入,还有当你的窗口最小化到状态栏时,你还是可以看到对方正在输入,这就是创新的地方,和别人不一样。
回首14年进化史:从人性出发
除了技术之外,与QQ进化非常相关的就是人性,从2000年到2003年QQ界面最大的变化是什么?从纯文字聊天我们逐步进入富媒体的沟通,QQ以前是一个纯粹的聊天工具,纯粹的聊天工具变成一个可以支撑整个腾讯业务发展的平台,也是从2003年整个界面改版开始的。在后来将个人形象、信息及消息通知等放到对话框上之后,整个界面内容变得越来越丰富,随着大众对个人展示需求越来越强烈,QQ秀诞生了。
其实在2003年的时候,QQ秀只是看对方的,后来我们把两个QQ秀都放出来了,因为我们发现其实大部分美眉都很喜欢照镜子,更喜欢看自己不喜欢看别人,我在和许多美眉聊天的时候就发现,她的需求是这样的,如果我跟对方在视频的时候,会把自己的视频窗口最大化,对方的视频窗口最小化,很多人都会干这样的事儿,我们发现看自己也很重要,因为大家都很关注自己在对方的眼里是怎么样的,所以在后来的版本更新中,我们把属于自己的QQ秀也加了进去。
在2005年新版QQ上线时,我们会发现第一个头像是自己,点击可以进入QQ,当时很多人对此都会感到疑惑,为什么自己的头像会在上面?当时这个特性对QQ的拉动非常大,对比2004年、2005年这两个版本,大家应该明白我说的在QQ上真的是寸土寸金,图标爆满也越来越挤,相信当时很多人都会觉得这样的QQ界面很花很乱,也很让人烦躁,所以在2006年重构QQ时我们决定了进行一定的整理,不求重构界面,但一定要进行整理。大家知道2006年我们做了一些什么样的事情吗?有听过HENGMENG,这是我们一个内部的代号,但是曾经有泄露在外面,如果对互联网有关注,就会有听过我们做HENGMENG。也有一部分人因为这样放弃使用QQ,所以我们推出了TN这样一个产品,但是当时TN已经停止开发了,有可能很快我们还会再研究更简单的QQ这样一个产品方向。
在经过2003年到2006年很极端的发展之后,我们开始决定为QQ做减法,希望界面能更清爽一点,其实这个过程是相当困难的,因为整个腾讯业务的发展,QQ是腾讯第一个平台级的产品,我们所有的业务都希望通过这样一个产品接触到更广大的用户,所以每个地方业务都想抢,以前的菜单什么样可能大部分人都已经忘记了,但它却是用户点击最多的地方,这也导致当时的菜单有很多业务,而现在的菜单基本上已经被我们清理干净,里面没有任何业务入口。
第二个要讲的是侧边栏,第三大工具条为什么从一层变成两层?因为有好多入口都想去占那个地方,已经没有办法放下了,而我们在设计时都不希望在界面上出现广告,所以我们就把广告那一栏去掉了,现在界面看起来感觉还蛮好的。但在QQ秀上一层一定要留一个广告位,因为那个广告在整个腾讯广告收益里是最高的,所以其实我们做设计就好像每天都会跟业务做斗争一样,要保证既能支持业务发展,也要保证我们的体验不掉档次。
刚才有讲到2006年是我们开始在做HENGMENG这样一个内部代号的产品,大家知道HENGMENG是做什么的吗?HENGMENG是QQ从2006年到2009年花三年时间做的一个内部的重构,这个重构解决什么问题?除了底层一些问题,对UI最大的变化就是,以前QQ界面层跟底层是合在一起的,你要做一个功能、换一个图标换一个按钮就从上到下都要动一次,都要重新写一次,而且所有的控件都是不可以复用的,你界面上每做一个按钮,你就要做一次状态,切一次图,2009年开始之后,我们做了界面层跟底层的分离,就是现在可以看到界面方所有按钮,只要是一样的只需要一个就可以了,不需要每个界面画一次。还有我们要去改一个功能或者改界面一小部分的时候,在2006年以前你需要很长很长一个开发的周期,所以你们可以看到前面UI的变化其实不是特别大的。后面我们要怎么改,其实自由度会高了很多,因为他不涉及到你去动底层,所以改起来就会非常方便。
QQ界面:因何而蓝?
2006年的时候QQ安装包是非常大的,里面很大一部分是因为界面的皮肤,所以那时候程序员超讨厌我们做UI了,因为我们会给他们的性能带来很大的问题,但是我们又觉得一定要这样才漂亮,我才不管你开发做的怎么样,我们只管用户觉得好看。而且以前就是整个界面切图的话,我们很多时候不能在界面上做很多变化,因为你一旦一张图上去的话就会很影响它的最后一个渲染,所以我们都是大家可以看到前面的界面都是这样平铺过去的,为什么要讲这个呢?我们可以看到从2010年开始,我们做了一次皮肤上很大的一个变化,就是我们可以做到自定义皮肤,就是你可以把一张你喜欢的图拖大这个界面里面就生成你自己的个人皮肤,在此之前不知道大家有没有用过很多网友作品,网友做的皮肤有用过吗?有用过。有自己做过皮肤吗?在此之前我们还出过一个产品叫做皮肤编辑器,有没有人听说过,然后很多网友就可以把会用这个的人就可以把QQ界面上很多的业务图标都去掉了,无广告、无业务版本,可以通过那个东西来实现了。但是其实从HENGMENG以后就不需要用这样东西,就很快很快把自己喜欢的皮肤调色出来。因为刚才没有讲完的一个专利也是我们一个比较有价值的专利,这个皮肤界面上的皮肤颜色可以自定义调节它的透明度、明度和色相。
为什么我们要做这样一个功能,因为每一年我们做设计的在年底都是非常的痛苦,因为要去重新做QQ的第二年的主界面,这是我们每年最惨最惨的时候,因为QQ这么多年,大家对它的期待很高,而且腾讯其他所有产品的风格不像后来各种应用非常的发达,可能也不需要说都要跟着QQ皮肤去走了,其实在头几年的时候,我们的所有的界面包括游戏、音乐、视频什么播放器所有的产品都希望跟QQ走类似同样的风格,以保证这是腾讯出品,所以我们每年大概九月份的时候会启动新版本皮肤风格的一个设计。其实从2010年以后,这个事情变得相对轻松一点,因为有了自定义,我们只要满足80%用户的审美就OK了。随后在2012年时,我们提出了一个极地雪的概念,大家可以看到QQ一直以来是蓝色,只有自定义皮肤的时候有其他颜色,为什么我们坚持这么多年来都用蓝色,是从一开始就觉得蓝色就是我们的主色调还是怎么样?
其实当初我们设计师自己定的概念就是蓝色有科技感就这么简单。然后每一年我们都有想能不能改一个颜色,有想改一个灰的,因为有一段时间传播的苹果,我们部门出去开会用的全是苹果,大家想能不能换一个灰的,后来又想Windows也出了黑暗风格,我们能不能出一个黑的,所以各种各种都有想过了,但最后还是把蓝色坚持下来了。到2012年的时候,我们想这个品牌的理念还是应该把它一直坚持下来,就从2003年到2012年大概九年的时间我们就把极地雪这样一个设计历年梳理起来,我们为什么在2012年做极地雪,是因为企鹅长在那里,所以我们就把这个蓝色一直坚持下来,其实也是在2012年才想的,我们都坚持这么久了,那就继续坚持下去吧!
朋友,你好吗?
告诉大家一个数字,QQ同时在线人数最多的时候达到1.76亿。而后来因为隐身用得很多,而且对某些人隐身的功能,后面我们还做了整组的隐身,你把所有前男友、前女友拖到一个组里面对其隐身,不要怀疑,就是有这样一个需求。而且也可以看得到现在第一次互联网发展是在99年开始,在2011年之后,移动互联网就是3G的天下,移动互联网也有了爆发性的增长,我们会发现两个很相似的点就是每一次互联网发展都伴随着一股陌生人交友潮流的兴起,大家有这个感觉吗?我这里可以分享一个数据,就是在2010年的时候,QQ里面真实好友的比例,就是现实中的朋友,不是通过什么看谁在线、附近的人或者游戏及群里面,这种各种各样的虚拟关系认识的人,就是你真是的好友,你同事、同学、邻居、亲戚等真实好友比例在2010年达到一个顶峰,大概平均每个用户有六成的好友是真实好友,在2011年之后这个数字开始下滑了,就会发现其实在2011年遇见附近的人的这种功能帮助大家不断扩展自己的关系链,但是其实有一些产品比如说像陌陌这种产品,他们觉得挺悲哀的一件事情就是在这个产品上面认识了人,建立了关系链,最终回转移到QQ和微信上面,他沉淀不下来,为什么说大家对QQ或者腾讯产品还是非常有感情的,是因为关系链会一直存在那上面,你可以在上面找到你多年未见的好友。
QQ太阳与图标的故事
对于太阳,其实最开始我们做的时候只有一个太阳,当时我们觉得能达到这个已经非常不容易了,但随后我们却发现,原来太阳也可以带动一个产业的发展,即挂机。当时由于我们设定的是24小时为一天,所以挂机很不环保也很耗时,后来我们就将其改为一天挂两个小时就可以了,然后随着大家在Q龄上的发展,觉得一个太阳不够了,就出两个太阳、三个太阳,到三个太阳也不够的时候,就出皇冠。这一特性的推出其实对于QQ在线是很显著的,大家都习惯挂QQ。
除了三个太阳和皇冠之外,还有什么很耀眼?就是图标,我可以讲一下当初做这个图标的故事。我觉得图标也是对腾讯业务的拉动,其实大家不要站在你是一个用户去想,先想一下如果将来你要做一个产品,你应该怎么做才能让它很好活下去。最开始的时候QQ的图标是你开通哪一个业务只会亮起那个图标,大家可能没有经历那个年代因为很久很久了,后面我们会想,是不是很多人会有这样一个需求了,就是我想开业务,我是怎么样看到我没有开业务的图标呢?大家知道有一群用户,大概有20%多的用户他是非常热衷点亮图标,都会觉得图标点亮越多越有面子,所以后面我们就会觉得既然这样我们会在自己资料卡上面把所有你可能点亮的图标都列在那儿,而且还是灰的,这让大家非常有冲动想把灰的图标变成彩色的图标,一下子我们业务开通的频率就提高的非常多,这个给腾讯带来很大收入和业务拉动。
图标点亮了,那我怎么去熄灭图标呢?我不想让别人知道我开通这个功能,我不想让别人知道我在玩这个游戏,有一些小朋友可能不愿意他的家长和老师看到他在玩这个游戏,不希望这个图标点亮,就有人打客服电话说怎么把图标熄灭,以前不提供这样一个功能,但是这个需求越来越多的时候,我们才把这个功能做下去。
QQ:因为爱所以爱
现在讲一下QQ的情感与责任,不同群体如何使用QQ?其实QQ在现在的用户数已经达到7个多亿,基本人人都有QQ,这些用户当中肯定会有一些人使用互联网不太方便,我们是如何考虑他们的一个需求的呢?就比如说,盲人和老人是如何使用QQ的?
盲人使用QQ是用读屏软件,腾讯QQ之前做并不是太好,我刚才讲过,在HENGMENG出来之前,我们很多界面写的不是很规范,很多空间是自定义的,视频软件就识别不出来,就会有很多功能是使用不了的,而且其实盲人使用互联网最大最大的障碍是什么?是验证码,验证码是盲人无法逾越一道上网门槛,因为我们一方面又要做到帐号的安全,一方面又要方便这一群人去使用,所以我们现在用一个相对比较低级的方法就是给所有的盲人都开通白名单的功能,只要把号码报上来,那他使用我们服务就永远都不需要使用验证码。另外我们在2013年的版本实现了所有的控件去掉自定义,就是没有一个控件是自定义的,盲人读屏软件就算是8年前的版本,都可以识别上面所有的功能。做这件事情得意义很大,因为我们每出一个版本读屏软件就要曲士英针对QQ做一些特殊的开发和订制,我们出一个他们跟一个,并不是所有的读屏软件都能跟我们保持相同的开发速度。我觉得我们能为他们做的事情,哪怕是一点一滴,也是我们在为全国几亿用户服务的同时,希望为这几百万的盲人也提供一些便利。
对于老人,我们不是去讲老人怎么使用QQ,相信大家都还记得在重阳节登录QQ时的绘画画面,大家知道这背后有着什么样的故事吗?我简单讲一下,就是在深圳,我们在深大天桥上发现一位老奶奶,一边绘画一边卖画,每天都到很晚,老奶奶已经70多岁了,她画的画很漂亮,因为以前年轻的时候是做绣花的,所以她就把绣花的图案画出来,五块钱一张,虽然她已经老了,但她还是有梦想——希望赚足了钱,回到家乡盖一所房子。钱也不多,她说赚够五万就回家,我们设计师发现了之后内心挺有感触的,就在重阳节那天将她的画放在我们QQ的登录界面上,重阳节也是老人节,就是希望大家知道她,能够感受一位老人的不易,然后帮她卖一些画,让她的生意更好,这样她就可以早一些实现梦想,回家盖房子去了,也可以好好地安享晚年。这个事情引起了媒体的广泛关注,其实就算是每个人捐一点钱,全国那么多人也足够了,但梦想不同,我们希望能够通过QQ这样一个平台帮助更多的人实现他的梦想。现在老奶奶还是会继续卖画,因为这不仅是她的生存技能,更是她的爱好,虽然人老了,但梦想不变,通过自己的努力获取认可比不劳而获要让人敬佩得多,而获得认可也是老人希望得到的一种生活。
重获新生:展望2013
对于QQ2013的设计理念,我们依然继续坚持我们的蓝色,在蓝色以外我们还可以做一些什么样的东西呢?要使整个窗口更加自然,会看到蓝天、白云、夕阳还有繁星,我们希望通过这个界面告诉所有热爱互联网的宅男宅女们,其实世界还是很美好的,我们希望大家能够离开互联网,去看一下外面的大好山河是什么样的,希望能够唤起大家对于这种自然的美好回忆。除此之外,还有天气,QQ2013可以适应不同地区天气的变化情况,与此同时窗口也会跟着变化,白天晚上不一样,不同天气下的动态场景也不一样。
当然,界面的详细变化有很多细节地方,我们也会做得非常顺滑非常自然,这也是技术上希望通过这样一件事增加体验感。
提问:对于各群体的不同需求QQ是如何协调的?
陈妍:QQ不是一个为特定群体去做的产品,我们在内部说它是一个叫群量用户,我们说得保守一点,从8岁到80岁都会用这个产品,其实这个过程真的相当的困难。所以我们内部会每年做一件事情就是去调查,我们部门叫用户研究,每半年画一次用户画像,将使用你这个产品的所有用户的群体特征整理并进行分类。做出来之后,我们会把这个报告分发到各个部门,让大家都知道,现在是什么样的用户或用户群在用我们的QQ,而从今年开始90后用户已经超过80后用户比例,今年的学生相比往年也有所增长。
尽管我们还没有找到保持这样一个数据变化的具体原因,但我们都会观测这样一个变化。在跟各个产品或者是功能需求部门去沟通的时候,我们也会不断的去问他其实你这些功能到底是给什么样人去用的,我们会去考虑比如说大概有80%的用户他会很常用这样一个功能,那我们可以放到一个在界面里面相对常用的位子。但是如果只是很少的用户才会去使用,那么我们会把这些功能会放到场景之下,什么叫场景之下,就是你可能发生这样需求的时候,我们才会把这个功能放到你可触及的地方,不是说一上来整个界面都是所有的东西。但没有什么好的办法可以避免,因为大家觉得QQ容纳很多东西,而8岁到80岁的用户都有着自己不同的一些需求,有时候我们也会把东西放上去看一下使用情况,我们再决定后面继续留在这里,还是调整任何地方去,我不知道这样是不是可以回答到大家问题没有,因为这是一个发展过程,并不是一开始我们就进行定位,然后进行设计,而是定位不断,设计不断。
学子感受
因为我本身就是学设计,并且也接触过UI设计,所以从我对于QQ的理解来说,我大约在初一的时候还是用QQ,最早的界面已经忘却了,但是我通过学习设计,把以前的东西拾起来,觉得QQ在一些界面表面上的设计化东西上,由简变复杂,从复杂再变回去。现在QQ我发现它在往那个方向去,就是他把好多东西能够越来越简化,达到一个最佳的用户体验,使用户在使用的过程中,能够有一个特别束缚、特别享受的过程,所以这是我看到QQ的一种进步,也是我对QQ的一种情感的一种维系。还有一个变化给我最大的感觉就是,QQ日益成为人们日常生活中依赖的东西,就是他把感情和情感的维系做的非常到位,就是说变成人们一种日常交往的一种必需品,这是我对QQ最大的感受。 QQ对我来说就是,一般是QQ来交流,感情维系作出很大贡献。而且我用的QQ是从初二开始的,之前一直用QQ号也丢了,高中又申请一个。现在感觉它做不叫简单而是简约,要达到简单的风格还有一定距离,希望QQ将来为用户做更好的体验,可以舍弃一些商业方面。 首先我觉得就是这个设计方面应该以用户为主,我觉得QQ在设计方面做的非常好,将人性化作为主要的追求方向,QQ的界面自始至终都是蓝色,这一点我很喜欢,其实我也在关注极地雪。总之觉得,不管是QQ还是腾讯做的东西非常细腻,我经常关注CDC一些设计,包括一些网站之类的,有好多值得我学习的东西,包括网页设计。 我觉得刚才陈妍姐姐说得特别好,最重要的一点就是情感观设计,我是大老远从北邮跑过来的,我本身是学工业设计的,然后从今以后想进攻互联网,对情感设计是一个特别感兴趣一个点,从刚才所看到的就是从1999版一直到2013版界面一个发展过程中,我发现腾讯很注重用户体验,以及对用户一个情感上的考虑的,我觉得这个是QQ能够一路走来并且走的这么成功很大一个非常重要一个因素。同时让我想起了曾经有一个会议上情感化设计是引领设计的非常重要主线,QQ正在进行着,并且做的很好,这就是我今天想说的,谢谢。