編輯導(dǎo)語(yǔ)：在B端設(shè)計(jì)中，往往離不開圖標(biāo)的設(shè)計(jì)。那么，設(shè)計(jì)圖標(biāo)都有哪些內(nèi)容呢？關(guān)于B端圖標(biāo)設(shè)計(jì)的設(shè)計(jì)難點(diǎn)是什么？B端圖標(biāo)的搭建規(guī)范又是什么？帶著這些疑問我們一起來(lái)看本篇文章，希望作者能夠?yàn)槟憬獯疬@些疑惑。

目前我主要深耕于B端設(shè)計(jì)中，深知B端圖標(biāo)設(shè)計(jì)與C端有很大的不同，無(wú)論是應(yīng)用的場(chǎng)景、設(shè)計(jì)的理念，都有非常大的差異。

而現(xiàn)在網(wǎng)上有不少關(guān)于C端圖標(biāo)如何圖標(biāo)繪制的文章，對(duì)于B端的方向少之又少，因此我們今天就來(lái)聊聊圖標(biāo)，聊聊B端圖標(biāo)究竟應(yīng)該如何設(shè)計(jì)？

在我們的設(shè)計(jì)元素中由 色彩 color、文字 font、圖標(biāo) icon、圖形 shape、空間 space 這五個(gè)部分組成，而圖標(biāo)的影響是整個(gè)產(chǎn)品的形象與氣質(zhì)，起著畫龍點(diǎn)睛的作用。

在圖標(biāo)的設(shè)計(jì)中，它既需要具備嚴(yán)謹(jǐn)?shù)脑O(shè)計(jì)態(tài)度，同時(shí)還要兼顧設(shè)計(jì)效率。

前者是提升產(chǎn)品的視覺表現(xiàn)，后者是節(jié)約企業(yè)開發(fā)成本，無(wú)論是我之前一篇文章講到按鈕，又或者是每個(gè)B端產(chǎn)品中的導(dǎo)航，都涉及到了圖標(biāo)。今天我就和大家來(lái)聊聊如何嚴(yán)謹(jǐn)高效的設(shè)計(jì)B端圖標(biāo)。

在設(shè)計(jì)系統(tǒng)中，基礎(chǔ)組件與業(yè)務(wù)組件遍布系統(tǒng)的各個(gè)角落。

因?yàn)榇蠖鄶?shù)B端設(shè)計(jì)系統(tǒng)都是采取這樣的核心思想去構(gòu)建，這樣更能夠滿足B端系統(tǒng)的實(shí)際工作需求，同時(shí)又能讓設(shè)計(jì)系統(tǒng)真正落地，符合B端產(chǎn)品“復(fù)用”的設(shè)計(jì)理念，使每條產(chǎn)品線都能夠高效的搭建。之后我會(huì)單獨(dú)出一期設(shè)計(jì)系統(tǒng)的文章，咱們之后單獨(dú)細(xì)講。

聊聊它們兩的定義：

• 基礎(chǔ)組件：每一個(gè)產(chǎn)品中都可以進(jìn)行復(fù)用，是搭建整個(gè)系統(tǒng)的基礎(chǔ)；
• 業(yè)務(wù)組件：需要滿足特定產(chǎn)品的需求，同時(shí)在功能上，不會(huì)進(jìn)行多場(chǎng)景復(fù)用，作為單獨(dú)的模塊進(jìn)行分類。

這種思維方式在我們團(tuán)隊(duì)中，被稱為基礎(chǔ)業(yè)務(wù)拆分法，運(yùn)用到我們的每一個(gè)產(chǎn)品線中。

還沒理解到？我舉一個(gè)例子，在Teambition Clarity Design，就按照相同的思路構(gòu)建的設(shè)計(jì)系統(tǒng)。

在Teambition Clarity Design設(shè)計(jì)系統(tǒng)當(dāng)中，所有組件都分為：基礎(chǔ)組件、業(yè)務(wù)組件，我猜測(cè)正是通過(guò)這樣的劃分，才使得Teambition的設(shè)計(jì)系統(tǒng)能夠適用于更多的業(yè)務(wù)場(chǎng)景，滿足飛流、行云、thoughts、甘特圖、協(xié)作全景等多條產(chǎn)品線的設(shè)計(jì)需求。

回到圖標(biāo)當(dāng)中，我們可以使用相同的思維方式，對(duì)圖標(biāo)進(jìn)行相應(yīng)的拆解分析。

• 基礎(chǔ)圖標(biāo)：屬于整個(gè)B端圖標(biāo)當(dāng)中的基石，主要是頁(yè)面中最為基礎(chǔ)的圖標(biāo)組成。

比如：設(shè)置、編輯、搜索、時(shí)間日期等都屬于基礎(chǔ)圖標(biāo)，每個(gè)系統(tǒng)都必須有的基礎(chǔ)圖標(biāo)，所以在繪制圖標(biāo)庫(kù)的過(guò)程中，基礎(chǔ)圖標(biāo)可以確定整個(gè)圖標(biāo)的性格[1]。

[1] 圖標(biāo)性格：為圖標(biāo)整體給人的視覺感受（在本文第二章會(huì)著重講到）

• 業(yè)務(wù)圖標(biāo)：屬于B端圖標(biāo)設(shè)計(jì)中的業(yè)務(wù)分支，和我們每個(gè)產(chǎn)品的業(yè)務(wù)模塊都保持一致，通常是每個(gè)系統(tǒng)都會(huì)有一套獨(dú)有的業(yè)務(wù)系統(tǒng)圖標(biāo)。

比如：公海池、線索池、歸屬人管理、商機(jī)管理、客戶管理等，都屬于業(yè)務(wù)圖標(biāo)。業(yè)務(wù)圖標(biāo)主要是要求設(shè)計(jì)師能夠進(jìn)行快速拓展。

