IM官網(wǎng)全新蛻變: 改版(第一期)設(shè)計(jì)總結(jié)

1 評(píng)論 21688 瀏覽 19 收藏 11 分鐘

官網(wǎng)作為用戶了解一個(gè)產(chǎn)品最權(quán)威和直接的窗口,應(yīng)該承載什么樣的內(nèi)容,取決于產(chǎn)品特征和調(diào)性。QQ是中國用戶量最大的即時(shí)通訊件之一,功能越來越細(xì)致、豐富,僅僅提供展示和下載產(chǎn)品的信息源當(dāng)然遠(yuǎn)遠(yuǎn)不夠。我們迫切希望不僅僅是新品發(fā)布,QQ每一次改版的創(chuàng)新功能點(diǎn),以及越發(fā)年輕化的品牌基調(diào)都可以更直接有效的傳遞給用戶,讓大家喜歡QQ,愛上QQ。同時(shí)進(jìn)入官網(wǎng)能更加快捷的解決注冊(cè)、下載以及安全問題。所以在這個(gè)前提下,IMQQ官網(wǎng)改版迫在眉睫。

探索需求:

改版的前提是弄清楚修改的出發(fā)點(diǎn),才能梳理出解決方案。在此,團(tuán)隊(duì)做了一次用戶調(diào)研,總結(jié)出了我們需要優(yōu)化的方向。

一.訪問目的以下載為主,QQ安全和新版本功能介紹也非常重要:

從用研結(jié)論上看(如下圖),QQ用戶進(jìn)入官網(wǎng)的預(yù)期和行為基本一致,其中下載的占比66%,其次是安全服務(wù)的需求或了解最新版本功能,占比分別是60%和40%。

IM官網(wǎng)全新蛻變: 改版(第一期)設(shè)計(jì)總結(jié)

同時(shí)對(duì)照百度搜“QQ”關(guān)鍵字的數(shù)據(jù),QQ下載搜索量排名第三(圖2),可以進(jìn)一步驗(yàn)證用戶進(jìn)入IM官網(wǎng)首要訴求是下載。

IM官網(wǎng)全新蛻變: 改版(第一期)設(shè)計(jì)總結(jié)

二.官網(wǎng)界面美觀和流暢度需要提升,同時(shí)應(yīng)做好多平臺(tái)適配。

在移動(dòng)互聯(lián)網(wǎng)這個(gè)大趨勢(shì)下,用戶使用移動(dòng)設(shè)備瀏覽網(wǎng)頁越發(fā)頻繁。而對(duì)于使用電腦的用戶,隨著電腦屏幕越來越大,分辨率也隨之增高,他們?cè)桨l(fā)習(xí)慣精美的大圖和飽滿的網(wǎng)頁設(shè)計(jì)。在大趨勢(shì)下,web設(shè)計(jì)所運(yùn)用的技術(shù)有了新變革,設(shè)計(jì)風(fēng)格較幾年已有所進(jìn)步。所以,全新的信息結(jié)構(gòu)與視覺表現(xiàn),也是此次改版的最重要任務(wù)之一。

結(jié)合用研數(shù)據(jù)與對(duì)網(wǎng)頁結(jié)構(gòu)的分析,關(guān)于改版,我們得到了一致的結(jié)論:

IM官網(wǎng)全新蛻變: 改版(第一期)設(shè)計(jì)總結(jié)

1.??全新視覺風(fēng)格+豐富內(nèi)容承載:原官網(wǎng)界面比較中規(guī)中矩,所承載的功能和內(nèi)容較少。而用戶調(diào)研的結(jié)論是,用戶除了完成下載以外,最多的便是了解增加的新功能,學(xué)習(xí)新功能使用方法;或遇到使用問題后,希望在官網(wǎng)上尋求解決方案。

2.??功能服務(wù)(快捷下載/注冊(cè)/安全信息)的需求:從調(diào)研中發(fā)現(xiàn)用戶非常注重下載,安全、注冊(cè)等服務(wù)。他們希望在遇到問題的時(shí)候在官網(wǎng)上能找到相應(yīng)的解決方案。所以加強(qiáng)快捷下載,賬號(hào)安全等服務(wù)入口也非常重要。

