伴隨著客戶服務領域的迅猛發展，團隊所在業務持續擴張，面對不斷生長的產品體系，一套成熟系統的設計語言變得尤為重要。基于去年在設計語言方面投入的專業研究，「客戶服務體驗」設計語言系列將陸續推出「語言特質」、「插圖系統」、「體驗文案」幾個環節進行課題分享，本文將對「插圖系統」進行詳細探討。

為什么要為B端產品打造插圖系統？

插圖作為產品視覺體驗中的重要組成部分，可以在一定程度上幫助產品提升易讀性、美觀性，并刻畫產品品牌性。然而，對于聚焦功能與效能的B端產品而言，產品插圖往往被視為「低優先級」的設計內容，大多時候要為功能及核心鏈路的資源投入所讓步。因此常常會出現不直觀、不美觀、不協調、不統一、無特點等設計問題，在不知不覺中折損了產品的整體品質與體驗。

△ 圖1 產品插圖的體驗價值

產品插圖系統能夠在一定程度上解決這些問題，它在提升產品視覺體驗與品質的同時也可以為我們帶來設計提效，保障插圖輸出的美觀性、一致性與高效性。

什么是插圖系統？

插圖系統是對產品插圖的整體性概括，其本質是「文檔規范」與「設計資產」的集合，用于提供一定的原則、方法、標準與素材，幫助設計師系統化、高質量的完成設計輸出，同時提升設計效率，將設計師從重復的勞動中解放出來。那么如何為B端產品打造一套靈活高效的插圖系統呢？

△?圖2 插圖系統的構成

在打造插圖系統之前我們要明確一個問題：要打造一個什么樣的插圖系統？

通常打造插圖系統的方式有兩種：一是「快速搭建」，即遵循一定的基礎規范，引用開源的插圖資產，快速為產品構建出一套可運行的插圖體系。這種方式不需要投入過多的探索成本，并且能夠在一定程度上保證設計輸出的效果與效率。另一種方式是「定制搭建」，即通過品牌心智與定位，探索自己獨有的設計風格與結構體系。雖然這種方式需要投入一定的時間和技術成本，但從品質、體驗層面可以讓產品更具優勢。

如何判斷自己的產品適用哪種方式呢？我們可以結合產品的狀態階段進行評估。按照成長軌跡劃分，一個產品通常會經歷「萌芽期」、「成長期」、「穩定期」和「成熟期」幾個階段。用什么樣的方式搭建，搭建到什么程度，取決于產品所處的成長階段。

多數「萌芽期」與「成長期」的產品會處于一個相對快速的產品節奏中。面對緊湊的需求、緊張的資源與尚未成形品牌定位，「快速搭建」的方式能夠幫助設計師更好的完成插圖系統建設。而處于「穩定期」與「成熟期」的產品，功能和定位都已成熟穩定，需要通過品牌與情感差異提升自己的軟性競爭力，因更適合通過「定制搭建」的手段完成插圖系統建設。

△?圖3 成長階段與插圖系統

具體如何打造？

1. 插圖系統框架

在定義規范前，建議先對產品中的插圖類型進行框架梳理，掌握插圖的應用場景與設計規律，保障后續規范的合理性與準確性。典型的產品插圖類型有：

頁面狀態插圖

根據HTTP狀態碼的響應類型進行狀態可視的插圖類型，具有一定說明性、安撫性與裝飾性。典型的狀態類型包括：為空、不存在、報錯、無權限、維護中等等，根據使用場景的不同可以進行強、弱兩檔表現區分。

△?圖4 頁面狀態插圖

引導反饋插圖

用于引導用戶進行操作，或是對用戶操作進行相應反饋的插圖類型，具有一定的說明性、引導性與裝飾性。典型的引導反饋插圖包括：搜索引導、成功反饋、失敗反饋、激勵反饋等。

△?圖5 引導反饋插圖

品牌運營插圖

用于品牌容器中的插圖，畫面構成元素與表現手段相對豐富，具有一定的情感運營與品牌建設的作用。常見的品牌運營插圖包括：登錄頁插圖、歡迎頁插圖、Banner插圖、頭像等等。

△?圖6-1 品牌運營插圖-登錄頁

△?圖6-2 品牌運營插圖-Banner

功能說明插圖

用于功能、原理、規則、機制等復雜抽象場景的可視化表達，畫面元素相對簡潔，結構關系相對扁平，具有一定的說明性、概括性、裝飾性。

△?圖7 功能說明插圖

在掌握產品中的插圖系統框架之后，結合產品階段和專業判斷，我們基本可以明確要打造一個什么類型的插圖系統。下文將針對「快速」與「定制」兩種插圖系統的搭建方式進行具體說明。

2. 快速搭建

即遵循一定的基礎規范，引用開源的插圖資產，快速為產品構建出一套可運行的插圖體系。

遵循基礎設計規范

無論是哪一種類型的插圖，其本質都是以圖形化手段進行信息描述的視覺傳達形式。因此「說明性」與「裝飾性」是其必備的基本屬性，在任何一種情況下都需要優先保證這兩種基本屬性的有效性。以下是針對保障基本屬性有效性的兩點設計建議，供參考：

一套色彩體系：考慮到一致性原則，插圖的色彩體系應建立在產品配色之上。通過對明度、飽和度的梯度拓展，定義出合理的應用范圍，形成一套滿足插圖配色的色彩體系，保證界面整體視覺表現的一致性與美觀性。

△?圖8 插圖的色彩體系

3層構成元素：「前景人物」、「中景道具」、「背景圖形」