當(dāng)然基礎(chǔ)圖標(biāo)與業(yè)務(wù)圖標(biāo)之間也并不是一塵不變的，很多業(yè)務(wù)圖標(biāo)在產(chǎn)品中頻繁的使用會(huì)被提升到基礎(chǔ)圖標(biāo)當(dāng)中，同理使用減少也會(huì)進(jìn)行相應(yīng)的剝離。

一、B端的圖標(biāo)與C端平臺(tái)圖標(biāo)的差異

1. 圖標(biāo)內(nèi)容不同

1）B端圖標(biāo)求同

B端產(chǎn)品要與同類型的圖標(biāo)盡量保持表意一致，在圖標(biāo)表達(dá)形式上差距不要太大，相似性要高。

因?yàn)锽端產(chǎn)品的本質(zhì)是滿足客戶對(duì)于工作、效率的需求，因而在B端圖標(biāo)中，需要與行業(yè)中的設(shè)計(jì)語(yǔ)言和思路保持高度的一致，做到圖標(biāo)之間 “形似”，這樣用戶在多個(gè)B端軟件進(jìn)行切換過(guò)程中，會(huì)減小用戶的切換成本。

2）C端圖標(biāo)存異

C端產(chǎn)品是要在同樣的文字上進(jìn)行形式上的求變，與別的產(chǎn)品形成個(gè)性差異。因?yàn)樵谀壳暗腃端市場(chǎng)中，圖標(biāo)的同質(zhì)化異常嚴(yán)重。

想要圖標(biāo)獨(dú)具一格，就必須突出自己的設(shè)計(jì)理念，讓用戶快速記住你這個(gè)品牌。因此需要考慮的是怎么樣在同樣的內(nèi)容情況下，設(shè)計(jì)出更獨(dú)特的圖標(biāo)風(fēng)格。

比如在下面的例子中，就是因?yàn)镃端追求風(fēng)格的原因，追趕者都會(huì)緊貼行業(yè)頭部的設(shè)計(jì)風(fēng)格，在設(shè)計(jì)風(fēng)格上做到 “神似”，但是在每一個(gè)圖標(biāo)的內(nèi)容上，他們都會(huì)存在巨大差異。

2. 設(shè)計(jì)難點(diǎn)不同

1）B端變化多

B端圖標(biāo)的設(shè)計(jì)難點(diǎn)在于業(yè)務(wù)名稱復(fù)雜且多變，在B端圖標(biāo)的設(shè)計(jì)場(chǎng)景中，會(huì)與各種業(yè)務(wù)名稱進(jìn)行關(guān)聯(lián)，因而需要去思考每個(gè)業(yè)務(wù)所表達(dá)的特殊含義，遇到各種生僻字與英文縮寫時(shí)，圖標(biāo)往往是需要去多維度的探究與思考。

比如：在B端云產(chǎn)品當(dāng)中，MySQL、MongoDB、SQL Server 是常見的云產(chǎn)品，如果你是第一次接觸，需要去深入理解業(yè)務(wù)才能夠準(zhǔn)確去表達(dá)圖標(biāo)的含義，去理解每一個(gè)圖標(biāo)在行業(yè)當(dāng)中設(shè)計(jì)的形式并加以設(shè)計(jì)。

2）C端趣味強(qiáng)

C端圖標(biāo)更多偏向與趣味性的表達(dá)，比如大多數(shù)的圖標(biāo)會(huì)采用去做圖標(biāo)視覺上的優(yōu)化，而不會(huì)去考慮業(yè)務(wù)層面的東西，也因此兩者的難點(diǎn)也存在不同的差異。

3）設(shè)計(jì)側(cè)重點(diǎn)不同

• B端講究擴(kuò)展性

由于B端產(chǎn)品使用圖標(biāo)場(chǎng)景較少，但在圖標(biāo)的數(shù)量上會(huì)比C端圖標(biāo)多上好幾倍，同時(shí)你還需要使用圖標(biāo)去表達(dá)不同業(yè)務(wù)間的關(guān)系，因此B端圖標(biāo)更講究 擴(kuò)展性。

比如同樣是流程申請(qǐng)，在快遞信息流程申請(qǐng)、采購(gòu)備料流程申請(qǐng)、采購(gòu)流程申請(qǐng)的圖標(biāo)之間，需要存在一些相同點(diǎn)與不同點(diǎn)，這就需要你多去思考，在同時(shí)來(lái)了多個(gè)圖標(biāo)設(shè)計(jì)需求時(shí)，如果通過(guò)分區(qū)實(shí)現(xiàn)圖標(biāo)的快速設(shè)計(jì)。

• C端講究整體性

C端圖標(biāo)雖然圖標(biāo)數(shù)量較少，但是使用圖標(biāo)的場(chǎng)景卻又十分復(fù)雜。

比如品類區(qū)、我的頁(yè)面中、各種功能圖標(biāo)以及二級(jí)頁(yè)面圖標(biāo)，因此需要通過(guò)整體性的考慮，將多場(chǎng)景的圖標(biāo)進(jìn)行串聯(lián)，形成一整套視覺圖標(biāo)體系。

4）設(shè)計(jì)風(fēng)格不同

• B端更直接

B端產(chǎn)品因?yàn)橛脩舻钠聊伙@示參差不齊，會(huì)直接影響設(shè)計(jì)師對(duì)于顏色的直接判斷，較細(xì)的圖標(biāo)會(huì)直接影響用戶的閱讀體驗(yàn)，因此圖標(biāo)形式建議多采取面性圖標(biāo)或者2px的線條圖標(biāo)，能夠增加圖形的識(shí)別度。

圖標(biāo)的對(duì)比度需要滿足W3C的AA、AAA原則，用戶才能更好的識(shí)別。

• C端更多元

C端產(chǎn)品因?yàn)槭謾C(jī)屏幕分辨率的不斷進(jìn)步，已經(jīng)進(jìn)入高分辨率時(shí)代，手機(jī)屏幕色彩也更加地準(zhǔn)確，因此圖標(biāo)的視覺風(fēng)格會(huì)更加多元，更能讓視覺設(shè)計(jì)師得到一個(gè)很好的發(fā)揮。

