今天給大家?guī)淼氖侨绾谓⒃O(shè)計師個人的插畫組件庫，因內(nèi)容過長并知識點過多，請泡杯枸杞觀看。

一、關(guān)于個人插畫組件庫的3大疑問點：

 

1、為什么要建立個人插畫組件庫？

其實最主要目的是為了給自己的插畫提供一個設(shè)計軸心，我們可以圍繞著這個軸心創(chuàng)作出更具有效率規(guī)范的插畫內(nèi)容，演變更多的插畫風(fēng)格，讓我們使用插畫時變得游刃有余，提升率的設(shè)計輸出，衍生更多的組件化運營設(shè)計與品牌插畫組件庫。（注：按照以下步驟設(shè)計，插畫手殘黨也能輕松學(xué)會哦?。?

 

2、品牌（產(chǎn)品、項目）插畫組件庫與個人插畫組件庫的區(qū)別？

01-規(guī)范區(qū)別：

品牌插畫組件庫：組件品牌插畫庫前會做很多細(xì)致的規(guī)范，如：顏色規(guī)范/情景規(guī)范/光線規(guī)范/關(guān)節(jié)細(xì)節(jié)處理/景別元素處理等等；

個人插畫組件庫：為了讓我們的插畫更具有靈活性，所以在做個人插畫組件庫時不會做太多的規(guī)范，反而為了插畫的衍生要更注重人物構(gòu)造、比例、小組件等等，目的就是為了成立個人插畫軸心。（注：個人插畫軸心是針對于第一個插畫系統(tǒng)的原型，我們后面的插畫風(fēng)格衍生都會參照第一個插畫系統(tǒng)的原型，后面會給大家詳細(xì)講解）

 

02-使用效率：

品牌插畫組件庫：使用更加，拖入即可更換組件使用；

個人插畫組件庫：因為我們采用的是不斷迭代式做法，所以在剛建立個人插畫組件庫時，我們的組件替換效率是比較低的，但是在逐漸迭代中，我們的使用效率會逐步提升。

 

03-拓展力：

品牌插畫組件庫：因為有很多規(guī)范的約束，所以拓展力偏弱，不過針對于自己的品牌已經(jīng)足夠了，它本身就是為了自己的品牌服務(wù)的；

個人插畫組件庫：因為從我們插畫組件庫的層級分區(qū)來看本來就是為了衍生拓展，所以拓展力非常強(qiáng)，不僅可以衍生出相同類型的插畫風(fēng)格，還可以衍生出不同類型的插畫形勢，甚至可以以個人插畫組件庫為基礎(chǔ)創(chuàng)建單獨的運營設(shè)計組件庫，或者升級為品牌插畫組件庫。

 

3、個人插畫組件庫哪些人最應(yīng)該去建立？

我認(rèn)為UI設(shè)計師是最應(yīng)該去建立的，在我們線上接觸的banner、功能頁、啟動頁、海報等等，很多都可以用到插畫去設(shè)計，不管是針對于在公司還是針對于自己私下接私活都是一大利器，可以讓你的完成甲方的任務(wù)，更大程度保證設(shè)計的統(tǒng)一性以及輸出的質(zhì)量。（相信大家都遇到過到處找插畫素材拼湊banner的時候吧，有了個人插畫組件庫就不用愁了）

當(dāng)然除了UI設(shè)計師還有插畫設(shè)計師、平面設(shè)計師、美工也都可以去建立插畫組件庫，不過具體還是要看每個人所接觸的不同設(shè)計內(nèi)容，有些設(shè)計師的設(shè)計內(nèi)容很少接觸到插畫部分，或者很少接觸到可以組件化的插畫（比如材質(zhì)復(fù)雜、偏手繪插畫），所以就沒有必要去建立插畫組件庫。

 

二、如何建立個人插畫組件庫？

 

