保姆級教程！如何創建超實用的品牌插畫組件庫（附超多資源）

之前給大家詳細的解析了個人插畫組件庫的設計方法以及個人見解。今天就帶大家來全面分析一下品牌插畫組件庫的建立及應用。

前言

設計系統的創建是為了使秩序達到統一性。美國國家航空航天局于 1976 年引入了第一個設計系統，如今，幾乎所有大型產品（如 Uber，Pinterest，Airbnb 等）都在建設與優化設計系統。插畫系統作為設計系統的分支，是對產品插圖的整體性概括，其本質是“文檔規范”與“設計資產”的集合，用于提供一定的原則、方法、標準與素材，幫助設計師系統化、高質量的完成設計輸出，同時提升設計效率，將設計師從重復的勞動中解放出來。近年來國內大量的品牌也開始使用插畫系統，但是我們很少能看到插畫系統建設的詳細流程與方法，那么今天我就重點從方法論層面講一講如何系統化的創建插畫組件庫。（如果想看偏制作過程的，可以翻看我之前發布的另一篇插畫組件庫文章）

創建插畫組件庫的前提

在創建插畫組件庫之前我們要向自己提兩個問題。第一，我們為什么非要創建插畫組件庫？第二，我們能從插畫組件庫中得到什么實質性的反饋結果？

1. 我們為什么非要創建插畫組件庫？

我們做任何事情肯定都有它的理由，創建插畫組件庫也是如此，我們在創建前必須要清楚它能為我們的產品以及團隊解決什么問題，才決定是否去創建它。總體來講創建插畫組件庫能解決產品 3 大問題：插畫風格不統一、缺乏視覺差異化、插畫產出復用率低。

插畫風格不統一

很多公司對插畫的使用沒有一個特定規范，在設計插畫時都是隨心所欲，以至于風格十分雜亂，也許你在 C 端看到的是一個風格，在 B 端看到的又是另外一個風格，甚至在同樣的界面下出現兩個完全不同的插畫風格。

插畫風格的不統一會導致視覺感官體驗差，品牌感薄弱，降低了質感不易傳播。創建插畫系統不僅能夠增強視覺感染力，還能夠很好的塑造用戶對品牌的認知，可以加強用戶對產品的記憶點，提高用戶對產品的粘性。

缺乏視覺差異化

現在市面上的產品同質化太嚴重，系統化的插畫風格能在紅海市場的同質化情況下做到差異化，做到別具一格，用情感化的設計去打動用戶，增加用戶對自家產品的依賴性與識別度。

插畫產出復用率低

如果產品高頻使用插畫，那么每一次過稿都需要 0 到 1 的過程，每一次的輸出都需要重新審核，嚴重影響產出效率。而插畫組件庫具有快速搭建、快速迭代的特性，并且具備組件化的高效復用性，這樣能使我們的輸出效率成倍提升，并且讓輸出的結果也保持了一致性。

2. 我們能從插畫組件庫中得到什么實質性的反饋結果？

反饋結果并非視覺化呈現，而是數據化呈現，插畫組件庫的建立需要花費大量的人力成本與時間成本，如果你只是說了產品有哪些問題，而不說解決了這些問題會為產品帶來哪些實質性的收益，那么企業會讓你放手大膽的干嗎？（需要把無形的收益轉變為企業可見的有形的收益）

我們可以把這個叫做“投資回報”，投資回報通常是用金錢來衡量的：所花出去的每一元錢，能收回多少元的等值收益？但是投資所得的收益并不一定用嚴格的貨幣術語來進行計算，比如我們這樣的情況，可以找去一個衡量的方法，用于計算花出去的錢（成本）轉化成了多少企業的價值。

對于衡量的方法其實有很多，如何衡量最終還是取決于你的品牌戰略目標與產品現狀。這里我提供 2 個常用的衡量方法用于大家參考：工作效率與人力成本。

工作效率

工作效率，實際上就是工作后的收益與工作中的投入之間的比例，當收益大于投入，說明工作效率是偏高的，當收益小于投入，那說明工作效率是偏低的。

