今天來梳理下的圖標(biāo)設(shè)計(jì)流程及規(guī)范～圖標(biāo)是基本功，是個(gè)注重細(xì)節(jié)的東西，對(duì)設(shè)計(jì)有很大幫助，不要忽視哦

整個(gè)設(shè)計(jì)流程分為以下步驟：

    1.總結(jié)項(xiàng)目和業(yè)務(wù)的特點(diǎn)

    2.根據(jù)項(xiàng)目制作圖標(biāo)繪制規(guī)則

    3.平臺(tái)圖標(biāo)匯總優(yōu)化

    4.明確圖標(biāo)規(guī)范后后期維護(hù)更新流程

1.總結(jié)項(xiàng)目和業(yè)務(wù)的特點(diǎn)

    如：

        1.識(shí)別性：造型不要繁瑣、不要過多裝飾；需要有較高的易讀性和辨識(shí)度；

        2.品牌感：融入項(xiàng)目品牌和業(yè)務(wù)元素，提升用戶對(duì)品牌的好感；

        3.一致性：圖標(biāo)的風(fēng)格，如圓角、線條都需要保持一致，造型盡量保證偶數(shù)原則，去小數(shù)點(diǎn)。

2.圖標(biāo)繪制規(guī)則

2.1 icon命名規(guī)則

科學(xué)和高效的命名規(guī)則能夠幫助我們快速定位到自己制作的圖標(biāo)，加強(qiáng)團(tuán)隊(duì)效率。

可將圖標(biāo)分類，命名規(guī)范如以下規(guī)則： 「默認(rèn)狀態(tài)」：類別/圖標(biāo)名     「狀態(tài)」：類別/圖標(biāo)名/狀態(tài)

2.2 線性、面性使用建議和規(guī)則

根據(jù)平臺(tái)應(yīng)用場(chǎng)景，icon繪制分為【線條 & 填充】?jī)煞N形式，選中/強(qiáng)調(diào)狀態(tài)下使用實(shí)心樣式icon，使信息展示更明確。

• 線性圖標(biāo)是通過線條來表現(xiàn)物體的輪廓。

• 優(yōu)點(diǎn)：具有辨識(shí)度高，清晰，簡(jiǎn)約易識(shí)別等有點(diǎn)，可以減少視覺干擾，讓用戶集中在產(chǎn)品核心功能上。不同線條粗細(xì)圖標(biāo)帶來的視覺感受也不同，細(xì)線顯得精致，粗線顯得飽滿。

• 缺點(diǎn)：線性圖標(biāo)的創(chuàng)作空間較少，太復(fù)雜的線性圖標(biāo)對(duì)識(shí)別性產(chǎn)生較大的困擾。

• 面形圖標(biāo)是以面為主要表現(xiàn)形式的圖標(biāo)，通過線或者面去切割基礎(chǔ)輪廓面，通過分型來塑造圖標(biāo)的體積感。

• 優(yōu)點(diǎn)：具有表意能力強(qiáng)，視覺突出，情緒感強(qiáng)，創(chuàng)作空間大等優(yōu)點(diǎn)。面型圖標(biāo)的視覺面積較大，具有強(qiáng)烈的視覺表現(xiàn)力，短時(shí)間內(nèi)更加容易識(shí)別；

• 缺點(diǎn)：面性圖標(biāo)在頁(yè)面中不可過多出現(xiàn)，否則會(huì)造成頁(yè)面臃腫，難分主次，用戶視覺疲勞。

  
  

2.3 設(shè)計(jì)要點(diǎn)

1.?優(yōu)化基礎(chǔ)網(wǎng)格：優(yōu)化圖標(biāo)輸出的尺寸和視覺基準(zhǔn)區(qū)域；

2.優(yōu)化icon細(xì)節(jié)規(guī)范：繪制一個(gè)符合業(yè)務(wù)風(fēng)格的圖標(biāo)，將圖標(biāo)中的細(xì)節(jié)元素（圓角、筆畫末端等）進(jìn)行分解，并在規(guī)范中制定細(xì)節(jié)元素的使用法則；如下：

3.平臺(tái)圖標(biāo)匯總優(yōu)化

3.1 功能劃分

匯總項(xiàng)目圖標(biāo)，考慮圖標(biāo)的使用場(chǎng)景，將其分類；

3.2 圖標(biāo)細(xì)節(jié)調(diào)整

1. 干掉多余的節(jié)點(diǎn)，保持圖形的整潔；

2. 對(duì)小數(shù)點(diǎn)以及奇數(shù)進(jìn)行最后一遍的走查與修正；

3. 合并圖形，便于輸出；

4. 整潔的圖層管理。

4.明確圖標(biāo)后期維護(hù)更新流程

4.1 icon導(dǎo)出 

圖標(biāo)繪制完成后導(dǎo)出svg格式，上傳至iconfont指定項(xiàng)目組進(jìn)行統(tǒng)一管理，便于后期項(xiàng)目迭代。

4.2 icon管理和交付

完成圖標(biāo)后需要進(jìn)行視覺檢查，避免多余的線條或形狀，盡可能保持整潔。檢查所有線條是否都在標(biāo)準(zhǔn)框架內(nèi)，對(duì)圖標(biāo)精心設(shè)計(jì)評(píng)審，合格后再加入資源庫(kù)，這樣避免多人同時(shí)修改而造成混亂，同時(shí)提升團(tuán)隊(duì)協(xié)作效率。