手把手教你做設(shè)計規(guī)范(2):圖標篇
圖標設(shè)計是界面設(shè)計中很重要的元素之一,一套高質(zhì)量的圖標對產(chǎn)品的品牌形象和用戶的體驗影響是巨大的——不光能提升界面美觀度、降低用戶的理解成本,還能塑造品牌形象、提升用戶的安全感和轉(zhuǎn)化率。那么做圖標設(shè)計時,需要注意什么哪些規(guī)范與細節(jié)呢?
本系列文章分7篇梳理設(shè)計規(guī)范:色彩規(guī)范、字體規(guī)范、圖標規(guī)范、設(shè)計原則、文案規(guī)范、布局規(guī)范、組件規(guī)范。
本篇是圖標規(guī)范篇。
目錄:
- 什么是圖標
- 為什么圖標很重要
- 設(shè)計原則
- 制圖規(guī)范
- 命名規(guī)范
一、什么是圖標
簡單來說就是有特殊含義的圖形。
具有指代意義的圖形符號,具有高度濃縮并快捷傳達信息、便于記憶的特性。能夠快速的傳達信息,將概念轉(zhuǎn)換成圖形,降低用戶的理解成本,并提升界面的美觀度。
現(xiàn)在使用的漢字也是圖標的一種。最早的象形文字也是為了記錄而產(chǎn)生的,后來又為了方便使用而不斷簡化,形成了現(xiàn)在的簡體漢字。這也是為什么總覺得以前的隸書、篆書、繁體字等比較耐看,而現(xiàn)在的文字不太“美”的原因。之前的文字就是對大自然的一種圖標。具體點等文字篇詳聊。
圖標必須可快速理解,根據(jù)用戶的習(xí)慣和認知,能否被識別是其存在的價值。
設(shè)計是服務(wù)業(yè),是要為人服務(wù)的,不是表達自己態(tài)度的藝術(shù)。好的圖標要先好看(easy)然后更好看(?beautiful)。第一個好看是方便、簡單的意思,第二個好看是美麗、漂亮的意思。
二、為什么圖標很重要
圖標設(shè)計是界面設(shè)計中很重要的元素之一,一套高質(zhì)量的圖標對產(chǎn)品的品牌形象和用戶的體驗影響是巨大的。不光能提升界面美觀度、降低用戶的理解成本,還能塑造品牌形象、提升用戶的安全感和轉(zhuǎn)化率。
圖標姑且分兩種:一種是產(chǎn)品圖標類似天貓、支付寶、微信等,一種是系統(tǒng)圖標類似于首頁、搜索、設(shè)置等。本篇規(guī)范重點針對系統(tǒng)圖標。
1. 圖標傳達信息快
人本身對圖形的理解和接收能力就比單純的文字要快。圖形能更簡單清晰且很直觀的展示。
常說的意圖勝千言就是這個道理。
2. 圖標傳達信息準
通用圖形能跨語言、跨地區(qū)、跨文化群體表達出同樣含義,不易發(fā)生混淆。同樣文化背景的人對文字理解可能會不一致。 如果用圖形就會一目了然。例如:我想買個筆記本就很模糊,有人第一反應(yīng)是筆記本電腦,有人覺得是紙質(zhì)的筆記本,看圖說話就沒有歧義了。
3. 品牌塑造穩(wěn)定
同一個品牌、同一個平臺保持同樣的風(fēng)格,會讓人感到很專業(yè),知道自己始終在商家提供的環(huán)境里,能提升安全感。例如優(yōu)酷、58等優(yōu)秀的產(chǎn)品。
三、設(shè)計原則
1. 易讀
圖標的根本價值就是信息傳遞,如果不能被識別,其他都白扯。
2. 簡單
刪除掉多余細節(jié),只留下最主要的特征。把最簡潔最準確的圖形呈現(xiàn)給用戶
3. 統(tǒng)一
同一套圖標要保持風(fēng)格統(tǒng)一、線條粗細統(tǒng)一、夾角大小統(tǒng)一、視覺面積統(tǒng)一、顏色統(tǒng)一、正負形統(tǒng)一。
四、制圖規(guī)范
1. 大小尺寸
PC端的圖標常用 16 x 16 、24 x 24 、32 x 32 ?兩種尺寸。16 x 16 的圖標周圍預(yù)留1px的出血區(qū)。?24 x 24 、32 x 32 的圖標周圍預(yù)留2px的出血區(qū)。
安全區(qū)域
為了使圖標保持視覺效果一致,請根據(jù)圖標的形狀在安全區(qū)內(nèi)繪制圖標,也可根據(jù)實際情況適當變形。
2. 貼合柵格線
請保證圖標的節(jié)點都貼合在柵格線上。避免出現(xiàn)小數(shù)點、奇數(shù)等數(shù)值。
3. 對齊
保持視覺對齊:
4. 輪廓化
使用圖形進行作業(yè),不要使用描邊,以保證圖標放大使用時是保持一致的。
化繁為簡
去掉不必要的裝飾,保持圖標的清晰、整潔。
5. 簡化節(jié)點
刪除多余的節(jié)點,保持圖形的清爽。
6. 線條
線條粗細為2px,可根據(jù)實際情況進行調(diào)整。
斜線看起來比豎線細。
7. 夾角
出現(xiàn)轉(zhuǎn)角的地方必須為30°倍數(shù)。
8. 倒角
倒角保持外圓內(nèi)方,保持外部倒角為2 px, 內(nèi)部倒角為直角。
五、命名規(guī)范
命名沒有特別規(guī)范,每個團隊都有自己的習(xí)慣。先問問跟開發(fā)小哥溝通好,看他們有什么習(xí)慣,跟著做就好。
比較常用的命名格式是:模塊_類別_功能_狀態(tài).png ?名稱用英文小寫和數(shù)字,不要出現(xiàn)漢字和大寫英文
舉例:登錄頁的啟動圖標 ? login_icon_logo_nor@2x.png
作者:Iron設(shè)計邦;微信公眾號?IRON設(shè)計邦
本文由 @Iron設(shè)計邦 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。
題圖來自Unsplash,基于CC0協(xié)議。
- 目前還沒評論,等你發(fā)揮!