由此你可以表述目前的工作效率并不理想，并說明影響你（或設計團隊）工作效率的直接原因，例如你在工作中花取了大量時間都用于運營設計，并且在運營設計中大部分時間都花在了做插畫設計上面，平均每天做 2～3 個，用時 6 小時，剩余寥寥無幾的時間才真正去考慮設計本身。

說完問題，你再表述可以通過插畫組件庫去解決這個問題。比如通過插畫組件庫的建立原本一天需要花 6 小時去做運營設計，而現在只需要 1 小時，并且團隊都可以復用，大幅度提升了團隊的工作效率，使用的越久體現的價值就越大，并且這個體系可以建立在公司其他項目中。（當然前提是你說的收益要與你做出的結果一致，如果你做出的組件庫不能使用，或使用起來十分麻煩，并不能達到你所描述的預期效果，那么你的插畫組件庫就是失敗的，也浪費公司資源。）

人力成本

人力成本是指企業在一定的時期內，在生產、經營和提供勞務活動中，因使用勞動者而支付的所有直接費用與間接費用的總和。

假如企業的設計人員工作已經超負荷，只有通過招聘新的設計師（或者招聘兼職設計師）才能滿足目前的設計需求時，那么你可以向企業提出解決方案，可以通過優化設計制作流程（插畫組件庫）來解決目前的設計需求問題，本來每月需要多投入 3 萬的人力成本，現在只需要通過內部流程優化就能省去這 3 萬人力成本的投入。

特別提醒：如果你需要設計插畫組件庫，那么必須考慮到制作成本。如果你的制作成本較高（時間成本、人力成本），而你的使用率又低，并且不能為產品帶來太多實質性的幫助（短期與長期），那么不太建議你創建插畫組件庫，商業設計并不是滿足設計師個人欲望。

如何創建品牌插畫系統

品牌插畫系統的創建與個人插畫系統的創建思路完全不同（如果對個人插畫系統創建感興趣的朋友可以去看我之前發布的文章）。雖然每個品牌對插畫系統的創建流程都有一些不同的見解與想法，不過我們可以把它總體分為三個步驟：插畫風格推導、制定插畫規范、插畫系統構成原則。

1. 插畫風格推導

插畫的設計風格反映了產品的調性，也決定了人物組件的高效適應性和延展性，所以我們在進行插畫風格推導時一定要嚴謹，如果推導內容沒有任何依據，那么你設計出的插畫系統再好看也不能為產品帶來任何價值。我們可以從 3 個緯度對插畫風格進行推導：用戶緯度（1H3W 分析法）、品牌緯度（傳達品牌形象）、設計緯度（插畫流行趨勢）。

1H3W 分析法（用戶緯度）

任何產品都離不開用戶，所以了解用戶人群是我們必須要解決的首要目標，如果企業的產品文檔里已有相對完整的調研結果，那么可以直接使用，這樣就會省去前期大量的調研時間；如果沒有則可以用經典的 1H3W 分析法去解決問題：用戶研究（How）、用戶畫像（Who）、用戶需求（What）、用戶場景（Where）。調研完成后，我們要根據調研結果提煉出情緒版內容。

傳達品牌形象（品牌緯度）

傳達品牌形象是一個產品最常見的戰略目標之一，傳達品牌形象有很多方法（如產品所使用的語氣或網站功能的交互設計），但對于插畫而言用于傳達品牌形象的主要工具之一則是視覺設計，所以我們在設計插畫系統時可以提取品牌元素中的視覺元素用于插畫設計中。

插畫流行趨勢（設計緯度）

為了避免閉門造車，我們需要整理出現階段符合設計流行趨勢的插畫，并對其做大量分析。不僅如此，如果直接競爭對手已經使用插畫系統，我們一定要進行對比與研究，總結出它的優勢與劣勢，避免出現同質化的插畫風格。

風格確定：通過以上不同緯度的分析，我們需要最終總結提煉出滿足調研群體普適性偏愛的組件插畫風格。（下圖為假設案例）

