國際QQ新版官網(wǎng)項目總結

2013-9-16    藍藍設計的小編

轉載藍藍設計(   m.sillybuy.com  )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供有效的   BS界面設計 、 cs界面設計 、  ipad界面設計   、  包裝設計 、  圖標定制 、  用戶體驗 、交互設計、   網(wǎng)站建設 、平面設計服務

來源:http://isux.tencent.com/qq-international-web-design.html

如果您想訂閱本博客內容,每天自動發(fā)到您的郵箱中,   請點這里

18

項目背景:

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

網(wǎng)站結構與內容調整:

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

  • 網(wǎng)頁Tab根據(jù)內容調整重新分級,新版Tab分為 Download,F(xiàn)eature,Explore,Help幾個大類,去掉Events,Lifestyle,Web directory等運營類版面,只提供部分第三方服務在Explore一項。
  • 模塊化整體頁面布局與內容,推進響應式網(wǎng)頁設計進行,使在不同的設備與環(huán)境下都能夠更好的瀏覽國際版官網(wǎng),實現(xiàn)移動端和PC端的一站式無縫體驗。

網(wǎng)站設計定位:

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

交互&視覺設計:

交互設計:

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

nnw1

視覺風格:

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

首頁視覺設計:

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

Pic1

 

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

pic22233sdfsdgg

 

Download頁面設計:

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

123414r-已修復-已修復

用戶反饋和成果:

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

分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://m.sillybuy.com

存檔