QQ官网全新蜕变!IM QQ 改版(第一期)设计总结 - 优设-UISDC

QQ官网全新蜕变!IM QQ 改版(第一期)设计总结

2015/05/20 21726评论区

im-qq-website-design-summary-2

编者按:今天的网站改版绝对值得一看!毕竟是上亿人都在用的通讯软件,QQ 官网的改版非同小可,集结了大量顶尖设计师的腾讯设计中心也耗费了相当大的精力,现在将改版过程的经验分享出来,不可多得,别错过咯 >>>

官网作为用户了解一个产品最权威和直接的窗口,应该承载什么样的内容,取决于产品特征和调性。QQ是中国用户量最大的即时通讯件之一,功能越来越细致、丰富,仅仅提供展示和下载产品的信息源当然远远不够。我们迫切希望不仅仅是新品发布,QQ每一次改版的创新功能点,以及越发年轻化的品牌基调都可以更直接有效的传递给用户,让大家喜欢QQ,爱上QQ。同时进入官网能更加快捷的解决注册、下载以及安全问题。所以在这个前提下,IMQQ官网改版迫在眉睫。

blogbanner1

探索需求:

改版的前提是弄清楚修改的出发点,才能梳理出解决方案。在此,团队做了一次用户调研,总结出了我们需要优化的方向。

一、访问目的以下载为主,QQ安全和新版本功能介绍也非常重要:

从用研结论上看(如下图),QQ用户进入官网的预期和行为基本一致,其中下载的占比66%,其次是安全服务的需求或了解最新版本功能,占比分别是60%和40%。

IM官网全新蜕变: 改版(第一期)设计总结

同时对照百度搜“QQ”关键字的数据,QQ下载搜索量排名第三(图2),可以进一步验证用户进入IM官网首要诉求是下载。

IM官网全新蜕变: 改版(第一期)设计总结

二、官网界面美观和流畅度需要提升,同时应做好多平台适配。

在移动互联网这个大趋势下,用户使用移动设备浏览网页越发频繁。而对于使用电脑的用户,随着电脑屏幕越来越大,分辨率也随之增高,他们越发习惯精美的大图和饱满的网页设计。在大趋势下,web设计所运用的技术有了新变革,设计风格较几年已有所进步。所以,全新的信息结构与视觉表现,也是此次改版的最重要任务之一。

结合用研数据与对网页结构的分析,关于改版,我们得到了一致的结论:

IM官网全新蜕变: 改版(第一期)设计总结

1. 全新视觉风格 + 丰富内容承载:原官网界面比较中规中矩,所承载的功能和内容较少。而用户调研的结论是,用户除了完成下载以外,最多的便是了解增加的新功能,学习新功能使用方法;或遇到使用问题后,希望在官网上寻求解决方案。

2. 功能服务(快捷下载/注册/安全信息)的需求:从调研中发现用户非常注重下载,安全、注册等服务。他们希望在遇到问题的时候在官网上能找到相应的解决方案。所以加强快捷下载,账号安全等服务入口也非常重要。

3. 移动端的适配:移动端的用户使用量增大,需要完善手机端IMQQ官网的体验,完成移动端和PC端的官网适配。同时注重手机QQ在PC端下载的途径,减少用户操作成本。

设计方案

所以依照以上诉求,新版官网从结构和布局上我们都进行了全新的探索。

从最初的交互方案一步一步优化至最后的过程稿中,我们不断地修改和反思。历经了方案的修改、推翻、回炉,整个官网信息结构逐步开始清晰:

IM官网全新蜕变: 改版(第一期)设计总结

那么最后的方案究竟做了哪些特别的优化呢?

一、强化运营:

(1)优化首页推广运营模块

随着设备biger than biger,网页主流分辨率提升到了1366*768。网页设计更多的开始思考,如何利用越来越大的屏幕的空间。于是这次改版的首页顶部采用大图、大文字方式展现产品;打通全局导航,让页面更加通透。全屏的Banner会给进入网站的用户带来前所未有的视觉冲击力,并加强了内容的吸引力。Banner上常驻的“立即下载”按钮让用户高效转入对应平台子官网,进行下载。

IM官网全新蜕变: 改版(第一期)设计总结

(2)增强重点功能的运营