2. 制定插畫規范

當確定完插畫風格后，我們的第二步就是制定插畫規范。為了提高插畫的易用性，我個人并不太建議把規范做的太死、太細，做的越細插畫的延展性就越弱，插畫的表現形式就會顯得非常生硬，也不利于插畫后期的迭代。在設計插畫規范這一層面我建議分為四個部分就已經足夠了：色彩、人物、質感、光源。

色彩規范

插畫系統的色彩規范需要根據品牌的色彩規范來設定，如果你的品牌有很規范的色彩系統，那么可以直接沿用到插畫系統的色彩規范內；如果品牌的色彩系統單一，那么可以對其色彩進行衍生添加。（顏色的衍生添加需要根據品牌定位、顏色性格與插畫風格推導作為參考進行調試）

人物

人物插畫作為插畫系統的核心表現，我們一定要詳細規范人物的結構比例、大小。人物的結構需要精確到元素的最小單位（頭部、上身、上臂、前臂、手掌、臀部、大腿、小腿、腳掌）。

這里需要重點強調的是在不同的設計風格中男女的身體構成是可以共用的，只需要通過修改頭部的發型以及衣服的樣式就可以很明顯的區分出男女差別。現在很多插畫系統都在使用此方式，如下案例：

• 人物動態預設：

面對豐富的使用場景，為了方便設計師靈活編輯與擴展，繪制多視角人物動態，對常用人物動態進行預設，提高角色在各業務場景的利用率，節省設計師更多繪制時間。

質感

在插畫系統中我們可以用三種方式來體現質感：線性、幾何化、噪點，這三者并不沖突，可以同時存在。在插畫中我們主要是規范質感的使用條件以及主要作用，如線性只能存在于元素與元素的交接邊緣，主要用來強調輪廓、光源；幾何化只能存在于元素內部，用于突出人物細節；噪點只能存在于投影，主要用來強調光影。

• 噪點質感：

噪點質感非常特殊，所以我單獨提出來講一下。制作插畫系統推薦用的軟件是 sketch 和 figma，是因為它們能直接在軟件中把圖形組件化。

但是你的團隊如果想要把插畫系統搬到線上，那么情況就不一樣了，我就更推薦大家用 AI，因為我們并不需要用軟件把它組件化，并且相對上面兩個軟件而言 AI 做矢量圖形更加方便，重點是能夠支持矢量噪點，能讓你的插畫有更多的體現方式。（AI 怎么做噪點插畫以及 AI 噪點筆刷我之前都分享過，如果對這塊不太了解的可以翻我之前發過的文章）下面這個網站用的就是噪點插畫組件，可以為大家提供一些思路，在文章的第四個板塊我會詳細講一下這個網站。

光源

大部分的插畫系統都會牽涉到光源，如果有光源，我們就必須要保證光源在畫面中的統一性，我們也可以為它設定常用的默認光源。

3. 插畫系統構成原則

為了更容易了解插畫系統的構成原則，我采用原子設計理論作為這套原則的核心支撐。原子設計作為制作插畫系統提供了清晰的方法，設計團隊通過實際的設計流程與步驟，能更好的去理解插畫系統的概念。原子設計理論可分為 5 個階段：原子、分子、組織、模板、場景。

原子

原子是構成插畫系統所有元素的最小單位。里面包含眼睛、鼻子、手掌、臀部、顏色、紋理等，它們在插畫系統中沒有辦法再次細分，并且不能單獨使用，部分具備替換功能。（如眼睛、嘴巴可以替換；手掌、大腿等結構性的組織不能替換）

分子

分子是按照原子組合而成。這些分子組成了人物結構的不同部分，總體來講可以分為三大塊：頭部、上身、下身。它們是插畫系統中主要替換的組件部分，不能單獨使用。

組織

組織是由分子（原子）組合而成 。組織不同于原子與分子，它是可以獨立使用的，并且具備原子與分子的替換功能。組件在解放設計師生產力方面有著重要的作用，我們可以把插畫中常見的組織進行分類整理：人物、通用元素、背景。

