1 圖標(biāo)的定義
圖標(biāo)是具有高度概括性的每辟、用于視覺信息傳達(dá)的一種圖形化符號飞袋，最早可以追溯到洞穴壁畫。
圖標(biāo)可以分為廣義和狹義兩種怠益，廣義值得是所有現(xiàn)實(shí)中有明確指代含義的圖形符號渠牲，狹義主要是指在計(jì)算機(jī)設(shè)備界面中的圖像符號纱烘，有非常大的覆蓋范圍
2 圖標(biāo)的種類與設(shè)計(jì)風(fēng)格
圖標(biāo)大致可劃分為四大種類
導(dǎo)航圖標(biāo)
裝飾圖標(biāo)
啟動圖標(biāo)
活動運(yùn)營圖標(biāo)
2.1 導(dǎo)航圖標(biāo)
一般是指有明確功能曲楚、提示含義的圖標(biāo)幢痘，用與導(dǎo)航裂七，分流等皆看，但是不同頁面的導(dǎo)航圖標(biāo)出于信息層級和運(yùn)營的需 要，對于視覺風(fēng)格的要求也不一樣背零。
導(dǎo)航圖標(biāo)又可分為tabbar圖標(biāo)腰吟、金剛區(qū)圖標(biāo)、個人中心等功能性圖標(biāo)
Tab Bar圖標(biāo)常規(guī)表現(xiàn)為徙瓶，線性毛雇、面性、線面結(jié)合等倍啥，但是也會有注重品牌禾乘、個性化或者運(yùn)營活動 的，風(fēng)格會與品牌貼近虽缕，或者與近期時事活動相關(guān)
金剛區(qū)圖標(biāo)的風(fēng)格會比較多樣化始藕，通常來說視覺層級會更重蒲稳，設(shè)計(jì)感更強(qiáng)，通常以多色漸變風(fēng)格為主伍派，音樂類APP會以單色線性風(fēng)格強(qiáng)調(diào)品牌調(diào)性江耀，部分電商也會直接以實(shí)物展示。
個人中心等頁面的圖標(biāo)主要以裝飾性和解釋性為主诉植，去掉圖標(biāo)也不會影響整體導(dǎo)航祥国，圖標(biāo)設(shè)計(jì)風(fēng)格通常也不會過于復(fù)雜，多以線性風(fēng)格展示
2.2 裝飾圖標(biāo)
以裝飾和解釋性說明為主晾腔，主要作用是讓視覺整齊舌稀，觀賞性更強(qiáng)，品牌灼擂、氛圍感更強(qiáng)壁查，一般用在說明性和解釋性的界面，如運(yùn)營活動剔应、VIP權(quán)限等界面,視覺風(fēng)格跟隨頁面的調(diào)性來
2.3 啟動圖標(biāo)
啟動圖標(biāo)擔(dān)任著品牌標(biāo)識的功能睡腿，相當(dāng)于產(chǎn)品的logo設(shè)計(jì)，需要融入品牌調(diào)性峻贮，并且由于使用場景的限制席怪，也要求啟動圖標(biāo)遵循設(shè)計(jì)規(guī)范，保證最小尺寸小的識別狀態(tài),大多數(shù)圖標(biāo)均以以下形式展示纤控。
大部分的啟動圖標(biāo)不會設(shè)計(jì)得過于復(fù)雜挂捻，也是由于過于復(fù)雜的圖標(biāo)會增加用戶的認(rèn)知成本，尤其是在互聯(lián)網(wǎng)信息爆炸的時代嚼黔，使用扁平化圖標(biāo)可以有效地減少用戶的認(rèn)知成本细层，并通過加強(qiáng)色彩感知等方式來占領(lǐng)用戶心智。
2.4 活動運(yùn)營圖標(biāo)
活動運(yùn)營圖標(biāo)是有時效性的唬涧，設(shè)計(jì)主題跟風(fēng)格多與節(jié)日相關(guān)疫赎，主要是用來增加節(jié)日氛圍，提升點(diǎn)擊率等
3 常見圖標(biāo)的設(shè)計(jì)風(fēng)格
設(shè)計(jì)風(fēng)格并不是一成不變的，需要根據(jù)不同的場景以及用戶人群使用不同風(fēng)格的圖標(biāo)狮荔，如有運(yùn)營活動胎撇，也需要根據(jù)運(yùn)營做相關(guān)調(diào)性的風(fēng)格
圖標(biāo)的設(shè)計(jì)風(fēng)格大致可以分為以下幾類
線性風(fēng)格
面性風(fēng)格
插畫風(fēng)格
微擬物風(fēng)格
2.5D
3D
3.1線性風(fēng)格
此處只列舉了常見的設(shè)計(jì)形式，具體使用以及是否需要創(chuàng)新要看具體的使用場景
3.2 面性風(fēng)格
面性圖標(biāo)也可以分為無彩色殖氏、單色晚树、多色、漸變色等雅采，具體看使用場景
3.3 微擬物風(fēng)格
在一些小游戲或者H5活動中會常見這種設(shè)計(jì)風(fēng)格
3.4 2.5D風(fēng)格
3.5 3D扁平風(fēng)格
3d扁平風(fēng)格進(jìn)來也逐漸步入視線爵憎，隨著運(yùn)營需求提升和設(shè)計(jì)師技能進(jìn)步慨亲，相信不久之后會越來越多的看到這種風(fēng)格
4 圖標(biāo)的設(shè)計(jì)規(guī)范
在圖標(biāo)開始設(shè)計(jì)之前，要先對圖標(biāo)的規(guī)范有一個清晰的認(rèn)識
圖標(biāo)的設(shè)計(jì)規(guī)范大致要遵循的幾個規(guī)則
表意明確
保持一致性
像素對齊
切圖規(guī)范
借助柵格系統(tǒng)（視覺平衡宝鼓、像素對齊刑棵、切圖規(guī)范、切圖出血等）
品牌融合
4.1表意明確
圖標(biāo)大部分情況下是作為導(dǎo)航和解釋說明用的愚铡，所以表意明確是圖標(biāo)的基本功能蛉签，對于一些非常見類型的圖標(biāo)，在制作時要通過腦暴合理篩選關(guān)鍵詞沥寥，然后開始設(shè)計(jì)碍舍，設(shè)計(jì)完成后還要進(jìn)行一些簡單測試，可以向同事征詢意見营曼，詢問這個圖標(biāo)是不是可以表達(dá)相關(guān)意思乒验，如果答案是否愚隧，應(yīng)該問明原因蒂阱，多設(shè)計(jì)幾種方案，或者和同事們一起進(jìn)行腦暴狂塘。
4.2 圖標(biāo)的一致性
圖標(biāo)的一致性可以分為多種情況
設(shè)計(jì)風(fēng)格一致
視覺感受一致
線性圖標(biāo)粗細(xì)和倒角一致
角度一致
透視一致
特點(diǎn)一致
構(gòu)圖韻律一致
空間結(jié)構(gòu)一致（留白）
4.2.1 設(shè)計(jì)風(fēng)格一致
在同一功能區(qū)的圖標(biāo)录煤，需要保持設(shè)計(jì)風(fēng)格的統(tǒng)一性，如果用線性圖標(biāo)荞胡，就全部是線性圖標(biāo)妈踊，如果是面性圖標(biāo)，就統(tǒng)一使用面性圖標(biāo)
4.2.2 視覺感受一致
在視覺設(shè)計(jì)中我們會遇到一些視錯覺情況泪漂，以下列舉常見的幾種情況以及解決辦法廊营，保持視覺一致的方法并不是讓圖像的長寬一致，甚至圖形的物理尺寸一致時萝勤，視覺重量感受也是不一樣的露筒。以下左圖，矩形的視覺重量明顯更大敌卓，也沒有留白空間慎式，通過模糊化的圖形可以看到，三角型的視覺重量明顯偏小趟径，以下右圖調(diào)整之后瘪吏，可以看到視覺重量接近一致，不過視覺重量的判斷需要設(shè)計(jì)師多觀察蜗巧，多嘗試掌眠。
4.2.3 視覺中心一致
程序默認(rèn)的中心對齊方式很多時候并不能在視覺上平衡，這時我們一般需要通過調(diào)整使其在視覺上平衡幕屹。此外如果一個圖形其中一部分面積遠(yuǎn)大于另一部分蓝丙，那么就會讓這個圖形的中心產(chǎn)生便宜刑枝，必須要往較小部分的方向移動才能產(chǎn)生平衡。
4.2.4 粗細(xì)一致
4.2.5 正負(fù)形比例一致
面性圖標(biāo)中迅腔，要考慮到正形和負(fù)形的比例装畅，如下圖，白色面積應(yīng)在所有圖形中保持一致
4.2.6 透視一致
不統(tǒng)一的透視會造成空間的錯亂感沧烈，在繪制圖標(biāo)時應(yīng)考慮到從什么角度去觀察圖標(biāo)
4.2.7 角度一致
4.2.8 特點(diǎn)一致
一些圖標(biāo)會添加亮點(diǎn)或者特點(diǎn)掠兄，在圖標(biāo)設(shè)計(jì)過程中需要保證圖片整體的特點(diǎn)是一致的，如斷線風(fēng)格等
4.2.8 構(gòu)圖一致
構(gòu)圖時也應(yīng)該讓圖標(biāo)整體保持一致锌雀，保證圖標(biāo)在整體的節(jié)奏和韻律上時一致的
4.3 像素對齊
像素對齊算是老生常談蚂夕，個人認(rèn)為目前算是一種匠心精神或者對細(xì)節(jié)的極致追求，因?yàn)樵谝恍╉?xiàng)目中也會用到svg格式腋逆，或者圖片在不同屏幕尺寸適配之后婿牍，切圖尺寸不一定還能保持像素準(zhǔn)確，但至少在設(shè)計(jì)稿上還是應(yīng)該保持像素對齊
4.4 切圖規(guī)范
跟開發(fā)溝通最常溝通的就是標(biāo)注和切圖惩歉，為了方便開發(fā)使用等脂，通常給出的切圖是長寬相等的矩形切圖，此外還需要為圖標(biāo)留出一定的出血空間撑蚌，一方面保證切圖的熱區(qū)設(shè)置可以達(dá)到有效點(diǎn)擊范圍上遥，另一方面可以預(yù)留出圖標(biāo)的調(diào)整空間。
4.5 使用柵格
使用柵格系統(tǒng)可以有效地解決上述問題争涌，包括視覺重量的平衡粉楚，切圖的出血等等，借助sketch的symbol功能還可以使排版更方便亮垫，使用藍(lán)湖插件則課直接將symbol大小作為切圖大小模软，切圖更方便
5 品牌一致性
隨之越來越多的產(chǎn)品開始同質(zhì)化，品牌也越來越被重視饮潦，通過在圖標(biāo)中融入品牌基因的方法來加強(qiáng)品牌認(rèn)知
品牌基因提取的方法可以從兩個方面進(jìn)行
從logo中提取
從品牌氣質(zhì)中提取
從logo中提取
從品牌氣質(zhì)中提取燃异，通過提取品牌的氣質(zhì)來改變圖標(biāo)的個性
如網(wǎng)易嚴(yán)選圖標(biāo)，通過提取品牌氣質(zhì)來設(shè)計(jì)圖標(biāo)個性
6 圖標(biāo)自查手冊
綜上所述整理出圖標(biāo)自查手冊
1.功能明確
導(dǎo)航圖標(biāo)
裝飾圖標(biāo)
啟動圖標(biāo)
活動運(yùn)營圖標(biāo)
2.表意明確
非常見圖標(biāo)的含義表達(dá)
最小場景可識別性
3.一致性
設(shè)計(jì)風(fēng)格一致
視覺感受一致
線性圖標(biāo)粗細(xì)和倒角一致
角度一致
透視一致
特點(diǎn)一致
構(gòu)圖韻律一致
空間結(jié)構(gòu)一致（留白）
4.品牌調(diào)性
從logo中提取顏色和風(fēng)格
提取品牌氣質(zhì)
文章參考：
1.《小身材害晦，大影響特铝！設(shè)計(jì)師應(yīng)該知道的圖標(biāo)基礎(chǔ)知識》（https://www.uisdc.com/small-icon-big-impact）
2.《ICON設(shè)計(jì)教學(xué).1 —— 圖標(biāo)設(shè)計(jì)詳解》-超人的電話亭（https://www.ui.cn/detail/436051.html）
3.《菜心·圖標(biāo)自檢手冊》-菜心（http://www.reibang.com/p/67239eef3d43）
聲明：
圖片和素材來自網(wǎng)絡(luò)，侵刪
