快速入門！插畫組件庫設計指南

在互聯網企業日常的項目需求中，插畫經常會大量的運用在各類產品設計、產品運營、產品宣傳中，但是傳統的插畫方式主要存在以下幾個問題：

1. 不同崗位不同的設計師產出的插畫風格不一致，質量參差不齊
2. 每次的設計插畫需求都是從頭開始繪制，插畫的產出效率太低
3. 插畫的風格不一致很難形成一致的品牌印象，品牌感太弱

于是我們可以看到一些互聯網團隊已經走在了前面，通過構建系統的插畫組件庫來解決以上 3 個問題，對于設計師來說，插畫組件庫雖然已經不是什么特別新鮮的話題了，但是實際的執行過程中大部分設計師可能會遇到很多難題。那么，今天的飛凡指南就通過 3 個方面來深度解讀下插畫組件庫的這個設計話題。

更多插畫組件庫干貨：

一、插畫組件庫的價值

1. 設計提效

當我們通過傳統的流程去設計一個運營頁面的時候，往往需要 2~3 天的時間，但是有了插畫組件庫，設計產出的效率基本上可以提升 1 倍以上，而節省出來的時間，設計師可以去考慮更有價值的事情

2. 統一風格

整套的插畫組件庫，在構建的時候，對風格、色彩、人物、元素、背景都有著統一的規范，在面對不同設計能力設計師的時候，都能夠較大程度上保證風格統一和插畫的產出質量

3. 提升品牌感

插畫組件庫在構建之初就要考慮和產品調性、品牌調性的一致性，這樣在傳播的過程中才更能在用戶心中形成一致的品牌形象，提升品牌感

二、插畫組件庫需要考慮 4 個方面的問題

當我們在構建插畫庫的時候，以下 4 個問題是我們需要重點考慮的：如何凸顯產品屬性；如何體現品牌調性；如何滿足用戶場景；如何打造差異化的風格

凸顯產品屬性：插畫的最終目的是輔助文字去傳遞產品信息，我們需要直觀的向我們的用戶告訴我們是干什么的，而避免用戶做過多的思考；

如何體現品牌調性：和消費品一樣，品牌是用戶考慮的一個非常重要的因素，插畫是傳遞信息和塑造品牌調性一個非常重要的渠道，所以插畫庫應該考慮如何能夠對我們的品牌調性或產品調性進行補充

如何滿足用戶場景：在考慮插畫的元素構成的時候，我們也需要把用戶考慮進來，他們使用產品的時候是哪些場景，再基于用戶的場景去設計我們的插畫組件元素，這樣在實際應用插畫庫的時候才能夠盡可能涵蓋傳播的場景

如何打造差異化的風格：我們可以看到各大互聯網產品的插畫風格都基本上非常雷同，很難有明顯的插畫風格特征，這樣的結果就是用戶很難記住你，所以對于插畫差異性的考慮也是一個很重要的點

三、插畫組件庫構建的 3 個步驟

對于設計師來說，最重要的還是如何將插畫組件庫落地了，總結下來可以分為 3 個步驟：插畫風格推導、插畫組件庫搭建、插畫組件庫應用

1. 插畫風格推導

插畫風格我們主要可以從 3 個方面去推導：品牌、用戶、產品

① 品牌

我們需要了解的是品牌的調性、色彩、輔助圖形、logo 特征、品牌資產...，這些都是我們構建品牌插畫庫的基礎參照。比如下面這張圖是梳理的出來的 fashion data 的品牌相關元素：

② 用戶&產品

了解我們的用戶和產品，我們可以用以下這個電梯宣言的方法去梳理：

關于用戶：為了滿足「目標用戶」，他們的「什么痛點或需求」

關于產品：我們的「產品名稱」，是一個「怎么樣的產品類型」；它可以「關鍵優點，通過什么樣的功能，為用戶帶來什么樣的價值」；而不像「市場上某競品及其特點」；我們的產品是一個「主要獨特價值點」

