編輯導(dǎo)語：在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ī)范又是什么？帶著這些疑問我們一起來看本篇文章，希望作者能夠?yàn)槟憬獯疬@些疑惑。

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

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

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

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

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

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

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

聊聊它們兩的定義：

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

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

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

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

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

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

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

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

• 業(yè)務(wù)圖標(biāo)：屬于B端圖標(biāo)設(shè)計(jì)中的業(yè)務(wù)分支，和我們每個產(chǎn)品的業(yè)務(wù)模塊都保持一致，通常是每個系統(tǒng)都會有一套獨(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)品中頻繁的使用會被提升到基礎(chǔ)圖標(biāo)當(dāng)中，同理使用減少也會進(jìn)行相應(yīng)的剝離。

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

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

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

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

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

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

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

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

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

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

1）B端變化多

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

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

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

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

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

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

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

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

• C端講究整體性

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

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

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

• B端更直接

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

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

• C端更多元

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

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

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

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

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

我們再從圖標(biāo)出發(fā)，從宏觀上講，圖標(biāo)是一門全球通用的“符號語言”，而在每一種語言當(dāng)中，必定會有它的“語法”以及“單詞”，圖標(biāo)中的“語法”與“單詞”一般包含有那些呢？

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

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

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

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

在圖標(biāo)的設(shè)計(jì)原則中，主要通過設(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)，不對用戶的認(rèn)知造成困擾；
• 簡單：在表意清晰準(zhǔn)確的基礎(chǔ)上，盡量保持圖形的簡潔，不做多余的修飾；
• 節(jié)奏：挖掘構(gòu)圖中的秩序之美；
• 愉悅：賦予適度的情感。

2）輪廓模版

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

3）操作熱區(qū)

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

一方面操作熱區(qū)最開始興起于移動端，不知道大家還記得一句很經(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)都會與文字進(jìn)行搭配使用，所以12px為PC端圖標(biāo)最小尺寸。

4）命名規(guī)則

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

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

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

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

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

1）圖標(biāo)性格

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

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

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

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

2）場景不同含義不同

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

先來看一個例子：

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

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

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

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

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

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

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

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

表意圖標(biāo)：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 初創(chuàng)期的產(chǎn)品：因?yàn)樘幱谠囂诫A段，產(chǎn)品需要經(jīng)常迭代，所以處于一個變化的節(jié)奏中。為了應(yīng)對這種變化，引用開源圖標(biāo)庫便成為一種較好的解決方式；
• 成長期的產(chǎn)品：成長期的產(chǎn)品會從混亂到逐漸的穩(wěn)定。設(shè)計(jì)師也會逐漸意識到產(chǎn)品的整體形態(tài)以及后續(xù)的規(guī)劃方向。這時候就需要整體考慮，去優(yōu)化掉初創(chuàng)期所遺留下的問題，同時提升產(chǎn)品的設(shè)計(jì)競爭力；
• 成熟期的產(chǎn)品：成熟期的產(chǎn)品需要構(gòu)建一套自己的方法論。并且要脫離圖標(biāo)這個單一維度。去多維度多層次的思考，通過自主搭建，形成多條產(chǎn)品線的統(tǒng)一，建立完整成熟的設(shè)計(jì)系統(tǒng)來滿足業(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ì)中，圓角是一個經(jīng)常被忽略的細(xì)節(jié)，我們要根據(jù)圖形的面積大小去設(shè)計(jì)我們圓角的大小，而不是拿到圖標(biāo)就是2x的圓角，這時候就需要講到圖形與圓角之間的關(guān)系。

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

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

透視正確

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

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

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

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

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

第一步：拆解整理

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1）Lightning

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

salesforce是一個值得仰望的B端產(chǎn)品，而伴隨著salesforce的不斷發(fā)展，Lightning設(shè)計(jì)系統(tǒng)也不停地在迭代，Lightning中的圖標(biāo)規(guī)范不僅全面，而且落地，同時它也擁有500+個圖標(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)中的每一個細(xì)節(jié)，都值得細(xì)細(xì)品味，感興趣還可以去多研究設(shè)計(jì)系統(tǒng)的迭代更新記錄，里面有寶藏～

2）ATLASSIAN

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

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

3）Material Design

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

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

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

2. 圖標(biāo)庫

1）REMIXICON

https://remixicon.com/

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

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

2）Fearher

https://feathericons.com/

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

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

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

3）EVA Icons

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

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

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

4）heroicons

https://heroicons.dev/

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

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

5）Ikonate

https://ikonate.com/

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

導(dǎo)出之前，你可以輕松配置圖標(biāo)的大小，邊框?qū)挾?，邊框和邊角以及顏色?/p>

6）IconPark

http://iconpark.bytedance.com/

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

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

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

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

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

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

2）musongtao

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

3）Mokki

4）Hi劉老爺

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

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

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

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

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

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

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

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

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

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

3. 成長時期-iconfont的興起

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

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

4. 崛起時期-svg

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

同時svg可以直接使用，也會避免字體圖標(biāo)那樣需要需要通過管理平臺進(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訪問操作，前端就可以通過CSS的控制實(shí)現(xiàn)圖標(biāo)顏色、樣式，滿足圖標(biāo)的多種需求。

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

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

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

參考文獻(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ì)師～公眾號：CeDesign

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

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