国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

系統(tǒng)圖標設計能準確反映出品牌的個性理念，并最有效傳達企業(yè)品牌形象。作者從自身工作經(jīng)驗出發(fā)，分享了打造系統(tǒng)圖標的5大步驟。

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

為什么要做系統(tǒng)圖標規(guī)范？主要是為了便于設計師之間合作使用，指導設計師如何規(guī)范的去設計圖標，以確保企業(yè)所有產(chǎn)品圖標風格的一致性和可用性達到統(tǒng)一，同時也是為了后續(xù)產(chǎn)品更新迭代有可參考的地方。

下面我將通過5大步驟帶你掌握如何去定義系統(tǒng)圖標規(guī)范

1. 風格設定
2. 圖標網(wǎng)格
3. 美學統(tǒng)一
4. 輔助元素
5. 命名系統(tǒng)

01 風格設定

圖標風格如何定？一般都是根據(jù)產(chǎn)品定位，同時集合當下主流的趨勢去做圖標風格定義，最終得出圖標使用線的還是面的、還是卡通、色彩重疊或者還是彌撒漸變的？

我們做產(chǎn)品圖標設計切勿盲目跟風，一定要根據(jù)自己產(chǎn)品品牌去做，這里我告訴大家圖標風格定義三大原則：

1. 符合產(chǎn)品調(diào)性
2. 極致簡約
3. 符合流行趨勢

1. 符合產(chǎn)品調(diào)性

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

Spotify&Facebook

2. 極致簡約

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

Instagram&29CM

Uber 圖標

3. 符合流行趨勢

圖標設計一定要緊跟潮流，避免設計出來的系統(tǒng)圖標風格和目前主流趨勢大相徑庭，比如2020年流行什么樣的圖標？自己一定要有一個判斷。

平時多留意大公司產(chǎn)品動向，新視覺語言。比如之前蘋果最新系統(tǒng)IOS11 ，圖標由之前線的改成面的了。蘋果有著龐大的用戶體量，他們家新的視覺語言出來之前都會有大量研究調(diào)查，所以面圖標也許是未來的一個趨勢

02 圖標網(wǎng)格

網(wǎng)格設定是非常重要一步，這里我將基于Materials design 網(wǎng)格的基礎上來創(chuàng)建屬于我們自己的圖標網(wǎng)格。

藍色線框是繪圖的最大區(qū)域為20px，外框灰色區(qū)域大小是24px，中間有4px留白區(qū)域，也就是出血區(qū)域，Materials design圖標語言定義不允許圖標超出藍色框

這里定義系統(tǒng)圖標以1倍圖為基準，大小24px，線粗細1px，采用1:1的網(wǎng)格來繪制圖標(使用面型圖標還是線形圖標，前面可根據(jù)自己產(chǎn)品，品牌去定)。

03 美學統(tǒng)一

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

上面四個圖標為了便于清晰閱讀，被我放大了400倍(大家在這里把它看成4倍）為了便于理解與換算。

上面我列舉了4個例子，剛好把圖標幾種情況列舉出來，可能還不夠，不過我相信大家應該能明白，我們線傾斜角度必須要有規(guī)則，比如前面規(guī)則定的是5的倍數(shù)，后面都要跟隨這個。所有線條粗細一致，所有圖標內(nèi)外倒角前期需定好。看下其他案例便于更深刻理解

04 輔助元素

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

第一個表示添加設備，第二個表示音樂鬧鐘。試想如果去掉左上角輔助元素，那么圖標還能表達當前功能的意思嗎？

那么輔助元素我們需要注意2點：

1. 元素位置必須固定在一個方向，同個位置，便于用戶記憶，一般都是放在右上角或者右下角，這里說明下，一個產(chǎn)品的圖標系統(tǒng)，最好只出現(xiàn)一種樣式輔助元素，否則可能會導致混亂
2. 風格必須統(tǒng)一，如果都加了底板，那么就統(tǒng)一加底板，下面三個圖標是沒有加底板的，形成一致風格

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

05 命名系統(tǒng)

ICON命名要求極為嚴格，涉及到我們切圖給開發(fā)，所以我們命名爭取做對，且需嚴格遵守規(guī)則，那么我們該如何去命名？

這里我先說一些禁忌（安卓）

1. 命名里面切記勿留空格：如btn _Home_new album
2. 避免帶后綴數(shù)字：如@1，@2，@3的后綴不允許出現(xiàn)，我發(fā)現(xiàn)好多設計師都這樣做，這個絕對不標準；如btn_home_add@2,開發(fā)拿到資源會全部重新命名。如果我們遵守開發(fā)規(guī)則，那么切圖資源他們可直接調(diào)用
3. c命名里面不允許夾帶大小寫：如icon _Home_search

因為安卓開發(fā)用java去寫編寫的，java本身就有命名要求， 有空格資源是無法識別的。也不允許有大小寫，除非是java本身文件。不允許有數(shù)字，可用字母去代替數(shù)字。

正確的命名原則：ic/btn_位置_功能_狀態(tài)

• 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)

總結

從第一步風格設定、到后面網(wǎng)格設定、美學風格和輔助元素，相信大家對于系統(tǒng)圖標的指導方針有一定的了解。

那么現(xiàn)在是否是可以把自家的產(chǎn)品圖標拿出來梳理一下呢（自驅(qū)力去解決之前圖標不規(guī)范問題），可以從這幾個步驟中，看能否梳理出一些常見問題，比如傾斜角度沒有規(guī)則，線條傾斜方向混亂，或者圖標視覺體量感是否一致等，這些都可能會影響到產(chǎn)品視覺風格一致性的關鍵原因。

當然圖標系統(tǒng)還有一些細節(jié)元素我就不再這里贅述了，比如下圖圖1中，圖標切割該去如何定義，圖2中圖標斷開的地方該多寬合適？規(guī)則如何去定？大家慢慢去思考吧！

#專欄作家#

Tony，微信公眾號：洞見設計，人人都是產(chǎn)品經(jīng)理專欄作家。百度設計師。很樂意幫助年輕設計師成長，簡歷指導，每周分享最有價值的設計經(jīng)驗，擅長產(chǎn)品體驗設計，關注【洞見設計】后臺回復“彩蛋”領取設計資料。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載

題圖來自Unsplash，基于CC0協(xié)議