編輯導(dǎo)語(yǔ)：插畫的使用可以在視覺(jué)上更有效地感染用戶，并潛在地在用戶心中建立品牌形象，因此插畫也被廣泛應(yīng)用至產(chǎn)品設(shè)計(jì)當(dāng)中。那么，出海產(chǎn)品應(yīng)當(dāng)如何依據(jù)產(chǎn)品自身定位、目標(biāo)群體等因素建立插畫庫(kù)？本文作者結(jié)合實(shí)際案例，梳理了從0到1搭建IP插畫庫(kù)的流程，一起來(lái)看一下。

插畫作為一種高效的視覺(jué)表現(xiàn)手法，在如今的互聯(lián)網(wǎng)設(shè)計(jì)中已被廣泛應(yīng)用。它可以有效地幫助產(chǎn)品快速觸達(dá)并感染用戶，提升活躍度和活動(dòng)轉(zhuǎn)化率，塑造品牌形象等。對(duì)于Trovo這樣一個(gè)快速發(fā)展中的出海平臺(tái)，搭建起一套產(chǎn)品自己插畫庫(kù)的重要性自然就不言而喻了。

一、插畫庫(kù)設(shè)計(jì)的背景

1. 插畫在行業(yè)中的廣泛應(yīng)用

在許多海外知名互聯(lián)網(wǎng)公司中，插畫都被大量應(yīng)用，并且非常具有品牌識(shí)別性。

這里我們拿Airbnb、Google和Discord做一個(gè)簡(jiǎn)單的參考。三個(gè)團(tuán)隊(duì)都選擇把自己的品牌色作為主色調(diào)，雖然走的路線不同，但是都通過(guò)符合各自用戶習(xí)慣的視覺(jué)語(yǔ)言，很好地傳遞了品牌精神，提升了產(chǎn)品效率。

2. 明確自身產(chǎn)品定位

要搭建適合自身的插畫庫(kù)，首先要明確自己的定位，我們是誰(shuí)？我們要做什么？Trovo作為一個(gè)面向全球的泛游戲化內(nèi)容和互動(dòng)社區(qū)，目標(biāo)是為全球年輕一代玩家提供海量?jī)?yōu)質(zhì)的游戲直播內(nèi)容。

同時(shí)由于主要的用戶都來(lái)自海外，語(yǔ)言、宗教、文化和審美上都有著諸多差異，因此不可避免地給設(shè)計(jì)也帶來(lái)了巨大挑戰(zhàn)。國(guó)內(nèi)主流設(shè)計(jì)多是推崇精致、美觀或可愛的風(fēng)格，然而在海外最活躍的游戲直播平臺(tái)上，畫風(fēng)卻是這樣的：

用戶最喜歡使用的表情是這樣的：

這時(shí)我們要去思考，用戶希望從產(chǎn)品的插畫中得到的更多是好玩的內(nèi)容，而非華麗卻無(wú)趣的東西，這也是他們來(lái)到游戲直播平臺(tái)最根本的目的。這種線面結(jié)合的偏漫畫式手法，加上夸張的情緒和一些腦洞大開的視覺(jué)表達(dá)，恰好可以滿足用戶渴望娛樂(lè)的心理。

二、插畫庫(kù)設(shè)計(jì)的方向

1. 了解目標(biāo)用戶

通過(guò)對(duì)主流游戲平臺(tái)用戶行為的觀察分析，以及產(chǎn)品前期進(jìn)行的問(wèn)卷調(diào)研，可以歸納一下目標(biāo)群體的一些特征：主要集中在北美和歐洲地區(qū)，喜歡游戲和直播，同時(shí)非常推崇年輕、搞怪、彰顯個(gè)性的事情。因此我們不希望Trovo的插畫像某些工具類或普適性的產(chǎn)品，過(guò)于迎合大眾的品味，導(dǎo)致視覺(jué)表達(dá)上中規(guī)中矩，特點(diǎn)不鮮明，讓用戶覺(jué)得無(wú)趣。

2. 提取關(guān)鍵詞

通過(guò)對(duì)目標(biāo)用戶的了解，產(chǎn)品自身的特性，以及希望插畫所傳遞的信息，可以提取出幾個(gè)關(guān)鍵詞作為后面創(chuàng)作的理念和風(fēng)格導(dǎo)向。其中夸張、搞怪和游戲化是與Trovo插畫風(fēng)格最契合的三個(gè)詞。

