伴隨著客戶服務(wù)領(lǐng)域的迅猛發(fā)展，團隊所在業(yè)務(wù)持續(xù)擴張，面對不斷生長的產(chǎn)品體系，一套成熟系統(tǒng)的設(shè)計語言變得尤為重要。基于去年在設(shè)計語言方面投入的專業(yè)研究，「客戶服務(wù)體驗」設(shè)計語言系列將陸續(xù)推出「語言特質(zhì)」、「插圖系統(tǒng)」、「體驗文案」幾個環(huán)節(jié)進行課題分享，本文將對「插圖系統(tǒng)」進行詳細探討。

為什么要為B端產(chǎn)品打造插圖系統(tǒng)？

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

△ 圖1 產(chǎn)品插圖的體驗價值

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

什么是插圖系統(tǒng)？

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

△?圖2 插圖系統(tǒng)的構(gòu)成

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

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

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

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

△?圖3 成長階段與插圖系統(tǒng)

具體如何打造？

1. 插圖系統(tǒng)框架

在定義規(guī)范前，建議先對產(chǎn)品中的插圖類型進行框架梳理，掌握插圖的應(yīng)用場景與設(shè)計規(guī)律，保障后續(xù)規(guī)范的合理性與準確性。典型的產(chǎn)品插圖類型有：

頁面狀態(tài)插圖

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

△?圖4 頁面狀態(tài)插圖

引導反饋插圖

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

△?圖5 引導反饋插圖

品牌運營插圖

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

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

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

功能說明插圖

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

△?圖7 功能說明插圖

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

2. 快速搭建

即遵循一定的基礎(chǔ)規(guī)范，引用開源的插圖資產(chǎn)，快速為產(chǎn)品構(gòu)建出一套可運行的插圖體系。

遵循基礎(chǔ)設(shè)計規(guī)范

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

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

△?圖8 插圖的色彩體系

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

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

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

△?圖9 三層畫面元素

引用開源插圖工具

隨著專業(yè)與技術(shù)領(lǐng)域的發(fā)展，行業(yè)內(nèi)出現(xiàn)了各類可供開源商用的插圖設(shè)計工具，幫助設(shè)計師實現(xiàn)對插圖系統(tǒng)的快速搭建。

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

△?圖10 海兔插圖工具

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

（部分網(wǎng)站需要搭梯子訪問）

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

△ 圖11 Stubborn Generator插圖工具

按照上文所述內(nèi)容與方法，在基礎(chǔ)設(shè)計規(guī)范之上，結(jié)合產(chǎn)品自身的視覺語言，輸出產(chǎn)品插圖的設(shè)計「文檔規(guī)范」。鎖定合適的開源工具，根據(jù)插圖系統(tǒng)框架輸出產(chǎn)品所需的插圖內(nèi)容，完成「設(shè)計資產(chǎn)」的整理，搭建可供設(shè)計師高效引用并持續(xù)維護的插圖系統(tǒng)。

3. 定制搭建

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

品牌符號

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

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

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

人物形象

人物形象是插圖中的重要構(gòu)成元素，是基于品牌心智、市場定位、產(chǎn)品理念等內(nèi)容塑造出的IP形象。對于人物形象的設(shè)計建議遵循自然、簡潔、美觀的設(shè)計原則，避免過多的修飾和渲染，能夠體現(xiàn)產(chǎn)品個性、結(jié)構(gòu)靈活、規(guī)格統(tǒng)一即可。

人偶結(jié)構(gòu)

為了滿足人物形象在不同場景中的形體表現(xiàn)，我們需要對形象進行人偶結(jié)構(gòu)的拆解，保證肢體骨骼的靈活可配。標準的人偶結(jié)構(gòu)包括：頭、上肢、軀干、下肢四大部分，根據(jù)形象的造型與比例特征可以對人偶結(jié)構(gòu)進行適當?shù)募毞郑纾侯^、上臂、下臂、手、軀干、髖胯、大腿、小腿、腳等等。

△?圖13 人偶結(jié)構(gòu)

人偶角度

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

△?圖14 人偶角度

角色細分

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

△?圖15 角色細分

資產(chǎn)圖庫

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

△?圖16 插圖資產(chǎn)圖庫

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

總結(jié)

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

拓展閱讀：

以上內(nèi)容是筆者基于自身產(chǎn)品設(shè)計經(jīng)歷進行的項目總結(jié)與經(jīng)驗沉淀，方法不限于此，希望可以為大家貢獻一些的思路和靈感。

感謝觀看。

歡迎關(guān)注「AlibabaDesign」的微信公眾號：