每張運營位中的視覺圖，其實都代表著整個平臺的視覺品質(zhì)。不論是犄角旮旯，還是我們的開屏圖、首頁輪播位。

發(fā)現(xiàn)問題

首頁頭部輪播圖的重要性決定了它的視覺品質(zhì)不能有半點的疏忽，其中的復(fù)雜程度更是一言難盡。不僅有作品宣傳，還有各類渠道合作，有內(nèi)部設(shè)計師輸出，還有大量的 CP 支持，那么統(tǒng)一高品質(zhì)的視覺輸出更是難上加難。將問題一一排除，我們花了將近一年的時間優(yōu)化了 App 首頁的所有 banner，將其打造得很是精美。

但是隨著時間的推移，也在不斷地產(chǎn)生一些新的問題：

• 視覺設(shè)計的同質(zhì)化；
• 用戶的審美疲勞；
• 作品的轉(zhuǎn)換率低；
• 宣傳圖中文案過少，難以表達出一部作品的精華。

深入探索

我開始對市場的幾大類運營推廣圖進行深入的研究，有大家所熟知的「電商類運營推廣」、「游戲類運營推廣」，再加上我們的動漫運營推廣。

1. 電商類推廣圖

產(chǎn)品項的推廣圖，主要從商品屬性出發(fā)，再根據(jù)產(chǎn)品用途、顏色、包裝等來延展品牌調(diào)性。再到我們執(zhí)行層面，按照優(yōu)先級大致可分為產(chǎn)品+文案+背景（以商品為主，文案排版為輔）。

在設(shè)計的過程中，版式可以千變?nèi)f化，產(chǎn)品可根據(jù)需要做出不同的角度露出以及排列次序。在大背景色的基礎(chǔ)上，可以繼續(xù)根據(jù)產(chǎn)品的動作露出適當(dāng)?shù)卣{(diào)節(jié)。在這一系列的操作過程中，一直處于保守態(tài)度的是其中的文案，萬變不離其宗，講究的是文案的排版樣式。再之后的色彩，細(xì)節(jié)的把控均屬加分項。

2. 游戲類運營推廣圖

游戲開服可總結(jié)為場景感版面形式推廣圖，運營圖可根據(jù)優(yōu)先級總結(jié)為：背景+文案+人物（以氛圍為主）。

背景以場景形式來表現(xiàn)，在游戲?qū)ｎ}上面運用更多，因為游戲有場景支持，使用高分辨率大圖，帶給用戶視覺沖擊，整體設(shè)計風(fēng)格和游戲美術(shù)風(fēng)格搭調(diào)，氛圍感強。游戲強調(diào)的是沉浸式體驗，在宣傳圖設(shè)計中依舊保持一種情景式體驗。

3. 動漫類運營推廣圖

幾大門類粗略地分析過一遍之后，落實到我們動漫市場，運營推廣圖可總結(jié)為：背景+文案+人物（以內(nèi)容為主）。

目前大多數(shù)設(shè)計師對于動漫推廣圖的設(shè)計基本按照電商、游戲的套路來走，還不能自成一體，綜合可總結(jié)為下圖：

推廣圖，自然離不開推廣素材，如下圖，可以看出游戲類的推廣素材可以說是達到登峰造極的地步了。電商類的大多是依賴于攝影師的拍攝，以及還可以靠后期的精修來彌補前面拍攝的不足。然而，我們動漫可以說是殘垣斷壁。過慢的起步，國內(nèi)大多數(shù)的條漫，在人物造型以及氛圍營造上并不能達到很高的水準(zhǔn)，在已定程度上給我們的運營圖設(shè)計也帶來了很大的阻礙，這也是漫畫行業(yè)的現(xiàn)狀。但是漫畫素材也有自己的優(yōu)點，素材中有很多關(guān)于人物表情的特寫，故事場景的描繪，還有人物 Q 版素材，這些東西可以很好地打造一個故事情境。

