如何為B端產(chǎn)品打造插圖系統(tǒng)？阿里設(shè)計(jì)師是這么做的！

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

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

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

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

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

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

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

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

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

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

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

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

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

具體如何打造？

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

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

頁(yè)面狀態(tài)插圖

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

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

引導(dǎo)反饋插圖

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

△?圖5 引導(dǎo)反饋插圖

品牌運(yùn)營(yíng)插圖

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

△?圖6-1 品牌運(yùn)營(yíng)插圖-登錄頁(yè)

△?圖6-2 品牌運(yùn)營(yíng)插圖-Banner

功能說(shuō)明插圖

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

△?圖7 功能說(shuō)明插圖

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

2. 快速搭建

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

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

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

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

△?圖8 插圖的色彩體系

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

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

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

△?圖9 三層畫面元素

引用開源插圖工具

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

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

△?圖10 海兔插圖工具

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

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

• Vector Creator 免費(fèi)
• Humaaans 免費(fèi)
• unDraw 免費(fèi)
• Ouch png免費(fèi) 矢量付費(fèi)

△ 圖11 Stubborn Generator插圖工具

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

3. 定制搭建

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

品牌符號(hào)

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

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

△?圖12 元素中的品牌符號(hào)

人物形象

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

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

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

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

人偶角度

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

△?圖14 人偶角度

角色細(xì)分

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

△?圖15 角色細(xì)分

資產(chǎn)圖庫(kù)

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

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

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

總結(jié)

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

拓展閱讀：

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

感謝觀看。

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