對于一套圖標(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è)和價(jià)值。作者在本文中以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ì)頁面的時(shí)候，如果需要的圖標(biāo)大小是 16 X 16px，為什么不推薦直接使用 16 X 16px 的網(wǎng)格繪制圖標(biāo)呢？
對于這類問題，本文解答如下 ——
1 . 可以「精確」繪制細(xì)節(jié)
下面這張圖你可以很清楚的看到網(wǎng)格的用法：圖中放大的圓圈中的一個(gè)藍(lán)色的小方格是 32 X 32 px，也就是說，這個(gè)藍(lán)色小方格里面還是一個(gè) 32 X 32 的格子盤：
你可以想象，當(dāng)你在繪制一個(gè)圖標(biāo)時(shí)，其實(shí)是在一個(gè)布滿了小格子的紙上進(jìn)行繪制，這樣做我們在繪制圖標(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 對于點(diǎn)的尺寸選擇上會保持 16 的倍數(shù)這一原則。在點(diǎn)的選擇中常用四種尺寸，分別為 80px、96px、112px、128px。當(dāng)出現(xiàn)特殊尺寸的需求時(shí)，會按照 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)格時(shí)，可以預(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)用時(shí)出現(xiàn)邊緣被切掉的風(fēng)險(xiǎn)；同時(shí)在設(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)行縮小變換，在縮小圖像時(shí)可以保持銳利的邊緣和正確的對齊方式。
而如果你使用的是 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í)是一個(gè)“精致的體力活”，一套真正優(yōu)秀的圖標(biāo)，在細(xì)節(jié)上是值得放大 10 倍來進(jìn)行推敲的。
原文鏈接：長弓小子（公眾號）
作者：元堯
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》詳解｜圖標(biāo)設(shè)計(jì)，精致的體力活兒！
文章來源：站酷 作者：陳皮Celia
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( www.li-bodun.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ù)