二、B端圖標(biāo)規(guī)范

在B端圖標(biāo)設(shè)計(jì)中，我們一直在追求系統(tǒng)、高效、高質(zhì)量地輸出。

一方面對(duì)于B端產(chǎn)品而言，往往優(yōu)先聚焦于主要流程的核心體驗(yàn)， 圖標(biāo)往往是低優(yōu)先級(jí)的需求；另一方面，出現(xiàn)不統(tǒng)一、不美觀的圖標(biāo)，無(wú)一例外都是在損耗著用戶對(duì)于產(chǎn)品的體驗(yàn)與感受。

比如最近設(shè)計(jì)圈的 “有贊審美缺失部”事件，也從正面反應(yīng)了B端設(shè)計(jì)師對(duì)于圖標(biāo)的認(rèn)識(shí)不夠清晰，但透過(guò)現(xiàn)象看本質(zhì)，是有贊部門對(duì)于圖標(biāo)規(guī)范的缺失。因此，B端的圖標(biāo)規(guī)范就顯得尤為重要。

我們?cè)購(gòu)膱D標(biāo)出發(fā)，從宏觀上講，圖標(biāo)是一門全球通用的“符號(hào)語(yǔ)言”，而在每一種語(yǔ)言當(dāng)中，必定會(huì)有它的“語(yǔ)法”以及“單詞”，圖標(biāo)中的“語(yǔ)法”與“單詞”一般包含有那些呢？

1. 圖標(biāo)中的“語(yǔ)法”

它就是我們常見的圖標(biāo)規(guī)范文檔。一般需要包含：設(shè)計(jì)原則、輪廓模版、操作熱區(qū)、命名規(guī)則。

1）設(shè)計(jì)原則

在設(shè)計(jì)原則中，一般是貫穿整個(gè)產(chǎn)品的始終，因此需要設(shè)計(jì)師深入提煉，設(shè)計(jì)原則能夠幫助我們確定產(chǎn)品方向，通過(guò)設(shè)計(jì)原則的落地，有利于我們高效做出決策。

在圖標(biāo)的設(shè)計(jì)原則中，主要通過(guò)設(shè)計(jì)的核心理念進(jìn)行傳達(dá)，例如在Antdesign中，確定了圖標(biāo)設(shè)計(jì)的四條原則。

• 準(zhǔn)確：設(shè)計(jì)造型準(zhǔn)確的圖標(biāo)（保持偶數(shù)原則，去小數(shù)點(diǎn)）；選擇表意準(zhǔn)確的圖標(biāo)，不對(duì)用戶的認(rèn)知造成困擾；
• 簡(jiǎn)單：在表意清晰準(zhǔn)確的基礎(chǔ)上，盡量保持圖形的簡(jiǎn)潔，不做多余的修飾；
• 節(jié)奏：挖掘構(gòu)圖中的秩序之美；
• 愉悅：賦予適度的情感。

2）輪廓模版

輪廓模版是為了明確圖標(biāo)視覺尺寸。我們通過(guò) Keyline作為形狀的基礎(chǔ)，去規(guī)范我們圖標(biāo)的核心形狀，這樣能夠幫助我們?cè)O(shè)計(jì)出大小統(tǒng)一的圖標(biāo)，在多條產(chǎn)品線之間也能保證統(tǒng)一的視覺重量。

3）操作熱區(qū)

這是經(jīng)常被B端設(shè)計(jì)師忽略的的細(xì)節(jié)：

一方面操作熱區(qū)最開始興起于移動(dòng)端，不知道大家還記得一句很經(jīng)典的話嗎？“iOS的最小操作熱區(qū)為44px，安卓則為48px”；另一方面到了桌面端后，因?yàn)槠聊环直媛实牟煌?，沒有規(guī)定最小操作熱區(qū)。

但受到文字落地方式[2]的限制，12px漸漸成為大家公認(rèn)圖標(biāo)操作熱區(qū)的最小值。

[2]落地方式：因?yàn)樵贑hrome瀏覽器中，文字受到瀏覽器大小的限制，最小的字體為12px，而在12px中的文字，與12px的圖標(biāo)搭配最為合適，圖標(biāo)都會(huì)與文字進(jìn)行搭配使用，所以12px為PC端圖標(biāo)最小尺寸。

4）命名規(guī)則

命名規(guī)則是屬于一項(xiàng)最為基礎(chǔ)的技能，一般有經(jīng)驗(yàn)的設(shè)計(jì)師都會(huì)有他自己的一套命名規(guī)則，而在圖標(biāo)規(guī)范中，需要明確多項(xiàng)目之間有哪些不同。

比如每個(gè)產(chǎn)品項(xiàng)目有自己?jiǎn)为?dú)的后綴，在公共的基礎(chǔ)圖標(biāo)部分又使用相同的命名規(guī)則，這樣既能夠讓圖標(biāo)應(yīng)用到各個(gè)產(chǎn)品，同時(shí)每個(gè)圖標(biāo)之間也能追尋到最終的源頭。

比如常見的命名規(guī)則：組件_類別_功能_狀態(tài)，但是在B端產(chǎn)品中通常為：組件_類別_狀態(tài)，這里將大量的組件、類別、狀態(tài)的英文命名都集合到一起，建議收藏。

2. 圖標(biāo)中的“單詞”

它是我們常見的圖標(biāo)資源。一般由：圖標(biāo)性格、圖標(biāo)場(chǎng)景兩部分組成。

1）圖標(biāo)性格

在圖標(biāo)的設(shè)計(jì)中，圖標(biāo)性格尤為重要。我們要根據(jù)自身產(chǎn)品特性，選擇與特性相匹配的圖標(biāo)性格。

我將圖標(biāo)的所有性格羅列出一個(gè)坐標(biāo)軸，通過(guò)圖標(biāo)的粗細(xì)以及圖標(biāo)圓滑程度的不同，將圖標(biāo)分為四種不同的風(fēng)格：粗曠、可愛、精致、商務(wù)。