比如，下面這張圖是對 fashion data 的用戶和產品進行的梳理，去快速的了解用戶的需求痛點、產品定位、產品價值...

了解完品牌、產品、用戶之后就要推導出插畫庫的風格方向了。

在討論 fashion data 的插畫風格選定的時候，其他幾組插畫在風格上差異性和個性表達上雖然會比較強，但是和 B 端產品的定位差異比較大，最后還是選定了普通的矢量風格插畫風格，它能比較好的像用戶傳遞出 B 端產品的高效、專業、嚴謹的品牌形象，后期差異化主要是通過融入品牌元素和塑造插畫角色這 2 個手段來體現。

2. 插畫組件庫搭建

插畫組件庫的搭建，可復用性是我們考慮的重點，要達到這個目標，我們構建分子的時候就應該盡可能的把插畫拆分成比較細的分子，比如頭部我們可以拆分成不同角度的基礎頭型、發型、表情...

① 角色組件

定義角色基礎的形體比例、肢體細節

形體比例、肢體細節基本上就能夠確定我們的角色是何種特點，比如，我們常見的互聯網扁平插畫風格就和我們的正常人物比例、肢體細節比較接近一些，但是一些歐美的插畫風格經常會用很夸張的比例造型來塑造個性的角色，比如頭特別小，肢體特別大。

還有不同人物的比例也會有所不一樣，比如男性女性的黃金比例是 9a（九頭身），小孩的比例大大約是 4a，但這不是固定不變的，還要看具體的插畫風格。

為角色搭建靈活的骨骼系統

構建組件庫，我們自然是希望我們的插畫能夠和人的骨骼一樣，能夠靈活的做出各種動作，這就要借助于靈活的骨骼系統了，通常情況下我們可以將我們的人體骨骼拆分成以下的組織。

在組織的連接處，我們盡量都能夠采用正圓形，這樣在變換動作的時候才能夠更好的銜接上，大家可以看看傳統的皮影人偶也是采用的這種連接方式，才能在舞臺上作出靈活的動作。

建立不同角度下的表情、動作、服飾等組件

人物的應用場景不僅僅只有正面的角度，還有其他的角度，我們一般只需要設計正面、半側、正側這 3 個角度即可，在這 3 個角度我們需要構建不同的表情、動作、服飾...盡可能滿足角色在不同場景的使用需求。

② 通用組件

通用組件我們一般基于用戶場景來制定。比如下面的這個案例，fashion data 是一個高效的跨境電商數據管理平臺，主要針對店鋪運營人員，為他們提供快速管理店鋪商品、直觀查看店鋪經營數據等服務，所以用戶的場景主要辦公場景和業務場景，辦公場景的元素有比如：書桌、電腦、辦公用品...；業務場景的元素有，比如：倉儲、物流、數據、商品... ，最后我們再基于這些元素去制定通用的組件。

③ 背景組件

背景組件一共可以分為 2 種類型，場景背景和紋理背景。場景背景一般是基于某個特定的場景來制定的，用來交代畫面所處的環境，比如室內背景、白天、黑夜、晴天...

紋理背景一般是用來裝飾和豐富背景，比如下面的插畫，加了背景紋理插畫明顯層次和畫面更加豐富了。

3. 插畫組件庫應用

搭建完組件庫之后，就可以在產品運營、線下物料、產品界面使用它們來提升設計的效率了。當然隨著業務不斷的變化和用戶場景的變化，我們的插畫組件庫也應該及時的擴容和優化。

寫在最后

需要提醒的是，插畫組件庫的目標是幫助那些重復、且設計質量要求不高的設計需求提效，而設計難度較高的設計需求還是需要設計師來處理，而這才是設計師能夠真正體現價值的地方，同時，把時間節省出來，設計師才有精力去思考更多更有價值的事情。