項目背景

隨著網絡的持續提速和優質國漫的不斷興起，動漫在年輕人的生活中，已經成為了他們日常不可或缺的一部分。為了更好地為 QQ 當中的海量年輕用戶提供服務，我們也想借著產品這次想更純粹化的契機，對 QQ 動漫的品牌和體驗進行一次全面的升級改造。

目標定義

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

而從用研和報告發現，我們的目標用戶主要是小學高年級以及初高中生。從調研中我們了解到他們日常使用的上網設備主要是以中低端機型為主，而用于娛樂消費的時間一般也是比較有限且固定的，所以提升他們的效率就顯得尤為關鍵。

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

設計執行

1. 品牌升級

波洞作為 QQ 動漫的衍生出來的獨立 APP，已經在用戶中形成一定的影響力。這次的動漫品牌升級，我們也繼續對波洞品牌進行延展，將波洞 logo 中的基礎圖形擴展為動漫的品牌語言。

定義品牌容器

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

打造品牌記憶點

主頁是整個產品的門面，也是用戶停留時間最長的頁面。對比市面上的同類型動漫類產品，我們發現在產品結構上有著極大的相似性，比如在主頁都會用焦點圖加一組作品的形式。這就要求我們需要在同質化的基礎上呈現出自己的個性。我們通過把橢圓這個品牌圖形延展到焦點圖和金剛區域圖標上，在曝光最高的觸點強化品牌印記。

另外波點和描邊都是漫畫中最常見的元素，我們在背景和容器、以及按鈕的點綴設計上，也大量應用這兩個元素，在細節上增強產品的動漫屬性。

升級 UI 風格

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

在圖標設計上，我們分別對 icon 圓角的弧度，線條的粗細和配色、按鈕的圓形矩陣裝飾、運營入口的配圖規則進行了統一和打磨。同時通過蘊含情感和趣味圖形的融入表現，直觀地將產品調性傳達給用戶。

另外在 BUTTON 和彈窗的細節和規則處理上，我們也對圓形矩陣的排布規則、按鈕字體的字號、字重等進行了約束和統一，不斷強化品牌。

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

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

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

2. 效率提升

明晰產品結構

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

優化體驗路徑

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

提升展示效率

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

1.聚類信息，突出主體

動漫畫的首屏焦點圖承載著重點作品和活動運營的重任，將導航和焦點圖進行結合，有效利用導航背景，放大焦點圖，增強焦點圖對用戶的吸引力。

2. 簡化層級，聚焦內容

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

3. 優化動線，刺激瀏覽

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

我們也通過內容單元和瀏覽節奏的變化和調整，以吸引無明確目標的用戶，更愿意去刷 feeds 去獲取可能感興趣的漫畫內容。

模版組合，靈活分發

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

網格布局，擴容空間

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

3. 情感與趣味化設計

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

空間場景化

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

觸點趣味化

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

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

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

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

運營場景的露出和融入

在我們的日常運營活動設計中，波小顏也會以不同的姿態和情感來出現。我們希望通過這些運營活動的觸達，讓用戶感受到產品的調皮活潑的氛圍之外，同時也能對波小顏留下一定的印象，不斷強化用戶和 IP 之間的情感關聯。

組件庫建設

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

如果說本地的 UI 組件庫是設計側協作的基礎和助力，那么在整體研發的角度來看，組件的代碼化具有更大的價值和意義，當然也需要更大的成本。我們積極聯合開發團隊進行 UI 組件庫的代碼化建設，以便后續項目開發中可以快速調用組裝，遇到項目變更時也能提取控件細節進行優化打磨，并快速應用到全局。這極大的提升了項目開發的整體效率，同時視覺還原的效率和品質也得到保證，讓產品設計開發各角色之間的協作更加順暢。

結語

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

歡迎關注作者微信公眾號：「騰訊ISUX」