品牌形象通常是由不同的視覺元素構成的，比如logo、調色板、特定的字體。除了這些，插圖是另一種強大的視覺傳達手段，對於在UI的界面上也越來越需要。插畫系統是一個建立公司視覺品牌的有效方式，本文作者分享了如何設計並落地一套強大的插畫系統的過程，供大家一起參考學習。

前沿

插畫在現在的視覺設計中越來越重要，但是隨便一畫就是成功的插畫嗎？顯然不是，基於各種以引流為最終目的的插畫，從生成到落地都有一套有規可循的系統方法，今天我將在這裏為大家來揭秘，首先我想談的是關於FACE TEAM團隊的誕生。

FaceTeam的誕生

故事是這樣的開始的，我心中一直有一個想法，那就是設計產出能不能像故事集一樣有個主人公，在主人公的貫穿下講述着房產業務線的故事。直到有一次周會討論上，有個小夥伴提出了同樣類似的想法，她說如果我們有個固定的房東或者租客形象，可以大大方便了設計，而且還很統一。這讓我覺得，這個方向似乎是大有可為的，用現在的管理方式（OKR）去說這件事，那就是我將這個想法列為了自己的一個O。

在這之後我翻閱了大量有關資料，發現了品牌插畫這個概念——它是建立公司視覺品牌的一種有效方式。一個好的品牌形象不僅能表達公司的信息還能與用戶建立聯繫，它最大優勢就是能將敘事元素引入視覺內容中，甚至可以完全脫離了現實，讓用戶看到品牌所構建的理想世界，我覺得這對業務線來說是很有意義值得去做的一個事情。

隨着研究的不斷深入，我發現經過整合的插畫，還可形成高效的生產系統；它的原理並不複雜，就好像每個設計師自己積累的素材庫一樣，相同的畫面可以實現元素的共用，最大程度的提升生產效率，避免了設計資源的浪費；另外我還有一個非常深刻的體驗就是，遇到緊急需求時，有了素材庫的存在，我們可以更加從容的面對，不僅不用加班加點趕製，而且更不會因為時間的壓縮降低設計品質。

說了這麼多好處，下一步就是要將這個想法去落地了，我決定從探究了兩個方面着手，去建立整個插畫體系。

第一個就是，去構建，形成一個品牌插畫，通俗點就是先去創造業務線固定的人物形象，最終達到品牌宣傳的目的。

第二個是去整合，實現系統的高效性，意思就是將各組件分門別類進行拆分，最終實現組件可以重複利用的一個過程；與此同時，各業務線的想法也不謀而合，於是faceteam就這樣誕生了。接下來我會從構建和整合兩個方面去介紹我們是如何落地插畫系統的。

去構建，形象品牌插畫

首先是尋找靈感，這一步其實專業名詞可以稱之為添加情緒版，我們收集了大量現有的成熟插畫案例，參考他們做品牌的經驗，同時也思考着我們自己的道路，這其中有airbnb，Uber和shopify等，airbnb比較偏溫情，它的重心在於強調每個人的不同，因為種族不同的問題，所以希望插畫能是代表了各類膚色的人種；而後兩個比較偏商務，在設計手法上會更加的幹練扁平。

其實創建情緒版之後，我們在初期就定製了設計計劃，我們將整個插畫系統分為三期去製作，它分別是：

• 確定形象：如房東、租客、經紀人、車商等形象，並且製作人物三視圖；
• 形象應用：我們希望在UI的使用能做減法，搭配常用組件和背景形成小場景，體現品牌感；運營使用上做加法，可以只保留形象特徵，替換服飾，拓展更多畫風，增強品質感；
• 平面變立體：從動效，3D建模去應用插畫組件，由2D轉3D的效果實現。

有了初步的研究與計劃，我決定問大家一個問題「那就是你有freestyle嗎？」其實就是拋給大家一個命題：自己心中58的人物形象應該是什麼樣的。原因很簡單，就是一開始不想限制大家的思維，希望更多新奇的想法碰撞出更有意思的設計。

於是便有了faceteam成立以來的第一次海選大賽，大家各抒己見，每個人都描繪出了自己心中58人物的樣子，這裏歸納一下其實可以分為三個類別，有偏寫實風格的人物樣式，也有這種圓潤可盤的樣式，還有最後比較抽象的誇張類樣式。

其實除了剛才的三類，還有一類可以稱之為幫幫形象延展類，但是這個想法在第一輪我們就將它否定了的，因為幫幫形象太過於卡通畫，將人物形象也卡通畫設計會不夠穩重，不太符合企業形象。所以，如何達成共識尋找到一個適合58的人物形象成為我們當下急需解決的問題。

最終我們決定從兩個方面去考慮：

• 從58的產品屬性出發，它是一個服務於大眾的生活信息平台，那我們的設計就一定要迎合大眾的口味。
• 作為插畫系統，它也要具備方便繪製容易迭代的特性。

於是我們總結出了形象製作的四個關鍵詞：

