對(duì)于一套圖標(biāo)來(lái)說(shuō)，能讓用戶記得住，源于圖標(biāo)的與眾不同；而能讓用戶覺(jué)得有專業(yè)感，其實(shí)是源于圖標(biāo)的整齊劃一。圖標(biāo)設(shè)計(jì)本身也有自己一套規(guī)范，在設(shè)計(jì)圖標(biāo)的過(guò)程中遵循一定規(guī)范去工作，不僅可以使圖標(biāo)看起來(lái)更美觀，而且還可以體現(xiàn)出設(shè)計(jì)師的專業(yè)和價(jià)值。作者在本文中以1024px下的設(shè)計(jì)規(guī)范給出詳細(xì)的說(shuō)明和解釋，歡迎大家討論。

很多設(shè)計(jì)平臺(tái)都推薦設(shè)計(jì)師在 1024 X 1024px 的網(wǎng)格中繪制組件，且圓角的大小保持 8 的倍數(shù)關(guān)系。例如 Ant Design 給出的圖標(biāo)繪制網(wǎng)格規(guī)定：

關(guān)于圖標(biāo)設(shè)計(jì)，你大概也有思考過(guò)這樣的問(wèn)題：

• 為什么圖標(biāo)要使用 1024 X 1024px 的網(wǎng)格進(jìn)行繪制？
• 設(shè)計(jì)頁(yè)面的時(shí)候，如果需要的圖標(biāo)大小是 16 X 16px，為什么不推薦直接使用 16 X 16px 的網(wǎng)格繪制圖標(biāo)呢？

對(duì)于這類問(wèn)題，本文解答如下 ——

1 . 可以「精確」繪制細(xì)節(jié)

下面這張圖你可以很清楚的看到網(wǎng)格的用法：圖中放大的圓圈中的一個(gè)藍(lán)色的小方格是 32 X 32 px，也就是說(shuō)，這個(gè)藍(lán)色小方格里面還是一個(gè) 32 X 32 的格子盤：

你可以想象，當(dāng)你在繪制一個(gè)圖標(biāo)時(shí)，其實(shí)是在一個(gè)布滿了小格子的紙上進(jìn)行繪制，這樣做我們?cè)诶L制圖標(biāo)的時(shí)候可以很精確，每一個(gè)圓角的大小、每一根線條的粗細(xì)、每一個(gè)斜線的角度等等，都有嚴(yán)格的數(shù)量規(guī)范，以確保圖標(biāo)造型的統(tǒng)一和精確。

關(guān)于圖標(biāo)的精確規(guī)范，我們以 Ant Design 的圖標(biāo)系統(tǒng)中的部分細(xì)節(jié)規(guī)范為例：

（1）圓角：

圓角的規(guī)格采取 8 的倍數(shù)原則，最常用的尺寸是 3 種，分別是 8px、16px、32px，它們之間是兩倍數(shù)的關(guān)系。而圖標(biāo)內(nèi)部空間的圓角則保持直角（0px）的處理方式。

（2）點(diǎn)的直徑：

點(diǎn)是非常常用的元素。Ant Design 對(duì)于點(diǎn)的尺寸選擇上會(huì)保持 16 的倍數(shù)這一原則。在點(diǎn)的選擇中常用四種尺寸，分別為 80px、96px、112px、128px。當(dāng)出現(xiàn)特殊尺寸的需求時(shí)，會(huì)按照 16 的倍數(shù)進(jìn)行延展。

（3）線寬：

Ant Design 的線條寬度之間的關(guān)系采用 8 倍數(shù)原則，從小到大以 8 的規(guī)律遞增。常用的規(guī)格也是 4 種，分別為 56px、64px、72px、80px。

你會(huì)發(fā)現(xiàn)，在 16 X 16px 的畫板中肯定是可以畫出來(lái)圖標(biāo)的，只是圖標(biāo)的形狀并不是單一的圓形或是方形，一旦出現(xiàn)多種樣式的線和點(diǎn)，你是無(wú)法精確控制繪制的規(guī)律的。

當(dāng)然，1024px 也并不是絕對(duì)的數(shù)值，你也可以在 800 X 800px 或是 960 X 960px 的網(wǎng)格中進(jìn)行繪制，網(wǎng)格數(shù)量越多，你的繪制就會(huì)越精確。

2 . 圖標(biāo)造型「靈活性」更高

使用 1024 X 1024px 的網(wǎng)格時(shí)，可以預(yù)留有效的“出血”位置。比如，Ant Design 在 1024 x 1024px 的畫板邊緣預(yù)留了 64px 的出血位，也就是說(shuō)，真正用來(lái)畫圖標(biāo)的常用畫板尺寸是：1024-64-64 = 896，即：896 x 896px。

在圖標(biāo)的設(shè)計(jì)過(guò)程中預(yù)留出血位，可以預(yù)防某些造型的圖標(biāo)在具體應(yīng)用時(shí)出現(xiàn)邊緣被切掉的風(fēng)險(xiǎn)；同時(shí)在設(shè)計(jì)過(guò)程中，也為設(shè)計(jì)師把握?qǐng)D標(biāo)間平衡留下了進(jìn)退的余地，為圖標(biāo)賦予更多靈活性。

而如果你使用的是 16 X 16px 大小的網(wǎng)格繪制圖標(biāo)，則很難設(shè)置出有效的出血位。

3 . 「縮放」游刃有余

按照上文所述，當(dāng)你在 1024 X 1024px 的網(wǎng)格中畫好圖標(biāo)后，再將圖標(biāo)等比例縮小，就變成了我們通?？吹降慕缑嫔系膱D標(biāo)。通常情況下，界面上使用的圖標(biāo)的大小不會(huì)超過(guò) 1024 X 1024px，因此基本上都是對(duì)圖標(biāo)進(jìn)行縮小變換，在縮小圖像時(shí)可以保持銳利的邊緣和正確的對(duì)齊方式。

而如果你使用的是 16 X 16px 大小的網(wǎng)格畫出來(lái)的圖標(biāo)，如果需要放大的場(chǎng)景，在圖標(biāo)放大之后會(huì)有很多細(xì)節(jié)無(wú)法處理和補(bǔ)充。

4 . iOS 平臺(tái)標(biāo)準(zhǔn)

以蘋果公司為例， iOS 7 及之后版本 iOS 的圖標(biāo)網(wǎng)格均采用 1024 X 1024px 的網(wǎng)格作為基準(zhǔn)。向 App Store 應(yīng)用商店提交的 iOS 應(yīng)用圖標(biāo)必須使用 1024 X 1024 分辨率的高清圖標(biāo)。Retina 視網(wǎng)膜屏幕也為高清圖標(biāo)帶來(lái)極佳的顯示效果，更好的考慮到用戶的體驗(yàn)感受。

本文講解的問(wèn)題看上去很基礎(chǔ)，但很多同學(xué)其實(shí)都是“揣著糊涂裝明白”。繪制圖標(biāo)其實(shí)是一個(gè)“精致的體力活”，一套真正優(yōu)秀的圖標(biāo)，在細(xì)節(jié)上是值得放大 10 倍來(lái)進(jìn)行推敲的。

原文鏈接：長(zhǎng)弓小子（公眾號(hào)）

作者：元堯

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》詳解｜圖標(biāo)設(shè)計(jì)，精致的體力活兒！

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)