手把手教你做設計規範（1）：圖示篇

圖示設計是介面設計中很重要的元素之一，一套高質量的圖示對產品的品牌形象和使用者的體驗影響是巨大的——不光能提升介面美觀度、降低使用者的理解成本，還能塑造品牌形象、提升使用者的安全感和轉化率。那麼做圖示設計時，需要注意什麼哪些規範與細節呢？

本系列文章分7篇梳理設計規範：色彩規範、字型規範、圖示規範、設計原則、文案規範、佈局規範、元件規範。

本篇是圖示規範篇。

目錄：

什麼是圖示

為什麼圖示很重要

設計原則

製圖規範

命名規範

一、什麼是圖示

簡單來說就是

有特殊含義的圖形。

具有指代意義的圖形符號，具有高度濃縮並快捷傳達資訊、便於記憶的特性。能夠快速的傳達資訊，將概念轉換成圖形，降低使用者的理解成本，並提升介面的美觀度。

現在使用的漢字也是圖示的一種。最早的象形文字也是為了記錄而產生的，後來又為了方便使用而不斷簡化，形成了現在的簡體漢字。這也是為什麼總覺得以前的隸書、篆書、繁體字等比較耐看，而現在的文字不太“美”的原因。之前的文字就是對大自然的一種圖示。具體點等文字篇詳聊。

圖示必須可快速理解

，根據使用者的習慣和認知，能否被識別是其存在的價值。

設計是服務業，是要為人服務的，不是表達自己態度的藝術。好的圖示要先好看（easy）然後更好看（ beautiful）。第一個好看是方便、簡單的意思，第二個好看是美麗、漂亮的意思。

二、為什麼圖示很重要

圖示設計是介面設計中很重要的元素之一，一套高質量的圖示對產品的品牌形象和使用者的體驗影響是巨大的。不光能提升介面美觀度、降低使用者的理解成本，還能塑造品牌形象、提升使用者的安全感和轉化率。

圖示姑且分兩種：一種是產品圖示類似天貓、支付寶、微信等，一種是系統圖標類似於首頁、搜尋、設定等。本篇規範重點針對系統圖標。

1。 圖示傳達資訊快

人本身對圖形的理解和接收能力就比單純的文字要快。圖形能更簡單清晰且很直觀的展示。

常說的意圖勝千言就是這個道理。

2。 圖示傳達資訊準

通用圖形能跨語言、跨地區、跨文化群體表達出同樣含義，不易發生混淆。同樣文化背景的人對文字理解可能會不一致。 如果用圖形就會一目瞭然。例如：我想買個筆記本就很模糊，有人第一反應是膝上型電腦，有人覺得是紙質的筆記本，看圖說話就沒有歧義了。

3。 品牌塑造穩定

同一個品牌、同一個平臺保持同樣的風格，會讓人感到很專業，知道自己始終在商家提供的環境裡，能提升安全感。例如優酷、58等優秀的產品。

三、設計原則

1。 易讀

圖示的根本價值就是資訊傳遞，如果不能被識別，其他都白扯。

2。 簡單

刪除掉多餘細節，只留下最主要的特徵。把最簡潔最準確的圖形呈現給使用者

3。 統一

同一套圖示要保持風格統一、線條粗細統一、夾角大小統一、視覺面積統一、顏色統一、正負形統一。

四、製圖規範

1。 大小尺寸

PC端的圖示常用 16 x 16 、24 x 24 、32 x 32 兩種尺寸。16 x 16 的圖示周圍預留1px的出血區。 24 x 24 、32 x 32 的圖示周圍預留2px的出血區。

安全區域

為了使圖示保持視覺效果一致，請根據圖示的形狀在安全區內繪製圖標，也可根據實際情況適當變形。

2。 貼合柵格線

請保證圖示的節點都貼合在柵格線上。避免出現小數點、奇數等數值。

3。 對齊

保持視覺對齊：

4。 輪廓化

使用圖形進行作業，不要使用描邊，以保證圖示放大使用時是保持一致的。

化繁為簡

去掉不必要的裝飾，保持圖示的清晰、整潔。

5。 簡化節點

刪除多餘的節點，保持圖形的清爽。

6。 線條

線條粗細為2px，可根據實際情況進行調整。

斜線看起來比豎線細。

7。 夾角

出現轉角的地方必須為30°倍數。

8。 倒角

倒角保持外圓內方，保持外部倒角為2 px， 內部倒角為直角。

五、命名規範

命名沒有特別規範，每個團隊都有自己的習慣。先問問跟開發小哥溝通好，看他們有什麼習慣，跟著做就好。

比較常用的命名格式是：模組_類別_功能_狀態。png 名稱用英文小寫和數字，不要出現漢字和大寫英文

舉例：登入頁的啟動圖示 login_icon_logo_nor@2x。png

作者：Iron設計邦；微信公眾號 IRON設計邦

本文由 @Iron設計邦 原創釋出於人人都是產品經理，未經作者許可，禁止轉載。

題圖來自Unsplash，基於CC0協議。