「人物」、「道具」、「場景」是進行畫面描述的關鍵元素，完整的視覺線索有助于提升插圖內容的說明性。對畫面元素進行「前景」、「中景」與「背景」的結構分層，不僅可以保證畫面輸出的一致性與規范性，并且可以對元素資產進行有效的分類管理。

在設計具體的插圖時，我們需要根據插圖的內容、類型、價值以及應用場景等因素進行構成元素的組合判斷，合理的安排畫面結構。舉個例子，在繪制弱場景的狀態插圖時，可以酌情省略場景和人物元素，通過簡單的道具表現當下場景的狀態；又如在設計頭像時，更需要突出人物的頭部細節，省略道具和場景元素的結構表現。

△?圖9 三層畫面元素

引用開源插圖工具

隨著專業與技術領域的發展，行業內出現了各類可供開源商用的插圖設計工具，幫助設計師實現對插圖系統的快速搭建。

個人比較推薦的是Ant Design出品的「海兔」工具，「海兔」是國內領軍的插圖產品，無論是內容還是品質，完全具備了靈活通用、美觀系統的專業優勢。可以在很大程度上幫助「萌芽期」與「成長期」的產品解決插圖資產的痛點訴求；同時也可以為「穩定期」與「成熟期」的產品提供有效的參考標準和搭建思路。

△?圖10 海兔插圖工具

當然，國外也有許多類似的插圖工具。Stubborn Generator是其中一款相對成熟的插圖產品，其資產內容與風格十分豐富，可供部分素材的免費下載。除此之外，還有很多其他的插圖設計工具，也可供大家選擇。

（部分網站需要搭梯子訪問）

• Vector Creator 免費
• Humaaans 免費
• unDraw 免費
• Ouch png免費 矢量付費

△ 圖11 Stubborn Generator插圖工具

按照上文所述內容與方法，在基礎設計規范之上，結合產品自身的視覺語言，輸出產品插圖的設計「文檔規范」。鎖定合適的開源工具，根據插圖系統框架輸出產品所需的插圖內容，完成「設計資產」的整理，搭建可供設計師高效引用并持續維護的插圖系統。

3. 定制搭建

「定制搭建」與「快速搭建」最大的不同是需要通過品牌的心智與定位，探索自己獨有的設計風格與資產圖庫。雖然這種方式需要投入一定的時間和技術成本，但從品牌、品質、體驗層面上看可以讓產品更具優勢。

品牌符號

產品插圖作為品牌識別的關鍵所在，可以自然而有效的向用戶傳遞品牌心智與定位。明確的符號線索不僅可以幫助產品根植品牌理念，而且可以提升插圖系統的設計感與整體感。

在結構分層上，建議將品牌符號融入「背景圖形」中，這樣不僅可以增強畫面結構的整體性，同時具有一定的標準性，在規范執行上也更容易落實。

△?圖12 元素中的品牌符號

人物形象

人物形象是插圖中的重要構成元素，是基于品牌心智、市場定位、產品理念等內容塑造出的IP形象。對于人物形象的設計建議遵循自然、簡潔、美觀的設計原則，避免過多的修飾和渲染，能夠體現產品個性、結構靈活、規格統一即可。

人偶結構

為了滿足人物形象在不同場景中的形體表現，我們需要對形象進行人偶結構的拆解，保證肢體骨骼的靈活可配。標準的人偶結構包括：頭、上肢、軀干、下肢四大部分，根據形象的造型與比例特征可以對人偶結構進行適當的細分，如：頭、上臂、下臂、手、軀干、髖胯、大腿、小腿、腳等等。

△?圖13 人偶結構

人偶角度

多角度的人偶素材可以為畫面提供更豐富、自然的視覺表現，插圖常用的人偶角度包括：正面、45°側面、正側面等。在繪制不同角度人物形象的時候主要注意人偶結構規格的一致性，保障肢體骨骼的靈活可配。

△?圖14 人偶角度

角色細分

根據用戶群體的差異，我們可以對人物形象進行角色細分。基于群體特征塑造形象，豐富并規范人物素材，可以幫助畫面增強說明性與生動性。如客服工作臺產品可分為：管理員、客服、買家會員、賣家會員等角色；除此之外也可做出性別維度的區分，如：男性、女性、中性等。同樣，在繪制人物角色的時候主要注意人偶結構規格的一致性，保障肢體骨骼的靈活可配。

△?圖15 角色細分

資產圖庫

結合人偶結構、角度、角色等要素，對骨骼單元進行不同形態、視角、裝飾的素材拓展。繪制典型的人物形態動作及常用道具，按照插圖類型的系統框架輸出產品所需的插圖內容。最后將以上素材按照類型進行資產歸納，匯總為一套完整的圖庫體系，在日常迭代中進行插圖資產的引用與補充維護。

△?圖16 插圖資產圖庫

按照上文所述內容與方法，在基礎設計規范之上，結合產品自身的視覺語言，輸出產品插圖的設計「文檔規范」。梳理產品中的插圖系統框架，結合品牌符號與IP形象輸出產品所需的插圖內容，完成「設計資產」的整理，便可搭建出高效而靈活的插圖系統。

總結

相對于C端產品而言，B端產品的插圖內容與表現手段相對簡單、易管理。只要定義出明確且一致的設計規范，掌握產品插圖的類型特征與構成規律，對資產進行標準、系統的輸出管理，就可以搭建出一套基礎的插圖系統。之后我們再通過日常的需求迭代豐富資產、完善規范，逐漸沉淀為一套成熟、豐富、龐大的插圖系統。

拓展閱讀：

以上內容是筆者基于自身產品設計經歷進行的項目總結與經驗沉淀，方法不限于此，希望可以為大家貢獻一些的思路和靈感。

感謝觀看。

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