完美瞬间——qq电脑管家6.0项目小结 – 腾讯cdc

腾讯CDC  •  扫码分享
我是创始人李岩:很抱歉!给自己产品做个广告,点击进来看看。  

完美瞬间——qq电脑管家6.0项目小结

路飞 / 交互设计,视觉设计 / 2011.10.25 / 相关标签 qq电脑管家, 案例 项目总结

144

&

  2010年5月31日,qq电脑管家发布第一个4.0版本,一年来,我们欣喜地看到管家的用户量和口碑在逐渐提升。而随着功能和特性的不断增加,产品细节体验所暴露的问题也越来越多、越来越迫切。由此,产品、cdc设计团队在7、8、9月启动“qq电脑管家用户体验季”,在界面视觉风格、界面布局、功能引导、智能贴心、信息呈现等方面,集中改进产品细节体验问题。在此期间,设计团队通过封闭设计,对管家目前的体验问题进行集中梳理,将目前管家的体验问题逐一解决。

&

&

&

  从去年开始,qq电脑管家团队每月定期举行用户体验会和专家体验会,对当月版本进行走查体验,同时通过论坛、微博等收集用户反馈,将这些发现的问题进行梳理,并在下个版本中着手解决。

&

&

 

&

&

  首页作为安全体检和其他功能模块的入口,也是用户看到管家的第一个界面,在这次体验优化中做了重点优化。

 

&

&

&

  这次对于引导过程的优化,设计师和产品一起将每个功能的引导wording都进行了检查,之前的wording是简洁风格的,语言会较生硬。这次优化,我们在简洁的基础上,增强了引导的清晰性,同时将语言定位在偏重口语化的风格。
  例,如下图所示,一个过程页面的引导wording,必须包含3个部分:

 

&

&

  用户在使用管家时,会看到很多和电脑安全相关的信息,之前在内部体验时收到反馈,很多信息因为写的太专业,不理解是什么意思。那么这次针对信息展现优化以下2点:
  1. 展现让用户看的懂的信息
将计算机方面的专业术语尽量的翻译成用户可以理解的语言。这次优化,将管家主tab上的功能的信息都做了优化,例如将木马查杀的“自定义扫描”优化为“指定位置扫描”。

&

  2. 弱化非重要的操作按钮。
  非重要、不常用的操作按钮在界面中重复出现,会使得界面不简洁。在这次优化中,将非重要操作按钮默认不显示,鼠标mouseover后才显示。如下图:

 

&

&

  反复体验之前的木马查杀,发现一个很小的瞬间:每次开始快速扫描后,在切换tab使用其他功能时,总是不知道扫描何时会完成,于是总是频繁切换tab查看。
  怎么办呢?设计师在发现了这个小的细节后,和开发同学一起,将主tab的图标变成了可以动态展现的样式。当用户在进行木马扫描,切换tab后,木马查杀tab会有扫描的动画,告知用户正在扫描。在扫描结束后,同样会将扫描结果展现在图标上。这样,用户就不需要频繁切换tab就知道是否扫描完成了。
  这个扫描过程实时反馈的交互方式正在申请专利中,目前国内其他的安全类软件都没有在这个细节点上有相同的表现。

&

&

  用户会喜欢什么样的视觉风格呢?
  管家皮肤改版之前,我们对4组约25名管家典型用户做了图片投射研究,以挖掘用户内心的视觉偏好及原因。图片投射所用50张图片由数位设计师从200张图片中精心挑选,每张图片由约10个视觉维度标签定义。


  通过分析用户对各类图片的视觉偏好,得出了每类用户的代表图片及关键标签。

  进一步分析用户对管家及偏好图片的认知和评价后,提取出视觉定位关键词。

  最后,设计师分别从用户和专业角度上做了视觉定位分析。

  经过前面的用户调研我们能够了解到用户心目中理想的qq电脑管家的感觉,于是在整体风格上作出了定位:
  1. 管家的整体风格定位为轻薄的半透明磨砂风格,满足用户希望轻盈安静的心理预期。
  2. 图标定位为有一定透视角度的立体图标,满足用户希望管家是实实在在有立体感的心理预期。
  3. 在皮肤的设定上我们根据冷色、暖色、明亮、暗淡 四个纬度上做了均衡和取舍,满足不同性别、和年龄层次用户对皮肤风格的要求,总有一款适合您!

&

&

&

  qq电脑管家6.0已经发布,这里感谢参与设计的同学们,在一个会议室里封闭设计的日子虽然辛苦,但确实开心快乐的。
  “良好的用户体验,全在于那些完美的瞬间。”qq电脑管家团队会将体验优化持续进行下去,让用户在使用过程中体验到更快、更安全的瞬间!

  

  qq电脑管家6.0下载地址:http://guanjia.qq.com/

  最后附上ken老师通宵几晚制作的qq电脑管家6.0宣传视频:

&

&

&

&

  • (本文出自tencent cdc blog,转载时请注明出处)
  • 74
  • 给好文加心!
  • 分享到...
