每張運(yùn)營(yíng)位中的視覺(jué)圖，其實(shí)都代表著整個(gè)平臺(tái)的視覺(jué)品質(zhì)。不論是犄角旮旯，還是我們的開(kāi)屏圖、首頁(yè)輪播位。

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

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

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

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

深入探索

我開(kāi)始對(duì)市場(chǎng)的幾大類(lèi)運(yùn)營(yíng)推廣圖進(jìn)行深入的研究，有大家所熟知的「電商類(lèi)運(yùn)營(yíng)推廣」、「游戲類(lèi)運(yùn)營(yíng)推廣」，再加上我們的動(dòng)漫運(yùn)營(yíng)推廣。

1. 電商類(lèi)推廣圖

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

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

2. 游戲類(lèi)運(yùn)營(yíng)推廣圖

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

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

3. 動(dòng)漫類(lèi)運(yùn)營(yíng)推廣圖

幾大門(mén)類(lèi)粗略地分析過(guò)一遍之后，落實(shí)到我們動(dòng)漫市場(chǎng)，運(yùn)營(yíng)推廣圖可總結(jié)為：背景+文案+人物（以?xún)?nèi)容為主）。

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

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

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

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

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

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

以《隱藏人》這部漫畫(huà)運(yùn)營(yíng)推廣圖為例，了解漫畫(huà)大致劇情：殘缺的面容隱藏在玩偶之中，悲慘的往事隱藏于皮囊之下，夾雜在回憶與現(xiàn)實(shí)的殘酷中，人性最終爆發(fā)?？此仆昝婪缸锉澈蟮膬词质翘觳?、惡魔還是隱藏于你我身邊的「他」……主打 15 歲以上的少男少女，是一部推理懸疑、言情、恐怖、燒腦漫。

了解背景之后，我們?cè)倩氐铰?huà)中，圍繞我的四個(gè)選材范圍：人物表情、經(jīng)典章節(jié)、漫畫(huà)情節(jié)、足夠吸引力的文案背景，在漫畫(huà)中進(jìn)行相關(guān)的截圖，對(duì)素材進(jìn)行篩選。

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

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

對(duì)比一下我們往期的設(shè)計(jì)圖，給用戶(hù)的第一感覺(jué)，這是一部女性題材的漫畫(huà)而已。

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

可以看出我們?cè)谥暗淖鲌D手法中，注重的是精美，現(xiàn)在的做法注重的是故事情境。

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

新版視覺(jué)圖設(shè)計(jì)，主要由 4 點(diǎn)構(gòu)成：

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

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

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

實(shí)踐論證

案例一

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

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

了解背景之后，我們?cè)倩氐铰?huà)中，圍繞我的四個(gè)選材范圍，對(duì)制作素材進(jìn)行篩選。

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

△ 新版視覺(jué)圖設(shè)計(jì)

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

案例二

接下來(lái)是一個(gè)正方形的特殊模塊，這個(gè)模塊運(yùn)營(yíng)的需求就是圖要夠大，且為了不一樣而不一樣。

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

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

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

△ 整個(gè)UI框架中的展示效果

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

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

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

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

總結(jié)

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