圖標(biāo)的作用

在設(shè)計(jì)系統(tǒng)中，圖標(biāo)是比較重要的一個(gè)領(lǐng)域，良好設(shè)計(jì)的圖標(biāo)能降低系統(tǒng)功能的理解成本，為頁(yè)面增光添色。

本文只涉及圖標(biāo)庫(kù)搭建與設(shè)計(jì)策略等。其他問(wèn)題如：前端對(duì)接、導(dǎo)出文件格式等不在討論之列。

Ant Design 系統(tǒng)圖標(biāo)庫(kù)策略分析

繪制規(guī)范

理論基礎(chǔ)尺寸

所有圖標(biāo)初始繪制時(shí)使用 1024*1024的尺寸

出血與輪廓框架

圖標(biāo)元素規(guī)范

點(diǎn)：最常用的是四種尺寸的點(diǎn)，分別為 80、96、112、128。如出現(xiàn)特殊尺寸需求按16的倍數(shù)延展。

線：常用的規(guī)格也是 4 種，分別為 56、64、72、80

圓角：8 倍數(shù)原則，最常用的是 3 種，分別是 8，16、32。圖標(biāo)內(nèi)部空間直接直角處理。

角度：將常用角度定義為76度，可根據(jù)實(shí)際情況適當(dāng)變化。

箭頭：頂角大約保持 76 度的基礎(chǔ)上，最常用的為 4 種，他們的寬度保持 8 倍數(shù)的原則，間隔為 24

搭配使用建議

圖標(biāo)的規(guī)范與調(diào)整

一致性與節(jié)奏感

平衡與細(xì)致調(diào)整

視覺(jué)差異

彎曲的線條會(huì)比豎直的線條看起來(lái)細(xì)，因此在圓形的外邊框上我們會(huì)適當(dāng)?shù)膶?duì) 72px 的規(guī)格進(jìn)行 4 px 的微調(diào)。所以方外框線寬 72 px，圓線寬 76 px。

傾斜的線條也會(huì)比豎直的線條看起來(lái)細(xì)。 因此傾斜的線條也會(huì)進(jìn)行 4 px 的微調(diào)。所以正放的手機(jī)線寬72px 的話，斜放的手機(jī)線寬是 76px。

留白空間也可以影響線寬的設(shè)置。留白較少的空間應(yīng)該采用較小的線寬以達(dá)成視覺(jué)重量平衡。

左側(cè)笑臉72px 線寬，則右側(cè)設(shè)置圖標(biāo)應(yīng)為 68px 線寬

圓角的設(shè)置應(yīng)該按自己品牌傳遞的情感而定，大圓角代表溫和而感性，小圓角和直角更具有堅(jiān)硬和理性（科技感）。

部分圖標(biāo)加入一些擬人化，具備生命力。

圖標(biāo)結(jié)構(gòu)整理規(guī)范

保持節(jié)點(diǎn)的最小需求，去掉不必要的節(jié)點(diǎn)。

將最終的圖形合并，便于輸出

對(duì)尺寸上的小數(shù)點(diǎn)進(jìn)行修正（采用1024*1024的大畫(huà)布則不應(yīng)存在小數(shù)點(diǎn)）

設(shè)計(jì)軟件中的圖標(biāo)圖層也要保持整潔。

命名與分類(lèi)

此方面 Ant Design 沒(méi)有進(jìn)行詳盡的說(shuō)明，大致分類(lèi)如下

風(fēng)格：描邊風(fēng)格、填充風(fēng)格、雙色風(fēng)格

類(lèi)型：

方向圖標(biāo)

輔助圖標(biāo)

編輯圖標(biāo)

數(shù)據(jù)圖標(biāo)

品牌與LOGO圖標(biāo)

應(yīng)用圖標(biāo)

所有圖標(biāo)直接采用英文命名或中文命名

在 figma 的調(diào)用分級(jí)僅有3級(jí)： icon / outline / iconName

組件庫(kù)

在Ant Design 的 figma 組件庫(kù)中實(shí)際的原始組件圖標(biāo)尺寸為 36*36，線寬在 3px 左右，根據(jù)每個(gè)圖標(biāo)不完全一致。應(yīng)該每個(gè)圖標(biāo)由1024*1024的圖標(biāo)縮放而來(lái)。

Arco Design 系統(tǒng)圖標(biāo)庫(kù)策略分析

繪制規(guī)范

未找到公開(kāi)資料，根據(jù)組件庫(kù)推測(cè)。

基礎(chǔ)尺寸

以 48*48 尺寸繪制原始圖標(biāo)，48*48 時(shí)線寬為 4px

輪廓框架

元素規(guī)范

整體看起來(lái)沒(méi)有特別明顯的標(biāo)準(zhǔn)規(guī)范。下面逐一過(guò)一下

點(diǎn)：不同的圖標(biāo)有不同的點(diǎn)，尺寸大概圍繞這6*6擴(kuò)展。圓度分為方和圓兩種，沒(méi)有明顯規(guī)律。

線：全部使用4px繪制，但是方圓的設(shè)定，沒(méi)有找到明顯規(guī)律。比如同為箭頭，但是擴(kuò)大和向下的方圓不同，可能比較隨意或者規(guī)律不明顯。

圓角：除了少部分無(wú)圓角的圖標(biāo)，其他圓角都為3，針對(duì)大小圖形都沒(méi)有變化。

角度：常用角度為90度，其余角度根據(jù)情況各有不同。

命名規(guī)范

采用雙層命名：edit/bg-colors

具體為：圖標(biāo)分類(lèi) / 具體名稱(chēng)

Semi Design 系統(tǒng)圖標(biāo)庫(kù)分析

（未完待續(xù)）