想要建立個人插畫組件庫就要從它的本質(zhì)特點出發(fā)去考慮，個人插畫系統(tǒng)歸納下來一共有三大特點：可復(fù)用、適應(yīng)力強(qiáng)、效率高。那么接下來我會圍繞著這三點來闡述該如何制作UI設(shè)計師個人的插畫系統(tǒng)。

 

1、可復(fù)用性方向出發(fā)設(shè)計

可復(fù)用性是做插畫系統(tǒng)的一個基礎(chǔ)，如果不能解決可復(fù)用問題，那么做個人插畫系統(tǒng)根本沒有任何意義。

如果想要達(dá)到插畫可復(fù)用性，我們就要把插畫內(nèi)容進(jìn)行不同的拆分，在它可替換的部分都作為一個復(fù)用樣式，讓它可以更換不同的組件，那么我的解決方案有五步：

 

第一步：

設(shè)定基礎(chǔ)人物組件（肢體細(xì)節(jié)、型體比例），規(guī)范組件內(nèi)容。如果你是第一次做人物組件，可以多在網(wǎng)上找一些可參考內(nèi)容：

下圖是我做的一個基礎(chǔ)人物組件案例：

從人物組件上面來看我一共把它們分為了9個小件，它們分別為：頭部、上身、上臂、前臂、手掌、臀部、大腿、小腿、腳掌。

從人物比例來看，男性比例為10a，男性略高，上身寬大，整體壯碩；而女性比例為9a，稍矮于男性，纖細(xì)苗條。不管是男性還是女性整個身體構(gòu)造簡單常規(guī)，符合真實人物比例，有利于后期的組件改造。（第一個插畫組件最好使用常規(guī)比例，后面會提到為什么要這樣做）

在人物組件上的劃分并不是固化的，你可以把它細(xì)化分為9個部分，也可以分為7個部分，如果分為7個部分就把上臂與前臂統(tǒng)一融為手臂，大腿與小腿統(tǒng)一融合為腿部，到底要怎么去進(jìn)行組件化，還是要取決于自己設(shè)計的插畫人物特性。

除了男性、女性外也可以建造更多的人物進(jìn)來，例如老人、小孩、嬰兒...人物越多，后續(xù)的延展空間也越大，前期為了更快的制作插畫組件庫，可以先建立1到2個人物，后續(xù)可以逐步完善迭代。

 

第二步：

為了后期人物的動態(tài)延展，我們可以用人物組件制定一些高頻的人物基礎(chǔ)動態(tài)，例如標(biāo)準(zhǔn)站姿、坐姿、跑動等，以便于我們插畫的延展，圖示如下：

做人物基礎(chǔ)動態(tài)可以讓我們在后面的插畫設(shè)計上少花很多時間，例如工作中要用到跑步動態(tài)時，那么就可以直接用人物基礎(chǔ)動態(tài)里面的跑步動作進(jìn)行添加人物細(xì)節(jié)，會節(jié)省很多工作時間，提升工作效率。

 

第三步：

有了人物組件的基礎(chǔ)，我們就可以開始設(shè)計插畫的風(fēng)格。

在設(shè)計前我們可以多參考一下別人的插畫風(fēng)格，這里所說的風(fēng)格主要是指插畫的處理方式，比如：顏色的選擇、表情的處理、衣服材質(zhì)的處理、曲線直線的選擇等。

我們需要注意的是建立第一個插畫系統(tǒng)時可以先做一個風(fēng)格簡單的，不僅容易調(diào)節(jié)組件也有利于后期的風(fēng)格衍生，以下是我為人物添加的簡單基礎(chǔ)風(fēng)格（ 特點：純色/完全按人物組件貼合設(shè)計/無漸變）：

第四步：

設(shè)計人物組件（可以讓你的插畫在不同的場景應(yīng)用不同的動作/服裝/表情/膚色等）

 

1/發(fā)型：

在發(fā)型上面我們可以進(jìn)行一些人物的區(qū)分，可以適用于不同的場景，例如：男性第一個適用于公司場景，第二個適用于學(xué)生，第三個適用于軍人...

2/膚色：

做膚色的變化最主要原因是讓插畫適應(yīng)于國際化，在不同的場景中可以加入不同膚色的人物。