三、插畫庫(kù)的創(chuàng)作執(zhí)行

1. 確立基礎(chǔ)形象

Trovo的已有IP形象是一只名叫Leon的酷酷的變色龍。因?yàn)槲覀兿嘈?，每一個(gè)Trovo的用戶都有生而不同的創(chuàng)造力，就像一只魔力變色龍一樣，堅(jiān)持做自己的同時(shí)，也以其與眾不同的方式影響著Trovo，并創(chuàng)造出Trovo社區(qū)更多快樂(lè)和精彩。我們更相信：“Why fit in when you were born to STAND OUT!”

我們目前已經(jīng)有一套基于Leon創(chuàng)作的表情系統(tǒng)，視覺(jué)表達(dá)和形象氣質(zhì)上與用戶的喜歡高度吻合，在平臺(tái)的各個(gè)直播間也非常受歡迎?？梢匝赜眠@套表情線面結(jié)合的插畫方式和搞怪有趣的氣質(zhì)特點(diǎn)，在用戶認(rèn)可的基礎(chǔ)上進(jìn)行插畫庫(kù)的升級(jí)創(chuàng)作，風(fēng)格更加統(tǒng)一，用戶也更容易接受。

插畫庫(kù)將繼續(xù)沿用變色龍Leon作為基礎(chǔ)IP形象，在對(duì)多個(gè)歐美經(jīng)典搞怪形象的研究后，決定采用二頭身的身體結(jié)構(gòu)和大眼睛的特點(diǎn)來(lái)突出詼諧的氣質(zhì)。

通過(guò)進(jìn)一步確立身體結(jié)構(gòu)和關(guān)鍵特征的抓取，就得到了一個(gè)酷酷的又有點(diǎn)搞怪的基礎(chǔ)Leon形象。

最后繪制出三視圖從多個(gè)角度豐滿人物形象，作為人物比例和后續(xù)延展動(dòng)作的參考。

2. 明確設(shè)計(jì)規(guī)則和注意點(diǎn)

同時(shí)也需要列出一些容易忽略的設(shè)計(jì)點(diǎn)，以保證后續(xù)的設(shè)計(jì)過(guò)程中不會(huì)出現(xiàn)相關(guān)錯(cuò)誤。例如五根手指會(huì)顯得非常臃腫，影響美觀；四根手指更簡(jiǎn)潔、提升效率，同時(shí)也更符合歐美卡通人物習(xí)慣。

不使用線條，只靠形狀和純色來(lái)體現(xiàn)形體輪廓的畫法過(guò)于平穩(wěn)和大眾化，適合扁平快的互聯(lián)網(wǎng)，卻難以滿足游戲用戶這一特定群體對(duì)于個(gè)性和娛樂(lè)化的追求。因此在基礎(chǔ)的表現(xiàn)手法上最終選用了更接近偏向漫畫形式的線面結(jié)合。

最后，再通過(guò)添加一點(diǎn)高光和陰影使物體更加的飽滿和耐看。陰影可以使用帶透明度的黑色或低明度的同色系，使畫面不會(huì)太臟；高光應(yīng)該盡量選擇相對(duì)明亮一點(diǎn)的顏色，增加物體的視覺(jué)沖擊力。

四、插畫庫(kù)的整合

1. 插畫體系歸類

通過(guò)對(duì)業(yè)務(wù)的分析，首先把插畫系統(tǒng)的內(nèi)容進(jìn)行了歸納，并分為了主體、背景和元素三大類。在后續(xù)的業(yè)務(wù)需求中，設(shè)計(jì)師可以根據(jù)具體情境把它們組裝和結(jié)合，達(dá)到高效輸出和重復(fù)利用的目的。

2. 主體部分

主體指的是在插畫中占據(jù)視覺(jué)主導(dǎo)地位的內(nèi)容，通常是具體的人物或物品等。這部分使用頻次最高，內(nèi)容最豐富，為了方便整理和使用，又可以進(jìn)一步細(xì)分出“人物”、“物件”、文字”和“狀態(tài)”四部分。

其中人物部分是根據(jù)我們平臺(tái)的IP：變色龍Leon在游戲、運(yùn)動(dòng)、工作等不同情境中展現(xiàn)出的動(dòng)作形象：

