QQ官网全新蜕变！IM QQ 改版（第一期）设计总结

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

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

探索需求：

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

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

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

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

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

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

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

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

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

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

设计方案

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

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

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

一、强化运营:

（1）优化首页推广运营模块

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

（2）增强重点功能的运营

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

二、优化下载途径：

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

三、增加内容沉淀：

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

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

（1）全局导航的优化：

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

（2）合理利用网页底部空间：

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

五、传递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%

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

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

• 用户普遍都非常认可改版后下载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】优设哥的全拼
您也可以通过扫描下方二维码快速添加：