如何讓體驗高效且有趣？來看QQ動漫的實戰(zhàn)改版案例！

項目背景

隨著網(wǎng)絡(luò)的持續(xù)提速和優(yōu)質(zhì)國漫的不斷興起，動漫在年輕人的生活中，已經(jīng)成為了他們?nèi)粘２豢苫蛉钡囊徊糠?。為了更好地?QQ 當(dāng)中的海量年輕用戶提供服務(wù)，我們也想借著產(chǎn)品這次想更純粹化的契機(jī)，對 QQ 動漫的品牌和體驗進(jìn)行一次全面的升級改造。

目標(biāo)定義

通過前期的分析體驗，我們梳理出目前產(chǎn)品存在的一些核心問題。

而從用研和報告發(fā)現(xiàn)，我們的目標(biāo)用戶主要是小學(xué)高年級以及初高中生。從調(diào)研中我們了解到他們?nèi)粘Ｊ褂玫纳暇W(wǎng)設(shè)備主要是以中低端機(jī)型為主，而用于娛樂消費(fèi)的時間一般也是比較有限且固定的，所以提升他們的效率就顯得尤為關(guān)鍵。

我們的用戶大部分以獨(dú)生子女為主，受到家庭環(huán)境以及學(xué)習(xí)壓力的影響，無形中會造成他們情感上的空缺。如果我們產(chǎn)品只是單純地追求效率，會顯得非常缺乏人情味。而輕松愉快的情緒和環(huán)境，不僅有助于降低壓力，還更容易喚醒人的行為，形成一種積極正向的反饋，增強(qiáng)情感連接和歸屬感。因此在這次改版里，我們希望滿足用戶在 QQ 里高效追漫的同時，也注入更多趣味愉悅的元素。綜上所述，我們在這次的改版中主要圍繞以下 3 個方面進(jìn)行體驗升級。

設(shè)計執(zhí)行

1. 品牌升級

波洞作為 QQ 動漫的衍生出來的獨(dú)立 APP，已經(jīng)在用戶中形成一定的影響力。這次的動漫品牌升級，我們也繼續(xù)對波洞品牌進(jìn)行延展，將波洞 logo 中的基礎(chǔ)圖形擴(kuò)展為動漫的品牌語言。

定義品牌容器

波洞的 logo 輪廓本身具有很強(qiáng)的差異性和識別度，此次升級在繼承的基礎(chǔ)上進(jìn)行了延展設(shè)計，由橢圓+正圓組合成基礎(chǔ)圖形，強(qiáng)調(diào)圖形的記憶點。其中品牌的基礎(chǔ)容器橢圓是由標(biāo)準(zhǔn)的正圓?高度，傾斜 45°后而得來的，而正圓則作為輔助圖形。

打造品牌記憶點

主頁是整個產(chǎn)品的門面，也是用戶停留時間最長的頁面。對比市面上的同類型動漫類產(chǎn)品，我們發(fā)現(xiàn)在產(chǎn)品結(jié)構(gòu)上有著極大的相似性，比如在主頁都會用焦點圖加一組作品的形式。這就要求我們需要在同質(zhì)化的基礎(chǔ)上呈現(xiàn)出自己的個性。我們通過把橢圓這個品牌圖形延展到焦點圖和金剛區(qū)域圖標(biāo)上，在曝光最高的觸點強(qiáng)化品牌印記。

另外波點和描邊都是漫畫中最常見的元素，我們在背景和容器、以及按鈕的點綴設(shè)計上，也大量應(yīng)用這兩個元素，在細(xì)節(jié)上增強(qiáng)產(chǎn)品的動漫屬性。

升級 UI 風(fēng)格

UI 的風(fēng)格會傳遞出產(chǎn)品氣質(zhì)，我們期待通過此次 UI 的優(yōu)化，讓用戶感受到我們的產(chǎn)品品質(zhì)。所以在整體配色，圖標(biāo)風(fēng)格和控件樣式上，我們對 QQ 動漫的 UI 進(jìn)行了整體刷新，并保持整體一致性。在顏色上，舊版的藍(lán)色不夠年輕活力，這次改版對顏色進(jìn)行了定義，在延續(xù)品牌藍(lán)的基礎(chǔ)上將飽和度和明度提高，新版的顏色使用代表熱血的紅色為主，手 Q 藍(lán)為輔的新色彩體系。

在圖標(biāo)設(shè)計上，我們分別對 icon 圓角的弧度，線條的粗細(xì)和配色、按鈕的圓形矩陣裝飾、運(yùn)營入口的配圖規(guī)則進(jìn)行了統(tǒng)一和打磨。同時通過蘊(yùn)含情感和趣味圖形的融入表現(xiàn)，直觀地將產(chǎn)品調(diào)性傳達(dá)給用戶。

另外在 BUTTON 和彈窗的細(xì)節(jié)和規(guī)則處理上，我們也對圓形矩陣的排布規(guī)則、按鈕字體的字號、字重等進(jìn)行了約束和統(tǒng)一，不斷強(qiáng)化品牌。

