2021-1-13 周周
今天給大家?guī)?lái)的是如何建立設(shè)計(jì)師個(gè)人的插畫(huà)組件庫(kù)，因內(nèi)容過(guò)長(zhǎng)并知識(shí)點(diǎn)過(guò)多，請(qǐng)泡杯枸杞觀(guān)看。
一、關(guān)于個(gè)人插畫(huà)組件庫(kù)的3大疑問(wèn)點(diǎn)：
1、為什么要建立個(gè)人插畫(huà)組件庫(kù)？
其實(shí)最主要目的是為了給自己的插畫(huà)提供一個(gè)設(shè)計(jì)軸心，我們可以圍繞著這個(gè)軸心創(chuàng)作出更具有效率規(guī)范的插畫(huà)內(nèi)容，演變更多的插畫(huà)風(fēng)格，讓我們使用插畫(huà)時(shí)變得游刃有余，提升率的設(shè)計(jì)輸出，衍生更多的組件化運(yùn)營(yíng)設(shè)計(jì)與品牌插畫(huà)組件庫(kù)。（注：按照以下步驟設(shè)計(jì)，插畫(huà)手殘黨也能輕松學(xué)會(huì)哦?。?
2、品牌（產(chǎn)品、項(xiàng)目）插畫(huà)組件庫(kù)與個(gè)人插畫(huà)組件庫(kù)的區(qū)別？
01-規(guī)范區(qū)別：
品牌插畫(huà)組件庫(kù)：組件品牌插畫(huà)庫(kù)前會(huì)做很多細(xì)致的規(guī)范，如：顏色規(guī)范/情景規(guī)范/光線(xiàn)規(guī)范/關(guān)節(jié)細(xì)節(jié)處理/景別元素處理等等；
個(gè)人插畫(huà)組件庫(kù)：為了讓我們的插畫(huà)更具有靈活性，所以在做個(gè)人插畫(huà)組件庫(kù)時(shí)不會(huì)做太多的規(guī)范，反而為了插畫(huà)的衍生要更注重人物構(gòu)造、比例、小組件等等，目的就是為了成立個(gè)人插畫(huà)軸心。（注：個(gè)人插畫(huà)軸心是針對(duì)于第一個(gè)插畫(huà)系統(tǒng)的原型，我們后面的插畫(huà)風(fēng)格衍生都會(huì)參照第一個(gè)插畫(huà)系統(tǒng)的原型，后面會(huì)給大家詳細(xì)講解）
02-使用效率：
品牌插畫(huà)組件庫(kù)：使用更加，拖入即可更換組件使用；
個(gè)人插畫(huà)組件庫(kù)：因?yàn)槲覀儾捎玫氖遣粩嗟阶龇?，所以在剛建立個(gè)人插畫(huà)組件庫(kù)時(shí)，我們的組件替換效率是比較低的，但是在逐漸迭代中，我們的使用效率會(huì)逐步提升。
03-拓展力：
品牌插畫(huà)組件庫(kù)：因?yàn)橛泻芏嘁?guī)范的約束，所以拓展力偏弱，不過(guò)針對(duì)于自己的品牌已經(jīng)足夠了，它本身就是為了自己的品牌服務(wù)的；
個(gè)人插畫(huà)組件庫(kù)：因?yàn)閺奈覀儾瀹?huà)組件庫(kù)的層級(jí)分區(qū)來(lái)看本來(lái)就是為了衍生拓展，所以拓展力非常強(qiáng)，不僅可以衍生出相同類(lèi)型的插畫(huà)風(fēng)格，還可以衍生出不同類(lèi)型的插畫(huà)形勢(shì)，甚至可以以個(gè)人插畫(huà)組件庫(kù)為基礎(chǔ)創(chuàng)建單獨(dú)的運(yùn)營(yíng)設(shè)計(jì)組件庫(kù)，或者升級(jí)為品牌插畫(huà)組件庫(kù)。
3、個(gè)人插畫(huà)組件庫(kù)哪些人最應(yīng)該去建立？
我認(rèn)為UI設(shè)計(jì)師是最應(yīng)該去建立的，在我們線(xiàn)上接觸的banner、功能頁(yè)、啟動(dòng)頁(yè)、海報(bào)等等，很多都可以用到插畫(huà)去設(shè)計(jì)，不管是針對(duì)于在公司還是針對(duì)于自己私下接私活都是一大利器，可以讓你的完成甲方的任務(wù)，更大程度保證設(shè)計(jì)的統(tǒng)一性以及輸出的質(zhì)量。（相信大家都遇到過(guò)到處找插畫(huà)素材拼湊banner的時(shí)候吧，有了個(gè)人插畫(huà)組件庫(kù)就不用愁了）
當(dāng)然除了UI設(shè)計(jì)師還有插畫(huà)設(shè)計(jì)師、平面設(shè)計(jì)師、美工也都可以去建立插畫(huà)組件庫(kù)，不過(guò)具體還是要看每個(gè)人所接觸的不同設(shè)計(jì)內(nèi)容，有些設(shè)計(jì)師的設(shè)計(jì)內(nèi)容很少接觸到插畫(huà)部分，或者很少接觸到可以組件化的插畫(huà)（比如材質(zhì)復(fù)雜、偏手繪插畫(huà)），所以就沒(méi)有必要去建立插畫(huà)組件庫(kù)。
二、如何建立個(gè)人插畫(huà)組件庫(kù)？
想要建立個(gè)人插畫(huà)組件庫(kù)就要從它的本質(zhì)特點(diǎn)出發(fā)去考慮，個(gè)人插畫(huà)系統(tǒng)歸納下來(lái)一共有三大特點(diǎn)：可復(fù)用、適應(yīng)力強(qiáng)、效率高。那么接下來(lái)我會(huì)圍繞著這三點(diǎn)來(lái)闡述該如何制作UI設(shè)計(jì)師個(gè)人的插畫(huà)系統(tǒng)。
1、可復(fù)用性方向出發(fā)設(shè)計(jì)
可復(fù)用性是做插畫(huà)系統(tǒng)的一個(gè)基礎(chǔ)，如果不能解決可復(fù)用問(wèn)題，那么做個(gè)人插畫(huà)系統(tǒng)根本沒(méi)有任何意義。
如果想要達(dá)到插畫(huà)可復(fù)用性，我們就要把插畫(huà)內(nèi)容進(jìn)行不同的拆分，在它可替換的部分都作為一個(gè)復(fù)用樣式，讓它可以更換不同的組件，那么我的解決方案有五步：
第一步：
設(shè)定基礎(chǔ)人物組件（肢體細(xì)節(jié)、型體比例），規(guī)范組件內(nèi)容。如果你是第一次做人物組件，可以多在網(wǎng)上找一些可參考內(nèi)容：
下圖是我做的一個(gè)基礎(chǔ)人物組件案例：
從人物組件上面來(lái)看我一共把它們分為了9個(gè)小件，它們分別為：頭部、上身、上臂、前臂、手掌、臀部、大腿、小腿、腳掌。
從人物比例來(lái)看，男性比例為10a，男性略高，上身寬大，整體壯碩；而女性比例為9a，稍矮于男性，纖細(xì)苗條。不管是男性還是女性整個(gè)身體構(gòu)造簡(jiǎn)單常規(guī)，符合真實(shí)人物比例，有利于后期的組件改造。（第一個(gè)插畫(huà)組件最好使用常規(guī)比例，后面會(huì)提到為什么要這樣做）
在人物組件上的劃分并不是固化的，你可以把它細(xì)化分為9個(gè)部分，也可以分為7個(gè)部分，如果分為7個(gè)部分就把上臂與前臂統(tǒng)一融為手臂，大腿與小腿統(tǒng)一融合為腿部，到底要怎么去進(jìn)行組件化，還是要取決于自己設(shè)計(jì)的插畫(huà)人物特性。
除了男性、女性外也可以建造更多的人物進(jìn)來(lái)，例如老人、小孩、嬰兒...人物越多，后續(xù)的延展空間也越大，前期為了更快的制作插畫(huà)組件庫(kù)，可以先建立1到2個(gè)人物，后續(xù)可以逐步完善迭代。
第二步：
為了后期人物的動(dòng)態(tài)延展，我們可以用人物組件制定一些高頻的人物基礎(chǔ)動(dòng)態(tài)，例如標(biāo)準(zhǔn)站姿、坐姿、跑動(dòng)等，以便于我們插畫(huà)的延展，圖示如下：
做人物基礎(chǔ)動(dòng)態(tài)可以讓我們?cè)诤竺娴牟瀹?huà)設(shè)計(jì)上少花很多時(shí)間，例如工作中要用到跑步動(dòng)態(tài)時(shí)，那么就可以直接用人物基礎(chǔ)動(dòng)態(tài)里面的跑步動(dòng)作進(jìn)行添加人物細(xì)節(jié)，會(huì)節(jié)省很多工作時(shí)間，提升工作效率。
第三步：
有了人物組件的基礎(chǔ)，我們就可以開(kāi)始設(shè)計(jì)插畫(huà)的風(fēng)格。
在設(shè)計(jì)前我們可以多參考一下別人的插畫(huà)風(fēng)格，這里所說(shuō)的風(fēng)格主要是指插畫(huà)的處理方式，比如：顏色的選擇、表情的處理、衣服材質(zhì)的處理、曲線(xiàn)直線(xiàn)的選擇等。
我們需要注意的是建立第一個(gè)插畫(huà)系統(tǒng)時(shí)可以先做一個(gè)風(fēng)格簡(jiǎn)單的，不僅容易調(diào)節(jié)組件也有利于后期的風(fēng)格衍生，以下是我為人物添加的簡(jiǎn)單基礎(chǔ)風(fēng)格（ 特點(diǎn)：純色/完全按人物組件貼合設(shè)計(jì)/無(wú)漸變）：
第四步：
設(shè)計(jì)人物組件（可以讓你的插畫(huà)在不同的場(chǎng)景應(yīng)用不同的動(dòng)作/服裝/表情/膚色等）
1/發(fā)型：
在發(fā)型上面我們可以進(jìn)行一些人物的區(qū)分，可以適用于不同的場(chǎng)景，例如：男性第一個(gè)適用于公司場(chǎng)景，第二個(gè)適用于學(xué)生，第三個(gè)適用于軍人...
2/膚色：
做膚色的變化最主要原因是讓插畫(huà)適應(yīng)于國(guó)際化，在不同的場(chǎng)景中可以加入不同膚色的人物。
3/表情：
表情是為了更好的體現(xiàn)出人物在環(huán)境中的狀態(tài)，如：領(lǐng)取紅包插畫(huà)，人物的表情就應(yīng)該是開(kāi)心或者大笑。
4/角度：
在插畫(huà)的角度上，我們采用了最常用：正面、半側(cè)、正側(cè)，讓它在插畫(huà)中的適應(yīng)力變得更強(qiáng)。
5/紋理：
我們目前設(shè)計(jì)了6個(gè)基本紋理，基本紋理不僅可以設(shè)定于服裝中，還可以設(shè)定于輔助元素以及背景中。
6/服裝：
在整個(gè)人物組件中，分為3大塊可替換服裝組件，分為別：上身、下身、鞋子。例如上身可以替換為短袖、長(zhǎng)袖、衛(wèi)衣、背心等，同時(shí)在它的下一個(gè)層級(jí)還可以替換服裝紋理、服裝動(dòng)作、服裝顏色。
結(jié)合以上的人物組件我們就可以組合出各種不同的動(dòng)作，如下：
第五步：
設(shè)計(jì)通用組件庫(kù)：
通用組件庫(kù)中的元素最開(kāi)始要用黑白灰來(lái)表達(dá)，因?yàn)樵诓煌膱?chǎng)景中元素的運(yùn)用也有很大差異，例如花盆作為近景元素會(huì)多許多細(xì)節(jié)，作為遠(yuǎn)景元素可能只是作為線(xiàn)條來(lái)點(diǎn)綴，這些表達(dá)方式我們可以在日后使用過(guò)程中添加到它的子級(jí)庫(kù)即可，這樣可以讓我們?cè)谑褂媒M件庫(kù)時(shí)更加靈活，也有利于我們迭代組件庫(kù)，后面會(huì)逐一的講解。
這5個(gè)步驟下來(lái)我們的可復(fù)用性插畫(huà)就做好了，那么接下來(lái)看看運(yùn)用效果：
我們可以看到以下4個(gè)場(chǎng)景，運(yùn)用到了不同的景別處理方式，例如：第一組為背景漸變；第二組背景則采用了大面積的純色；第三組背景用線(xiàn)性表達(dá)；第四組則用淺色面表達(dá)。
這也是與品牌插畫(huà)組件庫(kù)的很大區(qū)分點(diǎn)，雖然都是可復(fù)用性插畫(huà)，但是品牌插畫(huà)組件庫(kù)大部分是使用現(xiàn)有的、具有規(guī)范的，而我們所做的個(gè)人插畫(huà)組件庫(kù)可以用同一個(gè)輔助元素增添不同的插畫(huà)表達(dá)形式，不斷迭代子級(jí)，迭代的子級(jí)越多它的內(nèi)容選取性就越高，后續(xù)就可以直接拖入使用，比如圖4中的植物就有2種狀態(tài)，第一種是顯示部分顏色，第二種則直接為灰色。（注：后面會(huì)詳細(xì)講解）
以下活動(dòng)頁(yè)中，背景元素也可以運(yùn)用同樣的方法，在我們的背景組件庫(kù)中調(diào)取想要的單個(gè)插畫(huà)元素，把它們組合放入活動(dòng)頁(yè)背景中，進(jìn)行再次調(diào)色得到不同的背景組合，以下三種背景組合都可以相互替換使用。
2、讓你的插畫(huà)具有極強(qiáng)的適應(yīng)力
適應(yīng)力強(qiáng)是指我們的插畫(huà)系統(tǒng)可以匹配大多數(shù)的產(chǎn)品，因?yàn)閭€(gè)人插畫(huà)組件庫(kù)是以設(shè)計(jì)師身份做的，我們會(huì)面臨各類(lèi)產(chǎn)品，而各類(lèi)產(chǎn)品風(fēng)格都會(huì)有不同的變化，要解決這一點(diǎn)我們可以使用以下三個(gè)方法：
方法一：改變?nèi)宋锝Y(jié)構(gòu)
例如：你想為產(chǎn)品A做一些插畫(huà)類(lèi)的功能頁(yè)或banner時(shí)，發(fā)現(xiàn)你現(xiàn)有的第一套插畫(huà)組件庫(kù)并不符合產(chǎn)品特性，產(chǎn)品A想表達(dá)更多夸張的成分，而我們所做的插畫(huà)系統(tǒng)顯示更多的是柔和與大眾，這樣就完全不匹配，那么我們就要去改變一個(gè)基礎(chǔ)點(diǎn)，那就是人物結(jié)構(gòu)，通過(guò)人物結(jié)構(gòu)的重組我們可以得到想要的夸張效果，那么我就男女各舉一例結(jié)構(gòu)重組對(duì)比圖，如下：
我們?yōu)榱嗽谏眢w結(jié)構(gòu)中達(dá)到人物夸張的效果，在原有10a比例不動(dòng)的情況下對(duì)原本的身體結(jié)構(gòu)做了重大調(diào)整，男性：上身的縮短，下身的延長(zhǎng)以及手部腳部的突出；女性：整體更加硬朗，手腳放大，腿加長(zhǎng)。
如果把他們用相同的插畫(huà)風(fēng)格表現(xiàn)出來(lái)，就會(huì)出現(xiàn)如下效果：
當(dāng)你在做人物結(jié)構(gòu)調(diào)整時(shí)，你會(huì)發(fā)現(xiàn)有一個(gè)常規(guī)的人體結(jié)構(gòu)作為基點(diǎn)去設(shè)計(jì)是多么重要，也就是之前所提的為什么第一版插畫(huà)組件讓你做常規(guī)的，因?yàn)槿绻皇浅Ｒ?guī)人體結(jié)構(gòu)，調(diào)整起來(lái)會(huì)非常麻煩，就很難有參考意義。
方法二：改變插畫(huà)風(fēng)格
除了人物結(jié)構(gòu)外我們還可以更多的考慮插畫(huà)風(fēng)格，通過(guò)不同的插畫(huà)風(fēng)格去適應(yīng)不同的產(chǎn)品，例如：線(xiàn)面/漸變/雜色/極簡(jiǎn)...同樣我就男女各舉一例，如下：
上圖改變風(fēng)格后，男性的風(fēng)格則更偏向于線(xiàn)條的表達(dá)與高亮色調(diào)；女性的風(fēng)格則簡(jiǎn)單直接，更注重凸顯配色的碰撞。
方法三：改變?nèi)宋锝Y(jié)構(gòu)+插畫(huà)風(fēng)格
在上面兩種方法中除了已有的基礎(chǔ)人物結(jié)構(gòu)A與插畫(huà)風(fēng)格A，我們還得到了人物結(jié)構(gòu)B、C與插畫(huà)風(fēng)格B、C，如果我們用人物結(jié)構(gòu)B（或C）與插畫(huà)風(fēng)格B（或C）結(jié)合又可以形成新的插畫(huà)狀態(tài)。
按照這樣的方式下來(lái)我們就可以逐步添加自己的插畫(huà)系統(tǒng)，假如當(dāng)你的插畫(huà)系統(tǒng)人物結(jié)構(gòu)有5組、插畫(huà)風(fēng)格有5組時(shí)，你就可以組合出25組不同的插畫(huà)，這樣你的插畫(huà)系統(tǒng)適應(yīng)能力就極強(qiáng)了，甚至你要為產(chǎn)品做插畫(huà)系統(tǒng)時(shí)，也可以大幅度參考你的個(gè)人插畫(huà)系統(tǒng)，當(dāng)然這一切都是需要自己去慢慢迭代添加的。
3、用軟件規(guī)范插畫(huà)組件庫(kù)（層級(jí)詳解），提升應(yīng)用效率
為了更好的替換組件，提升輸出的工作效率，我們可以從一開(kāi)始就使用軟件對(duì)插畫(huà)進(jìn)行管理。市面上可以提供復(fù)用樣式的軟件也蠻多的，這里我就使用應(yīng)用率最高的Sketch來(lái)進(jìn)行講解。
首先我給大家講一下我的插畫(huà)組件庫(kù)的構(gòu)成，我的插畫(huà)組件庫(kù)一共分為了5大塊，分別為：人物組件庫(kù)、非常規(guī)人物組件庫(kù)、動(dòng)物組件庫(kù)、輔助元素組件庫(kù)、輔助背景組件庫(kù)，而這5大塊中也細(xì)分出了很多小層級(jí)，我就一一為大家分析下我所用的層級(jí)。
我們可以從以上圖中看出從風(fēng)格分類(lèi)開(kāi)始直至最小的組件，我用到最多的層數(shù)是5層。
如果大家看的有點(diǎn)懵，我們就拿一塊從層級(jí)1到層級(jí)5舉例說(shuō)明：
風(fēng)格分類(lèi)（A）-角度分類(lèi)（正側(cè)）-四大組件（下身）-動(dòng)作（B）-顏色（B）
這里所用的是sketch復(fù)用樣式中的“套中套”，“套中套”的組件方式看似復(fù)雜，其實(shí)挺簡(jiǎn)單的，并且在軟件中換取都在大組件內(nèi)，因?yàn)椴皇擒浖v解所以就不帶入過(guò)多的軟件知識(shí)。
在制作時(shí)我們不要想著一次性就做出很多小組件，比如你想做表情時(shí)，一來(lái)就想做10多20個(gè)全部包含完，其實(shí)沒(méi)有必要，我個(gè)人是比較建議最開(kāi)始小組件做個(gè)3-5種常用的就可以了，因?yàn)榻M件庫(kù)是要不斷添加優(yōu)化的，所以可以在后續(xù)工作應(yīng)用中再不斷的添加。
有了層級(jí)的劃分，我們可以用sketch的復(fù)用樣式簡(jiǎn)單、的規(guī)范插畫(huà)組件庫(kù)，想要覆蓋替換組件內(nèi)容也是十分方面，如下：
2/非常規(guī)人物組件庫(kù)
除了常規(guī)的人物組件庫(kù)外，我還單獨(dú)羅列了非常規(guī)人物組件庫(kù)，這一類(lèi)組件庫(kù)主要是作用于人物特殊的動(dòng)作形態(tài)，比如下面3個(gè)透視類(lèi)的插畫(huà)動(dòng)作形態(tài)，這些動(dòng)態(tài)與常規(guī)的插畫(huà)組件庫(kù)的內(nèi)容很多是不互通的，比如臉的角度、鞋子的角度、身體的透視尺寸，所以我們就單獨(dú)給他羅列一個(gè)非常規(guī)人物組件庫(kù)。
都是同為組件庫(kù)，當(dāng)然也有可替換內(nèi)容，非常規(guī)人物組件庫(kù)與常規(guī)的人物組件庫(kù)的層級(jí)邏輯有所不同，常規(guī)的人物組件庫(kù)是用小組件替換人物動(dòng)作，但是非常規(guī)人物組件庫(kù)是先替換整體的動(dòng)作然后才可以替換小組件，這也是對(duì)他的特殊化管理。（注：不想舍棄它，又不想為他做出更大的調(diào)整，所以就單獨(dú)讓它成立出來(lái)。）
根據(jù)非常規(guī)組件庫(kù)的設(shè)定給大家做個(gè)小案例：
以上可以看出我在這個(gè)透視化的插畫(huà)人物中可以替換表情、發(fā)型、紋理、上身、下身。
3/動(dòng)物組件庫(kù)
我這里做的動(dòng)物組件庫(kù)是用來(lái)輔助人物以及調(diào)和場(chǎng)景的，所以在層級(jí)劃分上并不會(huì)做的非常細(xì)，滿(mǎn)足我的日常插畫(huà)需求即可，當(dāng)然如果你想把動(dòng)作組件庫(kù)做的非常細(xì)，那么可以參照人物組件庫(kù)的層級(jí)來(lái)劃分層級(jí)。
根據(jù)我使用的動(dòng)物組件庫(kù)層級(jí)，給大家舉一個(gè)正確小案例與錯(cuò)誤小案例，先看下錯(cuò)誤小案例：
可以看到下圖（狗子）是一個(gè)非常粗糙的動(dòng)物組件庫(kù)，里面只能替換動(dòng)作以及動(dòng)物的動(dòng)作，當(dāng)選在狗子的狀態(tài)下，狗子除了換動(dòng)作沒(méi)有其他的組件選項(xiàng)，雖然我想讓動(dòng)物組件庫(kù)簡(jiǎn)化，但是也不至于什么都不能替換。
接下來(lái)看看正確的案例：
我們可以看到在貓咪的狀態(tài)下就有很多組件可以選擇，不僅可以替換貓咪的動(dòng)作，還可以替換展示形式（展示形式我是按照景別來(lái)做差異化，當(dāng)然也可以用其他方法）、貓咪表情以及貓咪的顏色，這樣的動(dòng)物組件庫(kù)已經(jīng)完全能夠滿(mǎn)足我的設(shè)計(jì)需求。
4/輔助元素組件庫(kù)
輔助元素組件庫(kù)層級(jí)最好要添加景別，因?yàn)槲覀兘?jīng)常會(huì)遇到同一個(gè)元素在不同產(chǎn)品中體現(xiàn)出不同的景別，如果不區(qū)分，在選取組件時(shí)就非常的傷腦經(jīng)，經(jīng)驗(yàn)之談、強(qiáng)烈要求。
為了大家更好的理解，我給大家舉一個(gè)小案例：
我們可以看到我不僅可以切換元素，還可以切換景別以及顏色，至于其他的小組件我并不需要，因?yàn)檫@些已經(jīng)足以滿(mǎn)足我的日常運(yùn)營(yíng)設(shè)計(jì)需求，這個(gè)層級(jí)劃分簡(jiǎn)單實(shí)用非常推薦。
5/背景元素組件庫(kù)
背景元素組件庫(kù)一共分為兩種類(lèi)型，分別為：組合場(chǎng)景背景與紋理背景。
組合場(chǎng)景背景：
組合場(chǎng)景背景是用輔助元素組件庫(kù)拼湊而來(lái)，它是一個(gè)可以直接用的完整場(chǎng)景，想要替換的組件如果在輔助元素組件庫(kù)能夠替換，那么在背景組件庫(kù)也是可以的。（注：這里牽涉到組件庫(kù)的重組調(diào)動(dòng)，在后續(xù)出的文章中會(huì)詳細(xì)提到）
上面的插畫(huà)由白天變?yōu)楹谝怪恍枰媒M件庫(kù)就能輕松完成，而這些組件庫(kù)也不是現(xiàn)做的，全部是輔助元素組件庫(kù)里提取過(guò)來(lái)的，也就是我所說(shuō)的組合場(chǎng)景背景是用輔助元素組件庫(kù)拼湊而來(lái)。
大家可以發(fā)現(xiàn)插畫(huà)中山上的小房子只用一個(gè)組件就可以全部替換顏色，而左右兩邊的樹(shù)卻要做6次不同的替換，樹(shù)木需要多次替換的原因這就是沒(méi)有做重組，如果想要相同元素做相同的替換，那么建議在調(diào)換過(guò)程中重組組件，優(yōu)化層級(jí)。
紋理背景：
紋理背景相對(duì)于來(lái)說(shuō)就是最簡(jiǎn)單的，它里面只存在紋理的不同樣式，并且只可更換顏色。
三、人物插畫(huà)組件庫(kù)如何結(jié)合到運(yùn)營(yíng)設(shè)計(jì)中？
1、創(chuàng)建常見(jiàn)運(yùn)營(yíng)設(shè)計(jì)規(guī)范
在做設(shè)計(jì)前，我們先要做好運(yùn)營(yíng)設(shè)計(jì)的規(guī)范，以便于組件庫(kù)的插入應(yīng)用。
那么我就用卡片彈窗來(lái)舉例：做設(shè)計(jì)前我們先確定卡片內(nèi)容，當(dāng)內(nèi)容確定后，根據(jù)內(nèi)容進(jìn)行卡片的運(yùn)營(yíng)設(shè)計(jì)規(guī)范：
我們需要注意的是初步規(guī)范里并不需要涉及到用什么字體，也不需要羅列出插畫(huà)的尺寸規(guī)范，我們可以在后面的設(shè)計(jì)中一步步去實(shí)現(xiàn)。
2、結(jié)合運(yùn)營(yíng)設(shè)計(jì)的兩大方法：
當(dāng)規(guī)范做好時(shí)，我們就可以利用規(guī)范去制作相應(yīng)的組件庫(kù)，利用組件庫(kù)來(lái)結(jié)合運(yùn)營(yíng)設(shè)計(jì)，按照不同的情況可以分為以下兩種方法：
1/重組組件庫(kù)（無(wú)人物動(dòng)態(tài)組件的情況下）
在一些運(yùn)營(yíng)設(shè)計(jì)中，如果我們要用到的人物動(dòng)作之前并沒(méi)有做過(guò)，那么就需要我們重新設(shè)計(jì)人物動(dòng)作，設(shè)計(jì)完后再把可以重組的人物組件拖到我們現(xiàn)在的組件中進(jìn)行重組，分以下幾步進(jìn)行：
第一步，根據(jù)卡片的規(guī)范做出卡片的設(shè)計(jì)內(nèi)容，如下：
第二步，把設(shè)計(jì)好的內(nèi)容分板塊，以便于組件庫(kù)的層級(jí)劃分。在這里我把他們一共分為了4個(gè)大塊，分別為：文字組件、人物組件、輔助裝飾組件、背景元素組件。
第三步，在大的板塊下劃分小組件，結(jié)合小組件就可以得到我們組件庫(kù)的層級(jí)，可看下圖：
在小組件里，很多都是個(gè)人組件庫(kù)里原本有的內(nèi)容，這時(shí)我們就可以把它們拖進(jìn)來(lái)進(jìn)行重組。
假如你替換的元素不夠用，那么就需要你自己手動(dòng)設(shè)計(jì)了，這樣也能反過(guò)來(lái)擴(kuò)充你總的人物組件庫(kù)內(nèi)容，其實(shí)組件庫(kù)的內(nèi)容就是這么一點(diǎn)點(diǎn)迭代添加的，當(dāng)你的組件庫(kù)內(nèi)容越來(lái)越多時(shí)，你的設(shè)計(jì)成本就會(huì)越來(lái)越低。
三步下來(lái)我們就把組件庫(kù)融入到了運(yùn)營(yíng)設(shè)計(jì)中了，有了新的子級(jí)運(yùn)營(yíng)設(shè)計(jì)組件庫(kù)。
2/直接替換（有人物動(dòng)態(tài)組件的情況下）
如果你做的運(yùn)營(yíng)內(nèi)容組件庫(kù)里都有，那么就可以按著規(guī)范直接拖入即可，也沒(méi)有必要去進(jìn)行重組。
總結(jié)：
總的來(lái)說(shuō)組件庫(kù)的建立是一個(gè)龐大的工程，在你有了基礎(chǔ)架構(gòu)的時(shí)，你就要慢慢往里面塞更多的內(nèi)容進(jìn)行填充，當(dāng)你的內(nèi)容足夠多時(shí)它就可以反向?yàn)槟闾峁└嗟谋憷悄愕膶氋F的設(shè)計(jì)資源庫(kù)。
因?yàn)檫@期的內(nèi)容實(shí)在太多，所以插畫(huà)組件庫(kù)的應(yīng)用、運(yùn)營(yíng)設(shè)計(jì)常用模塊組件案例、重組技巧以及品牌插畫(huà)組件庫(kù)的建立我會(huì)另外抽時(shí)間給大家總結(jié)。（做案例太費(fèi)時(shí)間希望大家諒解）
參考資料提?。?/span>
我為大家提供了一些組件庫(kù)的可參考性文件，里面包含成套組件庫(kù)（sketch）、成套的插畫(huà)圖片、宣傳動(dòng)畫(huà)、一些參考性的圖片（構(gòu)圖、表情、發(fā)型等等）。
文章來(lái)源：tob.design 作者：黑獅力
藍(lán)藍(lán)設(shè)計(jì)( www.wnxcall.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.wnxcall.com