3.??移動(dòng)端的適配:移動(dòng)端的用戶使用量增大,需要完善手機(jī)端IMQQ官網(wǎng)的體驗(yàn),完成移動(dòng)端和PC端的官網(wǎng)適配。同時(shí)注重手機(jī)QQ在PC端下載的途徑,減少用戶操作成本。

設(shè)計(jì)方案

所以依照以上訴求,新版官網(wǎng)從結(jié)構(gòu)和布局上我們都進(jìn)行了全新的探索。

從最初的交互方案一步一步優(yōu)化至最后的過程稿中,我們不斷地修改和反思。歷經(jīng)了方案的修改、推翻、回爐,整個(gè)官網(wǎng)信息結(jié)構(gòu)逐步開始清晰:

IM官網(wǎng)全新蛻變: 改版(第一期)設(shè)計(jì)總結(jié)

那么最后的方案究竟做了哪些特別的優(yōu)化呢?

一.??強(qiáng)化運(yùn)營:

(1)優(yōu)化首頁推廣運(yùn)營模塊

隨著設(shè)備biger than biger,網(wǎng)頁主流分辨率提升到了1366*768。網(wǎng)頁設(shè)計(jì)更多的開始思考,如何利用越來越大的屏幕的空間。于是這次改版的首頁頂部采用大圖、大文字方式展現(xiàn)產(chǎn)品;打通全局導(dǎo)航,讓頁面更加通透。全屏的Banner會(huì)給進(jìn)入網(wǎng)站的用戶帶來前所未有的視覺沖擊力,并加強(qiáng)了內(nèi)容的吸引力。Banner上常駐的“立即下載”按鈕讓用戶高效轉(zhuǎn)入對(duì)應(yīng)平臺(tái)子官網(wǎng),進(jìn)行下載。

IM官網(wǎng)全新蛻變: 改版(第一期)設(shè)計(jì)總結(jié)

(2)增強(qiáng)重點(diǎn)功能的運(yùn)營

第二屏開始,開辟了成列QQ專題的展示區(qū),用于介紹QQ最新主推功能點(diǎn),以及一些新玩兒法。頁面采用視差設(shè)計(jì),希望用戶在向下滑動(dòng)瀏覽中,通過嵌入的圖片、視頻對(duì)該功能有更明晰的感受,同時(shí)也增加了網(wǎng)頁的趣味性。

IM官網(wǎng)全新蛻變: 改版(第一期)設(shè)計(jì)總結(jié)

二.??優(yōu)化下載途徑:

我們將下載頁中的內(nèi)容全部放出,放棄了舊版分為“電腦端”和“移動(dòng)端”兩個(gè)tab的結(jié)構(gòu)。由于QQ產(chǎn)品平臺(tái)眾多,我們將他們細(xì)分為三類,按照用戶使用量決定的三大臺(tái):QQpc版,QQ手機(jī)版和QQipad版;接下來依次是mac版,國際版以及windows phone等較大使用量的QQ產(chǎn)品;“更多產(chǎn)品”里則包含了塞班等少數(shù)平臺(tái)的QQ產(chǎn)品。此結(jié)構(gòu),用戶下滑便可瀏覽完所有產(chǎn)品,大大減少用戶在下載操作上的路徑和思考。

IM官網(wǎng)全新蛻變: 改版(第一期)設(shè)計(jì)總結(jié)

三.??增加內(nèi)容沉淀:

動(dòng)態(tài)頁主要展示QQ相關(guān)的運(yùn)營內(nèi)容。增加了沉淀專題的“精品專題”,和展示QQ新聞的“熱門資訊”頁面。充實(shí)了新版官網(wǎng)的內(nèi)容。后續(xù)我們將把舊版的QQ象,QQ歷程頁面收納其中,并建立QQ團(tuán)隊(duì)的博客,為用戶進(jìn)一步了解QQ提供了最有效的途徑。