3/表情：

表情是為了更好的體現(xiàn)出人物在環(huán)境中的狀態(tài)，如：領(lǐng)取紅包插畫，人物的表情就應(yīng)該是開心或者大笑。

4/角度：

在插畫的角度上，我們采用了最常用：正面、半側(cè)、正側(cè)，讓它在插畫中的適應(yīng)力變得更強(qiáng)。

5/紋理：

我們目前設(shè)計了6個基本紋理，基本紋理不僅可以設(shè)定于服裝中，還可以設(shè)定于輔助元素以及背景中。

6/服裝：

在整個人物組件中，分為3大塊可替換服裝組件，分為別：上身、下身、鞋子。例如上身可以替換為短袖、長袖、衛(wèi)衣、背心等，同時在它的下一個層級還可以替換服裝紋理、服裝動作、服裝顏色。

結(jié)合以上的人物組件我們就可以組合出各種不同的動作，如下：

第五步：

設(shè)計通用組件庫：

通用組件庫中的元素最開始要用黑白灰來表達(dá)，因為在不同的場景中元素的運用也有很大差異，例如花盆作為近景元素會多許多細(xì)節(jié)，作為遠(yuǎn)景元素可能只是作為線條來點綴，這些表達(dá)方式我們可以在日后使用過程中添加到它的子級庫即可，這樣可以讓我們在使用組件庫時更加靈活，也有利于我們迭代組件庫，后面會逐一的講解。

這5個步驟下來我們的可復(fù)用性插畫就做好了，那么接下來看看運用效果：

 

我們可以看到以下4個場景，運用到了不同的景別處理方式，例如：第一組為背景漸變；第二組背景則采用了大面積的純色；第三組背景用線性表達(dá)；第四組則用淺色面表達(dá)。

 

這也是與品牌插畫組件庫的很大區(qū)分點，雖然都是可復(fù)用性插畫，但是品牌插畫組件庫大部分是使用現(xiàn)有的、具有規(guī)范的，而我們所做的個人插畫組件庫可以用同一個輔助元素增添不同的插畫表達(dá)形式，不斷迭代子級，迭代的子級越多它的內(nèi)容選取性就越高，后續(xù)就可以直接拖入使用，比如圖4中的植物就有2種狀態(tài)，第一種是顯示部分顏色，第二種則直接為灰色。（注：后面會詳細(xì)講解）

以下活動頁中，背景元素也可以運用同樣的方法，在我們的背景組件庫中調(diào)取想要的單個插畫元素，把它們組合放入活動頁背景中，進(jìn)行再次調(diào)色得到不同的背景組合，以下三種背景組合都可以相互替換使用。

2、讓你的插畫具有極強(qiáng)的適應(yīng)力

適應(yīng)力強(qiáng)是指我們的插畫系統(tǒng)可以匹配大多數(shù)的產(chǎn)品，因為個人插畫組件庫是以設(shè)計師身份做的，我們會面臨各類產(chǎn)品，而各類產(chǎn)品風(fēng)格都會有不同的變化，要解決這一點我們可以使用以下三個方法：

 

方法一：改變?nèi)宋锝Y(jié)構(gòu)

例如：你想為產(chǎn)品A做一些插畫類的功能頁或banner時，發(fā)現(xiàn)你現(xiàn)有的第一套插畫組件庫并不符合產(chǎn)品特性，產(chǎn)品A想表達(dá)更多夸張的成分，而我們所做的插畫系統(tǒng)顯示更多的是柔和與大眾，這樣就完全不匹配，那么我們就要去改變一個基礎(chǔ)點，那就是人物結(jié)構(gòu)，通過人物結(jié)構(gòu)的重組我們可以得到想要的夸張效果，那么我就男女各舉一例結(jié)構(gòu)重組對比圖，如下：