在框架布局上，采用了 24 列柵格系統(tǒng)，這樣可能很好的配合產(chǎn)品去進(jìn)行不同尺寸作品的運(yùn)營測試。另外考慮到舊版使用無邊界和斑馬線的方式來做內(nèi)容比較浪費(fèi)空間，且不能很好的修飾作品封面，所以在新版的設(shè)計中采用了卡片的方式來承載內(nèi)容，使用留白的方式來做區(qū)隔，使頁面更加通透，且內(nèi)容更清晰美觀。

在一些特殊模塊的設(shè)計上，我們從漫畫中提取了網(wǎng)點和描邊的形式，作為特殊模塊的背景設(shè)計。

此次的空白頁也全新升級，將波小顏與趣味文案相結(jié)合，為用戶帶來輕松愉悅的氛圍。

2. 效率提升

明晰產(chǎn)品結(jié)構(gòu)

原有的結(jié)構(gòu)中，首頁 tab 和分類 tab 的功能定位比較相似，都是讓用戶去發(fā)現(xiàn)尋找漫畫。而廣場 tab 則更像是各種 PGC 和二創(chuàng)內(nèi)容零碎的集合呈現(xiàn)，當(dāng)中的社交關(guān)系鏈的建立與互動也并沒有很好地實現(xiàn)閉合。我們對新框架的信息層級進(jìn)行了重新的梳理，也讓每個模塊都有了更加清晰明確的定位。我們把分類入口放置在動漫畫 tab 當(dāng)中，去掉了原來的分類和廣場模塊，希望用戶可以直接通過動漫畫 tab，就能快速發(fā)現(xiàn)并獲取感興趣的動漫。讓發(fā)現(xiàn)漫畫和找漫畫的行為更加集中。當(dāng)用戶有追漫行為時，通過書架即可及時了解作品的更新狀態(tài)快速追漫。同時新增的福利模塊，也進(jìn)一步地強(qiáng)化培養(yǎng)用戶的閱讀動漫的行為。

優(yōu)化體驗路徑

改版前，用戶發(fā)現(xiàn)感興趣的漫畫作品時，需要先進(jìn)入作品詳情頁進(jìn)而決策是否閱讀作品，作品詳情頁包括封面、名稱、簡介、畫風(fēng)、熱度、評論等多種信息以幫助用戶全面了解漫畫。但在面對碎片化消費(fèi)場景時，用戶沒有太多時間了解漫畫，更直接的閱讀反而能直觀判斷是否喜歡該作品。因此我們引入“漫畫簡介卡”，簡介卡包含漫畫的極簡介紹和第 1 話漫畫內(nèi)容，讓用戶更快的接觸到漫畫內(nèi)容，在閱讀中決策是否感興趣，縮短閱讀轉(zhuǎn)化路徑。同時提供用戶全面了解漫畫的入口，以滿足用戶的多樣需求。

提升展示效率

首頁作為漫畫分發(fā)的核心主場景，需要我們確保內(nèi)容作品的展示效率和準(zhǔn)確性，這就要求在設(shè)計上保持沖擊力和美感的同時，也要合理充分地利用頁面空間。

1.聚類信息，突出主體

動漫畫的首屏焦點圖承載著重點作品和活動運(yùn)營的重任，將導(dǎo)航和焦點圖進(jìn)行結(jié)合，有效利用導(dǎo)航背景，放大焦點圖，增強(qiáng)焦點圖對用戶的吸引力。

2. 簡化層級，聚焦內(nèi)容

舊版采用無邊界的設(shè)計，在每行 3 圖的情況下，占據(jù)的高度較多。新版采用留白的方式來分割信息，不僅能使單個作品得到聚焦，而且也縮短了單個作品的行高，提升了版面的利用率。

3. 優(yōu)化動線，刺激瀏覽

首先我們發(fā)現(xiàn)在舊版的設(shè)計中采用了居中對齊的方式，閱讀動線是呈 Z 字形的節(jié)奏，頻繁的 Z 字形掃視容易讓眼睛產(chǎn)生疲憊，所以我們把對齊方式改成了居左，讓動線呈現(xiàn) F 形的節(jié)奏，這樣會更符合用戶在電子設(shè)備上的閱讀習(xí)慣。

我們也通過內(nèi)容單元和瀏覽節(jié)奏的變化和調(diào)整，以吸引無明確目標(biāo)的用戶，更愿意去刷 feeds 去獲取可能感興趣的漫畫內(nèi)容。

模版組合，靈活分發(fā)

由于漫畫內(nèi)容對用戶吸引的點是多方面的，比如畫風(fēng)、劇情、新鮮度、熱門度、IP、排行等等，這就需要對內(nèi)容做精細(xì)化的運(yùn)營。所以我們會基于這些維度去拓展多種漫畫卡片樣式，讓漫畫內(nèi)容可以呈現(xiàn)更豐富的形態(tài)，帶給用戶多樣化的體驗，并方便產(chǎn)品去進(jìn)行靈活的測試。