IM官網(wǎng)全新蛻變: 改版(第一期)設(shè)計(jì)總結(jié)

四.?強(qiáng)化QQ功能服務(wù)模塊:

(1)全局導(dǎo)航的優(yōu)化:

導(dǎo)航除了主要頁面的指引以外,我們還將QQ安全,QQ會(huì)員以及注冊(cè)按鈕等放在了頁面顯著的頂部,方便用戶尋找常用服務(wù)。

(2)合理利用網(wǎng)頁底部空間:

經(jīng)過調(diào)研我們發(fā)現(xiàn),用戶去子官網(wǎng)瀏覽查找更多信息的需求是存在的。所以我們將幾大主要平臺(tái)的子官網(wǎng)入口羅列出來放于底部,改變了舊版只能通過Banner運(yùn)營位進(jìn)入各個(gè)平臺(tái)官網(wǎng)的單一互動(dòng)。同時(shí)將QQ安全里常用的幾項(xiàng)幫助反饋也一一呈現(xiàn),幫助用戶更直觀地找到QQ安全相關(guān)的維護(hù)。

IM官網(wǎng)全新蛻變: 改版(第一期)設(shè)計(jì)總結(jié)

五. ?傳遞QQ品牌形象:

QQ一直堅(jiān)持聚焦年輕保持活力,這只企鵝在日新月異的互聯(lián)網(wǎng)中不斷改進(jìn)優(yōu)化,至今仍然保持高度活躍。?IMQQ官網(wǎng)作為展示QQ的官方平臺(tái)當(dāng)然也要繼承QQ年輕化的精神。所以整體官網(wǎng)設(shè)計(jì)簡約純粹,色彩明快,即使是圖片也更加注重青春活力的感覺,希望透過色彩圖形等視覺符號(hào),傳達(dá)出QQ年輕化的品牌形象。

項(xiàng)目成果與后續(xù):

新版官網(wǎng)第一期上線后,官網(wǎng)訪問量、PCQQ、手機(jī)QQ的下載量都有了不小的增長。

  • IM官網(wǎng),PCQQ官網(wǎng),手機(jī)QQ官網(wǎng)的點(diǎn)擊率分別增長:43%,84%,53%.
  • 首頁輪播Banner的點(diǎn)擊率也有了大幅提升:第一張輪播banner點(diǎn)擊率提升14.32個(gè)百分點(diǎn);第二張則提升了13.04個(gè)百分點(diǎn)
  • 并且?guī)?dòng)了QQ的下載量:PCQQ下載量提升100%;手機(jī)QQ下載量提升233.5%

IM官網(wǎng)全新蛻變: 改版(第一期)設(shè)計(jì)總結(jié)

那么此次改版是否有解決用戶的需求呢?

在上線期間,我們?cè)诠倬W(wǎng)上設(shè)置了“官網(wǎng)小調(diào)查”的入口,對(duì)于下載流程的優(yōu)化,新增的功能介紹和專題、新聞沉淀頁等新增板塊著重進(jìn)行了調(diào)研,得到的反饋如下:

  • 用戶普遍都非常認(rèn)可改版后下載QQ更加便捷了,尋找解決安全問題的入口也比較方便。
  • 對(duì)于網(wǎng)頁整體的設(shè)計(jì)滿意率較高,但流暢度的滿意率相對(duì)一般。

后續(xù),我們會(huì)將“QQ歷程”“團(tuán)隊(duì)博客”等模塊逐一完成并發(fā)布,并逐步完善網(wǎng)站用戶體驗(yàn)和流暢度,請(qǐng)各位盡請(qǐng)期待。如有任何意見和問題都可以及時(shí)反饋給我們,感謝大家對(duì)IM官網(wǎng)的關(guān)注和支持:)

 

作者:GOtinaGO

來源:騰訊ISUX

原文地址:http://isux.tencent.com/imofficial-website-new-transformation-design-summary.html

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. ??

    來自廣東 回復(fù)