我們?yōu)榱嗽谏眢w結(jié)構(gòu)中達(dá)到人物夸張的效果，在原有10a比例不動的情況下對原本的身體結(jié)構(gòu)做了重大調(diào)整，男性：上身的縮短，下身的延長以及手部腳部的突出；女性：整體更加硬朗，手腳放大，腿加長。

 

如果把他們用相同的插畫風(fēng)格表現(xiàn)出來，就會出現(xiàn)如下效果：

當(dāng)你在做人物結(jié)構(gòu)調(diào)整時，你會發(fā)現(xiàn)有一個常規(guī)的人體結(jié)構(gòu)作為基點去設(shè)計是多么重要，也就是之前所提的為什么第一版插畫組件讓你做常規(guī)的，因為如果不是常規(guī)人體結(jié)構(gòu)，調(diào)整起來會非常麻煩，就很難有參考意義。

 

方法二：改變插畫風(fēng)格

除了人物結(jié)構(gòu)外我們還可以更多的考慮插畫風(fēng)格，通過不同的插畫風(fēng)格去適應(yīng)不同的產(chǎn)品，例如：線面/漸變/雜色/極簡...同樣我就男女各舉一例，如下：

上圖改變風(fēng)格后，男性的風(fēng)格則更偏向于線條的表達(dá)與高亮色調(diào)；女性的風(fēng)格則簡單直接，更注重凸顯配色的碰撞。

 

方法三：改變?nèi)宋锝Y(jié)構(gòu)+插畫風(fēng)格

在上面兩種方法中除了已有的基礎(chǔ)人物結(jié)構(gòu)A與插畫風(fēng)格A，我們還得到了人物結(jié)構(gòu)B、C與插畫風(fēng)格B、C，如果我們用人物結(jié)構(gòu)B（或C）與插畫風(fēng)格B（或C）結(jié)合又可以形成新的插畫狀態(tài)。

按照這樣的方式下來我們就可以逐步添加自己的插畫系統(tǒng)，假如當(dāng)你的插畫系統(tǒng)人物結(jié)構(gòu)有5組、插畫風(fēng)格有5組時，你就可以組合出25組不同的插畫，這樣你的插畫系統(tǒng)適應(yīng)能力就極強(qiáng)了，甚至你要為產(chǎn)品做插畫系統(tǒng)時，也可以大幅度參考你的個人插畫系統(tǒng)，當(dāng)然這一切都是需要自己去慢慢迭代添加的。

 

3、用軟件規(guī)范插畫組件庫（層級詳解），提升應(yīng)用效率

為了更好的替換組件，提升輸出的工作效率，我們可以從一開始就使用軟件對插畫進(jìn)行管理。市面上可以提供復(fù)用樣式的軟件也蠻多的，這里我就使用應(yīng)用率最高的Sketch來進(jìn)行講解。

 

首先我給大家講一下我的插畫組件庫的構(gòu)成，我的插畫組件庫一共分為了5大塊，分別為：人物組件庫、非常規(guī)人物組件庫、動物組件庫、輔助元素組件庫、輔助背景組件庫，而這5大塊中也細(xì)分出了很多小層級，我就一一為大家分析下我所用的層級。

我們可以從以上圖中看出從風(fēng)格分類開始直至最小的組件，我用到最多的層數(shù)是5層。

如果大家看的有點懵，我們就拿一塊從層級1到層級5舉例說明：

風(fēng)格分類（A）-角度分類（正側(cè)）-四大組件（下身）-動作（B）-顏色（B）

這里所用的是sketch復(fù)用樣式中的“套中套”，“套中套”的組件方式看似復(fù)雜，其實挺簡單的，并且在軟件中換取都在大組件內(nèi)，因為不是軟件講解所以就不帶入過多的軟件知識。

在制作時我們不要想著一次性就做出很多小組件，比如你想做表情時，一來就想做10多20個全部包含完，其實沒有必要，我個人是比較建議最開始小組件做個3-5種常用的就可以了，因為組件庫是要不斷添加優(yōu)化的，所以可以在后續(xù)工作應(yīng)用中再不斷的添加。

 

