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

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

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

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

對于這類問題，本文解答如下 ——

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

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

你可以想象，當(dāng)你在繪制一個圖標(biāo)時，其實(shí)是在一個布滿了小格子的紙上進(jìn)行繪制，這樣做我們在繪制圖標(biāo)的時候可以很精確，每一個圓角的大小、每一根線條的粗細(xì)、每一個斜線的角度等等，都有嚴(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 對于點(diǎn)的尺寸選擇上會保持 16 的倍數(shù)這一原則。在點(diǎn)的選擇中常用四種尺寸，分別為 80px、96px、112px、128px。當(dāng)出現(xiàn)特殊尺寸的需求時，會按照 16 的倍數(shù)進(jìn)行延展。

（3）線寬：

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

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

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

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

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

在圖標(biāo)的設(shè)計(jì)過程中預(yù)留出血位，可以預(yù)防某些造型的圖標(biāo)在具體應(yīng)用時出現(xiàn)邊緣被切掉的風(fēng)險；同時在設(shè)計(jì)過程中，也為設(shè)計(jì)師把握圖標(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)等比例縮小，就變成了我們通常看到的界面上的圖標(biāo)。通常情況下，界面上使用的圖標(biāo)的大小不會超過 1024 X 1024px，因此基本上都是對圖標(biāo)進(jìn)行縮小變換，在縮小圖像時可以保持銳利的邊緣和正確的對齊方式。

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

4 . iOS 平臺標(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)帶來極佳的顯示效果，更好的考慮到用戶的體驗(yàn)感受。

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

原文鏈接：長弓小子（公眾號）

作者：元堯

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

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

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

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(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ù)