物件的存在是為了可以更好的幫助營(yíng)造該情境，使得畫面更加的豐富和飽滿：

另外歐美游戲用戶在觀看直播時(shí)，有很多自己喜歡使用的語(yǔ)言來(lái)表達(dá)內(nèi)心的情緒，而文字部分就是為了讓情境更具有情緒和感染力，可以更準(zhǔn)確快速地直擊用戶內(nèi)心：

最后一類主體內(nèi)容就是在產(chǎn)品中經(jīng)常出現(xiàn)的各種空狀態(tài)，有趣的插畫可以很好地緩解用戶在遇到異常狀態(tài)時(shí)失落和焦躁的情緒：

3. 背景部分

背景部分則是一組網(wǎng)格狀的圖形，通常尺寸較大，透明度較低，用在畫面底部作為底紋使用。

4. 元素部分

元素主要是以LOGO和產(chǎn)品調(diào)性衍生出來(lái)的一系列品牌圖形，像是畫面的調(diào)味劑，主要起到輔助和修飾的作用。

五、插畫庫(kù)的應(yīng)用

1. 產(chǎn)品內(nèi)UI

在插畫系統(tǒng)繪制完成以后，對(duì)現(xiàn)有插畫進(jìn)行組件化和規(guī)范命名也非常重要。這樣UI同學(xué)在處理APP或Web的需求時(shí)，就可以在Sketch里按照規(guī)定好的分類快速地找到插畫內(nèi)容。

例如做一個(gè)送禮的運(yùn)營(yíng)彈窗，想包裝成魔法的概念來(lái)吸引點(diǎn)擊，只需要選擇需要的組件進(jìn)行拼裝，然后調(diào)整一下大小和位置就可以使用了。

各種空狀態(tài)的頁(yè)面也是插畫在產(chǎn)品UI內(nèi)的重要應(yīng)用，同時(shí)在插畫的內(nèi)容形式上也可以結(jié)合海外用戶的習(xí)慣和實(shí)際場(chǎng)景，增強(qiáng)趣味性，減少用戶遇到異常狀態(tài)時(shí)內(nèi)心的焦慮和失落。

2. 宣傳海報(bào)&郵件

插畫庫(kù)整理好以后，遇到需要用到插畫的宣傳海報(bào)或郵件，就可以將上述幾部分根據(jù)產(chǎn)品需求進(jìn)行組合來(lái)進(jìn)行快速創(chuàng)作。例如主體人物選擇正在打游戲的Leon，搭配屏幕和游戲手柄等物件，還有表達(dá)心情的“Hype”文字，最后再加上合適的背景和裝飾元素，就可以得到需要的插畫了。

在接下來(lái)的副標(biāo)題等地方也可以靈活運(yùn)用插畫，使整體畫面更加生動(dòng)有趣。

六、后續(xù)思考

插畫系統(tǒng)的建立是為了幫助設(shè)計(jì)師們更快更好的解決產(chǎn)品問(wèn)題，同時(shí)搭建Trovo自己的插畫庫(kù)也更利于品牌形象的建立。

為了增加插畫的識(shí)別性和獨(dú)特性，避免同質(zhì)化，我們不僅大量使用了Trovo的IP形象Leon作為人物主體，延展出多種動(dòng)作和場(chǎng)景，加入了“T”和“+”等品牌圖形元素；也從表現(xiàn)手法和風(fēng)格上嘗試更貼近游戲直播用戶，使用了更豐富多彩的顏色和偏漫畫的線面結(jié)合。

當(dāng)然目前插畫庫(kù)還處于搭建的初期，在插畫內(nèi)容和規(guī)則制定上還有很多需要完善的地方，我們會(huì)定期收集設(shè)計(jì)師們?cè)诋a(chǎn)品需求中遇到的問(wèn)題和難點(diǎn)，對(duì)已有的組件進(jìn)行調(diào)整和更新，對(duì)不合理的規(guī)則進(jìn)行優(yōu)化，使插畫庫(kù)能夠更好地服務(wù)于團(tuán)隊(duì)。

作者：Leon，來(lái)自騰訊游戲直播設(shè)計(jì)

推薦關(guān)注公眾號(hào) “騰訊設(shè)計(jì)”（ 微信ID：TencentDesign ），第一時(shí)間獲取騰訊官方的設(shè)計(jì)方法論

本文由 @騰訊設(shè)計(jì) 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議