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

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

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

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

01 插畫(huà)組件庫(kù)的價(jià)值

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

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

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

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

3. 提升品牌感

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

02 插畫(huà)組件庫(kù)需要考慮4個(gè)方面的問(wèn)題

當(dāng)我們?cè)跇?gòu)建插畫(huà)庫(kù)的時(shí)候，以下4個(gè)問(wèn)題是我們需要重點(diǎn)考慮的：

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

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

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

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

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

3）如何滿(mǎn)足用戶(hù)場(chǎng)景

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

4）如何打造差異化的風(fēng)格

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

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

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

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

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

1）品牌

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

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

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

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

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

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

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

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

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

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

1）角色組件

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

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

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

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

構(gòu)建組件庫(kù)，我們自然是希望我們的插畫(huà)能夠和人的骨骼一樣，能夠靈活的做出各種動(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)作、服飾……盡可能滿(mǎn)足角色在不同場(chǎng)景的使用需求。

2）通用組件

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

3）背景組件

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

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

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

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

04 寫(xiě)在最后

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