項(xiàng)目案例 | QQ動(dòng)漫 高效與趣味的有機(jī)融合

▲點(diǎn)擊"三分設(shè)"關(guān)注，回復(fù)"社群"加入我們

歡迎來(lái)到專業(yè)設(shè)計(jì)師學(xué)習(xí)交流社區(qū)

項(xiàng)目背景

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

目標(biāo)定義

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

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

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

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

2.1 品牌升級(jí)

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

定義品牌容器

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

打造品牌記憶點(diǎn)

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

另外波點(diǎn)和描邊都是漫畫中最常見(jiàn)的元素，我們?cè)诒尘昂腿萜?、以及按鈕的點(diǎn)綴設(shè)計(jì)上，也大量應(yīng)用這兩個(gè)元素，在細(xì)節(jié)上增強(qiáng)產(chǎn)品的動(dòng)漫屬性。

升級(jí)UI風(fēng)格

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

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

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

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

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

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

2.2 效率提升

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

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

優(yōu)化體驗(yàn)路徑

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

提升展示效率

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

(1) 聚類信息，突出主體

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

(2) 簡(jiǎn)化層級(jí)，聚焦內(nèi)容

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

(3) 優(yōu)化動(dòng)線，刺激瀏覽

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

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

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

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

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

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

2.3 情感與趣味化設(shè)計(jì)

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

空間場(chǎng)景化

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

觸點(diǎn)趣味化

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

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

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

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

運(yùn)營(yíng)場(chǎng)景的露出和融入

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

組件庫(kù)建設(shè)

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

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

結(jié)語(yǔ)

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