在B端圖標(biāo)設(shè)計(jì)中，粗曠與商務(wù)是更適合的圖標(biāo)性格。在圖標(biāo)性格的選擇中，我們要與產(chǎn)品的設(shè)計(jì)理念相融合。通過(guò)對(duì)圖標(biāo)性格的確立，我們也能更好的縮小范圍減少設(shè)計(jì)資源浪費(fèi)。

ps：當(dāng)然你應(yīng)該根據(jù)自身產(chǎn)品的視覺表現(xiàn)進(jìn)行相應(yīng)優(yōu)化，拒絕生搬硬套。

2）場(chǎng)景不同含義不同

圖標(biāo)是一門全球通用的“符號(hào)語(yǔ)言”，所以也具有多語(yǔ)意的特性，一些語(yǔ)言在不同的場(chǎng)景有著截然不同的意思。圖標(biāo)也一樣，我們需要根據(jù)不同的場(chǎng)景去表達(dá)不同圖標(biāo)的含義，因此就需要對(duì)B端圖標(biāo)的場(chǎng)景進(jìn)行一個(gè)系統(tǒng)梳理。

先來(lái)看一個(gè)例子：

在這個(gè)例子中，相同的五角星在不同的場(chǎng)景對(duì)應(yīng)著不同的意思，比如在淘寶詳情頁(yè)中星星代表著收藏；在美團(tuán)點(diǎn)評(píng)中代表著每一個(gè)評(píng)價(jià)的評(píng)分，這樣場(chǎng)景的不同含義也不同也，因此我們需要去梳理B端圖標(biāo)的場(chǎng)景：

• 基礎(chǔ)組件場(chǎng)景 – 象形圖標(biāo)

在文章開始“咱們老規(guī)矩”中講到：基礎(chǔ)組件與業(yè)務(wù)組件之間的差距，這里就不再贅述兩者區(qū)別。

B端產(chǎn)品中，基礎(chǔ)組件需要涉及很多圖標(biāo)，比如：日期組件中，需要有日期圖標(biāo)作為組件的屬性展示；下拉菜單中，需要有一個(gè)下拉箭頭來(lái)代表。而這些基礎(chǔ)組件中都使用基礎(chǔ)圖標(biāo)，又因?yàn)檫@些圖標(biāo)都采取象形的手法簡(jiǎn)化而來(lái)，因此基礎(chǔ)圖標(biāo)大多數(shù)為象形圖標(biāo)。

象形圖標(biāo)：象形圖標(biāo)是根據(jù)實(shí)際生活中物體的提煉所得，比如我們說(shuō)的編輯，是通過(guò)鉛筆象形而來(lái)，經(jīng)過(guò)大家對(duì)于鉛筆編輯的不斷理解，久而久之形成；篩選是通過(guò)漏斗象形而來(lái)；在象形圖標(biāo)的設(shè)計(jì)中，需貼合真實(shí)使用場(chǎng)景。

• 運(yùn)營(yíng)模塊場(chǎng)景 – 表意圖標(biāo)

通常出現(xiàn)在各種插件市場(chǎng)以及運(yùn)營(yíng)商城的頁(yè)面中。也是B端產(chǎn)品盈利的一個(gè)關(guān)鍵所在，在行業(yè)內(nèi)常說(shuō)的一句話：“Saas產(chǎn)品基本不掙錢，就是交個(gè)朋友，掙錢全靠后期運(yùn)營(yíng)與維護(hù)”。

因此，在運(yùn)營(yíng)模塊使用的圖標(biāo)也格外被重視，比如我舉幾個(gè)例子，他們?cè)谶\(yùn)營(yíng)模塊中，都采取了“表意圖標(biāo)”進(jìn)行展示。

表意圖標(biāo)：

表意圖標(biāo)是生活中原本不存在的物體，通過(guò)不斷發(fā)展，大家將某類東西約定俗成創(chuàng)造出的一個(gè)圖標(biāo)，通常表示某類事物或某類行為比如：砍價(jià)、社群等等。

要提醒大家的一點(diǎn)，這類圖標(biāo)基本都是約定俗成，所以在設(shè)計(jì)上不要有過(guò)多變動(dòng)，以免讓用戶感到疑惑。

• 專業(yè)性場(chǎng)景 – 文字圖標(biāo)

在B端圖標(biāo)場(chǎng)景中，還存在一類特別專業(yè)性的圖標(biāo)，這類圖標(biāo)在行業(yè)中往往沒有約定俗成的表達(dá)形式，而在設(shè)計(jì)表達(dá)上，也無(wú)法去使用簡(jiǎn)單的圖形，因此使用圖標(biāo)存在很大認(rèn)知成本。比如：拼團(tuán)、清倉(cāng)。

這時(shí)最好的解決辦法就是將相應(yīng)的專業(yè)詞匯文字化，使用“文字圖標(biāo)“將關(guān)鍵詞表示出來(lái)。

文字圖標(biāo)是使用文字化的圖標(biāo)直接表達(dá)含義，在一些垂直專業(yè)領(lǐng)域，常用文字的縮寫形式進(jìn)行表達(dá)。比如美團(tuán)外賣中的“打折”作為大眾都需要使用的一個(gè)圖標(biāo)，很難去使用圖形符號(hào)去描述。

因此使用“折”就能夠準(zhǔn)確直接的表達(dá)，文字圖標(biāo)雖然使用起來(lái)過(guò)于簡(jiǎn)單粗暴，但是它的信息傳達(dá)比其他形式要高，因此在B端環(huán)境復(fù)雜的圖標(biāo)生態(tài)中，是常用的方式。

而在現(xiàn)在很火的下沉市場(chǎng)中，也多采取文字圖標(biāo)的形式，這樣不會(huì)因?yàn)橛脩舻恼J(rèn)知水平的高低產(chǎn)生立即上的偏差。

