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

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

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

更多插畫組件庫(kù)干貨：

一、插畫組件庫(kù)的價(jià)值

1. 設(shè)計(jì)提效

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

2. 統(tǒng)一風(fēng)格

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

3. 提升品牌感

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

二、插畫組件庫(kù)需要考慮 4 個(gè)方面的問題

當(dāng)我們?cè)跇?gòu)建插畫庫(kù)的時(shí)候，以下 4 個(gè)問題是我們需要重點(diǎn)考慮的：如何凸顯產(chǎn)品屬性；如何體現(xiàn)品牌調(diào)性；如何滿足用戶場(chǎng)景；如何打造差異化的風(fēng)格

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

如何體現(xiàn)品牌調(diào)性：和消費(fèi)品一樣，品牌是用戶考慮的一個(gè)非常重要的因素，插畫是傳遞信息和塑造品牌調(diào)性一個(gè)非常重要的渠道，所以插畫庫(kù)應(yīng)該考慮如何能夠?qū)ξ覀兊钠放普{(diào)性或產(chǎn)品調(diào)性進(jìn)行補(bǔ)充

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

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

三、插畫組件庫(kù)構(gòu)建的 3 個(gè)步驟

對(duì)于設(shè)計(jì)師來說，最重要的還是如何將插畫組件庫(kù)落地了，總結(jié)下來可以分為 3 個(gè)步驟：插畫風(fēng)格推導(dǎo)、插畫組件庫(kù)搭建、插畫組件庫(kù)應(yīng)用

1. 插畫風(fēng)格推導(dǎo)

插畫風(fēng)格我們主要可以從 3 個(gè)方面去推導(dǎo)：品牌、用戶、產(chǎn)品

① 品牌

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

② 用戶&產(chǎn)品

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

關(guān)于用戶：為了滿足「目標(biāo)用戶」，他們的「什么痛點(diǎn)或需求」

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

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

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

在討論 fashion data 的插畫風(fēng)格選定的時(shí)候，其他幾組插畫在風(fēng)格上差異性和個(gè)性表達(dá)上雖然會(huì)比較強(qiáng)，但是和 B 端產(chǎn)品的定位差異比較大，最后還是選定了普通的矢量風(fēng)格插畫風(fēng)格，它能比較好的像用戶傳遞出 B 端產(chǎn)品的高效、專業(yè)、嚴(yán)謹(jǐn)?shù)钠放菩蜗螅笃诓町惢饕峭ㄟ^融入品牌元素和塑造插畫角色這 2 個(gè)手段來體現(xiàn)。

2. 插畫組件庫(kù)搭建

插畫組件庫(kù)的搭建，可復(fù)用性是我們考慮的重點(diǎn)，要達(dá)到這個(gè)目標(biāo)，我們構(gòu)建分子的時(shí)候就應(yīng)該盡可能的把插畫拆分成比較細(xì)的分子，比如頭部我們可以拆分成不同角度的基礎(chǔ)頭型、發(fā)型、表情...

① 角色組件

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

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

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

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

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

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

建立不同角度下的表情、動(dòng)作、服飾等組件

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

② 通用組件

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

③ 背景組件

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

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

3. 插畫組件庫(kù)應(yīng)用

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

寫在最后

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