當(dāng)一大波專業(yè)名字圖標(biāo)撲面而來時，接穩(wěn)了，別慌。這里有一些小心得來和大家探討。

做過B端系統(tǒng)設(shè)計的同學(xué)都知道，B端系統(tǒng)中會有大量的專業(yè)功能性圖標(biāo)，作為文字性功能操作的圖形化展示。當(dāng)正面遭遇一大波文字圖標(biāo)時（如上圖），接穩(wěn)了，別慌。這里有一些小心得來和大家探討。

只需3步，圖標(biāo)設(shè)計思路清晰明了

① 拆解歸類 、② 元件繪制 、③ 元件重組

一、拆解歸類

再來重新看一下這個列表，從中找出文字圖標(biāo)的相同點(diǎn)和差異點(diǎn)，比如說：商品管理、商品發(fā)布管理、商品備案管理等，都是在“商品”這個主體的基礎(chǔ)上，細(xì)化了類型，最終都停留在“管理”這個執(zhí)行點(diǎn)上；再比如說：商品計劃、清退計劃、補(bǔ)貨計劃，都是在主體的基礎(chǔ)上，完成“計劃”這個任務(wù)點(diǎn)。這一大堆看似復(fù)雜的文字描述，其實都是有規(guī)律的。

很大一部分文字圖標(biāo)都具有“主題性、差異性、統(tǒng)一性”這個特點(diǎn)，根據(jù)特點(diǎn)推倒出文字圖標(biāo)的基本組成模式：主體人物+細(xì)分類型+任務(wù)執(zhí)行。按照這種組成模式，把所有文字圖標(biāo)進(jìn)行拆解，會得到一個巨大的詞庫。

舉一個具體的栗子：

接下來需要對詞庫進(jìn)行重新歸類（我在做歸類的時候，是以“任務(wù)執(zhí)行 → 主體人物 → 細(xì)分類型”為維度的，因為任務(wù)執(zhí)行是具有統(tǒng)一性的），比如：管理執(zhí)行點(diǎn)的先歸為一大類，在大類里再做“主體人物”歸類，最后是“細(xì)分類型”。

PS:這里強(qiáng)調(diào)一下，一定要做歸類表格，一來清晰明了，二來防止遺漏。

這樣，第1步就完成了。

二、元件繪制

元件繪制原則：遵循規(guī)則 | 極簡易懂 | 風(fēng)格化

1.遵循規(guī)則

就從最基礎(chǔ)的圖標(biāo)設(shè)計標(biāo)準(zhǔn)延續(xù)，講拆解完成的文字描述轉(zhuǎn)化成圖形，這個就不多說了，都懂。

2.極簡易懂

文字描述到圖形化的展示，需要極盡簡潔易懂，確保在后面重組的時候，組合圖標(biāo)的清晰度。

接下來就是按照圖標(biāo)設(shè)計基礎(chǔ)規(guī)則繪制拆解完成的大量的詞庫啦

3.風(fēng)格化

詞庫的圖形轉(zhuǎn)化產(chǎn)出的基礎(chǔ)元件，風(fēng)格化也需要盡量簡單，表達(dá)品牌內(nèi)核就好。

詞庫的繪制是從“文字化 → 元件 → 模塊化”的轉(zhuǎn)化，建立大量的基礎(chǔ)元件，才能更高效、有效的完成圖標(biāo)組合。

三、元件重組

元件重組規(guī)則：元件分級 | 重組規(guī)則 | 風(fēng)格統(tǒng)一

1.元件分級

系統(tǒng)圖標(biāo)的呈現(xiàn)為了清晰度和識別度，一般情況下最多可容納3個極簡圖形的組合。按照文字圖標(biāo)“主體人物、細(xì)分類型、任務(wù)執(zhí)行”的拆解歸類原則，可以把一個圖標(biāo)的組合元件分為1、2、3級，“主體人物”為1級，功能基本都是圍繞“主體人物”設(shè)定，比如說：商品、庫、采購。“細(xì)分類型”為2級，是“主體人物”的細(xì)化內(nèi)容，比如：商品備案、庫存、采購價。“任務(wù)執(zhí)行”為3級，作為1級，或1級和2級的操作執(zhí)行任務(wù)，比如說：商品備案管理、庫存計劃，采購價預(yù)估。

這樣，圖標(biāo)的重組其實就變成了1、2、3級元件的組合方式，是不是一下子就簡單了。其實就這幾種方式

2.重組規(guī)則

為“二合一”和“三合一”分別制定具體的組合標(biāo)準(zhǔn)，嚴(yán)格按照組個標(biāo)準(zhǔn)用基礎(chǔ)圖標(biāo)去拼裝就好啦。

當(dāng)基礎(chǔ)元件作為3級元件應(yīng)用的時候，需要再次簡化，確保組合圖標(biāo)清晰可識別。

舉個栗子：

3.風(fēng)格統(tǒng)一

原則就是保證元件本身的風(fēng)格化的基礎(chǔ)上，保證組合圖標(biāo)的整體性，如果每個元件都帶著風(fēng)格化來組合，會讓整個圖標(biāo)看起來特別零散，所以需要做取舍。

做好模塊化元件庫和組合標(biāo)準(zhǔn)之后，無論遇到多么刁鉆的B端功能圖標(biāo)，都可以清晰，高效的完成，并且很成體系。

最后還有一種具有專屬性的特定圖標(biāo)，它可能代表了另一個系統(tǒng)或者一種專屬功能。這種圖標(biāo)只需要保證風(fēng)格統(tǒng)一，字面意思圖形化直譯就好。

總結(jié)一下

B端系統(tǒng)功能性圖標(biāo)3步曲：

元件組合的關(guān)鍵點(diǎn)：

按照之前梳理好的列表整理所有圖標(biāo)。整體輸出風(fēng)格統(tǒng)一，類目清晰。

作者：bugcool

原文鏈接：https://www.zcool.com.cn/article/ZOTU1OTMy.html