• 導(dǎo)航菜單場(chǎng)景 – 組合圖標(biāo)

組合圖標(biāo)在B端場(chǎng)景中經(jīng)常存在，因業(yè)務(wù)復(fù)雜，常常需要將圖標(biāo)進(jìn)行公用，同時(shí)進(jìn)行相應(yīng)的思考，關(guān)于組合圖標(biāo)與場(chǎng)景我會(huì)在第三章講到，這里就不細(xì)細(xì)展開。

三、B端圖標(biāo)如何搭建規(guī)范

1. 根據(jù)公司不同階段進(jìn)行搭建

在團(tuán)隊(duì)中建立一整套圖標(biāo)規(guī)范通常會(huì)有兩種模式：開源與自主搭建，我會(huì)從效率、品牌、完整度三個(gè)方面來(lái)進(jìn)行分析與評(píng)價(jià)：

開源圖標(biāo)：站在巨人的肩膀上，能夠?yàn)樽陨懋a(chǎn)品建立一套快速的圖標(biāo)規(guī)范。

通過(guò)圖標(biāo)庫(kù)的引用，減少公司的設(shè)計(jì)成本，能夠有較高的設(shè)計(jì)質(zhì)量與效率，但使用開源圖標(biāo)主要針對(duì)的是公共業(yè)務(wù)，對(duì)于一些特定業(yè)務(wù)而言，會(huì)有相應(yīng)的局限性，我會(huì)在第四章與大家獨(dú)家分享一些開源高質(zhì)量的B端圖標(biāo)庫(kù)。

• 效率：★★★★★
• 品牌：★★★☆☆
• 完整度：★★★☆☆

自主搭建：自主搭建會(huì)擁有自己獨(dú)特的視覺風(fēng)格與表達(dá)形式，但需要耗費(fèi)一定的設(shè)計(jì)成本，自主搭建是一個(gè)循序漸進(jìn)、反復(fù)打磨的過(guò)程，也常會(huì)推翻重來(lái)，因此需要大量的時(shí)間人力成本。

對(duì)于公司而言獨(dú)特的符號(hào)語(yǔ)言更有利于產(chǎn)品的對(duì)外營(yíng)銷。但自助搭建更考驗(yàn)設(shè)計(jì)師的能力，如果能力欠佳，會(huì)得不償失。

• 效率：★★★☆☆
• 品牌：★★★★★
• 完整度：★★★★★

明白了兩種搭建方式后，在我們搭建B端圖標(biāo)規(guī)范之前，需要明確自身的產(chǎn)品的“定位”，根據(jù)產(chǎn)品的不同階段，我們會(huì)采取不同方式進(jìn)行規(guī)范的搭建。

在我了解的產(chǎn)品階段中，一般分為三種：初創(chuàng)期、成長(zhǎng)期、成熟期

• 初創(chuàng)期的產(chǎn)品：因?yàn)樘幱谠囂诫A段，產(chǎn)品需要經(jīng)常迭代，所以處于一個(gè)變化的節(jié)奏中。為了應(yīng)對(duì)這種變化，引用開源圖標(biāo)庫(kù)便成為一種較好的解決方式；
• 成長(zhǎng)期的產(chǎn)品：成長(zhǎng)期的產(chǎn)品會(huì)從混亂到逐漸的穩(wěn)定。設(shè)計(jì)師也會(huì)逐漸意識(shí)到產(chǎn)品的整體形態(tài)以及后續(xù)的規(guī)劃方向。這時(shí)候就需要整體考慮，去優(yōu)化掉初創(chuàng)期所遺留下的問題，同時(shí)提升產(chǎn)品的設(shè)計(jì)競(jìng)爭(zhēng)力；
• 成熟期的產(chǎn)品：成熟期的產(chǎn)品需要構(gòu)建一套自己的方法論。并且要脫離圖標(biāo)這個(gè)單一維度。去多維度多層次的思考，通過(guò)自主搭建，形成多條產(chǎn)品線的統(tǒng)一，建立完整成熟的設(shè)計(jì)系統(tǒng)來(lái)滿足業(yè)務(wù)發(fā)展的需要。

2. 圖標(biāo)資源如何設(shè)計(jì)

在圖標(biāo)資源設(shè)計(jì)當(dāng)中，我把圖標(biāo)分為基礎(chǔ)圖標(biāo)與業(yè)務(wù)圖標(biāo)的分類進(jìn)行講解，讓大家能夠更好理解。

1）基礎(chǔ)圖標(biāo)

在我們的基礎(chǔ)圖標(biāo)中，保證圖標(biāo)性格一致的前提下，又牽涉到直角拐角以及圖標(biāo)粗細(xì)等設(shè)計(jì)細(xì)節(jié)，因此在這里和大家細(xì)講這方面的內(nèi)容。

形大角大、形小角小。

在基礎(chǔ)圖形設(shè)計(jì)中，圓角是一個(gè)經(jīng)常被忽略的細(xì)節(jié)，我們要根據(jù)圖形的面積大小去設(shè)計(jì)我們圓角的大小，而不是拿到圖標(biāo)就是2x的圓角，這時(shí)候就需要講到圖形與圓角之間的關(guān)系。

當(dāng)基礎(chǔ)圖形占的面積過(guò)大同時(shí)為正方形時(shí)，建議使用3x的圓角；當(dāng)基礎(chǔ)圖形變小時(shí)，比如滿高(寬)矩形時(shí)，建議使用2x的圓角。當(dāng)基礎(chǔ)圖形為較小(小于1/2寬高)矩形時(shí)，建議使用1x的圓角。

* 這里的3x是指與描邊的大小比例

透視正確

在圖標(biāo)的透視中，優(yōu)先選用正視的圖標(biāo)進(jìn)行繪制，這樣能夠保證圖標(biāo)庫(kù)的風(fēng)格一致但對(duì)于有些圖標(biāo)不能通過(guò)正視角度進(jìn)行表達(dá)時(shí)，使用立體圖標(biāo)表示，一樣符合透視一致性的原理，但需要極力避免。

