出海產品如何從零搭建IP插畫庫？讓大廠高手教你！

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

插畫庫設計的背景

1. 插畫在行業中的廣泛應用

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

2. 明確自身產品定位

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

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

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

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

插畫庫設計的方向

1. 了解目標用戶

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

2. 提取關鍵詞

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

插畫庫的創作執行

1. 確立基礎形象

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

我們目前已經有一套基于 Leon 創作的表情系統，視覺表達和形象氣質上與用戶的喜歡高度吻合，在平臺的各個直播間也非常受歡迎。可以沿用這套表情線面結合的插畫方式和搞怪有趣的氣質特點，在用戶認可的基礎上進行插畫庫的升級創作，風格更加統一，用戶也更容易接受。

插畫庫將繼續沿用變色龍 Leon 作為基礎 IP 形象，在對多個歐美經典搞怪形象的研究后，決定采用二頭身的身體結構和大眼睛的特點來突出詼諧的氣質。

通過進一步確立身體結構和關鍵特征的抓取，就得到了一個酷酷的又有點搞怪的基礎 Leon 形象。

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

2. 明確設計規則和注意點

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

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

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

插畫庫的整合

1. 插畫體系歸類

通過對業務的分析，首先把插畫系統的內容進行了歸納，并分為了主體、背景和元素三大類。在后續的業務需求中，設計師可以根據具體情境把它們組裝和結合，達到高效輸出和重復利用的目的。

2. 主體部分

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

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

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

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

最后一類主體內容就是在產品中經常出現的各種空狀態，有趣的插畫可以很好的緩解用戶在遇到異常狀態時失落和焦躁的情緒：

3. 背景部分

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

4. 元素部分

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

插畫庫的應用

1. 產品內 UI

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

各種空狀態的頁面也是插畫在產品 UI 內的重要應用，同時在插畫的內容形式上也可以結合海外用戶的習慣和實際場景，增強趣味性，減少用戶遇到異常狀態時內心的焦慮和失落。

2. 宣傳海報&郵件

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

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

后續思考

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

當然目前插畫庫還處于搭建的初期，在插畫內容和規則制定上還有很多需要完善的地方，我們會定期收集設計師們在產品需求中遇到的問題和難點，對已有的組件進行調整和更新，對不合理的規則進行優化，使插畫庫能夠更好地服務于團隊。

優設推薦關注“騰訊設計”官方公眾號，第一時間獲取騰訊的設計方法論