為了打造故事情節(jié)，我在選材上和之前相比就有了明顯的區(qū)別。

我會更注重人物表情 、經(jīng)典章節(jié) 、漫畫情節(jié)、強吸引力文案，在這四方面進行挑選，這些都可以作為我的選材，我嘗試著另辟新路，去重新審視我們的選材標(biāo)準(zhǔn)。

我們把這種表現(xiàn)手法，假設(shè)為一個概念：「內(nèi)容植入式運營設(shè)計」。

這個視覺風(fēng)格，融合內(nèi)容對場景進行搭建。人物、文字設(shè)計皆服務(wù)于內(nèi)容本身所賦予的意義，環(huán)環(huán)相扣，不再是彼此孤單的存在，以達到潛移默化的宣傳效果。而且，我們的推廣圖不僅僅局限于好看不好看的層面，更多的是把漫畫核心內(nèi)容展現(xiàn)出來。

以《隱藏人》這部漫畫運營推廣圖為例，了解漫畫大致劇情：殘缺的面容隱藏在玩偶之中，悲慘的往事隱藏于皮囊之下，夾雜在回憶與現(xiàn)實的殘酷中，人性最終爆發(fā)。看似完美犯罪背后的兇手是天才、惡魔還是隱藏于你我身邊的「他」......主打 15 歲以上的少男少女，是一部推理懸疑、言情、恐怖、燒腦漫。

了解背景之后，我們再回到漫畫中，圍繞我的四個選材范圍：人物表情、經(jīng)典章節(jié)、漫畫情節(jié)、足夠吸引力的文案背景，在漫畫中進行相關(guān)的截圖，對素材進行篩選。

將選中的素材，應(yīng)用組合到 banner 中，加上字體設(shè)計。組合成現(xiàn)在這張有豐富劇情的畫面。

那么我們往期 banner 視覺圖設(shè)計主要由三點構(gòu)成：背景 、人物 、一句話文案。

對比一下我們往期的設(shè)計圖，給用戶的第一感覺，這是一部女性題材的漫畫而已。

而右邊這張圖，一眼能看到與文案相結(jié)合的隱藏人物，圖中男子驚恐顫抖的表情，以及場景中的各種畫面。這張圖，將漫畫中高潮情節(jié)視覺化，推到用戶面前。

可以看出我們在之前的作圖手法中，注重的是精美，現(xiàn)在的做法注重的是故事情境。

在這里可以看出，精美不再是 banner 唯一的衡量標(biāo)準(zhǔn)，我開始以打造故事內(nèi)容為核心。

新版視覺圖設(shè)計，主要由 4 點構(gòu)成：

• 人物表情
• 經(jīng)典章節(jié)
• 漫畫情節(jié)
• 強吸引力文案，文案可為兩句也可為幾句的形式 。

讓用戶在輪播圖短短的幾秒內(nèi)獲取到更多的感情色彩。

上圖中內(nèi)容與我們的功能模塊（導(dǎo)航）配合得更加融洽，且內(nèi)容的故事氛圍更加濃厚，在這里，所謂的「內(nèi)容植入式運營設(shè)計」不僅僅包括我們 banner 內(nèi)的信息，而且容納了我們的 UI 框架內(nèi)的結(jié)構(gòu)信息。

實踐論證

案例一

這是在 APP 首頁第二屏的位置，進行小模塊試運營新版設(shè)計圖，原有視覺圖設(shè)計主要是作品主角加簡單的背景，以及一句話文案構(gòu)成。

以《黑良》這部漫畫運營推廣圖為例，了解漫畫大致劇情：世間流傳一種秘術(shù)，可以讓人養(yǎng)家糊口，也能富有四海，能讓人權(quán)傾天下，也能讓人家破人亡，號為──財術(shù)......主打 15 歲以上的少男少女，是一部高效、奮斗、都市漫。