< qq表情 for ipad 再设计redesign >

  1. on said:

    腾讯人才济济啊。。。

  • spunk on said:

    整体的体验确实比前一版本有很大的提升啊

  • 逍遥李寻欢 on said:

    视觉风格设计的思路非常不错,不仅要求好看,而且要求符合用户审美习惯,但是单单的几十个人的调研真的就可以定义那么清楚吗?这个值得商榷o(∩_∩)o~

  • 颠儿和尚 on said:

    我想说的是,不管是你们腾讯还是360,还是其他神马,我基本上很难区分出界面差异的,我想这是不就是与苹果的设计的差距呢?人家是拼了命的跟人家不同,你们是拼了命的和大家一个样,这也算中国特产吧…

  • 常德家教网 on said:

    看起来不错

  • hotzay on said:

    细节啊细节,流程啊流程,学习啊学习~~谢谢啊谢谢!

  • andre on said:

    能把一个流氓软件做到极致除了360也就是腾讯了。

  • 软文代写 on said:

    正在用电脑管家,很不错,支持大大

  • 呵呵 on said:

    乍一看,真分不出是360还是电脑管家…,创新真的好难

  • tree on said:

    很强大~qq电脑管家的体验超一流~

  • daisyshi on said:

    强大啊

  • sheen on said:

    管家的体验做得越来越好,许多地方想得都非常周到~支持!

  • silviazhang on said:

    强力赞叹~顶~

  • xp on said:

    哇 好喜欢哟 喊小姐妹们一起来看啊 ~ 特别是视频很好啊 ~ 8楼,我刚在你的言论下点了个反对哟~亲

  • 慧慧 on said:

    新版本,很轻薄,清新。也快速了。

  • easonwu on said:

    顶,6.0改进很大~

  • ajiong on said:

    相当用心的设计,体验很不错哟~~~

  • atonmo on said:

    能看出管家的真诚~加油!

  • tx on said:

    tx能不能什么都要山寨,佩服你们
    完全讲界面,没看到一个杀毒软件实质的东西
    你可知道很卡,好多毒杀不出来啊?

  • 程序人生 on said:

    qq6.0的视觉效果相比5.0的版本是一个大的跨越,加油!

  • 调皮鬼 on said:

    寄希望于电脑管家的几点:
    1、设计轻巧,主要包括软件小,占用空间小,占用内存、cpu小。
    虽然与一些“情况”相矛盾,但是,一个好的安全产品应该追求这些,而不是追求功能有多么多么丰富,不能像qq那样最后变成胖子。
    2、安全性能高,首先是自身的安全性,其次是用户的,当然,这些可以不断的提升,相信tencent有这个实力!

  • 鬼太郎 on said:

    什么玩意!装这东西多tmd 5、6个进程!

  • mouce on said:

    不好意思,这个实时反馈的微创新专利,在2009年对微软和江民合作的杀毒项目中已经由本人设计并用于wpf的实验项目中……

  • 美容养颜食品 on said:

    我发现管家的 流量限制功能比360的好用

  • 丫ing on said:

    嗷嗷~~~6.0真的不错哈。皮肤很漂亮,继续加油撒~~~

  • java on said:

    很帅啊 期待能进cdc

  • 一方 on said:

    你们这个项目的优化设计好厉害,于细节处见真章。见我要多加学习。

  • 一方 on said:

    你们这个项目的优化设计好厉害,于细节处见真章。我要多加学习。

  • 宅道 on said:

    終於知道電腦管家的ui是怎樣出爐的,理解,雖然不太符合我的口味,但大部分用戶喜歡才是你們的發展方向,加油!

  • 小混 on said:

    我要是试用一下管家

  • godlaugh on said:

    佩服,只能赞美了。。

  • 绍兴青年网 on said:

    管家越来越好用了。

  • 做爱 on said:

    真棒,期待早点公测!!

  • 126 on said:

    电脑管家打从推出时我就一直在用,感觉默默地在保护我的电脑,感觉很好~

  • lynn on said:

    每一次进步都是用心感受过的经历,每一个细节都不忍心轻易放过,管家的人就是这么用心、谨慎、管家产品也越来越亲切、贴心,愿管家越做越好。

  • pingback: qq电脑管家6.0项目小结 | 三板斧 : 用户体验、交互设计、创新技术

  • bobo on said:

    想问一下:
    关于视觉风格的定义,如何能通过几张图片来进行呢,看直观的图片和最终的界面的直观感受,应该没多大关系,但如何归纳出色彩方案、视觉风格?请回答下,谢谢!

  • 迷惘的执著 on said:

    支持下

  • on said:

    喜欢漂亮的

  • chen on said:

    我现在用的是360卫士,看了这篇文章我要换成qq管家,体验这些美丽瞬间。

  • 独角鲸 on said:

    最后的视频做得真漂亮啊。。羡慕中。。

  • 清水潭 on said:

    顶。厉害

  • sweet_salt on said:

    赞美一个!!话说之前错过了广州的校园招聘 :ll: ,想问下现在还可以招人么?我是交互设计方向的~ :yw:

  • zoe on said:

    既然是查杀木马,那木马那个图标马头做成木质怎么样呢?

  • lsq on said:

    “这个扫描过程实时反馈的交互方式正在申请专利中”

    我out了……交互方式现在也能申请专利了?

  • 飞仔网 on said:

    腾讯大公司,就是不简单啊。

  • pingback: 完美瞬间——qq电脑管家6.0项目小结 | 9kin.com

  • listy on said:

    分享了很多设计的过程,cdc的沉淀做得相当到位啊,赞!

  • totry on said:

    总结的很实用,必须顶

  • 关了吧 on said:

    跟360的区别就是名称不一样

  • 随意打赏

    提交建议
    微信扫一扫,分享给好友吧。