1. 平均風格

個性過於強烈的風格，會形成⼀部分用戶極喜歡，而另⼀部分極不喜歡的爭議形設計，所以我們要保證大多數人的接受，人物形象的設計就需要保持平均風格，避免過度抽象和誇張。

2. 圓潤親和

我們想給用戶體現的是一種安全舒適的感覺，所以要避免過於衝擊性的畫面和奇特的人物外形，圓潤的外形將會給用戶帶來更多的親和感。

3. 可拓展

我們設計的插畫需要形成一個統一的系統，而不是單次獨立場景的製作。因此，它得能滿足多數設計師好上手，易模仿的特質（有規律可循）。

4. 輕量

這裏主要是希望表現技法能採用互聯主流的扁平化畫法，線與面的結合，畫面精簡歸納性強。

根據以上四點原則，我們之前過稿時的那種體態圓潤，手腳略微收縮的人物形象更符合我們的預期，我們將它劃定為重點可發展的對象。有了可發展對象，但是面對58繁多的業務線我們又該如何去製作呢？

我們初步的想法有兩種：

第一個是各業務線獨立製作，這樣的好處在於體量較小，各業務線方便管理，但是就會出現很多風格；

第二個就是統一製作，形成一個大家庭，這樣的好處在於品牌的統一性，俗話說的一家人整整齊齊的，但是它相比於獨立製作，會更有挑戰性，於是大家經過一番商討，決定選擇了更有家族化語言的後者。

整合成一個大家庭，人物角色如何設定其實是面臨的第一個難題，這裏可以舉個例子，比如一個男青年，他在二手車是買家，但是在房產又可能是賣家，買家和賣家一定要展現出來不一樣的感覺，所以這樣的話我們一個人就要設定很多的角色，58這麼多業務線，那工作量太龐大也不現實，所以角色設定可能行不通。於是我們想能不能找出一根主線將他們都串聯在一起，最後我們發現找到他們之間的共同點這一切問題都就迎刃而解了。

接下來一張圖幫了我們大忙，這是互聯網人群的年齡分布圖，每個人在生活中會扮演這個不同的角色，但是他在自己的年齡所表現出的那種狀態和精神面貌是大多數人都較為接近的，所以年齡，這正是我們要找的所有人物的共同點。

大家都很認同這個觀點，我們決定做5個年齡段的人物骨骼，涵蓋整個58用戶人群，這樣的話哪個業務線需要哪個年齡段的人物都可以隨取隨用，非常方便，根據業務屬性的不同，給他們替換相應的服飾就可體現出他們的人物所扮演的角色。

找到了共同點，接下來我們就可以去製作人物骨骼了，但是在製作之前，我們還得確定的一件事情就是，剛才我們列為可重點發展對象的那套人物，放在各個業務線是否適用，我們得再驗證一波。

於是我們將這一類身形圓潤，手腳略微偏小的橄欖球式人物形象應用在各業務線中，發現是可行的，但是出現的問題是每個人對造型拿捏不準，有的形象誇張，有的比較收斂，有的甚至出現了比較油膩的狀態，但是我們認為這是可以通過骨骼系統來規避的。

所以我們決定以這類形象人物為參考進行骨骼建立，我們採用的方法是先確定各年齡段的人物形象樣式，繼而在人物形象樣式的框架上反推出的人物骨骼，我們稱它為由具象推演抽象的製作方法。

我們剛開始在每個年齡段選擇了一個代表，然後製作了這個年齡段的一個人物形象的樣式，從人的相貌，體態、身高等方面入手，比如說隨着人年紀增大會發福，老一輩人身高偏矮這些客觀規律去表現，目的就是為了製作出每個年齡段最具代表性的人物。其實初稿反映出了很多的製作問題，比如女性胯部較大腰又較細，如果用同樣的製作方法會顯得胳膊過於粗壯，另外40歲男性我們感覺應該更矮點等問題。

於是在初稿的基礎上我們進行修改，並且將人物延伸至了每個年齡段分別會有男女兩個角色，但是這一版也並不能達到我們最終想要的效果，首先帶眼鏡的人群有點多，我們覺得應該適當減少近視人群的數量，讓畫面更符合國情。

另外人物在美觀性還需要加強，人物表情過於嚴肅、大媽有點返祖等一系列問題。於是我們又更新了一版，這一版本就是我們現在一直沿用的基礎，在內部為了好稱呼製作出來的人物還給他們每個人起了對應的名字，也許未來會給他們都賦予性格，成為一個更鮮活的人物形象。

有了精準的人物形象作依託，我們在形象身上提取動作線和關節骨骼，實現人物骨骼化。這裏可看到我們初稿將上半身胳膊骨骼定義為弧形，雖然現在的插畫形象有很多這種藝術化的處理方式，但是再三思量定義：圓潤是人物形象的外在表現，但是骨骼也應該是平直的，這樣既符合現實，也更容易讓人理解。

