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

插畫庫設(shè)計的背景

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

在許多海外知名互聯(lián)網(wǎng)公司中，插畫都被大量應(yīng)用，并且非常具有品牌識別性。這里我們拿 Airbnb、Google 和 Discord 做一個簡單的參考。三個團隊都選擇把自己的品牌色作為主色調(diào)，雖然走的路線不同，但是都通過符合各自用戶習(xí)慣的視覺語言，很好地傳遞了品牌精神，提升了產(chǎn)品效率。

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

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

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

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

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

插畫庫設(shè)計的方向

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

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

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

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

插畫庫的創(chuàng)作執(zhí)行

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

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

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

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

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

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

2. 明確設(shè)計規(guī)則和注意點

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

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

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

插畫庫的整合

1. 插畫體系歸類

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

2. 主體部分

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

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

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

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

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

3. 背景部分

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

4. 元素部分

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

插畫庫的應(yīng)用

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

在插畫系統(tǒng)繪制完成以后，對現(xiàn)有插畫進(jìn)行組件化和規(guī)范命名也非常重要。這樣 UI 同學(xué)在處理 APP 或 Web 的需求時，就可以在 Sketch 里按照規(guī)定好的分類快速地找到插畫內(nèi)容。例如做一個送禮的運營彈窗，想包裝成魔法的概念來吸引點擊，只需要選擇需要的組件進(jìn)行拼裝，然后調(diào)整一下大小和位置就可以使用了。

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

2. 宣傳海報&郵件

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

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

后續(xù)思考

插畫系統(tǒng)的建立是為了幫助設(shè)計師們更快更好的解決產(chǎn)品問題，同時搭建 Trovo 自己的插畫庫也更利于品牌形象的建立。為了增加插畫的識別性和獨特性，避免同質(zhì)化，我們不僅大量使用了 Trovo 的 IP 形象 Leon 作為人物主體，延展出多種動作和場景，加入了“T”和“+”等品牌圖形元素；也從表現(xiàn)手法和風(fēng)格上嘗試更貼近游戲直播用戶，使用了更豐富多彩的顏色和偏漫畫的線面結(jié)合。

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

優(yōu)設(shè)推薦關(guān)注“騰訊設(shè)計”官方公眾號，第一時間獲取騰訊的設(shè)計方法論