手把手教你做設計規范(2):圖標篇

0 評論 15176 瀏覽 50 收藏 8 分鐘

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

本系列文章分7篇梳理設計規范:色彩規范、字體規范、圖標規范、設計原則、文案規范、布局規范、組件規范。

本篇是圖標規范篇。

目錄:

  1. 什么是圖標
  2. 為什么圖標很重要
  3. 設計原則
  4. 制圖規范
  5. 命名規范

一、什么是圖標

簡單來說就是有特殊含義的圖形。

具有指代意義的圖形符號,具有高度濃縮并快捷傳達信息、便于記憶的特性。能夠快速的傳達信息,將概念轉換成圖形,降低用戶的理解成本,并提升界面的美觀度。

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

圖標必須可快速理解,根據用戶的習慣和認知,能否被識別是其存在的價值。

設計是服務業,是要為人服務的,不是表達自己態度的藝術。好的圖標要先好看(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協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!