第二屏开始,开辟了成列QQ专题的展示区,用于介绍QQ最新主推功能点,以及一些新玩儿法。页面采用视差设计,希望用户在向下滑动浏览中,通过嵌入的图片、视频对该功能有更明晰的感受,同时也增加了网页的趣味性。

IM官网全新蜕变: 改版(第一期)设计总结

二、优化下载途径:

我们将下载页中的内容全部放出,放弃了旧版分为“电脑端”和“移动端”两个tab的结构。由于QQ产品平台众多,我们将他们细分为三类,按照用户使用量决定的三大台:QQ PC版,QQ手机版和QQ iPad版;接下来依次是Mac版,国际版以及Windows phone等较大使用量的QQ产品;“更多产品”里则包含了塞班等少数平台的QQ产品。此结构,用户下滑便可浏览完所有产品,大大减少用户在下载操作上的路径和思考。

20150428163230856-590x439

三、增加内容沉淀:

动态页主要展示QQ相关的运营内容。增加了沉淀专题的“精品专题”,和展示QQ新闻的“热门资讯”页面。充实了新版官网的内容。后续我们将把旧版的QQ象,QQ历程页面收纳其中,并建立QQ团队的博客,为用户进一步了解QQ提供了最有效的途径。

20150428162555493-590x447

四、强化QQ功能服务模块:

(1)全局导航的优化:

导航除了主要页面的指引以外,我们还将QQ安全,QQ会员以及注册按钮等放在了页面显著的顶部,方便用户寻找常用服务。

(2)合理利用网页底部空间:

经过调研我们发现,用户去子官网浏览查找更多信息的需求是存在的。所以我们将几大主要平台的子官网入口罗列出来放于底部,改变了旧版只能通过Banner运营位进入各个平台官网的单一互动。同时将QQ安全里常用的几项帮助反馈也一一呈现,帮助用户更直观地找到QQ安全相关的维护。

IM官网全新蜕变: 改版(第一期)设计总结

五、传递QQ品牌形象:

QQ一直坚持聚焦年轻保持活力,这只企鹅在日新月异的互联网中不断改进优化,至今仍然保持高度活跃。 IMQQ官网作为展示QQ的官方平台当然也要继承QQ年轻化的精神。所以整体官网设计简约纯粹,色彩明快,即使是图片也更加注重青春活力的感觉,希望透过色彩图形等视觉符号,传达出QQ年轻化的品牌形象。

项目成果与后续:

新版官网第一期上线后,官网访问量、PCQQ、手机QQ的下载量都有了不小的增长。

  • IM官网,PCQQ官网,手机QQ官网的点击率分别增长:43%,84%,53%.
  • 首页轮播Banner的点击率也有了大幅提升:第一张轮播banner点击率提升14.32个百分点;第二张则提升了13.04个百分点
  • 并且带动了QQ的下载量:PCQQ下载量提升100%;手机QQ下载量提升233.5%

IM官网全新蜕变: 改版(第一期)设计总结

那么此次改版是否有解决用户的需求呢?

在上线期间,我们在官网上设置了“官网小调查”的入口,对于下载流程的优化,新增的功能介绍和专题、新闻沉淀页等新增板块着重进行了调研,得到的反馈如下:

  • 用户普遍都非常认可改版后下载QQ更加便捷了,寻找解决安全问题的入口也比较方便。
  • 对于网页整体的设计满意率较高,但流畅度的满意率相对一般。

后续,我们会将“QQ历程”“团队博客”等模块逐一完成并发布,并逐步完善网站用户体验和流畅度,请各位尽请期待。如有任何意见和问题都可以及时反馈给我们,感谢大家对IM官网的关注和支持:)

大家可以登录 im.qq.com 体验新版QQ官网哦~

【最精彩的音乐软件设计实战经验分享】

网易云音乐WP端改版实录!
《化繁为简!网易云音乐WP1.0设计项目实战》

iPad的项目实战!干货更多!
《项目实战!网易云音乐iPad V1.0设计总结》

见证奇迹!QQ音乐的字体设计项目!
《字体设计实战!QQ音乐巅峰榜诞生记》

原文地址:腾讯ISUX

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量95万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/im-qq-website-design-summary

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 设计师专访 素材下载 视觉设计 设计流程 配色 web前端开发 用户体验设计 AI教程 海报设计 设计理论 字体下载 神器下载 设计规范 设计趋势 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里