於是我們將骨骼進行修改，定義了人物的頭身比，並且確定了各個關節位置等一系列關鍵點，製作完成所有人物的骨骼圖。

最後對人物特點進行了總結，是一種圓臉圓肩小手小腳的特徵，人物整體呈錐形體，軀幹胳膊腿部都是由很多錐形組成，並且用骨骼圖的形式定義了腰、肩膀、胯關節這些關鍵的人體構成要素，有了這些便能幫助我們描繪出更精準的人物形象。

接下來就是顏色的定義，因為是多業務線共用的情況，我們的想法是可以根據各業務線需求來更換顏色，所以這裏的顏色僅供參考不做強制要求，算是提供一個基礎配色。58的logo是紅藍橙綠四色，所以我們也將基礎配色定義為四種顏色，只是適當降低顏色飽和度以達到插畫組合最為舒適的狀態，然後根據基色推演出來較深的色系作為描邊陰影等處理，較淺的色系做背景，氛圍等處理。

於是我們的線稿就這樣有了最基礎的顏色，搭配上同類色的背景，這就是我們想營造出來的多彩、親和的生活服務類平台的感覺。有這些產出，我們決定將它們放入業務線中進一步去推進，然後發現這當中出現了很多急需去解決的問題：

比如說，我們在應用過程中發現，人物繪製還存在不可控因素，主要是一些偏手繪的勾線與一些複雜的陰影，這樣可能導致不同設計師繪製出的東西差異性較大，所以我們決定在基礎製作中讓這些更加有規矩。

修改之後的形象我們嚴格規定了描邊粗度為1像素，人物五官較之前也更加精簡，人物減少了複雜明暗關係，畫面整體感覺更加乾淨清爽。至此人物形象上色稿也就基本確認，按照計劃我們給每個形象定製了一個標準套裝，套裝包含一個骨骼圖，一套基礎服飾的三視圖，一款春秋服飾和一個人物動作。所以我們第一部分確定人物形象的計劃已經基本達成。

關於去構建，形成一個品牌插畫。在人物形象確定的時候我算是邁出了第一步，但是也面臨着很多挑戰。比如：大眾產品和互聯網屬性，使得插畫必須兼容各類人群喜歡，再加上主流的扁平畫法，在表現上難免面臨同質化的問題。為了增加品牌的識別特性，未來我們將會在業務的使用顏色和輔助圖形上來增加插畫的區分性，以達到更好的品牌傳遞效應。

去整合，實現高效插畫系統

構建了基礎的品牌插畫人物，接下來我們就是要去整合插畫，實現高效的插畫系統，最終達到讓組件重複利用的目的了。我們整合插畫系統的方法是將所有組件分成三大類別，分別是作為基底的背景組件，代表各業務線屬性的通用組件，和最重要的人物組件。

這裏我們可以舉個例子，上圖選中的人物組件、通用組件和背景組件。將它們進行組裝，便可以生成一個我們想要的插畫場景，然後我們將這個場景拆分再和其他組件結合，又能形成更多我們想要的場景插畫，這種增長可以說是幾何式的裂變，能夠最高效的實現組件的重複利用，提升設計效率。

當然一個好用的插畫系統一定要擁有豐富的組件資源，這樣用起來才更加的得心應手，所以除了自建以外，我們還有內容共建機制。

它的具體做法是這樣的，第一步是收集，定期收集各業務線在插畫體系中的落地案例；第二步是篩選，篩選符合品牌插畫繪製規則，並且具備示範性和代表性的案例；第三步是收錄，通過篩選的新內容，我們將會收錄插畫系統中，形成新的插畫組件；第四步就是同步，我們會定期更新同步到wiki和雲盤中供大家使用，讓整個插畫庫更加健康的運轉。

當然，規範也有可能遇到不好落地的情況，所以我們也會不斷去修改規範以達到最適用的狀態，這裏我們還有個規則共建的方法。

首先也是收集，但這次我們收集的是各業務線在插畫使用中遇到的難點，然後我們首先評估問題是否成立，然後探究導致落地困難的規範條款哪裡不合理，接下來就是修訂，針對不合理的規則條款進行修訂，最後還是定期更新同步到wiki和雲盤中供大家使用。

關於去整合實現系統高效。未來我們會通過自建的方式產出更多與業務相關的場景，人物動作，包括服飾髮型也可進行替換，並會將這些組件嘗試嵌入sketch里進行自由組合。另外我們也寄希望於內容共建，目前我們正聯合水晶球共同打造UXD高品質素材庫，大家可以去水晶球faceteam主題專欄下去下載體驗。

另外現在我們也有嘗試FaceTeam人物在3D中的使用場景，未來我們也會製作更多更好的素材供大家使用，敬請期待。

歡迎關注「58UXD」的微信公眾號：

未经-摩登3注册-摩登3测速官网-允许不得转载：摩登3注册-摩登3测速官网 » 無極5平台_如何設計並落地一套插畫系統？來看58設計師的實戰案例！