[程序员] 我们在路上 ——qq旋风2设计历程 – 腾讯cdc

腾讯CDC  •  扫码分享

[程序员] 我们在路上 ——QQ旋风2设计历程

小虫 / 交互设计 / 2009.07.23 / 相关标签 QQ旋风 作品 花絮

58

[本文已刊登在:《程序员》2009年7月刊]

  2006年腾讯第一款下载器“超级旋风”诞生了,在伴随用户的4年中,主要的精力投入到完善性能和资源上,随着市场上各类下载产品的日渐成熟,用户的要求也越来越高了,为了让用户有更好的下载体验,QQ旋风是不会安于现状的,在确立“创新”的领导地位后,将行进路线作了梳理,化繁为简地归纳到几个关键词上:稳扎稳打提升

  于是一场浩浩荡荡的“改革”开始了……

 

稳扎——前期调研

  通过数据分析和用户调研。结合QQ旋风本身的特点,我们制定了产品设计的方向:

  ·资源中心,实现找资源、下载、播放、分享一体化。
  ·资源结合紧密,在软件内实现搜索、下载、分享一站式服务。
  ·突出排行榜,热门资源一步到位。
  ·简洁美观 ,操作简单,无过多的干扰元素。
  ·简化下载步骤,点击即开始下载。

  QQ旋风愿景:打造高速、小巧、绿色的一站式下载器。

 

稳打——QQ旋风改头换面

Preview1
设计风格:清爽、简约

  受QQmusic的启发,设计了资源库(小旋窝),我们希望做到一站式下载,闭环搜索,这里用户可以流畅的查找、浏览和下载资源,避免弹出过多的网页,提升下载过程的体验。

视觉风格确定:

  QQ旋风新面孔(logo)
  采用稳重的正面角度,速度的仪表盘和箭头曲线造型,打破圆的呆板,并隐含着“Q”的字母造型。使用的元素和造型表现了下载的飞速。

我们在路上——QQ旋风2设计历程

  邀请了设计中心三位实力视觉设计师:小花、骑士、Mojo大人进行视觉竞稿,输出6组设计稿。设计关键字:亲和力、时尚、轻快、腾讯。

我们在路上——QQ旋风2设计历程

我们在路上——QQ旋风2设计历程

我们在路上——QQ旋风2设计历程

我们在路上——QQ旋风2设计历程

我们在路上——QQ旋风2设计历程

我们在路上——QQ旋风2设计历程

  最终定稿

  经过多次专家评审、用户意见收集,最终选用B方案:延续腾讯产品一贯简约风格,色彩区块分布合理,轻巧大方,操作性、扩张性强。

 我们在路上——QQ旋风2设计历程

 

提升——用户调研+交互体验+视觉设计不断优化……

QQ旋风Beta1 版本

  QQ旋风整个过程都有用户参与其中,Demo版本完成后,我们邀请了用户到体验室做现场体验,总体评价良好;且在用户的帮助下发现了不少体验上的问题。
  在后期版本的优化中得到了优化。因此您的热心参与对提升我们的产品体验,是非常有帮助的。

  默认皮肤选定

  每次的设计都不是偶然和随意的。默认皮肤的选定,也综合考虑了QQ旋风的产品定位和发展方向,才确以较为沉稳大气的深蓝色作为主界面的颜色

我们在路上——QQ旋风2设计历程

我们在路上——QQ旋风2设计历程

QQ旋风新春皮肤版

  悲喜交集的2008年过去了,特别推出新春皮肤版本,给大家打打气,祈求新的一年我们会更好!

我们在路上——QQ旋风2设计历程

QQ旋风2正式版

  经过了大半年,今天QQ旋风正式版终于发布了,YEAH!!   下载地址:http://pc.qq.com/xf2

我们在路上——QQ旋风2设计历程

后记

  感谢在论坛上、blog上给QQ旋风提出宝贵的建议的朋友,谢谢你们的关心。您的热情参与,您的宝贵建议,是我们提升产品体验的重要保证。让我们联手打造极速、简约、清爽的新一代下载工具。
  QQ旋风团队任重而道远,因为我们才刚上路……

 

旋风团队的兄弟姐妹:

我们在路上——QQ旋风2设计历程

(本文由Mojo大人,桃子,佑米,小虫联合撰写)

 

[本文已刊登在:《程序员》2009年7月刊]

  • (本文出自Tencent CDC Blog,转载时请注明出处)
  • 133
  • 给好文加心!
  • 分享到...
