在UI設計中沟饥，我們經(jīng)常會遇到各種各樣的圖標添怔，導航欄區(qū)域的圖標籍茧、金剛區(qū)圖標傅瞻、tab欄圖標等，在不同的產(chǎn)品据悔、不同功能模塊的圖標樣式也是不同的幼驶，有面性艾杏、線性、線面結(jié)合盅藻、異性等等购桑。通過對常見圖標類型進行歸納，以及對不同圖標不同使用場景進行設計規(guī)范總結(jié)氏淑，我們在做UI設計時才會更加得心應手勃蜘，更加注重設計規(guī)范。
一假残、面性圖標
面性圖標是幾種圖標中最強的一種元旬，其次是線面結(jié)合圖標，最后是線性圖標守问。面性圖標的突顯性更強。對于如何選取哪一種圖標坑资，應該首先站在信息層級上去考慮耗帕。
1.1功能入口
在首頁金剛區(qū)中常采用面性圖標進行功能、業(yè)務的導流及流量分發(fā)袱贮，比如美團仿便、鏈家、淘寶等攒巍。但是也有些產(chǎn)品金剛區(qū)采用線性圖標嗽仪。
??那么為什么有的產(chǎn)品金剛區(qū)采用面性圖標有的采用線性圖標？
——考慮該模塊是否為該功能的核心出入口柒莉。如果整個產(chǎn)品此功能70%以上都是通過此模塊進入的闻坚，那么建議采用面性圖標；如果此功能還可以通過其他多個模塊進入兢孝，就可以采用線性圖標窿凤。
??設計解析
a.內(nèi)圖標與底板保持一定的呼吸感
也就是說里面的圖標不能太大仅偎，撐太滿，要有一定的留白呼吸感雳殊。
市場上一般有兩種處理方法：一是二者之間的比例約等于0.618（內(nèi)圖標與底板的比）橘沥；而是兩者比例接近1:2（裝飾元素與整個圖標的比）。
b.圖標的色彩保持四色原則與飽和度統(tǒng)一夯秃、漸變統(tǒng)一
金剛區(qū)的圖標色彩可以根據(jù)其業(yè)務屬性進行色彩選擇座咆，如外賣相關(guān)的可以選擇橙色，健康環(huán)保的可以選藍色綠色等等仓洼。在一個模塊色彩最好不超過四種顏色介陶。
在色彩上的處理也應保持所有圖標在視覺處理上是統(tǒng)一的。比如色彩選取區(qū)域衬潦、漸變方向等斤蔓。
c.簡約挖空
簡約挖空能讓圖標更加精致與出彩。如何做到讓圖標簡約镀岛，首先得在造型上簡約弦牡，其次再進行適當?shù)耐诳仗幚恚M行點綴弱化漂羊。值得借鑒的產(chǎn)品美團與支付寶驾锰。
1.2標題點綴
標題點綴的意義在于能讓用戶在快速閱讀中，快速找到心儀板塊走越。
??設計解析
a.五分原則椭豫。根據(jù)親密性原則，讓圖標離文字更近旨指，離頁邊更遠赏酥，兩種的比例為1:2。
b.圖標與文字高度保持一致谆构，或比文字略小裸扶。這樣看上去才更平衡。
c.圖標極簡原則搬素。此場景圖標一定要簡約呵晨，不能太復雜，達到區(qū)分性即可熬尺。
1.3列表流
列表流圖標能讓列表內(nèi)容更加豐富摸屠，吸引用戶去閱讀與快訊定位心儀內(nèi)容。值得借鑒ios設置頁面粱哼。
??設計解析
a.上下間距保持一致季二，左右間距保持一致。
b.圖標略高于文案
c.業(yè)務屬性相同的圖標色彩上保持一致揭措，圖標的視覺處理保持一致
d.圖標簡約
?為什么有的產(chǎn)品個人中心有統(tǒng)一底板戒傻，有的卻沒有税手？？
——在視覺呈現(xiàn)上追求統(tǒng)一感需纳，可采用底板芦倒；追求圖標的辨識度不用底板
1.4選中狀態(tài)
常見于tab欄的選擇狀態(tài)，或者點贊不翩、收藏等此類按鈕點擊后的狀態(tài)兵扬。能區(qū)分于其他圖標，讓用戶明白此時的位置與記錄自己的操作狀態(tài)口蝠。
??設計解析
a.選中顏色使用品牌色
b.統(tǒng)一設計范圍與視覺比重（采用圖標柵格系統(tǒng)進行處理）
c.視覺處理保持統(tǒng)一
?利于圖標柵格系統(tǒng)進行圖標視覺比重處理
這是很多初級設計師常常忽略的一個設計重點器钟。導致設計處理的圖標視覺比重不一致。圖標柵格系統(tǒng)能很好的規(guī)避這個問題妙蔗。
ant design里面有對圖標的設計規(guī)范有很好的說明
Ant Design 的圖標設計對于設計稿的分層也有一定的要求傲霸，其目的除了讓設計師實現(xiàn)有序的文檔管理之外，更多的是便于團隊間文檔的傳遞眉反，統(tǒng)一的設計框架像是無形的共識昙啄，可以讓彼此間的理解得到進一步的提升。
圖標柵格系統(tǒng)資源分享鏈接：https://pan.baidu.com/s/1ak0Fjz2XwerfRZwQjtpl4Q
2.主流面性圖標樣式總結(jié)
?白色面性微漸變
內(nèi)圖標采用白色到背景色的微漸變比直接用白色看上去更具有質(zhì)感與細節(jié)寸五。
?色塊不透明度疊加
色塊不透明的疊加類圖標更具有空間感梳凛，更豐富。
?微投影圖標
加上圖標顏色的微投影梳杏，讓圖標更細膩精致
二韧拒、線性圖標
2.1功能入口
非主流業(yè)務入口、或者平臺工具類產(chǎn)品使用居多十性。
??設計解析
a.視覺比例統(tǒng)一叛溢，利用圖標柵格系統(tǒng)去設計
b.顏色符號業(yè)務色
c.圓角數(shù)值不宜過大，一般3-4px
2.2輔助功能按鈕
輔助功能按鈕如feed流里面的點贊劲适、評論雇初、轉(zhuǎn)發(fā)等功能。線性的輔助功能圖標比面性輔助圖標呼吸感更強减响。
??設計解析
a.視覺比例統(tǒng)一，利用圖標柵格系統(tǒng)去設計
b.線條簡練郭怪，描邊粗細統(tǒng)一
c.圖標高度略大于文案支示，或保持一樣的高度（參考微博）
2.3列表流
??設計解析
a.上下邊距與頁邊距保持一致
b.線條簡練，描邊粗細統(tǒng)一鄙才，圓角統(tǒng)一
c.圖標高于文案
2.4選中狀態(tài)
對于選中狀態(tài)的處理建議還是選用面性圖標颂鸿。
??設計解析
a.選中顏色使用品牌色
b.統(tǒng)一設計范圍與視覺比重（采用圖標柵格系統(tǒng)進行處理）
c.視覺處理保持統(tǒng)一
主流線性圖標樣式總結(jié)
?選中圖標定制化（趣味性）
?斷點處理（形狀拼接處進行斷點處理，處理一定要克制）
?粗像素（更加個性化攒庵、突出）