有了層級的劃分，我們可以用sketch的復(fù)用樣式簡單、的規(guī)范插畫組件庫，想要覆蓋替換組件內(nèi)容也是十分方面，如下：

 

2/非常規(guī)人物組件庫

 

除了常規(guī)的人物組件庫外，我還單獨羅列了非常規(guī)人物組件庫，這一類組件庫主要是作用于人物特殊的動作形態(tài)，比如下面3個透視類的插畫動作形態(tài)，這些動態(tài)與常規(guī)的插畫組件庫的內(nèi)容很多是不互通的，比如臉的角度、鞋子的角度、身體的透視尺寸，所以我們就單獨給他羅列一個非常規(guī)人物組件庫。

都是同為組件庫，當(dāng)然也有可替換內(nèi)容，非常規(guī)人物組件庫與常規(guī)的人物組件庫的層級邏輯有所不同，常規(guī)的人物組件庫是用小組件替換人物動作，但是非常規(guī)人物組件庫是先替換整體的動作然后才可以替換小組件，這也是對他的特殊化管理。（注：不想舍棄它，又不想為他做出更大的調(diào)整，所以就單獨讓它成立出來。）

 

根據(jù)非常規(guī)組件庫的設(shè)定給大家做個小案例：

以上可以看出我在這個透視化的插畫人物中可以替換表情、發(fā)型、紋理、上身、下身。

 

3/動物組件庫

 

我這里做的動物組件庫是用來輔助人物以及調(diào)和場景的，所以在層級劃分上并不會做的非常細(xì)，滿足我的日常插畫需求即可，當(dāng)然如果你想把動作組件庫做的非常細(xì)，那么可以參照人物組件庫的層級來劃分層級。

 

根據(jù)我使用的動物組件庫層級，給大家舉一個正確小案例與錯誤小案例，先看下錯誤小案例：

可以看到下圖（狗子）是一個非常粗糙的動物組件庫，里面只能替換動作以及動物的動作，當(dāng)選在狗子的狀態(tài)下，狗子除了換動作沒有其他的組件選項，雖然我想讓動物組件庫簡化，但是也不至于什么都不能替換。

接下來看看正確的案例：

我們可以看到在貓咪的狀態(tài)下就有很多組件可以選擇，不僅可以替換貓咪的動作，還可以替換展示形式（展示形式我是按照景別來做差異化，當(dāng)然也可以用其他方法）、貓咪表情以及貓咪的顏色，這樣的動物組件庫已經(jīng)完全能夠滿足我的設(shè)計需求。

 

4/輔助元素組件庫

 

輔助元素組件庫層級最好要添加景別，因為我們經(jīng)常會遇到同一個元素在不同產(chǎn)品中體現(xiàn)出不同的景別，如果不區(qū)分，在選取組件時就非常的傷腦經(jīng)，經(jīng)驗之談、強(qiáng)烈要求。

為了大家更好的理解，我給大家舉一個小案例：

我們可以看到我不僅可以切換元素，還可以切換景別以及顏色，至于其他的小組件我并不需要，因為這些已經(jīng)足以滿足我的日常運營設(shè)計需求，這個層級劃分簡單實用非常推薦。

 

5/背景元素組件庫

 

背景元素組件庫一共分為兩種類型，分別為：組合場景背景與紋理背景。

 

組合場景背景：

組合場景背景是用輔助元素組件庫拼湊而來，它是一個可以直接用的完整場景，想要替換的組件如果在輔助元素組件庫能夠替換，那么在背景組件庫也是可以的。（注：這里牽涉到組件庫的重組調(diào)動，在后續(xù)出的文章中會詳細(xì)提到）

上面的插畫由白天變?yōu)楹谝怪恍枰媒M件庫就能輕松完成，而這些組件庫也不是現(xiàn)做的，全部是輔助元素組件庫里提取過來的，也就是我所說的組合場景背景是用輔助元素組件庫拼湊而來。