網(wǎng)格布局，擴(kuò)容空間

舊版的書架和我的頁面多采用列表布局，一屏展示的信息有限，隨著用戶書架內(nèi)容和我的功能日益增加，列表式布局已經(jīng)無法承載，所以新版更多的采用網(wǎng)格布局來滿足用戶高效查找信息的訴求。

3. 情感與趣味化設(shè)計

波小顏是 QQ 動漫 IP 家族里的新成員，自帶可愛和萌屬性。為了拉近與用戶的距離，形成輕松有趣的氛圍，我們將其設(shè)定為一個常駐在 QQ 動漫中的一個 IP 角色，把其融入在界面設(shè)計中。

空間場景化

福利中心集合了簽到，做任務(wù)，領(lǐng)券和活動等許多的場景，為了讓福利中心的體驗更契合用戶的二次元屬性。我們將福利中心的界面也嘗試了與二次元漫展場景相結(jié)合，融入展廳，扭蛋機(jī)等元素，而波小顏也成為了當(dāng)中的簽到官，點擊熊掌就能簽到。

觸點趣味化

首頁的下拉刷新是最常用的一個接觸，但是常規(guī)的下拉刷新缺少新意，每次刷新看到都是同一個動效也容易讓我們的年輕用戶感到無聊。我們將次元文化和生活化場景相結(jié)合，把波小顏設(shè)定為居住在產(chǎn)品中的一個角色，當(dāng)用戶在不同的時刻進(jìn)行下拉刷新，就會看到波小顏不同時刻的二次元日常。

比如下午 6 點半，波小顏正在吃著杯面；深夜的 12 點，波小顏正躲在被窩里看著漫畫。

在設(shè)計的過程中，我們也希望在刷新觸點這里可以有更多趣味的嘗試。例如可以預(yù)埋彩蛋功能入口，當(dāng)用戶不斷下拉后會從頂部觸發(fā)一個黑洞，波小顏會被洞所吸走，然后連接進(jìn)入到不同的商業(yè)運(yùn)營活動或節(jié)日運(yùn)營活動中去。

同時在未來也還可以考慮和動漫 IP 相互結(jié)合運(yùn)營，以及融入夜間模式，讓這里的觸點變得更趣味化。

運(yùn)營場景的露出和融入

在我們的日常運(yùn)營活動設(shè)計中，波小顏也會以不同的姿態(tài)和情感來出現(xiàn)。我們希望通過這些運(yùn)營活動的觸達(dá)，讓用戶感受到產(chǎn)品的調(diào)皮活潑的氛圍之外，同時也能對波小顏留下一定的印象，不斷強(qiáng)化用戶和 IP 之間的情感關(guān)聯(lián)。

組件庫建設(shè)

為了提升團(tuán)隊協(xié)作效率，保證項目整體的時間節(jié)奏，在本次改版設(shè)計過程中的同時，我們也進(jìn)行了設(shè)計組件庫的搭建。我們先將核心的基礎(chǔ)控件進(jìn)行提煉定義以及細(xì)節(jié)打磨。并同產(chǎn)品開發(fā)進(jìn)行宣講溝通，達(dá)成共識。這也極大地加快了設(shè)計進(jìn)度，體驗一致性和設(shè)計品質(zhì)也得到了較好的把控。

如果說本地的 UI 組件庫是設(shè)計側(cè)協(xié)作的基礎(chǔ)和助力，那么在整體研發(fā)的角度來看，組件的代碼化具有更大的價值和意義，當(dāng)然也需要更大的成本。我們積極聯(lián)合開發(fā)團(tuán)隊進(jìn)行 UI 組件庫的代碼化建設(shè)，以便后續(xù)項目開發(fā)中可以快速調(diào)用組裝，遇到項目變更時也能提取控件細(xì)節(jié)進(jìn)行優(yōu)化打磨，并快速應(yīng)用到全局。這極大的提升了項目開發(fā)的整體效率，同時視覺還原的效率和品質(zhì)也得到保證，讓產(chǎn)品設(shè)計開發(fā)各角色之間的協(xié)作更加順暢。

結(jié)語

QQ 動漫改版上線后，從目前的結(jié)果和反饋看，整體還是比較正向的。過程中我們也做了許多有意思的嘗試。包括基礎(chǔ)的產(chǎn)品用戶體驗、運(yùn)營設(shè)計，IP 形象的設(shè)計研發(fā)擴(kuò)展等。這篇文章只是當(dāng)中的一部分，未來也還存在著非常大的提升空間，我們還會繼續(xù)有更多的優(yōu)化動作和創(chuàng)新嘗試，希望大家能繼續(xù)支持 QQ 動漫并敬請期待。

歡迎關(guān)注作者微信公眾號：「騰訊ISUX」