文章大綱：
一、存在意義二、多維度分類
I.按功能分類
II.按表現(xiàn)形式分類
III.按設(shè)計風(fēng)格分類
三、圖標(biāo)繪制四、運用場景與選擇圖標(biāo)五、寫給設(shè)計師
一、存在意義
UI設(shè)計中，icon是重要組成部分，相對于使用文字，icon表達(dá)會讓效果更清晰，
對于信息傳播和視覺效果表達(dá)都有重要意義。
圖片對比
1.純文字與圖標(biāo)使用對比，圖標(biāo)從視覺上更簡潔易識別，閱讀性更強(qiáng)
2.純文字與文字+圖標(biāo)，這里舉兩個例子
金剛區(qū)去掉圖標(biāo)后，頁面缺少icon點綴，顯得很枯燥，目前的UI視覺設(shè)計中線性與面型圖標(biāo)哪個好，也是設(shè)計手法是不允許的。
選用的是百詞斬個人中心，即使原頁面icon存在感也是選用的視覺感偏弱的線性圖標(biāo)，在去掉后，頁面層次感和閱讀性就降低很多，可以嘗試僅僅從icon找某個功能。
一定會比僅文字快，時間成本會相對降低，也說明了設(shè)計icon時，尤其是說明性和交互性圖標(biāo)，準(zhǔn)確度要高。
如果原設(shè)計是面性圖標(biāo)對比感受會更明顯。
二.多緯度分類
圖標(biāo)應(yīng)用廣泛，單一從風(fēng)格分類是無法做到全面了解的，廣度和深度也達(dá)不到全面認(rèn)識，概念也不清晰。針對這一問題，我以廣度為橫軸，將它分為功能，表現(xiàn)形式和設(shè)計風(fēng)格三大類，逐個縱向挖深。
功能分類
按功能分類：交互性圖標(biāo)，裝飾性圖標(biāo)和說明性圖標(biāo)。
1.交互性圖標(biāo)
具有雙向信息傳遞能力，不僅可以向用戶傳遞某種信息，引導(dǎo)幫助用戶執(zhí)行特定操作，同時也允許用戶向程序傳遞控制信息，從功能重要程度來講，它的重要性是最高的。
比如：登陸注冊按鈕，開關(guān)按鈕，數(shù)量按鈕，點贊，轉(zhuǎn)發(fā)分享等都屬于交互性圖標(biāo)。
2.裝飾性圖標(biāo)
主要為了提高頁面設(shè)計性，加深個性化設(shè)計風(fēng)格，與此同時，提升用戶線上體驗感，迎合受眾群的偏好，提升設(shè)計親和度。
常見的比如：符合節(jié)日需求時，線上活動呼應(yīng)，圖標(biāo)個性化。比如：頁面升級，空頁面，獎勵，用戶等級等都屬于裝飾性圖標(biāo)。
3.說明性圖標(biāo)
闡明信息圖標(biāo)類型，區(qū)分不同功能或內(nèi)容的視覺標(biāo)記；簡單的說，就是對功能的解釋說明。
常見的比如：表現(xiàn)行業(yè)特性時，金剛區(qū)或個別功能區(qū)icon設(shè)計；面向不同用戶群體時，選擇風(fēng)格設(shè)計，早教類APP與健康類APP對比就很明顯。
首頁圖標(biāo)也都屬于，以美團(tuán)為例子，它結(jié)合了線性圖標(biāo)，漸變面形圖標(biāo)，將金剛區(qū)分為三部分，增強(qiáng)頁面的層次感和識別度。
表現(xiàn)形式分類
按表現(xiàn)形式分類：象形圖標(biāo)，隱喻圖標(biāo)，工具圖標(biāo)和混合圖標(biāo)
1.象形圖標(biāo)
起初，設(shè)計師為了保證高識別度，降低學(xué)習(xí)引導(dǎo)成本，寫實性icon對生活的映射更貼切，用戶也會將其與實物相聯(lián)系。
ios相當(dāng)長一段時間流行 “設(shè)計理念”，它就屬于超寫實設(shè)計。并且認(rèn)為只要有可能，在應(yīng)用上增加現(xiàn)實的、物理的緯度，與現(xiàn)實越相像，操作越相同，就越容易使用戶理解運作模式，接受度就越高。
2.隱喻圖標(biāo)
兩種不相關(guān)但卻有著某種相似特質(zhì)的事物用icon的方式鏈接起來，達(dá)到記憶和使用目的。比如：設(shè)置與工具，云端與云，購物與袋子，會員與鉆石或皇冠等等。
3.工具圖標(biāo)
主要以行業(yè)類別為分類，使用范圍廣泛，大眾或行內(nèi)人士識別度高，且被長期使用。比如：建筑行業(yè)，醫(yī)療行業(yè)，化工行業(yè)等等。
4.混合圖標(biāo)
也就是前三種的結(jié)合，目的在于達(dá)到不同的視覺效果和應(yīng)用結(jié)構(gòu)。前段時間追波很流行的MBE粗描邊風(fēng)格icon就是綜合圖標(biāo)的產(chǎn)物，多表達(dá)設(shè)計師個人設(shè)計風(fēng)格或適用某類設(shè)計感較強(qiáng)的軟件。
設(shè)計風(fēng)格分類
按設(shè)計風(fēng)格分類：面性圖標(biāo)，線性圖標(biāo)，扁平圖標(biāo)，擬物圖標(biāo)，2.5D圖標(biāo)和桌面應(yīng)用圖標(biāo)
1.面性圖標(biāo)
使用范圍最廣，穩(wěn)定性強(qiáng)，區(qū)分頁面層次感更高。設(shè)計UI頁面時，使用也要從頁面層級關(guān)系和產(chǎn)品功能角度考慮具體運用。
面性圖標(biāo)的分類也有很多，不僅僅只有常規(guī)的，還有多色，漸變，不透明疊加，插畫，扁平投影等等。
2.線性圖標(biāo)
使用感更輕盈，精致度更高，簡約風(fēng)格頁面使用最多，也是當(dāng)下流行的風(fēng)格之一。除了常見的純色線狀圖標(biāo)之外，還分雙色或多色，多種粗細(xì)結(jié)合線性與面型圖標(biāo)哪個好，缺口型，漸變，描邊不透明疊加等等。
3.扁平圖標(biāo)
其實就是線+面，面+面。變現(xiàn)方式多樣，拓展性強(qiáng)，更個性化，年輕化一些，相同，同樣設(shè)計風(fēng)格的icon，在更換顏色后就能體現(xiàn)和傳達(dá)不一樣的信息。
4.擬物圖標(biāo)，2.5D圖標(biāo)和桌面應(yīng)用圖標(biāo)
三、圖標(biāo)繪制
需要有一個從簡單到復(fù)雜的是凡事要經(jīng)歷的過程。在布爾運算支撐下，繪制也分為三個主要原則：風(fēng)格一致，大小一致，透視一致。緊扣三原則繪制，特殊情況判斷后處理，就是一個規(guī)范化圖標(biāo)。
畫圖標(biāo)-繪制三步法：以信息為例子
1.圖標(biāo)大小，運用輔助線幫助繪制，對齊像素格，保證導(dǎo)出圖標(biāo)邊緣清晰
2.長度，粗細(xì)，圓角，顏色統(tǒng)一，調(diào)整好即可
3.布爾運算
圖標(biāo)繪制的特殊處理：
1.同一大小的圖標(biāo)，因為形狀不同，視覺效果會不同，如下圖，同樣都是100px·100px的圓形和正方形，但從視覺上卻上完全不同的，這時需要，拋去參考線束縛，使圖標(biāo)視覺上大小統(tǒng)一，根據(jù)圖標(biāo)刪格系統(tǒng)繪制。
2.圖形疊加中心對齊時，視覺效果出現(xiàn)偏移，應(yīng)該以視覺效果為主，強(qiáng)制對齊，反而會使頁面效果重心偏移。
四、運用場景與選擇圖標(biāo)
運用場景的選擇一定是在設(shè)計風(fēng)格確定后，進(jìn)行選擇使用的，不能把icon運用場景和設(shè)計風(fēng)格下的圖標(biāo)概念混淆（你細(xì)品）。
使用圖標(biāo)的前提一定是風(fēng)格類型一致，判斷風(fēng)格一致的方法就是看圖標(biāo)設(shè)計風(fēng)格分類和繪制原則。
主要運用的場景分為5種：頂部導(dǎo)航欄，底部標(biāo)簽欄，金剛區(qū)，交互區(qū)，分類列表
1.頂部導(dǎo)航欄
UI頁面頂部主要以輕便為主，不易過重，圖標(biāo)使用也以簡單簡潔為主，不能太搶眼，起到便捷引導(dǎo)作用，準(zhǔn)確表達(dá)，一般使用單圖標(biāo)，不結(jié)合文字。
2.底部標(biāo)簽欄
位于主頁頁面底部，利于用戶頁面切換，圖標(biāo)數(shù)量一般控制在3～5個為宜，采用圖標(biāo)結(jié)合文字的方式體現(xiàn)產(chǎn)品功能。
3.金剛區(qū)
之所以稱之為金剛區(qū)，是因為它一般位于主頁中部位置，在或搜索欄之下，是產(chǎn)品主要功能區(qū)的核心集中位置，為子板塊做引流，用戶流量40%～58%都是來自于金剛區(qū)，它占用首屏位置大概在22%～25%之間，采用圖標(biāo)結(jié)合文字的方式體現(xiàn)產(chǎn)品功能。
4.分類列表
一般都是瀑布流排列，宮格排列，色塊排列，統(tǒng)一頁面風(fēng)格，準(zhǔn)確表達(dá)，利用用戶定位功能模塊。
5.交互功能區(qū)
這就是交互性圖標(biāo)使用最多的地方，收藏，點贊，刷新，搜索等等。
五、寫給初級UI設(shè)計師的
1.圖標(biāo)的使用同樣需要前期思考：分析用戶，功能信息，競品分析和行業(yè)經(jīng)驗。（和個人中心設(shè)計原則是一樣的思維模式）
2. 圖標(biāo)設(shè)計需要在遵循原則的情況下進(jìn)行個性化創(chuàng)作，與辨識度和適用性相結(jié)合，不斷提升用戶使用體驗感和信息感知速度，準(zhǔn)確傳達(dá)信息。
3.多分析思考，積累設(shè)計經(jīng)驗，提高自己對運用的敏感性，2022年努力加油吧～
點擊查看>UI設(shè)計就業(yè)班課程詳細(xì)介紹↓↓↓↓