萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> IM QQ 改版(第一期)設計總結

IM QQ 改版(第一期)設計總結

   今天的網站改版絕對值得一看!畢竟是上億人都在用的通訊軟件,QQ 官網的改版非同小可,集結了大量頂尖設計師的騰訊設計中心也耗費了相當大的精力,現在將改版過程的經驗分享出來,不可多得,別錯過咯 >>>

  官網作為用戶了解一個產品最權威和直接的窗口,應該承載什麼樣的內容,取決於產品特征和調性。QQ是中國用戶量最大的即時通訊件之一,功能越來越細致、豐富,僅僅提供展示和下載產品的信息源當然遠遠不夠。我們迫切希望不僅僅是新品發布,QQ每一次改版的創新功能點,以及越發年輕化的品牌基調都可以更直接有效的傳遞給用戶,讓大家喜歡QQ,愛上QQ。同時進入官網能更加快捷的解決注冊、下載以及安全問題。所以在這個前提下,IMQQ官網改版迫在眉睫。

IM QQ 改版(第一期)設計總結 三聯

  探索需求:

  改版的前提是弄清楚修改的出發點,才能梳理出解決方案。在此,團隊做了一次用戶調研,總結出了我們需要優化的方向。

  一、訪問目的以下載為主,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官網哦~

copyright © 萬盛學電腦網 all rights reserved