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

很多設計平臺都推薦設計師在 1024 X 1024px 的網格中繪制組件，且圓角的大小保持 8 的倍數關系。例如 Ant Design 給出的圖標繪制網格規定：

關于圖標設計，你大概也有思考過這樣的問題：

• 為什么圖標要使用 1024 X 1024px 的網格進行繪制？
• 設計頁面的時候，如果需要的圖標大小是 16 X 16px，為什么不推薦直接使用 16 X 16px 的網格繪制圖標呢？

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

1 . 可以「精確」繪制細節

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

你可以想象，當你在繪制一個圖標時，其實是在一個布滿了小格子的紙上進行繪制，這樣做我們在繪制圖標的時候可以很精確，每一個圓角的大小、每一根線條的粗細、每一個斜線的角度等等，都有嚴格的數量規范，以確保圖標造型的統一和精確。

關于圖標的精確規范，我們以 Ant Design 的圖標系統中的部分細節規范為例：

（1）圓角：

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

（2）點的直徑：

點是非常常用的元素。Ant Design 對于點的尺寸選擇上會保持 16 的倍數這一原則。在點的選擇中常用四種尺寸，分別為 80px、96px、112px、128px。當出現特殊尺寸的需求時，會按照 16 的倍數進行延展。

（3）線寬：

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

你會發現，在 16 X 16px 的畫板中肯定是可以畫出來圖標的，只是圖標的形狀并不是單一的圓形或是方形，一旦出現多種樣式的線和點，你是無法精確控制繪制的規律的。

當然，1024px 也并不是絕對的數值，你也可以在 800 X 800px 或是 960 X 960px 的網格中進行繪制，網格數量越多，你的繪制就會越精確。

2 . 圖標造型「靈活性」更高

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

在圖標的設計過程中預留出血位，可以預防某些造型的圖標在具體應用時出現邊緣被切掉的風險；同時在設計過程中，也為設計師把握圖標間平衡留下了進退的余地，為圖標賦予更多靈活性。

而如果你使用的是 16 X 16px 大小的網格繪制圖標，則很難設置出有效的出血位。

3 . 「縮放」游刃有余

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

而如果你使用的是 16 X 16px 大小的網格畫出來的圖標，如果需要放大的場景，在圖標放大之后會有很多細節無法處理和補充。

4 . iOS 平臺標準

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

本文講解的問題看上去很基礎，但很多同學其實都是“揣著糊涂裝明白”。繪制圖標其實是一個“精致的體力活”，一套真正優秀的圖標，在細節上是值得放大 10 倍來進行推敲的。

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

作者：元堯

轉載請注明：學UI網》詳解｜圖標設計，精致的體力活兒！

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

藍藍設計( www.sdgs6788.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務