2）業(yè)務(wù)圖標(biāo)

業(yè)務(wù)圖標(biāo)因其特殊性，一般都為組合圖標(biāo)，通常組合形式為A+B+C的模式，如果采取單個(gè)圖標(biāo)繪制，難以保證圖標(biāo)的一致性，同時(shí)產(chǎn)出效率極低，因此業(yè)務(wù)圖標(biāo)會(huì)采取模塊化的方式進(jìn)行設(shè)計(jì)。

業(yè)務(wù)圖標(biāo)在B端產(chǎn)品的菜單導(dǎo)航最為常見：比如在我接手到的CRM產(chǎn)品中，一共有50多個(gè)業(yè)務(wù)圖標(biāo)，你是單一思考還是全局思考，就顯得尤為重要。

我將圖標(biāo)模塊化的方法分為以下幾步：

第一步：拆解整理

當(dāng)我們拿到需求時(shí)，因?yàn)閳D標(biāo)數(shù)量龐大，所以需要尋找到圖標(biāo)中的共性與個(gè)性。

舉個(gè)例子：銷售簡(jiǎn)報(bào)管理、銷售訂單管理、銷售權(quán)限管理、銷售公海池管理、業(yè)務(wù)銷售插件、商機(jī)銷售階段，他們基本都是頭部以銷售開頭，最后都會(huì)跟一個(gè)管理進(jìn)行動(dòng)作的描述。而中部的描述不同，也會(huì)在產(chǎn)品中的其他部分找到與之對(duì)應(yīng)的文案。

因此我們就發(fā)現(xiàn)了圖標(biāo)當(dāng)中的一個(gè)共性，而在一個(gè)龐大的B端圖標(biāo)庫(kù)中，有這樣的共性的地方還有很多，我們通過(guò)一點(diǎn)點(diǎn)的拆解整理，整理出一個(gè)圖標(biāo)間共性表格，完成拆解整理的工作。

第二步：模塊分區(qū)

通過(guò)模塊分區(qū)，了解到圖標(biāo)的結(jié)構(gòu)，模塊分區(qū)的思路來(lái)源于Ant Design 圖標(biāo)規(guī)范2.2 中講到的圖標(biāo)韻律。

在一次偶然的機(jī)會(huì)，看到Ant Design對(duì)于相同類型的圖標(biāo)給出想類似的展現(xiàn)形式，因此想到我們圖標(biāo)對(duì)于自身應(yīng)該采取模塊的方式進(jìn)行分區(qū)。

通過(guò)一周的時(shí)間總結(jié)，對(duì)于市面上大多數(shù)B端圖標(biāo)進(jìn)行的拆解，我將整個(gè)模塊分為三個(gè)區(qū)域：一個(gè)主分區(qū)與兩個(gè)次分區(qū)。

通過(guò)主次分區(qū)間的不同組合，能夠滿足絕大多數(shù)B端圖標(biāo)的使用場(chǎng)景。

• 主圖標(biāo)：主要表達(dá)圖標(biāo)的主要功能，會(huì)根據(jù)業(yè)務(wù)不同產(chǎn)生不同的主圖標(biāo)；
• 次圖標(biāo)：代表與主圖標(biāo)相對(duì)應(yīng)的功能，比如常見的：管理、權(quán)限、規(guī)則。

這樣通過(guò)主、次圖標(biāo)的組合，就能夠?qū)⒔M合圖標(biāo)進(jìn)行高效的繪制。

第三步：分區(qū)繪制

使用分區(qū)繪制，落地分區(qū)的圖標(biāo)形式。

在一個(gè)圖標(biāo)中，如果讓你單一繪制例如銷售、審批、數(shù)據(jù)等圖標(biāo)時(shí)，難度比雜糅到一起的組合圖標(biāo)要低，因此分區(qū)繪制會(huì)時(shí)圖標(biāo)的難度降低，可以讓團(tuán)隊(duì)中其他水平較低的設(shè)計(jì)師一同參與。

在繪制中，我們以24px大小的圖標(biāo)為例：

• 主圖標(biāo)的大小為：16px
• 次圖標(biāo)的大小為：8px

按照相對(duì)應(yīng)的大小尺寸，主圖標(biāo)在圖形上要設(shè)計(jì)得更明確，因?yàn)橥獠窟€要與次圖標(biāo)進(jìn)行疊加，同時(shí)需要在多個(gè)圖標(biāo)中出現(xiàn)同樣的圖形，也因此在造型上不能過(guò)于復(fù)雜。

次圖標(biāo)以簡(jiǎn)潔為主，因?yàn)檩^小的面積，更多狀態(tài)的展示，需要它能夠簡(jiǎn)潔易識(shí)別，這樣才使圖標(biāo)在疊加的過(guò)程中，使兩者圖標(biāo)更具代表性。

第四步：細(xì)節(jié)調(diào)整

因?yàn)槭嵌鄠€(gè)圖標(biāo)進(jìn)行重疊形成，所以也會(huì)存在許多圖標(biāo)連接間細(xì)節(jié)毫無(wú)規(guī)律的情況，因此保留相應(yīng)的細(xì)節(jié)，比如圖標(biāo)間的間距、圖標(biāo)未來(lái)的擴(kuò)展性等。

四、市面上的圖標(biāo)規(guī)范、圖標(biāo)庫(kù)與圖標(biāo)

1. 圖標(biāo)規(guī)范

1）Lightning

https://www.lightningdesignsystem.com/guidelines/iconography/

salesforce是一個(gè)值得仰望的B端產(chǎn)品，而伴隨著salesforce的不斷發(fā)展，Lightning設(shè)計(jì)系統(tǒng)也不停地在迭代，Lightning中的圖標(biāo)規(guī)范不僅全面，而且落地，同時(shí)它也擁有500+個(gè)圖標(biāo)資源。