大家可以發(fā)現(xiàn)插畫中山上的小房子只用一個組件就可以全部替換顏色，而左右兩邊的樹卻要做6次不同的替換，樹木需要多次替換的原因這就是沒有做重組，如果想要相同元素做相同的替換，那么建議在調(diào)換過程中重組組件，優(yōu)化層級。

 

紋理背景：

紋理背景相對于來說就是最簡單的，它里面只存在紋理的不同樣式，并且只可更換顏色。

三、人物插畫組件庫如何結(jié)合到運營設(shè)計中？

 

1、創(chuàng)建常見運營設(shè)計規(guī)范

 

在做設(shè)計前，我們先要做好運營設(shè)計的規(guī)范，以便于組件庫的插入應(yīng)用。

 

那么我就用卡片彈窗來舉例：做設(shè)計前我們先確定卡片內(nèi)容，當(dāng)內(nèi)容確定后，根據(jù)內(nèi)容進(jìn)行卡片的運營設(shè)計規(guī)范：

我們需要注意的是初步規(guī)范里并不需要涉及到用什么字體，也不需要羅列出插畫的尺寸規(guī)范，我們可以在后面的設(shè)計中一步步去實現(xiàn)。

 

2、結(jié)合運營設(shè)計的兩大方法：

 

當(dāng)規(guī)范做好時，我們就可以利用規(guī)范去制作相應(yīng)的組件庫，利用組件庫來結(jié)合運營設(shè)計，按照不同的情況可以分為以下兩種方法：

 

1/重組組件庫（無人物動態(tài)組件的情況下）

在一些運營設(shè)計中，如果我們要用到的人物動作之前并沒有做過，那么就需要我們重新設(shè)計人物動作，設(shè)計完后再把可以重組的人物組件拖到我們現(xiàn)在的組件中進(jìn)行重組，分以下幾步進(jìn)行：

 

第一步，根據(jù)卡片的規(guī)范做出卡片的設(shè)計內(nèi)容，如下：

第二步，把設(shè)計好的內(nèi)容分板塊，以便于組件庫的層級劃分。在這里我把他們一共分為了4個大塊，分別為：文字組件、人物組件、輔助裝飾組件、背景元素組件。

 

第三步，在大的板塊下劃分小組件，結(jié)合小組件就可以得到我們組件庫的層級，可看下圖：

在小組件里，很多都是個人組件庫里原本有的內(nèi)容，這時我們就可以把它們拖進(jìn)來進(jìn)行重組。

假如你替換的元素不夠用，那么就需要你自己手動設(shè)計了，這樣也能反過來擴(kuò)充你總的人物組件庫內(nèi)容，其實組件庫的內(nèi)容就是這么一點點迭代添加的，當(dāng)你的組件庫內(nèi)容越來越多時，你的設(shè)計成本就會越來越低。

 

三步下來我們就把組件庫融入到了運營設(shè)計中了，有了新的子級運營設(shè)計組件庫。

 

2/直接替換（有人物動態(tài)組件的情況下）

如果你做的運營內(nèi)容組件庫里都有，那么就可以按著規(guī)范直接拖入即可，也沒有必要去進(jìn)行重組。

總結(jié)：

總的來說組件庫的建立是一個龐大的工程，在你有了基礎(chǔ)架構(gòu)的時，你就要慢慢往里面塞更多的內(nèi)容進(jìn)行填充，當(dāng)你的內(nèi)容足夠多時它就可以反向為你提供更多的便利，它是你的寶貴的設(shè)計資源庫。

 

因為這期的內(nèi)容實在太多，所以插畫組件庫的應(yīng)用、運營設(shè)計常用模塊組件案例、重組技巧以及品牌插畫組件庫的建立我會另外抽時間給大家總結(jié)。（做案例太費時間希望大家諒解）

 

參考資料提?。?/span>

我為大家提供了一些組件庫的可參考性文件，里面包含成套組件庫（sketch）、成套的插畫圖片、宣傳動畫、一些參考性的圖片（構(gòu)圖、表情、發(fā)型等等）。

文章來源：tob.design     作者：黑獅力

藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)