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

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

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

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

1. 風(fēng)格設(shè)定
2. 圖標(biāo)網(wǎng)格
3. 美學(xué)統(tǒng)一
4. 輔助元素
5. 命名系統(tǒng)

01 風(fēng)格設(shè)定

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

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

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

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

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

Spotify&Facebook

2. 極致簡(jiǎn)約

圖標(biāo)設(shè)計(jì)一定要簡(jiǎn)單,清晰，遵循幾何造型，下面看兩個(gè)產(chǎn)品列子

Instagram&29CM

Uber 圖標(biāo)

3. 符合流行趨勢(shì)

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

平時(shí)多留意大公司產(chǎn)品動(dòng)向，新視覺(jué)語(yǔ)言。比如之前蘋(píng)果最新系統(tǒng)IOS11 ，圖標(biāo)由之前線的改成面的了。蘋(píng)果有著龐大的用戶(hù)體量，他們家新的視覺(jué)語(yǔ)言出來(lái)之前都會(huì)有大量研究調(diào)查，所以面圖標(biāo)也許是未來(lái)的一個(gè)趨勢(shì)

02 圖標(biāo)網(wǎng)格

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

藍(lán)色線框是繪圖的最大區(qū)域?yàn)?0px，外框灰色區(qū)域大小是24px，中間有4px留白區(qū)域，也就是出血區(qū)域，Materials design圖標(biāo)語(yǔ)言定義不允許圖標(biāo)超出藍(lán)色框

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

03 美學(xué)統(tǒng)一

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

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

上面我列舉了4個(gè)例子，剛好把圖標(biāo)幾種情況列舉出來(lái)，可能還不夠，不過(guò)我相信大家應(yīng)該能明白，我們線傾斜角度必須要有規(guī)則，比如前面規(guī)則定的是5的倍數(shù)，后面都要跟隨這個(gè)。所有線條粗細(xì)一致，所有圖標(biāo)內(nèi)外倒角前期需定好?？聪缕渌咐阌诟羁汤斫?/strong>