關(guān)于圖標(biāo)規(guī)范，Lightning系統(tǒng)一直做到十分落地，因?yàn)镾alesforce已經(jīng)成型多年，設(shè)計(jì)規(guī)范一直十分穩(wěn)定，關(guān)于它規(guī)范當(dāng)中的每一個(gè)細(xì)節(jié)，都值得細(xì)細(xì)品味，感興趣還可以去多研究設(shè)計(jì)系統(tǒng)的迭代更新記錄，里面有寶藏～

2）ATLASSIAN

https://atlassian.design/foundations/iconography/

ATLASSIAN在我心中一直是B端行業(yè)的頭部產(chǎn)品，無(wú)論是產(chǎn)品還是設(shè)計(jì)，它旗下的Jira、Confluence、Trello，都有著很高的設(shè)計(jì)水準(zhǔn)，同時(shí)作為多個(gè)產(chǎn)品的設(shè)計(jì)系統(tǒng)，它的包容性也值得大家去學(xué)習(xí)，可以多去實(shí)際頁(yè)面去深入體驗(yàn)，會(huì)有很多不一樣的收獲。

3）Material Design

https://material.io/design/iconography/system-icons.html#icon-themes

在B端產(chǎn)品中，為什么我不推薦apple又或者其他的設(shè)計(jì)語(yǔ)言，相比而言，Google的Material Design一直擁有著很高的水平。

與實(shí)際情況相比，Material Desgin 設(shè)計(jì)的背景與B端實(shí)際情況十分類似，同樣擁有著混亂的屏幕分辨率，亟待解決的頁(yè)面層次，卡片化的設(shè)計(jì)思路，因?yàn)镸D設(shè)計(jì)設(shè)計(jì)在對(duì)這些特殊情況都有深入的考慮。

2. 圖標(biāo)庫(kù)

1）REMIXICON

https://remixicon.com/

Remix Icon是國(guó)人設(shè)計(jì)師章蕭醇開源的一款圖標(biāo)庫(kù)，目前這個(gè)圖標(biāo)庫(kù)里共有2271個(gè)圖標(biāo)。圖標(biāo)涵蓋建筑、商業(yè)、通訊、設(shè)計(jì)、文檔編輯、財(cái)務(wù)、健康等十多種圖標(biāo)類型，可以直接下載SVG或PNG版本或者復(fù)制SVG代碼。

從圖標(biāo)質(zhì)量上來(lái)看，Remix Icon的質(zhì)量算是我見過(guò)開源圖標(biāo)庫(kù)中最高，擁有線性和面性兩種不同版本，兩千多個(gè)的圖標(biāo)里，一定有你需要的～

2）Fearher

https://feathericons.com/

https://www.figma.com/file/dyJRSFTIajik4cdkcXN8yA3K/Feather-Component-Librar

Feathericons是一個(gè)漂亮和簡(jiǎn)單的開源圖標(biāo)庫(kù)，每個(gè)圖標(biāo)均以24×24網(wǎng)格設(shè)計(jì)，它包含282個(gè)SVG圖標(biāo)，你可以使用右側(cè)的設(shè)置去調(diào)整圖標(biāo)的粗細(xì)以及圖標(biāo)大小，你還可以通過(guò)單擊網(wǎng)站右上角的月亮圖標(biāo)來(lái)切換明暗模式。

如果你是Figma的用戶，作者也提供了Figma插件，在使用上的體驗(yàn)會(huì)更加的友好。

3）EVA Icons

https://akveo.github.io/eva-icons/#/

Eva Icons是Eva Design System中的圖標(biāo)部分，一共有480個(gè)開源圖標(biāo)，分別以SVG和PNG格式展示。

在圖標(biāo)類型上，你可以選線性和面形兩種風(fēng)格圖標(biāo)，很有趣的一點(diǎn)，你可以將鼠標(biāo)Hover圖標(biāo)上去，你可以自己設(shè)定圖標(biāo)的動(dòng)畫效果，如：放大、晃動(dòng)、翻轉(zhuǎn)，這大概就是設(shè)計(jì)師的情懷吧～

4）heroicons

https://heroicons.dev/

Heroicons是由Tailwind CSS的創(chuàng)建者構(gòu)建的另一個(gè)很棒的開源圖標(biāo)庫(kù)。它具有超過(guò)165個(gè)具有填充和輪廓樣式的獨(dú)立圖標(biāo)，但每個(gè)元素也提供深色和白色版本，圖標(biāo)的外觀非常優(yōu)質(zhì)且制作精良。

這些圖標(biāo)的入門非常簡(jiǎn)單，他們還提供了Figma中的庫(kù)。如果你想包含所有的圖標(biāo)，你可以從公共資源庫(kù)中下載所有的SVG文件。

5）Ikonate

https://ikonate.com/

最后但并非最不重要的是，Ikonate是另一個(gè)令人敬畏的開源圖標(biāo)庫(kù)，它擁有約100個(gè)基于平面設(shè)計(jì)的高級(jí)圖標(biāo)。它是根據(jù)非常寬松的MIT許可證慷慨授權(quán)的。

導(dǎo)出之前，你可以輕松配置圖標(biāo)的大小，邊框?qū)挾龋吙蚝瓦吔且约邦伾?/p>

6）IconPark

http://iconpark.bytedance.com/

字節(jié)跳動(dòng)在9月3日開放的圖標(biāo)庫(kù)，很大多數(shù)人都不知道，圖標(biāo)風(fēng)格有線性、填充、雙色、多色可選，圖標(biāo)質(zhì)量也十分的高，支持批量下載，網(wǎng)站還處于初期，感覺目前還是針對(duì)內(nèi)部人員使用，只是目前將其開源出來(lái)，效果還不錯(cuò)。

因?yàn)槠P(guān)系，還有幾十個(gè)圖標(biāo)資源網(wǎng)站放在http://youthce.com，這里就不做過(guò)多展示。

