騰訊動(dòng)漫 7.0 沒過多久之后，我們就緊鑼密鼓地進(jìn)入了 8.0 改版的階段。

改版思維的升級(jí)

每一次改版都有不同的側(cè)重點(diǎn)，騰訊動(dòng)漫一路走來已經(jīng)經(jīng)歷了很多次重大改版，與以往不同的是，8.0 改版我們?cè)跇I(yè)務(wù)理解、數(shù)據(jù)關(guān)注度方面都有明顯提升：

• 6.0 改版：被動(dòng)接受需求，主要負(fù)責(zé)視覺及體驗(yàn)優(yōu)化，沒有完整系統(tǒng)性的設(shè)計(jì)語言
• 7.0 改版 ：主動(dòng)提出優(yōu)化方案，打造完整、體系化的設(shè)計(jì)語言，但較為感性、主觀
• 8.0 改版 ：深度參與需求制定，全局性思考業(yè)務(wù)目標(biāo)，以數(shù)據(jù)為導(dǎo)向，量化設(shè)計(jì)價(jià)值

這次的視覺體系升級(jí)并不是核心，也不是孤立存在的系統(tǒng)，它完全是基于產(chǎn)品和業(yè)務(wù)需求而產(chǎn)生的升級(jí)優(yōu)化，并且以數(shù)據(jù)為導(dǎo)向重新回歸用戶視角，避免過度設(shè)計(jì)，圍繞「人（用戶視角）」這個(gè)概念進(jìn)行各個(gè)體系的新增、重構(gòu)、優(yōu)化。

本次改版設(shè)計(jì)師開通了大部分的后臺(tái)數(shù)據(jù)權(quán)限，洞察改版后的數(shù)據(jù)變化，并以此來為支撐點(diǎn)，量化設(shè)計(jì)的價(jià)值。

產(chǎn)品現(xiàn)狀及問題

1. 外部

隨著短視頻、5G 的到來，以及動(dòng)漫平臺(tái)的增加，造成外部競(jìng)品分流極其嚴(yán)重：

用戶的注意力被分散了太多太多。

2. 內(nèi)部

而內(nèi)部由于版權(quán)引入成本高、內(nèi)容制作周期長(zhǎng)等因素，導(dǎo)致內(nèi)容更新過慢，久而久之，用戶的閱讀時(shí)長(zhǎng)、活躍度、轉(zhuǎn)化率都有下降趨勢(shì)：

改版目標(biāo)

基于以上目前產(chǎn)品面臨的問題，本次改版我們主要聚焦在閱讀轉(zhuǎn)化和促活兩個(gè)方面，當(dāng)然，視覺體系也是一定要升級(jí)的，但它是輔助前兩點(diǎn)的，并不是為了優(yōu)化而優(yōu)化，總的來說，我們希望通過這次改版做到以下三點(diǎn)：

• 提高用戶的閱讀轉(zhuǎn)化
• 促進(jìn)用戶的活躍度
• 打造以業(yè)務(wù)為導(dǎo)向的視覺體驗(yàn)

提高閱讀轉(zhuǎn)化

先科普一下什么是閱讀轉(zhuǎn)化，其實(shí)就是從啟動(dòng) app 開始到進(jìn)入閱讀頁(yè)開始閱讀行為的過程，就是閱讀轉(zhuǎn)化。

那想提高閱讀轉(zhuǎn)化，就必須在過程中幫助用戶更好的進(jìn)行決策，吸引用戶快速進(jìn)入閱讀。

簡(jiǎn)單舉幾個(gè)助力用戶進(jìn)入閱讀頁(yè)的例子，比如封面圖做的超級(jí)好看，再比如有個(gè)評(píng)分 100 分的漫畫，這些都是可以吸引用戶進(jìn)行閱讀行為的方法。

那為了更加系統(tǒng)地進(jìn)行優(yōu)化升級(jí)，我們把用戶核心的閱讀轉(zhuǎn)化路徑進(jìn)行了梳理，如下圖：

基于這張路徑圖，我們重點(diǎn)優(yōu)化了很多觸點(diǎn)，比如詳情頁(yè)、分類、排行榜、標(biāo)簽系統(tǒng)（標(biāo)簽在首頁(yè)、分類、排行頁(yè)面都有露出）、評(píng)分系統(tǒng)等等，下面我們依次解析。

1. 詳情頁(yè)的架構(gòu)優(yōu)化

看剛才閱讀轉(zhuǎn)化路徑不難發(fā)現(xiàn)，基本所有的路徑都要經(jīng)過詳情頁(yè)再到閱讀頁(yè)，所以詳情頁(yè)是非常重要的轉(zhuǎn)化觸點(diǎn)。

舊版的詳情頁(yè)結(jié)構(gòu)十分混亂，到處都是重點(diǎn)，還分有詳情和目錄兩個(gè)子 tab，用戶無法輕易找到想看的信息：

