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

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

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

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

一、拆解歸類

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

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

舉一個(gè)具體的栗子：

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

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

這樣，第1步就完成了。

二、元件繪制

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

1.遵循規(guī)則

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

2.極簡(jiǎn)易懂

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

接下來(lái)就是按照?qǐng)D標(biāo)設(shè)計(jì)基礎(chǔ)規(guī)則繪制拆解完成的大量的詞庫(kù)啦

3.風(fēng)格化

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

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

三、元件重組

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

1.元件分級(jí)

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

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

2.重組規(guī)則

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

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

舉個(gè)栗子：

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

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

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

最后還有一種具有專屬性的特定圖標(biāo)，它可能代表了另一個(gè)系統(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