網站設計分析：國際QQ新版官網項目總結

　　　項目背景：

　　國際QQ官網是宣傳國際QQ品牌的主力站點、下載國際QQ的重要入口。舊版國際QQ官網更加偏向於一個門戶類網站，重點提供相關新聞資訊，互動社區，群組推薦等基礎服務，而對於產品本身的功能介紹，品牌推廣以及下載服務提供的版面較少。雖然網站提供的相關社交服務能夠更好的提高產品活躍度，不過由於國際QQ的用戶群體與QQ的用戶群體存在著很大的差異，很大一部分使用國際QQ的用戶並沒有用過QQ，對於產品本身甚至是功能使用還不是很熟悉。而新版國際 QQ官網的主要目標是以宣傳和推廣國際QQ品牌為主，相應的加入適量的社交服務。減少網站後期的運營壓力，強化品牌風格，並且舊版官網整體視覺風格已經相對過時。在這個背景下，有必要對國際QQ官網進行一次大改版。

　　　網站結構與內容調整：

　　舊版官網出於運營的考慮，加入了很多第三方網站鏈接以及新聞資訊消息等等，導致整個國際QQ官網沒有很好的去說明產品本身，同時資訊的運營也給相對較小的國際版團隊帶來了不小的壓力。根據這個問題我們對於新版框架進行以下調整：

　　網頁Tab根據內容調整重新分級,新版Tab分為 Download，Feature，Explore，Help幾個大類，去掉Events，Lifestyle，Web directory等運營類版面，只提供部分第三方服務在Explore一項。

　　模塊化整體頁面布局與內容，推進響應式網頁設計進行，使在不同的設備與環境下都能夠更好的浏覽國際版官網，實現移動端和PC端的一站式無縫體驗。

　　　網站設計定位：

　　新版官網將對網站定位進行重新調整，更多的讓用戶了解什麼是國際QQ，更方便的找到下載入口，從而傳達出國際QQ的品質感。其次，設計方向上會做出很大的改變。之前的舊版官網過於工具化，這次改版會加入更多的感情元素，通過情感化設計更好的傳達我們產品的主旨。

　　交互&視覺設計：

　　　　交互設計：

　　交互設計這次的主要的難點是對網站結構調整帶來的頁面布局設計，而首頁是難點。首頁這次除了要展現6個功能點以外，還要展現部分的Explore信息，這樣勢必會造成首頁頁面過長，對於用戶浏覽不是一個很好地體驗，最後經過和產品討論，決定把功能點分成3個分類，通過分級Tab形式展現功能點。而 Explore只展現相對比較熱門的3類，橫向展現在底部。以展現功能點為主，Explore往後排保持頁面的主次性。

　　視覺風格：

　　做網站視覺風格設定時一定要考慮好整體方向，首先一定要符合承載產品的氣質，同時也一定要考慮好後期頁面實現的技術要求和時間成本。因為考慮到國際 QQ本身產品的定位，相對於QQ，去掉了很多例如微博，朋友網等社交運營服務，基本只保留了以聊天為主的產品框架，主攻外國用戶，所以產品風格大氣，簡潔。視覺風格決定采用最近比較流行的flat風，不僅能夠使網站整體視覺風格更加清晰簡明，同時矢量化圖形也能夠更好的配合responsive響應式網頁樣式的實現。

　　　首頁視覺設計：

　　首頁的第一屏對於整個網站的風格展示以及產品定位起著十分重要的作用。這次嘗試使用三個不同的場景banner做為主要展示元素，分別是展現的國際 QQ在“朋友間，家庭裡，工作中”的使用狀態。朋友間的暢快交流，家庭裡的溫暖對話，工作中的無縫溝通無不體現了國際QQ “Boundless World, Boundless Chat”的產品定位，情感化元素也更能抓住用戶眼球，提供網站轉化率的同時也豐富產品層次。

　　而新版官網首頁呈現的的另一大重要信息是6個feature功能點。對於功能點展現，傳統產品類網站基本是以產品截圖來說明,這次改版采用插圖結合相關界面元素來诠釋六個功能點，不僅能夠很好地诠釋產品功能，同時矢量化圖片放大縮小也不會存在質量損失，能夠更好地適應響應式網站的多平台實現，減少視覺修改成本。

　　Download頁面設計：

　　舊版官網由於產品發展的關系，只提供了桌面客戶端的下載區域。隨著國際QQ產品線的不斷豐富，必須提供多模塊下載區域來滿足產品需求。 Download頁面采用頂部Tab切換方式供用戶選擇不同平台國際QQ產品的下載。頂部會有網頁所在位置提示，同時采用深色背景條做底與首頁 banner相協調，使用戶從首頁跳轉至下載頁面時保持視覺的貫通性。

　　　用戶反饋和成果：

　　國際QQ新版官網改版以後，網站整體設計，方向定位，產品下載量等各方面均得到了提升。網站自8月20號上線一周以來總體訪問量增加了20%，國際QQ產品大陸下載量增加了2倍(香港為6倍)有效的為國際QQ的產品及品牌進行宣傳。

　　請訪問國際QQ官網了解更多：http://www.imqq.com/

　　感謝你的閱讀，本文由 騰訊ISUX 版權所有，轉載時請注明出處，違者必究，謝謝你的合作。

　　注明出處格式：騰訊ISUX (http://isux.tencent.com/qq-international-web-design.html)