編者按：今天的網站改版絕對值得一看！畢竟是上億人都在用的通訊軟件，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】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：