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

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

 

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

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

 

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

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

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

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

 

02-使用效率：

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

個(gè)人插畫組件庫：因?yàn)槲覀儾捎玫氖遣粩嗟阶龇?，所以在剛建立個(gè)人插畫組件庫時(shí)，我們的組件替換效率是比較低的，但是在逐漸迭代中，我們的使用效率會(huì)逐步提升。

 

03-拓展力：

品牌插畫組件庫：因?yàn)橛泻芏嘁?guī)范的約束，所以拓展力偏弱，不過針對(duì)于自己的品牌已經(jīng)足夠了，它本身就是為了自己的品牌服務(wù)的；

個(gè)人插畫組件庫：因?yàn)閺奈覀儾瀹嫿M件庫的層級(jí)分區(qū)來看本來就是為了衍生拓展，所以拓展力非常強(qiáng)，不僅可以衍生出相同類型的插畫風(fēng)格，還可以衍生出不同類型的插畫形勢，甚至可以以個(gè)人插畫組件庫為基礎(chǔ)創(chuàng)建單獨(dú)的運(yùn)營設(shè)計(jì)組件庫，或者升級(jí)為品牌插畫組件庫。

 

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

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

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

 

二、如何建立個(gè)人插畫組件庫？

 

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

 

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

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

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

 

第一步：

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

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

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

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

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

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

 

第二步：

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

做人物基礎(chǔ)動(dòng)態(tài)可以讓我們?cè)诤竺娴牟瀹嬙O(shè)計(jì)上少花很多時(shí)間，例如工作中要用到跑步動(dòng)態(tài)時(shí)，那么就可以直接用人物基礎(chǔ)動(dòng)態(tài)里面的跑步動(dòng)作進(jìn)行添加人物細(xì)節(jié)，會(huì)節(jié)省很多工作時(shí)間，提升工作效率。

 

第三步：

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

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

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

第四步：

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

 

1/發(fā)型：

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

2/膚色：

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

3/表情：

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

4/角度：

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

5/紋理：

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

6/服裝：

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

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

第五步：

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

通用組件庫中的元素最開始要用黑白灰來表達(dá)，因?yàn)樵诓煌膱鼍爸性氐倪\(yùn)用也有很大差異，例如花盆作為近景元素會(huì)多許多細(xì)節(jié)，作為遠(yuǎn)景元素可能只是作為線條來點(diǎn)綴，這些表達(dá)方式我們可以在日后使用過程中添加到它的子級(jí)庫即可，這樣可以讓我們?cè)谑褂媒M件庫時(shí)更加靈活，也有利于我們迭代組件庫，后面會(huì)逐一的講解。

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

 

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

 

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

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

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

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

 

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

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

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

 

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

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

 

方法二：改變插畫風(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組時(shí)，你就可以組合出25組不同的插畫，這樣你的插畫系統(tǒng)適應(yīng)能力就極強(qiáng)了，甚至你要為產(chǎn)品做插畫系統(tǒng)時(shí)，也可以大幅度參考你的個(gè)人插畫系統(tǒng)，當(dāng)然這一切都是需要自己去慢慢迭代添加的。

 

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

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

 

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

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

如果大家看的有點(diǎn)懵，我們就拿一塊從層級(jí)1到層級(jí)5舉例說明：

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

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

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

 

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

 

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

 

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

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

 

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

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

 

3/動(dòng)物組件庫

 

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

 

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

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

接下來看看正確的案例：

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

 

4/輔助元素組件庫

 

輔助元素組件庫層級(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)足以滿足我的日常運(yùn)營設(shè)計(jì)需求，這個(gè)層級(jí)劃分簡單實(shí)用非常推薦。

 

5/背景元素組件庫

 

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

 

組合場景背景：

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

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

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

 

紋理背景：

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

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

 

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

 

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

 

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

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

 

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

 

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

 

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

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

 

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

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

 

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

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

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

 

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

 

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

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

總結(jié)：

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

 

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

 

參考資料提?。?/span>

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

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

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