模板

原子、分子和組織的這種語言有助于我們有意識地構造插畫系統的組件。但是，最終我們必須采用一個更適合描述我們最終產出的語言，這樣才好匯報給老板、客戶和同事，模版就是最好的體現，我們需要在不同的應用場景下設計出不同的模板。

場景

場景是模板的具體實例，在模版的基礎上進行優化和完善就形成了最終的視覺方案，也就是常說的視覺稿，“場景”是開發落地的依據體現。

如何創建品牌插畫組件庫

創建品牌插畫組件庫的前提是必須先建立好插畫系統。我這里從應用軟件、組件層級兩個板塊給大家講解如何創建品牌插畫組件庫。

1. 應用軟件

在軟件的選擇上，不牽涉線上系統：我推薦用 sketch 或者 figma，最主要原因是它們都可以直接創建控件（組件），如果團隊人員少建議用 sketch，團隊人員多則用 figma。第二選擇是 AI，我最開始做組件庫時就是用 AI 造型（包括所有能替換的小組件），造完后再拖到 sketch 里進行重新編輯做組件，不過過程比較麻煩，因為拖入 sketch 中會有一些軟件上的沖突，每個小部件都需要自己重新定義與組合，不然圖層很混亂，不易于修改，十分浪費時間，而且還會出很多軟件上的小 BUG。

如果牽涉線上系統：那么首選 AI，不牽涉軟件沖突，矢量圖形制作更快，能用矢量噪點。次選 sketch 與 figma。

2. 組件層級

品牌插畫組件庫的層級可以按照原子設計理論作為核心支撐（這一點與個人插畫組件庫不太一樣）。下面給大家看一下我個人建議的組件層級分類。

3. 制作流程

第一步：以自上而下的方式設計插畫以及制作替換控件。先設計插畫主體（組織：人物、通用、背景、其他），再細分主體的第二層級創建控件（分子：頭部、上身、下身），最后再次細分最小元素創建控件（原子：發型、表情、通用樣式等）。把層級確定好后，我們再到控件的內部添加它的組件。

第二步：以自下而上的方式設計模版。首先，我們先規范好模版內容以及規范，然后把需要的組件元素拖入到模版中。

第三步：不斷添加插畫系統內容。插畫組件庫并不是建立完成后永不改變的，相反，我們應該不斷的去添加豐富它的組件內容，讓其運用到不同的設計場景中。

4. 軟件知識（sketch）

在軟件知識這一塊我重點強調一下 sketch 在創建控件時的兩大注意事項：命名規范、顏色替換。

命名規范

采用原子理論命名方式：分類/模塊/組織/分子/原子，舉例：banner/首頁頂部 banner/男性/頭部/發型。這里邊斜杠 “/” 根據思維導圖邏輯關系用來區分父子級關系也包含軟件嵌套關系。

顏色替換

在組件庫中，我把顏色列為特殊的存在體，它的主要用途是用于替換單個元素的顏色，它使用的方式與其他控件的使用方式有所不同，采用的是：控件套控件。

操作方式：我們先把需要用的所有顏色創建好控件并給予層級分類（層級分類可以讓你控制元素的顏色選取范圍），在需要進行顏色變化的元素上，把顏色控件用剪切蒙版套入元素內部即可。

優點：只需要調試一次顏色的整體組件，就可以運用到各個元素之中，并且還可以控制顏色的選取范圍，操作簡單方便。

5. 組件庫效果展示

為了方便大家理解與研究，我用人物的結構做了一個非常簡單的組件庫效果展示，里面的所有層級均是按照我上面所講的進行劃分，源文件也一并提供給大家作為參考。左邊是層級顯示、右邊是替換內容。

插畫組件庫的學習資源

為什么這次我把學習資源作為一個大板塊拿出來給大家講，原因非常簡單，因為之前發布的個人插畫組件庫的文章是拿我做的系統案例為主進行講解，文章發出后很多朋友都私下問我各種問題，主要是牽涉插畫組件庫的結構問題，其實我個人認為并不需要按照我的結構照搬，插畫的結構很大一部分是按照不同需求來的，很多人都繞進了死胡同里。

