莫b

今天我們聊聊如何做系統圖標規范,大家知道圖標在產品設計中有著非常重要的地位,它既能傳達功能屬性,也能傳達品牌,這就是為何圖標設計如此重要的原因。做手機系統的公司還有專門畫系統圖標的團隊。

為什么要做系統圖標規范?主要是為了便于設計師之間合作使用,指導設計師如何規范的去設計圖標,以確保企業所有產品圖標風格的一致性和可用性達到統一,同時也是為了后續產品更新迭代有可參考的地方。
下面我將通過5大步驟帶你掌握如何去定義系統圖標規范
1.? 風格設定
2.? 圖標網格
3.? 美學統一
4.? 輔助元素
5.? 命名系統
?

風格設定

圖標風格如何定?一般都是根據產品定位,同時集合當下主流的趨勢去做圖標風格定義,最終得出圖標使用線的還是面的、還是卡通、色彩重疊或者還是彌撒漸變的?我們做產品圖標設計切勿盲目跟風,一定要根據自己產品品牌去做,這里我告訴大家圖標風格定義三大原則。
a.符合產品調性,b.極致簡約,c.-符合流行趨勢

 

a.符合產品調性

舉個例子,首先要知道我們產品市場定位,了解品牌調性,比如是偏社交類(Facebook)還是獨特情懷(Spotify),或者純藝術類、工具類等等。每個不同領域產品,都有不同的個性與特征。這都是影響著我們后續整個系統圖標風格。

Spotify&Facebook

 

b.極致簡約

圖標設計一定要簡單,清晰,遵循幾何造型,下面看兩個產品列子

Instagram&29CM

 

Uber 圖標

 

c.符合流行趨勢

圖標設計一定要緊跟潮流,避免設計出來的系統圖標風格和目前主流趨勢大相徑庭,比如2020年流行什么樣的圖標?自己一定要有一個判斷。平時多留意大公司產品動向,新視覺語言。比如之前蘋果最新系統IOS11 ,圖標由之前線的改成面的了。蘋果有著龐大的用戶體量,他們家新的視覺語言出來之前都會有大量研究調查,所以面圖標也許是未來的一個趨勢

?

圖標網格

網格設定是非常重要一步,這里我將基于Materials design 網格的基礎上來創建屬于我們自己的圖標網格。

藍色線框是繪圖的最大區域為20px,外框灰色區域大小是24px,中間有4px留白區域,也就是出血區域,Materials design圖標語言定義不允許圖標超出藍色框
這里定義系統圖標以1倍圖為基準,大小24px,線粗細1px,采用1:1的網格來繪制圖標(使用面型圖標還是線形圖標,前面可根據自己產品,品牌去定)。

 

美學統一

圖標最關鍵的在于視覺符號一致性,線條粗細一致,內外倒角一致,圖標傾斜角度方向遵循一定的設計規則,使用幾何造型并貼緊網格設計,保證在最小尺寸都清晰可見。

上面四個圖標為了便于清晰閱讀,被我放大了400倍(大家在這里把它看成4倍)為了便于理解與換算。上面我列舉了4個例子,剛好把圖標幾種情況列舉出來,可能還不夠,不過我相信大家應該能明白,我們線傾斜角度必須要有規則,比如前面規則定的是5的倍數,后面都要跟隨這個。所有線條粗細一致,所有圖標內外倒角前期需定好。

看下其他案例便于更深刻理解

 

輔助元素

可能很少有人會留意到圖標輔助元素,在某些場景下單個圖標無法表示當前場景的意思,所以增加輔助元素,幫助用戶理解,減少認知負荷,那下面我們來先看兩個圖標。

第一個表示添加設備,第二個表示音樂鬧鐘。試想如果去掉左上角輔助元素,那么圖標還能表達當前功能的意思嗎?
那么輔助元素我們需要注意2點:

 

a. 元素位置必須固定在一個方向,同個位置,便于用戶記憶,一般都是放在右上角或者右下角,這里說明下,一個產品的圖標系統,最好只出現一種樣式輔助元素,否則可能會導致混亂。

 

b. 風格必須統一,如果都加了底板,那么就統一加底板,下面三個圖標是沒有加底板的,形成一致風格

注意一般輔助元素的大小12X12px,不過大小可以根據情況而定,切割的地方寬度值要和之前定義單個線條粗細一樣。

 

命名系統

ICON命名要求極為嚴格,涉及到我們切圖給開發,所以我們命名爭取做對,且需嚴格遵守規則,那么我們該如何去命名?

這里我先說一些禁忌(安卓)

a ?命名里面切記勿留空格:如btn _Home_new album

 

b. ?避免帶后綴數字:如@1,@2,@3的后綴不允許出現,我發現好多設計師都這樣做,這個絕對不標準;如[email protected],開發拿到資源會全部重新命名。如果我們遵守開發規則,那么切圖資源他們可直接調用

 

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中圖標斷開的地方該多寬合適?規則如何去定?大家慢慢去思考吧?。ɑ蛘呖梢赃M我的設計交流群大家一起討論)

?
最后關注公眾號并回復“圖標網格”獲取圖標網格源文件一份。

 

原文地址:功夫UX(公眾號)

作者:?LoveXiaoTao

 

轉載請注明:學UI網 » 5 招輕松打造系統圖標規范

登錄收藏
 
你可能喜歡的:
輕擬物設計解析&案例演示輕擬物設計解析&案例演示
后臺系統從0開始設計的前提與方法后臺系統從0開始設計的前提與方法
移動端表單表格設計移動端表單表格設計
光音移動設計規范 — 表單類光音移動設計規范 — 表單類
手殘照樣畫出一套自己的貼紙!手殘照樣畫出一套自己的貼紙!
如何做好一套設計系統?比設計規范更進一步如何做好一套設計系統?比設計規范更進一步
花了半年時間,我們做了一套通用型移動設計規范給大家花了半年時間,我們做了一套通用型移動設計規范給大家
經歷數百次改版,總結出如何規范化做好設計改版經歷數百次改版,總結出如何規范化做好設計改版
被說圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則被說圖標細節不夠,到底差在哪?高手總結了這10條關鍵原則
從「科學方法」到「設計實踐」 – 云產品設計師會夢見服務器么?從「科學方法」到「設計實踐」 – 云產品設計師會夢見服務器么?
?
网球比分雷速 江西多乐彩11选五走势图 山西11选5任选五推荐号 双色球计算公式99% 安徽15选5开奖号码走势图 江西11选5前三直选遗漏数据 湖北l1选5开奖结果 双色球最准十家专家 贵州11选5动先走势图 体彩甘肃11选五怎么玩 二肖四码默认论坛网址