新版詳情頁(yè)，我們將所有信息進(jìn)行整合，去掉那些無用信息，基于讓用戶更容易決策的理念，把重點(diǎn)的決策信息進(jìn)行突出，比如強(qiáng)化了評(píng)分、運(yùn)營(yíng)標(biāo)簽，新增章節(jié)封面（讓用戶更好地感受每個(gè)章節(jié)的大概內(nèi)容，從而決策要不要進(jìn)行觀看）：

新舊對(duì)比圖：

2. 標(biāo)簽系統(tǒng)的升級(jí)

涉及到的觸點(diǎn)頁(yè)面有：首頁(yè)、分類、排行、詳情頁(yè)。

我們?cè)跇?biāo)簽系統(tǒng)增加了更多維度的信息來幫助用戶進(jìn)行決策，比如男生、女生榜 top10、月票榜 top10、收藏?cái)?shù)破多少萬、在看人數(shù)破多少萬等等，相比之前單一的分類標(biāo)簽，可以讓用戶更直觀的感受作品值不值得閱讀：

除此之外，我們把很多標(biāo)簽的表達(dá)形式變得更加符合用戶視角，基于一些熱點(diǎn)和用戶常用詞匯來進(jìn)行改造，比如在分類就增加了運(yùn)營(yíng)標(biāo)簽篩選器，其中霸道與廢柴逆襲的數(shù)據(jù)非常可觀：

• 「霸道」標(biāo)簽：點(diǎn)擊率 47%、閱讀率 67%
• 「廢柴逆襲」：點(diǎn)擊率 54%、閱讀率 62%

分類新舊對(duì)比：

3. 排行榜的多維篩選信息

我們優(yōu)化了 top 100 榜，把平臺(tái)評(píng)分前 100 的優(yōu)質(zhì)漫畫做了整合來讓用戶進(jìn)行選擇，并且除了評(píng)分以外，排行榜還有其他很多維度的決策信息露出，比如月票量、閱讀量等等：

4. 讓用戶更好的識(shí)別內(nèi)容屬性

如果你想讓用戶更好的進(jìn)行選擇，那就應(yīng)該讓用戶更容易識(shí)別正在看的是什么內(nèi)容。

舉個(gè)例子，我們?cè)诓榭词醉?yè)各個(gè)模塊點(diǎn)擊率的時(shí)候，發(fā)現(xiàn)小說模塊的點(diǎn)擊率非常低，于是就隨機(jī)采訪了幾個(gè)用戶，在采訪的過程中我們發(fā)現(xiàn)用戶并不是對(duì)小說模塊的內(nèi)容不感興趣，而是根本沒有發(fā)現(xiàn)它的存在，在用戶的認(rèn)知里，小說的封面應(yīng)該是小豎封的形式，而我們?cè)瓉聿捎玫膮s是橫封的形式，在這樣的背景下，我們把小說的封面從橫封變成豎封，并且對(duì)排版也做了優(yōu)化，更加的透氣：

優(yōu)化后，小說模塊點(diǎn)擊率提高了 115%。

打造以業(yè)務(wù)為導(dǎo)向的視覺語言

7.0 的時(shí)候，我們的設(shè)計(jì)是感性的，而 8.0 最大的不同就是我們?cè)黾恿死硇缘牟糠帧?/p>

我們的出發(fā)點(diǎn)很簡(jiǎn)單，怎么能讓用戶更好的進(jìn)行決策？

如果總是讓用戶分散注意力，那用戶就很難聚焦在內(nèi)容本身，所以我們做的就是降噪，弱化框架，避免過于花哨，比如在首頁(yè)框架優(yōu)化的時(shí)候，橙色的干擾太多了：

所以我們將之前的頁(yè)面中繁多的橙色進(jìn)行無彩色處理，效果對(duì)比如下：

效果很明顯，這樣用戶就可以更好的聚焦內(nèi)容本身。

同樣的道理，書架頁(yè)面也是一樣的優(yōu)化方式：

以上這種優(yōu)化方式，我們提煉出一個(gè)核心的關(guān)鍵詞叫做：「色彩降噪」，整個(gè) 8.0 的視覺語言也是圍繞這樣一個(gè)點(diǎn)提煉出來的，為了避免花哨，我們從7.0 的三色升級(jí)為 8.0 的「重色與點(diǎn)綴色的配合使用」：

但是，其實(shí)僅僅只是「重色點(diǎn)綴色的配合使用」就可以有很多種玩法，比如純扁平風(fēng)格、純描邊風(fēng)格、描邊與扁平結(jié)合等等：

這時(shí)候選擇使用哪種風(fēng)格呢？