了解背景之后，我們再回到漫畫中，圍繞我的四個選材范圍，對制作素材進行篩選。

再組合到畫面中，加上部分簡單字體設(shè)計，組合成下面這個具有豐富劇情的宣傳圖。

△ 新版視覺圖設(shè)計

隨著文案的劇增，我們更加注重排版的嚴(yán)謹(jǐn)性，并在小小的橫條內(nèi)融入了更多的文案信息，包括作品名、經(jīng)典文案或知名作者信息，加入與文案相關(guān)的人物、劇情，營造更強烈的情感。劇增的內(nèi)容信息并沒有對設(shè)計師造成壓力，而是有賴優(yōu)質(zhì)的排版營造出一種和諧的新秩序。右邊是應(yīng)用了「內(nèi)容植入式運營設(shè)計」的新版視覺圖。

案例二

接下來是一個正方形的特殊模塊，這個模塊運營的需求就是圖要夠大，且為了不一樣而不一樣。

潛意識里這樣的需求目的，無非就是放一張精美的大圖而已。但是，我們真的不一樣。

我們先來一起分析一下原型圖，瞇眼看，版塊細(xì)碎，在加之滑動類大型模塊，細(xì)碎更為明顯。除非做到頂部通欄，會稍微彌補這個缺陷。

在技術(shù)層面無法實施的前提下，首先思考的是如何將畫面化零為整。UI 層面減少不必要的層級，在內(nèi)容層面，將文案與人物素材，做到圖文結(jié)合，不再是彼此孤單的存在。

△ 整個UI框架中的展示效果

在這里我又一次將 「內(nèi)容植入式運營設(shè)計」應(yīng)用在這個模塊的設(shè)計中，用不同的設(shè)計手法融入了更多的信息元素。在對其進行設(shè)計之前，除了出于畫面的考慮，還思考了后續(xù)的靈活應(yīng)用。

在《女九段》的案例中，主要采用了三角穩(wěn)定構(gòu)圖，首先使復(fù)雜的畫面做到安靜、均衡，并不失靈活性。作品名與人物的結(jié)合，人物置于文案之中，圖文有聯(lián)系、有互動。配上右側(cè)的人物介紹，雜而不亂，整個畫面清晰有條理，突出重點，亦不失側(cè)重點。

這張的構(gòu)圖，也和上一張完全不同。主體只有女主，且占滿了畫面。這里人物的布局斜著把畫面一分為二，采用了「對角線構(gòu)圖法」，能讓原本單調(diào)死板的主體變得有運動感。同時，趣味中心點也在面部，讓我們很容易就被這一雙美麗的眼睛所吸引。并且有關(guān)人物介紹的融入，在畫面中補充排版，與人物相輔相成。

在上面三個模塊的不同案例中，讓我們視覺模塊又完成了一次升級。其實也不難看出，有些排版布局的小技巧好多小伙伴也都應(yīng)用過，可以說這些小技巧在很多地方是可以通用的。設(shè)計本身沒有對與錯，有的只是適不適合。也有不少的小技巧，值得我們?nèi)ド钔凇６嘁恍﹪L試，也許就能找到適合自己，適合當(dāng)前工作的小套路、小方法。

總結(jié)

從「內(nèi)容植入式運營設(shè)計」的探索挖掘過程，到這套方案的實施落地，整個過程我們嘗試了很多做圖方式，最終通過后臺數(shù)據(jù)顯示，只有我們的「內(nèi)容植入式運營設(shè)計」這套方案效果是最為顯著的。使運營模塊數(shù)據(jù)都得到了很大的提升，至少在現(xiàn)階段是比較適合騰訊動漫的一套視覺方案， 在后面的發(fā)展中，我們也是繼續(xù)做更多的嘗試，尋求更多的更優(yōu)的方案。

歡迎關(guān)注「TCD設(shè)計中心」公眾號：