1、ICON

圖標是具有指代意義的圖形，也是一種標識。通過使用圖標表達一種圖形化概念，強調(diào)狀態(tài)，表示產(chǎn)品、功能或類別。 它區(qū)分了與其他圖形不同的含義，美麗令人難忘的圖標能瞬間抓住用戶的注意力，在場景中脫穎而出，便于用戶快速與之產(chǎn)生對話（交互）。

圖標已經(jīng)在人生生活中發(fā)揮至關(guān)重要的作用，平常到你可能都覺察不到，你每天打開的手機，里面排滿了啟動圖標，每一個啟動圖標下頁面里的icon，你乘坐的地鐵，商場里的指引，電梯里的按鈕，各種智能設(shè)備上的按鍵，圖標讓人們快速的理解了場景中的含義。然而在一套產(chǎn)品體系內(nèi)，具有美觀、清晰、一致的icon需要設(shè)計師在方寸之間更多努力、關(guān)注細節(jié)。

2、設(shè)計規(guī)范

統(tǒng)一的設(shè)計規(guī)范可以保持不同項目成員在設(shè)計時的一致性，以及建立公司統(tǒng)一共用的圖標庫?；A(chǔ)Icon統(tǒng)一在AI中繪制，可復制到ps、skech中使用。

主要參照： 

Google的material design https://wiki.jikexueyuan.com/project/material-design/style/icons.html

螞蟻金服的Ant design http://design.alipay.com/design/web/icon

方寸之間，皆有講究 http://www.zuodeer.cn/article/ZNDY2MTQ4.html

3、尺寸

關(guān)鍵輪廓線，視覺比例柵格，常用24px/32px。建議畫32px，2px描邊，2px邊距，居中描邊，然后擴展形狀到其他場景中使用，盡量整數(shù)倍放大縮小去使用。

AI中繪制技巧：

創(chuàng)建px、rgb模式文檔

先設(shè)置網(wǎng)格4x4(打開首選項，參考線與網(wǎng)格，網(wǎng)格線間隔4px，次分隔線4）

繪制32px方形，填充#000 10%作為bg，繪制輔助參考線用最細的描邊,將參考線打成組，接下來就可以制作icon了，保證圖層的清晰，可以如下圖。

附下圖按規(guī)范整理圖標：

注：也可以用ios圖標規(guī)范畫法，1024px畫布，注意留白，64px線條

4、細節(jié)

簡約可識別。

筆畫一致，對齊像素，單數(shù)像素不要用居中對齊，用內(nèi)對齊

圓角大小統(tǒng)一，圖形簡單，去透視，去斷線等風格

（簡單的圖形語言以及高辨識度，保持圖標之間一致的風格和表現(xiàn)方式）

繪制參照，然后上傳http://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.14&helptype=draw

可以方便前端、銷售、方案或其他部門同事使用

5、Icon命名規(guī)范

主要是切圖命名規(guī)范，統(tǒng)一英文小寫命名， 用在什么頁面可命名為：login_button_pressed

用在功能模塊處可名為：nav_menu

常規(guī)命名：icon_xx，img_xx

應盡量保證命名精簡易理解。

6、切圖規(guī)范

圖標統(tǒng)一切圖尺寸，留有邊界

7、業(yè)務圖標

原則上一致，需要更多細節(jié)，可根據(jù)具體情況調(diào)整

8、Icon的演化

先做到產(chǎn)品體系內(nèi)的規(guī)范統(tǒng)一，方便后續(xù)擴展演化

方向1：1px細線條 → 粗線條 → 透明度 → 多彩 →組合

方向2：加裝飾

方向3：改面狀 → 改漸變 → 改多彩

方向4：改線面 → MBE → 插畫風

方向5：改高光陰影 → 實體

附由標準icon可以去演化的方向，下圖icon來源于網(wǎng)絡僅表示icon的種類，。

THANKS