起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識ICON設計規范之圖標尺寸
編輯導語：圖標設計是UI設計中不可缺少的元素，它看似簡單，但其實內含門道。本篇文章里，作者就對icon設計的相關知識和icon繪制方法做出經驗介紹。如果你對icon設計也想要有所了解的話，那就點進來看一下吧。
圖標是一種抽象的、跨語言的符號，是UI設計中最不可或缺的視覺元素，在設計中看似只占一個很小的區域，但是它卻是考驗設計師基本功的重要標準。
了解圖標相關的概念，以及正確繪制的方法，是入門 UI設計的必備條件。
不如，從這篇開始專注圖標設計相關的專業知識，逐步搭建一個完整的圖標知識庫。
經常有同學問圖標該設計多大，不同設備icon尺寸是多少，那第一篇就從圖標尺寸說起吧。
在界面圖標設計中最常用尺寸有：12×12、16×16、24×24、32×32、48×48等，這里的建議是以48px作為常規圖標的設計尺寸，因為iOS界面中的網格大小是4的倍數，蘋果規范要求最小點擊面積為44pt；安卓的網格是8的倍數，最小操作熱區為48dp。
另外，@2x下作圖要保證是4的倍數，這樣可以整除2，適配@1x的屏幕；@3x下作圖就需要是12的倍數了，這個數值可以整除2、3、4，適配@1x和@2x的屏幕。
那PC端呢？
到了桌面端后，因為屏幕分辨率的不同，沒有規定最小操作熱區。但受到文字落地方式（Chrome瀏覽器中限制最小的字體為12px）的限制，12px漸漸成為大家公認圖標操作熱區的最小值。16px、24px、32px都是PC端常見的圖標尺寸。
通常我們只需要選擇一個通用的尺寸來繪制，然后讓開發人員根據倍數調整可能需要的尺寸即可，這樣就不用一遍又一遍的去繪制不同大小的相同圖標了。
不過當我們的圖標涉及一些復雜的細節時，還是需要根據尺寸大小單獨繪制。比如我們的系統圖標可能是24px，但是營銷圖標是80px，兩者的使用差別會很大，那么我們就需要為那些較大的尺寸添加一些細節。
這里建議從最大的尺寸開始，然后依次繪制小一點的。因為刪除和簡化細節要比添加容易得多，也能最大程度的保留圖標原始狀態。
接著來看各平臺自家的尺寸規范。
一、iOS?應用程序圖標
設計師設計時，通常只用設計一個App Store的圖標（1024px1024px），其他尺寸可用ios圖標生成器自動輸出一套，小尺寸圖標單獨微調下細節即可。
在蘋果給我們的這套資源中，有 Template-AppIcons-iOS 這個文件。
打開這個文件，用我們自己設計的圖標替換掉智能對象里的內容，就會生成我們自己的圖標，把背景隱藏，切出這些圖標即可。
1. Spotlight（搜索頁）
2. 設置頁圖標
3. 消息通知
二、iOS系統圖標
1. 導航欄和工具欄圖標
這兩處的圖標大小一樣都是24x24pt，最大不超過28x28pt。
注：@2x和@3x在邏輯像素單位是一樣的，如果你使用如 Sketch、Adobe XD 等矢量工具設計，可以參照邏輯像素數值設計即可。
2. 標簽欄圖標
iOS 規范中 Tab欄一般有五個、四個、三個圖標的形式，寬度平分，icon尺寸約30x30pt（60px）。
蘋果給出了四種不同形狀標簽欄圖標的尺寸參考供大家設計時參考。其意義是讓不同外形的圖標看上去是差不多大的，保證圖標的平衡。
1）目標寬度和高度（圓形圖標）
2）目標寬度和高度（方形圖標）
3）目標寬度（寬圖標）
4）目標高度（高圖標）
iOS在這里所定義的尺寸并不是圖標文件最后輸出的尺寸，而是給設計師作圖時，針對不同圖標形狀的參考尺寸，目的是為了讓圖標的視覺大小看上去一致。
三、Android應用程序圖標
放在mipmap-*dpi下，文件名為ic_launcher.png。
- L DPI ( Low Density Screen，120 DPI )，其圖標大小為 36 x 36 px；
- M DPI ( Medium Density Screen, 160 DPI )，其圖標大小為 48 x 48 px；
- H DPI ( High Density Screen, 240 DPI )，其圖標大小為 72 x 72 px；
- XH DPI ( Extra-high density screen, 320 DPI )，其圖標大小為 96 x 96 px；
- XXH DPI( xx-high density screen, 480 DPI )，其圖標大小為144 x 144 px；
- XXXH DPI( xxx-high density screen, 640 DPI )，其圖標大小為192 x 192 px；
keyline(關鍵線)形狀，以192x192dp為例：
四、Android系統圖標
相比iOS，Material Design對圖標尺寸有更詳細的規范。默認系統圖標尺寸為24x24dp，四周有2dp的活動區域。Keyline（關鍵線）形狀提供了針對圓形、正方形、垂直矩形、水平矩形的尺寸規范，以保證一致的視覺比例。
關于Keyline線畫法會在下一篇詳解，敬請關注。
五、Google Play應用圖標
- 設計尺寸：512 x 512 px；
- 格式：32 位 PNG；
- 顏色空間：sRGB；
- 文件大小上限：1024KB；
- 形狀：正方形 – Google Play 會動態處理遮蓋部分。半徑相當于圖標大小的 20%。
- 陰影：無 – Google Play 會動態處理陰影。
切圖時不用帶圓角和陰影，Google Play 會以動態方式應用圓角遮蓋部分和陰影，確保所有應用/游戲圖標的設計保持一致。
圖標尺寸的規范主要是確保他們在物理尺寸上是一致的，至于視覺上怎么統一，還需要自己多去練習，這個后邊的文章中也會講到。
為特定的項目選擇特定的尺寸， 如果你為iOS或是Android設計圖標，在決定尺寸之前，你應該查看圖標規范，蘋果的HIG和安卓的Material Design都是你的設計指南。
另外，如果你是一個剛入行的UI設計師，建議開始從較大尺寸的圖標開始，比如64或96px，因為小尺寸的圖標難度更大（這包括像素對齊）。
OK，希望通過這篇文章的梳理，大家能對圖標的尺寸有更全面的認識，我們下期見。
下篇預告：圖標柵格及Keyline線畫法。
參考資料
https://developer.apple.com/design/human-interface-guidelines/ios/overview/themes/
https://developer.android.com/google-play/resources/icon-design-specifications?hl=zh-cn
https://material.io/design/iconography/system-icons.html#design-principles
作者：Fyin印跡；公眾號：印跡拾光
本文由 @Fyin印跡 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議
很不錯