ICON規(guī)范總結(jié)
icon是UI設(shè)計中的基礎(chǔ),一個好的icon能提升界面的美觀度,也可以降低用戶的理解成本

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
























