在互聯(lián)網(wǎng)企業(yè)日常的項目需求中，插畫經(jīng)常會大量運用在各類產(chǎn)品設(shè)計、產(chǎn)品運營、產(chǎn)品宣傳中。然而傳統(tǒng)的插畫方式經(jīng)常會遇到風格不一致、產(chǎn)出效率低、品牌感弱這3個問題，如何解決呢？本文作者對此進行了分析，一起來看一下吧。

在互聯(lián)網(wǎng)企業(yè)日常的項目需求中，插畫經(jīng)常會大量地運用在各類產(chǎn)品設(shè)計、產(chǎn)品運營、產(chǎn)品宣傳中，但是傳統(tǒng)的插畫方式主要存在以下幾個問題：

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

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

01 插畫組件庫的價值

1. 設(shè)計提效

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

2. 統(tǒng)一風格

整套的插畫組件庫，在構(gòu)建的時候，對風格、色彩、人物、元素、背景都有著統(tǒng)一的規(guī)范，在面對不同設(shè)計能力設(shè)計師的時候，都能夠較大程度上保證風格統(tǒng)一和插畫的產(chǎn)出質(zhì)量。

3. 提升品牌感

插畫組件庫再構(gòu)建之初就要考慮和產(chǎn)品調(diào)性、品牌調(diào)性的一致性，這樣在傳播的過程中才更能在用戶心中形成一致的品牌形象，提升品牌感。

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

當我們在構(gòu)建插畫庫的時候，以下4個問題是我們需要重點考慮的：

1. 如何凸顯產(chǎn)品屬性；
2. 如何體現(xiàn)品牌調(diào)性；
3. 如何滿足用戶場景；
4. 如何打造差異化的風格

1）凸顯產(chǎn)品屬性

插畫的最終目的是輔助文字去傳遞產(chǎn)品信息，我們需要直觀的向我們的用戶告訴我們是干什么的，而避免用戶做過多的思考。

2）如何體現(xiàn)品牌調(diào)性

和消費品一樣，品牌是用戶考慮的一個非常重要的因素，插畫是傳遞信息和塑造品牌調(diào)性一個非常重要的渠道，所以插畫庫應該考慮如何能夠?qū)ξ覀兊钠放普{(diào)性或產(chǎn)品調(diào)性進行補充。

3）如何滿足用戶場景

在考慮插畫的元素構(gòu)成的時候，我們也需要把用戶考慮進來，他們使用產(chǎn)品的時候是哪些場景，再基于用戶的場景去設(shè)計我們的插畫組件元素，這樣在實際應用插畫庫的時候才能夠盡可能涵蓋傳播的場景。

4）如何打造差異化的風格

我們可以看到各大互聯(lián)網(wǎng)產(chǎn)品的插畫風格都基本上非常雷同，很難有明顯的插畫風格特征，這樣的結(jié)果就是用戶很難記住你，所以對于插畫差異性的考慮也是一個很重要的點。

03 插畫組件庫構(gòu)建的3個步驟

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

1. 插畫風格推導

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

1）品牌

我們需要了解的是品牌的調(diào)性、色彩、輔助圖形、logo特征、品牌資產(chǎn)……這些都是我們構(gòu)建品牌插畫庫的基礎(chǔ)參照。比如下面這張圖是梳理的出來的fashion data的品牌相關(guān)的元素。

2）用戶&產(chǎn)品

了解我們的用戶和產(chǎn)品，我們可以用以下這個電梯宣言的方法去梳理。

關(guān)于用戶：為了滿足【目標用戶】；他們的【什么痛點或需求】。

關(guān)于產(chǎn)品：我們的【產(chǎn)品名稱】；是一個【怎么樣的產(chǎn)品類型】；它可以【關(guān)鍵優(yōu)點，通過什么樣的功能，為用戶帶來什么樣的價值】；而不像【市場上某競品及其特點】；我們的產(chǎn)品是一個【主要獨特價值點】。

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

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

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

2. 插畫組件庫搭建

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

1）角色組件

①定義角色基礎(chǔ)的形體比例、肢體細節(jié)

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

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

②為角色搭建靈活的骨骼系統(tǒng)

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

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

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

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

2）通用組件

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

3）背景組件

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

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

3. 插畫組件庫應用

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

04 寫在最后

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