可以從兩個(gè)角度出發(fā)，一個(gè)是產(chǎn)品屬性、再有一個(gè)就是競(jìng)品分析，比如我們是漫畫平臺(tái)，所以黑色描邊可以很好的體現(xiàn)漫畫的屬性，其次我們做了一些視覺上的競(jìng)品分析，我們會(huì)發(fā)現(xiàn)，前兩種純描邊與純扁平風(fēng)格已經(jīng)有很多產(chǎn)品在用了：

于是經(jīng)過綜合考慮，我們選擇用描邊和扁平結(jié)合的設(shè)計(jì)語言來貫穿始終：

基于這個(gè)視覺語言，我們做了圖形延展和插畫延展。

圖形延展包括圖標(biāo)、按鈕、輔助圖形等等：

插畫延展包括空白頁(yè)、表情、性別選擇插圖等等：

所有的延展都是基于「降噪」的設(shè)計(jì)語言，而「降噪」的設(shè)計(jì)語言又完全以業(yè)務(wù)目標(biāo)為導(dǎo)向，這就是 8.0 改版與以往最大的不同。

7.0 與 8.0 的部分視覺對(duì)比：

促進(jìn)用戶活躍度

在促活方面，我們主要做了等級(jí)體系、V 會(huì)員體系。

1. 等級(jí)體系

等級(jí)體系面臨的最大問題就是等級(jí)區(qū)分不明顯，1 級(jí)與 40 級(jí)樣式相同，這樣很難激勵(lì)用戶去提高等級(jí)，在這樣的的問題之下，我們希望能夠讓用戶有一個(gè)明顯的等級(jí)認(rèn)知，以此來促進(jìn)用戶的活躍度，整體等級(jí)圖標(biāo)的樣式也是在 8.0 大的設(shè)計(jì)語言之下完成的。

對(duì)于等級(jí)體系的優(yōu)化，起到了很好的促活效果，可以看下數(shù)據(jù)對(duì)比，平時(shí)官方發(fā)布的帖子，用戶留言數(shù)平均為 100 條，而兩條關(guān)于等級(jí)體系的帖子，留言數(shù)高達(dá) 5000+ 條：

這對(duì)于我們一期的目標(biāo)：讓用戶有一個(gè)很好的等級(jí)認(rèn)知」 已經(jīng)算是完成的很好了。

對(duì)于等級(jí)體系，很多用戶反饋升級(jí)升的太快了，而且還有滿級(jí) 40 級(jí)，不應(yīng)該封頂，對(duì)于這些問題，我們都還在持續(xù)優(yōu)化中。

2. V會(huì)員體系

為了提高用戶活躍度以及付費(fèi)轉(zhuǎn)化，我們做了 V 會(huì)員體系，給出用戶相應(yīng)的特權(quán)，每日禮包、免費(fèi)領(lǐng)券、漫畫限免、5 折購(gòu)券等等，整體在 8.0 視覺體系的基礎(chǔ)上，打造一種有趣的、酷酷的會(huì)員感覺，為此我們?cè)O(shè)計(jì)了 V 會(huì)員的形象，黑子+蛤蟆鏡+傾斜的 V

為了更加的有吸引力，我們采用了 3d 的設(shè)計(jì)手法來做頭部：

目前 V 會(huì)員處在灰度階段，后面全亮后會(huì)持續(xù)跟進(jìn)數(shù)據(jù)情況。

總結(jié)

1. 角色定位

在角色方面，設(shè)計(jì)側(cè)以前屬于被動(dòng)接受需求的一方，現(xiàn)在主動(dòng)參與前期需求探討，并給出相對(duì)應(yīng)的建議和方案。

2. 視覺體驗(yàn)

在視覺語言方案，雖然 7.0 已經(jīng)有了體系化設(shè)計(jì)語言的意識(shí)，但是相對(duì)較為感性、主觀，而 8.0 我們完全以業(yè)務(wù)為導(dǎo)向來進(jìn)行設(shè)計(jì)提煉，更好的服務(wù)產(chǎn)品。

3. 數(shù)據(jù)關(guān)注

對(duì)于數(shù)據(jù)的關(guān)注度，8.0 版本之前是比較零散的，相對(duì)沒有那么敏感，目前設(shè)計(jì)師都已經(jīng)開通了相應(yīng)的數(shù)據(jù)權(quán)限，逐步學(xué)習(xí)數(shù)據(jù)的使用。

以上就是 8.0 改版的內(nèi)容，雖然時(shí)間比較緊張，人力資源有限，但在最后的結(jié)果反饋，不論是數(shù)據(jù)、體驗(yàn)、視覺都有一個(gè)較為正向的反饋，這可能只是我們的一個(gè)起點(diǎn)，后續(xù)我們會(huì)持續(xù)跟進(jìn)、優(yōu)化、升級(jí)！

2020 年，繼續(xù)加油鴨！

設(shè)計(jì)相關(guān)人員：ouou、菜心、小夢(mèng)、tina、喬喬。

更多通過改版提升數(shù)據(jù)的實(shí)戰(zhàn)案例：