系統圖標設計能準確反映出品牌的個性理念，并最有效傳達企業品牌形象。作者從自身工作經驗出發，分享了打造系統圖標的5大步驟。
系統圖標設計能準確反映出品牌的個性理念，并最有效傳達企業品牌形象。作者從自身工作經驗出發，分享了打造系統圖標的5大步驟。
今天我們聊聊如何做系統圖標規范，大家知道圖標在產品設計中有著非常重要的地位，它既能傳達功能屬性，也能傳達品牌，這就是為何圖標設計如此重要的原因。做手機系統的公司還有專門畫系統圖標的團隊。
為什么要做系統圖標規范？主要是為了便于設計師之間合作使用，指導設計師如何規范的去設計圖標，以確保企業所有產品圖標風格的一致性和可用性達到統一，同時也是為了后續產品更新迭代有可參考的地方。
下面我將通過5大步驟帶你掌握如何去定義系統圖標規范
- 風格設定
- 圖標網格
- 美學統一
- 輔助元素
- 命名系統
圖標風格如何定？一般都是根據產品定位，同時集合當下主流的趨勢去做圖標風格定義，最終得出圖標使用線的還是面的、還是卡通、色彩重疊或者還是彌撒漸變的？
我們做產品圖標設計切勿盲目跟風，一定要根據自己產品品牌去做，這里我告訴大家圖標風格定義三大原則：
- 符合產品調性
- 極致簡約
- 符合流行趨勢
舉個例子，首先要知道我們產品市場定位，了解品牌調性，比如是偏社交類（Facebook）還是獨特情懷（Spotify），或者純藝術類、工具類等等。每個不同領域產品，都有不同的個性與特征。這都是影響著我們后續整個系統圖標風格。
Spotify&Facebook
2. 極致簡約
圖標設計一定要簡單,清晰，遵循幾何造型，下面看兩個產品列子
Instagram&29CM
Uber 圖標
3. 符合流行趨勢
圖標設計一定要緊跟潮流，避免設計出來的系統圖標風格和目前主流趨勢大相徑庭，比如2020年流行什么樣的圖標？自己一定要有一個判斷。
平時多留意大公司產品動向，新視覺語言。比如之前蘋果最新系統IOS11 ，圖標由之前線的改成面的了。蘋果有著龐大的用戶體量，他們家新的視覺語言出來之前都會有大量研究調查，所以面圖標也許是未來的一個趨勢
02 圖標網格
網格設定是非常重要一步，這里我將基于Materials design 網格的基礎上來創建屬于我們自己的圖標網格。
藍色線框是繪圖的最大區域為20px，外框灰色區域大小是24px，中間有4px留白區域，也就是出血區域，Materials design圖標語言定義不允許圖標超出藍色框
這里定義系統圖標以1倍圖為基準，大小24px，線粗細1px，采用1:1的網格來繪制圖標(使用面型圖標還是線形圖標，前面可根據自己產品，品牌去定)。
03 美學統一
圖標最關鍵的在于視覺符號一致性，線條粗細一致，內外倒角一致，圖標傾斜角度方向遵循一定的設計規則，使用幾何造型并貼緊網格設計，保證在最小尺寸都清晰可見。
上面四個圖標為了便于清晰閱讀，被我放大了400倍(大家在這里把它看成4倍）為了便于理解與換算。
上面我列舉了4個例子，剛好把圖標幾種情況列舉出來，可能還不夠，不過我相信大家應該能明白，我們線傾斜角度必須要有規則，比如前面規則定的是5的倍數，后面都要跟隨這個。所有線條粗細一致，所有圖標內外倒角前期需定好?？聪缕渌咐阌诟羁汤斫?/p>
04 輔助元素
可能很少有人會留意到圖標輔助元素，在某些場景下單個圖標無法表示當前場景的意思，所以增加輔助元素，幫助用戶理解，減少認知負荷，那下面我們來先看兩個圖標。
第一個表示添加設備，第二個表示音樂鬧鐘。試想如果去掉左上角輔助元素，那么圖標還能表達當前功能的意思嗎？
那么輔助元素我們需要注意2點：
- 元素位置必須固定在一個方向，同個位置，便于用戶記憶，一般都是放在右上角或者右下角，這里說明下，一個產品的圖標系統，最好只出現一種樣式輔助元素，否則可能會導致混亂
- 風格必須統一，如果都加了底板，那么就統一加底板，下面三個圖標是沒有加底板的，形成一致風格
注意一般輔助元素的大小12X12px，不過大小可以根據情況而定，切割的地方寬度值要和之前定義單個線條粗細一樣。
05 命名系統
ICON命名要求極為嚴格，涉及到我們切圖給開發，所以我們命名爭取做對，且需嚴格遵守規則，那么我們該如何去命名？
這里我先說一些禁忌（安卓）
- 命名里面切記勿留空格：如btn _Home_new album
- 避免帶后綴數字：如@1，@2，@3的后綴不允許出現，我發現好多設計師都這樣做，這個絕對不標準；如btn_home_add@2,開發拿到資源會全部重新命名。如果我們遵守開發規則，那么切圖資源他們可直接調用
- c命名里面不允許夾帶大小寫：如icon _Home_search
因為安卓開發用java去寫編寫的，java本身就有命名要求， 有空格資源是無法識別的。也不允許有大小寫，除非是java本身文件。不允許有數字，可用字母去代替數字。
正確的命名原則：ic/btn_位置_功能_狀態
- ic_navbar_search_normal
- ic_toolbar_delete_normal
簡約命名方式：ic/btn_功能
- ic_like
- ic_download
- btn_add
- ic_global_search(全局使用必須加全局標識)
常用的命名簡寫模式
- ic(Icon)
- bg(background)
- di(divider)
- bt(bution)
- cl(color)
從第一步風格設定、到后面網格設定、美學風格和輔助元素，相信大家對于系統圖標的指導方針有一定的了解。
那么現在是否是可以把自家的產品圖標拿出來梳理一下呢（自驅力去解決之前圖標不規范問題），可以從這幾個步驟中，看能否梳理出一些常見問題，比如傾斜角度沒有規則，線條傾斜方向混亂，或者圖標視覺體量感是否一致等，這些都可能會影響到產品視覺風格一致性的關鍵原因。
當然圖標系統還有一些細節元素我就不再這里贅述了，比如下圖圖1中，圖標切割該去如何定義，圖2中圖標斷開的地方該多寬合適？規則如何去定？大家慢慢去思考吧！
#專欄作家#
TONY，公眾號：功夫UX，人人都是產品經理專欄作家。百度高級UI設計師，關注互聯網To C產品，關注物聯網車載方面，擅長產品界面設計，產品基礎設計語言定義，前瞻性設計風格探索。關注公眾號并回復“圖標網格”獲取圖標網格源文件一份。
題圖來自Unsplash，基于CC0協議