3. Iconfont上優(yōu)質(zhì)的圖標(biāo)資源

先說(shuō)一句，由于iconfont的鏈接放到公眾號(hào)后老是打不開，因此大家可以通過(guò)我提供的作者名稱，進(jìn)行iconfont 用戶搜索找到。

1）阿里云設(shè)計(jì)中心

先這個(gè)是阿里云的賬號(hào)，很多B端同學(xué)做云產(chǎn)品的可以多多參考：

2）musongtao

他的OA辦公系列圖標(biāo)給我留下了很深刻印象，之前也嘗試過(guò)臨過(guò)一些。

3）Mokki

4）Hi劉老爺

5）iconfont 官方圖標(biāo)庫(kù)

五、圖標(biāo)發(fā)展史

1. 遠(yuǎn)古時(shí)期-圖片與雪碧圖

之前，在與一些設(shè)計(jì)前輩聊天時(shí)，談到過(guò)這個(gè)話題，那時(shí)候的圖標(biāo)還原都采取圖片的形式，隨著網(wǎng)站頁(yè)面不斷增加，大家就會(huì)發(fā)現(xiàn)圖片十分占據(jù)請(qǐng)求資源：

一方面網(wǎng)頁(yè)中每當(dāng)有一個(gè)圖標(biāo)都會(huì)去請(qǐng)求一次請(qǐng)求頻率十分的高，另一方面圖標(biāo)本身體積很小，這樣頻繁請(qǐng)求后臺(tái)服務(wù)器會(huì)成承受更大的壓力，這樣顯然是不劃算的，隨后雪碧圖就出現(xiàn)了。

雪碧圖：就是將多個(gè)圖標(biāo)合成成為一個(gè)圖表，然后前端利用 css 的 background-position 定位去顯示不同的 icon 圖標(biāo)。雖然解決頻繁請(qǐng)求的問題，但還是存在一個(gè)巨大的痛點(diǎn)，難以維護(hù)。

因?yàn)楫?dāng)設(shè)計(jì)師每增加一個(gè)圖標(biāo)，都需要修改原始圖片，而且通常雪碧圖是前端使用工具生成，工具稍稍不對(duì)就會(huì)影響前面定位好的圖片，同時(shí)雪碧圖的修改直接影響到之前的緩存，長(zhǎng)此以往就會(huì)變得難以維護(hù)。

2. 發(fā)展時(shí)期-字體圖標(biāo)

因?yàn)槭褂脠D片落地圖標(biāo)還是會(huì)有種種問題，字體圖標(biāo)便開始問世，第三章剛講到圖標(biāo)本質(zhì)也是一種“文字符號(hào)”，所以在屬性上是極為符合的。

在前端CSS開始支持@font-face引入web font中后，字體圖標(biāo)就來(lái)到了高速發(fā)展的時(shí)期，比如Font Awesome就在這時(shí)候崛起，這時(shí)候國(guó)內(nèi)出現(xiàn)了一個(gè)圖標(biāo)托管網(wǎng)站：iconfont。

3. 成長(zhǎng)時(shí)期-iconfont的興起

Iconfont已經(jīng)陪伴我們7年，它集合了圖標(biāo)托管、共享、管理平臺(tái)，算是解決了國(guó)內(nèi)大多數(shù)設(shè)計(jì)師圖標(biāo)管理的需求，iconfont是“阿里爸爸”旗下的產(chǎn)品，主要是有很多圖標(biāo)資源提供給大家下載。

當(dāng)然強(qiáng)烈建議iconfont能夠擁有排序功能，對(duì)于我這種強(qiáng)迫癥來(lái)說(shuō)，不能忍受圖標(biāo)類型是混亂的。

4. 崛起時(shí)期-svg

svg源本就是圖標(biāo)的最好歸屬，一方面svg本身就是擁有伸縮的特性，能夠滿足圖標(biāo)任意放大縮小的功能；另一方面在眾多編輯繪圖軟件中，都支持svg的任意編輯，非常適合設(shè)計(jì)師再修改。

同時(shí)svg可以直接使用，也會(huì)避免字體圖標(biāo)那樣需要需要通過(guò)管理平臺(tái)進(jìn)行維護(hù)。

svg真正的崛起還是在內(nèi)聯(lián)svg的出現(xiàn)，在2016年Github全面啟用了內(nèi)聯(lián)圖標(biāo)，可以將圖標(biāo)直接嵌入到HTML的內(nèi)容中，是它的文檔模型能夠被JS/CSS訪問操作，前端就可以通過(guò)CSS的控制實(shí)現(xiàn)圖標(biāo)顏色、樣式，滿足圖標(biāo)的多種需求。

如果大家感興趣，可以出個(gè)番外篇與大家聊聊font icon 與 svg的對(duì)比，想要的就在下面討論區(qū)留言～（待定）。

在圖標(biāo)的設(shè)計(jì)中，我崇拜過(guò)Susan的細(xì)膩，能夠在如此低的分辨率中做著設(shè)計(jì)，而對(duì)于后續(xù)的mac圖標(biāo)的設(shè)計(jì)中，都有著深遠(yuǎn)的意義。

我也敬佩錘子，將具象的圖標(biāo)刻畫的細(xì)致到位，以至于很多時(shí)候看著圖標(biāo)發(fā)呆，細(xì)細(xì)研究它的技法。希望B端的圖標(biāo)不要因?yàn)殚T檻而困擾著大家，我曾經(jīng)深受圖標(biāo)困惑，希望這篇文章你會(huì)有所收獲。

參考文獻(xiàn)：

[1] https://www.zcool.com.cn/article/ZOTU1OTMy.html

[2] https://www.zhangxiaochun.com/icon-style-guide-1/

[3]https://www.uisdc.com/b-end-illustration-system

[4]https://www.dazhuanlan.com/2019/10/06/5d99a15b097fd/

作者：CE，2B行業(yè)的2B設(shè)計(jì)師～公眾號(hào)：CeDesign

本文由 @CE 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議。