所以這次品牌插畫組件庫的文章我主要是講方法論，并未代入系統性的案例，授人以魚不如授人以漁，只要方法懂了其他的問題都迎刃而解。文章前面主要講方法論，而文章最后一個板塊（學習資源）重點是想讓大家帶著方法論去看別人如何去做組件庫，給予大家更多的思考空間。

之前斷斷續續給大家分享了很多組件庫的學習資源，今天就來做一個總和，把最精品的插畫組件庫學習資源分享給大家，學習資源包含網站、插件、參考文件、源文件。

1. 插畫組件庫學習網站

插畫組件庫的學習網站其實真的蠻多的，對于學習的參考點也都有所不同，我這里就不提供素材下載的網站了，主要是推薦 2 個最具有參考體驗價值的組件庫網站，如果你想要學習插畫組件庫，那么你就必須去體驗一下。

網址：sapiens.ui8.net

文章中提到過的網站，也是最值得去看的一個網站，網站中的組件層級劃分與我們今天講的品牌插畫組件庫的層級劃分不一樣，但是與我之前分享的個人插畫組件庫的層級劃分類似。

它可以進行風格替換（3 種：彩色噪點、雙色調、草稿）、動作替換（4 種：步行、跑步、正常、騎車）、性別替換（男女）、人物替換（頭部、上身、下身）、背景替換（僅支持整體替換）。

這里大家可以多思考一下，比如為什么它的組件中竟然還做了 3 種風格，如果是你在做品牌插畫組件庫時會不會牽涉做多風格，如果做多風格又應該怎么去把它運用到不同應用場景中。（例如：常規應用場景用：彩色噪點；缺省頁則用：雙色調）

這個網站可以為你在建設品牌組件庫時提供很大的參考性，建議大家去研究下它的細節構成部分。

網址：disneyplus.disney.co.jp/program/soulfulworld/mysoul.html

這是我剛看完《心靈奇旅 SOUL》就分享過的一個網站，看過這部電影的人肯定會被它的畫風所吸引，特別是那些可愛的小靈魂，這個網站為我們提供小靈魂的捏臉功能，為你量身打造屬于自己的小靈魂。

可替換部位為：臉型、發型、眼睛、眉毛、嘴巴、身體、貼身物。它可以為你在人物的頭部組件上提供很大的參考性。（對了，最近吃雞的捏臉也是很火，我剛玩兒這個網站的時候吃雞的捏臉還沒有上線，看來大家都非常喜歡捏臉啊～）

2. 資源插件

組件庫插件我自己用過很多，比如大家最為熟悉的 Humaaans 插畫組件庫、阿里的海兔插畫組件庫，以及其他一些小眾的插畫組件庫。相對于這些獨立的插畫組件庫，我今天給大家推薦一個集合型的插畫組件庫插件：Blush 組件庫插件。

這個插件內含風格超多，能自動生成各種你需要的插畫形式（里面也包含 Humaaans 插畫組件庫），重點是這些插畫都是可以免費使用的，并且 sketch 與 figma 都能夠安裝。

我們可以看到插件內部的插畫風格真的超級多，而且每一款的組件結構都有很大差別，非常具有參考價值。（當然也具備使用價值）

打開后我們可以替換它的任意人物組件、背景組件、捏臉等等，因為替換功能真的太多了，所以這里就不做過多介紹。這個插件是我目前接觸過的最好用的組件庫插件，如果你想學習插畫組件庫，那么這個插件必須得下載來使用一下。

3. 資源文件整合

資料一共包含三大塊內容：參考圖片、參考視頻、參考案例源文件。

參考圖片里有很多小知識，我已經系統化的給大家分好類；參考視頻主要是組件庫的宣傳視頻、以及一些扁平動畫；源文件主要是組件化的源文件以及我文章中的案例。

歡迎關注作者微信公眾號：「黑獅力」