UI設(shè)計(jì)中圖標(biāo)類型指南

　　圖標(biāo)是 UI 設(shè)計(jì)中極為重要的一個(gè)環(huán)節(jié)，我們?cè)谧雒總€(gè)界面的設(shè)計(jì)幾乎都會(huì)涉及到圖標(biāo)的表達(dá)，出色的圖標(biāo)設(shè)計(jì)可以讓界面表達(dá)更加精致、有趣。圖標(biāo)的設(shè)計(jì)往往也體現(xiàn)著設(shè)計(jì)師的基本功，因此除了日常多畫提升對(duì)圖標(biāo)造型的把控力外，我們也更需要了解和學(xué)習(xí)圖標(biāo)設(shè)計(jì)的趨勢(shì)類型。今天AAA教育郭老師就針對(duì)UI設(shè)計(jì)中圖標(biāo)類型指南進(jìn)行簡單的說明，希望能幫助到大家。
 

　　一、存在意義
 

　　UI設(shè)計(jì)中，icon是重要組成部分，相對(duì)于使用文字，icon表達(dá)會(huì)讓效果更清晰。
 

　　對(duì)于信息傳播和視覺效果表達(dá)都有重要意義。
 

　　圖片對(duì)比
 

　　1.純文字與圖標(biāo)使用對(duì)比，圖標(biāo)從視覺上更簡潔易識(shí)別，閱讀性更強(qiáng)

 

　　2.純文字與文字+圖標(biāo)，這里舉兩個(gè)例子
 

　　金剛區(qū)去掉圖標(biāo)后，頁面缺少icon點(diǎn)綴，顯得很枯燥，目前的UI視覺設(shè)計(jì)中，也是設(shè)計(jì)手法是不允許的。

 

　　選用的是百詞斬個(gè)人中心，即使原頁面icon存在感也是選用的視覺感偏弱的線性圖標(biāo)，在去掉后，頁面層次感和閱讀性就降低很多，可以嘗試僅僅從icon找某個(gè)功能，一定會(huì)比僅文字快，時(shí)間成本會(huì)相對(duì)降低，也說明了設(shè)計(jì)icon時(shí)，尤其是說明性和交互性圖標(biāo)，準(zhǔn)確度要高。
 

　　如果原設(shè)計(jì)是面性圖標(biāo)對(duì)比感受會(huì)更明顯。

 

　　二.多緯度分類
 

　　圖標(biāo)應(yīng)用廣泛，單一從風(fēng)格分類是無法做到全面了解的，廣度和深度也達(dá)不到全面認(rèn)識(shí)，概念也不清晰。針對(duì)這一問題，我以廣度為橫軸，將它分為功能，表現(xiàn)形式和設(shè)計(jì)風(fēng)格三大類，逐個(gè)縱向挖深。
 

　　功能分類
 

　　按功能分類：交互性圖標(biāo)，裝飾性圖標(biāo)和說明性圖標(biāo)。
 

　　1.交互性圖標(biāo)
 

　　具有雙向信息傳遞能力，不僅可以向用戶傳遞某種信息，引導(dǎo)幫助用戶執(zhí)行特定操作，同時(shí)也允許用戶向程序傳遞控制信息，從功能重要程度來講，它的重要性是最高的。比如：登陸注冊(cè)按鈕，開關(guān)按鈕，數(shù)量按鈕，點(diǎn)贊，轉(zhuǎn)發(fā)分享等都屬于交互性圖標(biāo)。

 

　　2.裝飾性圖標(biāo)
 

　　主要為了提高頁面設(shè)計(jì)性，加深個(gè)性化設(shè)計(jì)風(fēng)格，與此同時(shí)，提升用戶線上體驗(yàn)感，迎合受眾群的偏好，提升設(shè)計(jì)親和度。常見的比如：符合節(jié)日需求時(shí)，線上活動(dòng)呼應(yīng)，圖標(biāo)個(gè)性化。比如：頁面升級(jí)，空頁面，獎(jiǎng)勵(lì)，用戶等級(jí)等都屬于裝飾性圖標(biāo)。

 

　　3.說明性圖標(biāo)
 

　　闡明信息圖標(biāo)類型，區(qū)分不同功能或內(nèi)容的視覺標(biāo)記;簡單的說，就是對(duì)功能的解釋說明。常見的比如：表現(xiàn)行業(yè)特性時(shí)，金剛區(qū)或個(gè)別功能區(qū)icon設(shè)計(jì);面向不同用戶群體時(shí)，選擇風(fēng)格設(shè)計(jì)，早教類APP與健康類APP對(duì)比就很明顯。

 

　　首頁圖標(biāo)也都屬于，以美團(tuán)為例子，它結(jié)合了線性圖標(biāo)，漸變面形圖標(biāo)，將金剛區(qū)分為三部分，增強(qiáng)頁面的層次感和識(shí)別度。

 

　　表現(xiàn)形式分類
 

