項(xiàng)目背景：

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

網(wǎng)站結(jié)構(gòu)與內(nèi)容調(diào)整：

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

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

網(wǎng)站設(shè)計(jì)定位：

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

交互&視覺設(shè)計(jì)：

交互設(shè)計(jì)：

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

視覺風(fēng)格：

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

首頁視覺設(shè)計(jì)：

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

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

Download頁面設(shè)計(jì)：

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

用戶反饋和成果：

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