< 从长尾理论和二八定律的比较去看用户体验 设计与表达 >

  1. henry on said:

    正式版我早已经在使用了。。
    感觉很不错,非常喜欢旋风的LOGO。。。
    依然很羡慕这个设计团队,那么的有活力和激情,总给带给人很多惊喜,加油。。。。

  • 摇头玩 on said:

    支持一下!~

  • klf on said:

    很喜欢这个绿色箭头的大图标 很有质感 表意明确

  • tanyear on said:

    之前一直在用QQ旋风。讨厌迅雷。
    但是上周用了下迅雷,发现它的下载速度的确快很多。

  • 兔子 on said:

    漂亮的设计,一个有活力青春团队。

  • Kimcool on said:

    这次设计的很好很强大,我唯一的意见就是界面太小了,试着做大一点,毕竟现在大家的分辨率都挺高的。

  • 小虫 on said:

    To Kimcool,
    非常感谢您的意见。^_^现在的设计还是以1024为主,尤其是资源库,用户是希望能看到更多的内容的。

  • Soncy on said:

    蛮喜欢前面几套皮肤,不知道能不能加入到换肤。

  • will on said:

    新版的设计给了人眼前一亮的感觉,感觉你们在推soso!嘻…………

  • Lyman on said:

    还是有美女的 嗯嗯 不错 ^_^

  • bozzi on said:

    看到那个时钟,让我想到 safari
    喜欢QQ,喜欢CDC..

  • maryml3 on said:

    很好,还试羡慕!

  • maryml3 on said:

    很好,还是羡慕!

  • 笑傲江湖 on said:

    LOGO质感很好,不错,但是刻度盘上的数字能不能换大点啊,家用ADSL好歹也100-200K的速度,现在刻度不会是汽车速度仪表盘,既然是下载用的,刻度也该用下载的速度吗,呵呵。

  • 龙子 on said:

    看完这篇文章之后,我有一种冲动:卸载Thunder,安装QQ旋风!

  • key4ever on said:

    so cool~~~!

  • 吃吃 on said:

    我喜欢左二小美女

  • how on said:

    to 笑傲江湖,
    我代设计师回答:单位是M(未来是G)^_^

  • Tsai.淳西 on said:

    感觉第一个方案不错!开始等放在上面舒服

  • 草根网 on said:

    收藏至20ju.com

  • 黄金体验 on said:

    新logo的数字刻度间距好像有问题
    比如75到80之间是3个指针
    但是按照刻度应该是4个指针吧
    75 76 77 78 79 80
    中间应该4个
    不好意思
    我吹毛求疵了 呵呵~

  • converter on said:

    非常可爱的logo!
    很不错啊

  • 最有效的减肥药 on said:

    用了下 还可以的

  • 蚂蚁,以用户为中心的设计 on said:

    很有亲和力….

  • slee on said:

    logo貌似IE6工具栏训了N久的历史icon…

    难道就是传说中的水平翻转优化版~~~

    呵呵。。

  • 小白 on said:

    赶紧的更新~~

  • 变色龙 on said:

    感觉挺好的!呵呵!本人也很喜欢用户体验之类的东东!www.chameleon85.com(个人站)

  • ccvi on said:

    那位涂黑指甲的长发漂亮MM叫什么名字吖?

  • weakow on said:

    那个表盘刻度确实有问题,黄金体验说得对,这种恐怕还不算吹毛求疵,我觉得有必要改一下 :-)
    总体非常喜欢,能得到很多启示~~ 不过最后一张照片,是不是P得有点明显?哈哈

  • 天星 on said:

    感覺資源庫裏的東西還是少了點:我用旋風搜索很多東西資源衹有十幾二十的樣子,有的甚至是個位數的資源,更誇張的是有些居然搜索不到;而用迅雷..快車的話怎麼也有個四十到五十的樣子.非常希望旋風的資源庫能夠更加的充實.
    ps:我說的資源是下載的時候旋風搜索到的資源數.

  • l751 on said:

    主界面是模仿safari下载界面设计出来的?

  • chumsdock on said:

    我感觉主窗口的颜色饱和度太高了,进度条、图标的颜色都很饱和,过于busy

  • Pingback: [组图]实例:QQ旋风2设计历程 | 我的爬行JI

  • gege on said:

    从 QQ 2009 到 QQ 旋风,我看到了太多苹果界面的影子。

  • 侠气金牛 on said:

    为什么不把 QQ 旋风内置一个万能盗链的功能,可以下载迅雷,快车甚至是网盘上所有的连接。

  • Xiao.G on said:

    我总感觉旋风的这个图标我见过
    和日本的一个设计师的感觉很像

  • pengkai on said:

    进度和时间不符

  • Crane on said:

    颜色设计真是没的说。非常COOL。只是要注意一个问题,当前用户大部分使用WINDOWS XP系统,IE6、IE7浏览器。如果该图标出现在工具栏标准按钮内比较容易和“历史记录”的图标混淆。:)

  • 大米 on said:

    格子衬衫旁边那个MM不错~

  • lovoror on said:

    旋风的最大问题是:只是一个可以替代IE右键的工具。

  • 西风 on said:

    我感觉你们应该多涉及下QQ皮肤
    别整天搞些商业皮肤难看死了

  • zhaocha on said:

    你的QQ旋风2的图形标志与WINDOS XP的IE视窗工具栏上查询上网“历史”的按钮图形标志极其相似。

  • pan on said:

    你的QQ旋风2的图形标志与WINDOS XP的IE视窗工具栏上查询上网“历史”的按钮图形标志极其相似。

    IE6工具栏的历史的水平翻转优化版

    也难怪很多人都说好像在哪里见过

  • 小虫 on said:

    To Pan & zhaocha,
    谢谢两位的意见。这个纯属巧合。^_^
    ——————————————————-
    pan 说2009/08/24
    你的QQ旋风2的图形标志与WINDOS XP的IE视窗工具栏上查询上网“历史”的按钮图形标志极其相似。IE6工具栏的历史的水平翻转优化版,也难怪很多人都说好像在哪里见过….

  • xhne on said:

    朋友们都说”微软”会来和你或者公司商量版权或盗版问题.

  • Y.Jiajia on said:

    质感设计无敌的说~但是看到这个Logo时我总是想到蜘蛛侠里的‘毒蜘蛛’!

  • jerry on said:

    汗死我了。IE6历史记录ICON的长尾巴版?

  • PP on said:

    光界面 好看 有什么用!

  • tuopan on said:

    前几套皮肤倒是很有感觉的。

  • tanx on said:

    我是来看美女的

  • 随意打赏

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