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