對于一套圖標來說，能讓用戶記得住，源于圖標的與眾不同；而能讓用戶覺得有專業(yè)感，其實是源于圖標的整齊劃一。圖標設計本身也有自己一套規(guī)范，在設計圖標的過程中遵循一定規(guī)范去工作，不僅可以使圖標看起來更美觀，而且還可以體現(xiàn)出設計師的專業(yè)和價值。作者在本文中以1024px下的設計規(guī)范給出詳細的說明和解釋，歡迎大家討論。
很多設計平臺都推薦設計師在 1024 X 1024px 的網(wǎng)格中繪制組件，且圓角的大小保持 8 的倍數(shù)關系。例如 Ant Design 給出的圖標繪制網(wǎng)格規(guī)定：
關于圖標設計，你大概也有思考過這樣的問題：
- 為什么圖標要使用 1024 X 1024px 的網(wǎng)格進行繪制？
- 設計頁面的時候，如果需要的圖標大小是 16 X 16px，為什么不推薦直接使用 16 X 16px 的網(wǎng)格繪制圖標呢？
對于這類問題，本文解答如下 ——
1 . 可以「精確」繪制細節(jié)
下面這張圖你可以很清楚的看到網(wǎng)格的用法：圖中放大的圓圈中的一個藍色的小方格是 32 X 32 px，也就是說，這個藍色小方格里面還是一個 32 X 32 的格子盤：
你可以想象，當你在繪制一個圖標時，其實是在一個布滿了小格子的紙上進行繪制，這樣做我們在繪制圖標的時候可以很精確，每一個圓角的大小、每一根線條的粗細、每一個斜線的角度等等，都有嚴格的數(shù)量規(guī)范，以確保圖標造型的統(tǒng)一和精確。
關于圖標的精確規(guī)范，我們以 Ant Design 的圖標系統(tǒng)中的部分細節(jié)規(guī)范為例：
（1）圓角：
圓角的規(guī)格采取 8 的倍數(shù)原則，最常用的尺寸是 3 種，分別是 8px、16px、32px，它們之間是兩倍數(shù)的關系。而圖標內部空間的圓角則保持直角（0px）的處理方式。
（2）點的直徑：
點是非常常用的元素。Ant Design 對于點的尺寸選擇上會保持 16 的倍數(shù)這一原則。在點的選擇中常用四種尺寸，分別為 80px、96px、112px、128px。當出現(xiàn)特殊尺寸的需求時，會按照 16 的倍數(shù)進行延展。
（3）線寬：
Ant Design 的線條寬度之間的關系采用 8 倍數(shù)原則，從小到大以 8 的規(guī)律遞增。常用的規(guī)格也是 4 種，分別為 56px、64px、72px、80px。
你會發(fā)現(xiàn)，在 16 X 16px 的畫板中肯定是可以畫出來圖標的，只是圖標的形狀并不是單一的圓形或是方形，一旦出現(xiàn)多種樣式的線和點，你是無法精確控制繪制的規(guī)律的。
當然，1024px 也并不是絕對的數(shù)值，你也可以在 800 X 800px 或是 960 X 960px 的網(wǎng)格中進行繪制，網(wǎng)格數(shù)量越多，你的繪制就會越精確。
2 . 圖標造型「靈活性」更高
使用 1024 X 1024px 的網(wǎng)格時，可以預留有效的“出血”位置。比如，Ant Design 在 1024 x 1024px 的畫板邊緣預留了 64px 的出血位，也就是說，真正用來畫圖標的常用畫板尺寸是：1024-64-64 = 896，即：896 x 896px。
在圖標的設計過程中預留出血位，可以預防某些造型的圖標在具體應用時出現(xiàn)邊緣被切掉的風險；同時在設計過程中，也為設計師把握圖標間平衡留下了進退的余地，為圖標賦予更多靈活性。
而如果你使用的是 16 X 16px 大小的網(wǎng)格繪制圖標，則很難設置出有效的出血位。
3 . 「縮放」游刃有余
按照上文所述，當你在 1024 X 1024px 的網(wǎng)格中畫好圖標后，再將圖標等比例縮小，就變成了我們通常看到的界面上的圖標。通常情況下，界面上使用的圖標的大小不會超過 1024 X 1024px，因此基本上都是對圖標進行縮小變換，在縮小圖像時可以保持銳利的邊緣和正確的對齊方式。
而如果你使用的是 16 X 16px 大小的網(wǎng)格畫出來的圖標，如果需要放大的場景，在圖標放大之后會有很多細節(jié)無法處理和補充。
4 . iOS 平臺標準
以蘋果公司為例， iOS 7 及之后版本 iOS 的圖標網(wǎng)格均采用 1024 X 1024px 的網(wǎng)格作為基準。向 App Store 應用商店提交的 iOS 應用圖標必須使用 1024 X 1024 分辨率的高清圖標。Retina 視網(wǎng)膜屏幕也為高清圖標帶來極佳的顯示效果，更好的考慮到用戶的體驗感受。
本文講解的問題看上去很基礎，但很多同學其實都是“揣著糊涂裝明白”。繪制圖標其實是一個“精致的體力活”，一套真正優(yōu)秀的圖標，在細節(jié)上是值得放大 10 倍來進行推敲的。
原文鏈接：長弓小子（公眾號）
作者：元堯
轉載請注明：學UI網(wǎng)》詳解｜圖標設計，精致的體力活兒！
文章來源：站酷 作者：陳皮Celia
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( www.izc.net.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務