　　按表現(xiàn)形式分類：象形圖標(biāo)，隱喻圖標(biāo)，工具圖標(biāo)和混合圖標(biāo)
 

　　1.象形圖標(biāo)
 

　　起初，設(shè)計(jì)師為了保證高識(shí)別度，降低學(xué)習(xí)引導(dǎo)成本，寫實(shí)性icon對(duì)生活的映射更貼切，用戶也會(huì)將其與實(shí)物相聯(lián)系。ios相當(dāng)長一段時(shí)間流行 “Skeumorphic設(shè)計(jì)理念”，它就屬于超寫實(shí)設(shè)計(jì)。并且認(rèn)為只要有可能，在應(yīng)用上增加現(xiàn)實(shí)的、物理的緯度，與現(xiàn)實(shí)越相像，操作越相同，就越容易使用戶理解運(yùn)作模式，接受度就越高。
 

　　2.隱喻圖標(biāo)
 

　　兩種不相關(guān)但卻有著某種相似特質(zhì)的事物用icon的方式鏈接起來，達(dá)到記憶和使用目的。比如：設(shè)置與工具，云端與云，購物與袋子，會(huì)員與鉆石或皇冠等等。

 

　　3.工具圖標(biāo)
 

　　主要以行業(yè)類別為分類，使用范圍廣泛，大眾或行內(nèi)人士識(shí)別度高，且被長期使用。比如：建筑行業(yè)，醫(yī)療行業(yè)，化工行業(yè)等等。
 

　　4.混合圖標(biāo)
 

　　也就是前三種的結(jié)合，目的在于達(dá)到不同的視覺效果和應(yīng)用結(jié)構(gòu)。前段時(shí)間追波很流行的MBE粗描邊風(fēng)格icon就是綜合圖標(biāo)的產(chǎn)物，多表達(dá)設(shè)計(jì)師個(gè)人設(shè)計(jì)風(fēng)格或適用某類設(shè)計(jì)感較強(qiáng)的軟件。

 

　　設(shè)計(jì)風(fēng)格分類
 

　　按設(shè)計(jì)風(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è)計(jì)UI頁面時(shí)，使用也要從頁面層級(jí)關(guān)系和產(chǎn)品功能角度考慮具體運(yùn)用。面性圖標(biāo)的分類也有很多，不僅僅只有常規(guī)的，還有多色，漸變，不透明疊加，插畫，扁平投影等等。

 

　　2.線性圖標(biāo)
 

　　使用感更輕盈，精致度更高，簡約風(fēng)格頁面使用最多，也是當(dāng)下流行的風(fēng)格之一。除了常見的純色線狀圖標(biāo)之外，還分雙色或多色，多種粗細(xì)結(jié)合，缺口型，漸變，描邊不透明疊加等等。

 

　　3.扁平圖標(biāo)
 

　　其實(shí)就是線+面，面+面。變現(xiàn)方式多樣，拓展性強(qiáng)，更個(gè)性化，年輕化一些，相同，同樣設(shè)計(jì)風(fēng)格的icon，在更換顏色后就能體現(xiàn)和傳達(dá)不一樣的信息。

 

　　4.擬物圖標(biāo)，2.5D圖標(biāo)和桌面應(yīng)用圖標(biāo)

 

　　三、運(yùn)用場景與選擇圖標(biāo)
 

　　運(yùn)用場景的選擇一定是在設(shè)計(jì)風(fēng)格確定后，進(jìn)行選擇使用的，不能把icon運(yùn)用場景和設(shè)計(jì)風(fēng)格下的圖標(biāo)概念混淆(你細(xì)品)。使用圖標(biāo)的前提一定是風(fēng)格類型一致，判斷風(fēng)格一致的方法就是看圖標(biāo)設(shè)計(jì)風(fēng)格分類和繪制原則。
 

　　主要運(yùn)用的場景分為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個(gè)為宜，采用圖標(biāo)結(jié)合文字的方式體現(xiàn)產(chǎn)品功能。

 

　　3.金剛區(qū)
 

　　之所以稱之為金剛區(qū)，是因?yàn)樗话阄挥谥黜撝胁课恢?，在banner或搜索欄之下，是產(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)使用最多的地方，收藏，點(diǎn)贊，刷新，搜索等等。
 

　　五、寫給設(shè)計(jì)師
 

　　1.圖標(biāo)的使用同樣需要前期思考：分析用戶，功能信息，競品分析和行業(yè)經(jīng)驗(yàn)。(和個(gè)人中心設(shè)計(jì)原則是一樣的思維模式
 

　　2. 圖標(biāo)設(shè)計(jì)需要在遵循原則的情況下進(jìn)行個(gè)性化創(chuàng)作，與辨識(shí)度和適用性相結(jié)合，不斷提升用戶使用體驗(yàn)感和信息感知速度，準(zhǔn)確傳達(dá)信息。
 

　　3.多分析思考，積累知識(shí)，提高自己對(duì)運(yùn)用的敏感性，一起加油吧～
 

　　因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。