UI設計中圖標類型指南

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

　　一、存在意義
 

　　UI設計中，icon是重要組成部分，相對于使用文字，icon表達會讓效果更清晰。
 

　　對于信息傳播和視覺效果表達都有重要意義。
 

　　圖片對比
 

　　1.純文字與圖標使用對比，圖標從視覺上更簡潔易識別，閱讀性更強

 

　　2.純文字與文字+圖標，這里舉兩個例子
 

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

 

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

　　如果原設計是面性圖標對比感受會更明顯。

 

　　二.多緯度分類
 

　　圖標應用廣泛，單一從風格分類是無法做到全面了解的，廣度和深度也達不到全面認識，概念也不清晰。針對這一問題，我以廣度為橫軸，將它分為功能，表現(xiàn)形式和設計風格三大類，逐個縱向挖深。
 

　　功能分類
 

　　按功能分類：交互性圖標，裝飾性圖標和說明性圖標。
 

　　1.交互性圖標
 

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

 

　　2.裝飾性圖標
 

　　主要為了提高頁面設計性，加深個性化設計風格，與此同時，提升用戶線上體驗感，迎合受眾群的偏好，提升設計親和度。常見的比如：符合節(jié)日需求時，線上活動呼應，圖標個性化。比如：頁面升級，空頁面，獎勵，用戶等級等都屬于裝飾性圖標。

 

　　3.說明性圖標
 

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

 

　　首頁圖標也都屬于，以美團為例子，它結合了線性圖標，漸變面形圖標，將金剛區(qū)分為三部分，增強頁面的層次感和識別度。

 

　　表現(xiàn)形式分類
 

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

　　1.象形圖標
 

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

　　2.隱喻圖標
 

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

 

　　3.工具圖標
 

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

　　4.混合圖標
 

　　也就是前三種的結合，目的在于達到不同的視覺效果和應用結構。前段時間追波很流行的MBE粗描邊風格icon就是綜合圖標的產(chǎn)物，多表達設計師個人設計風格或適用某類設計感較強的軟件。

 

　　設計風格分類
 

　　按設計風格分類：面性圖標，線性圖標，扁平圖標，擬物圖標，2.5D圖標和桌面應用圖標
 

　　1.面性圖標
 

　　使用范圍最廣，穩(wěn)定性強，區(qū)分頁面層次感更高。設計UI頁面時，使用也要從頁面層級關系和產(chǎn)品功能角度考慮具體運用。面性圖標的分類也有很多，不僅僅只有常規(guī)的，還有多色，漸變，不透明疊加，插畫，扁平投影等等。

 

　　2.線性圖標
 

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

 

　　3.扁平圖標
 

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

 

　　4.擬物圖標，2.5D圖標和桌面應用圖標

 

　　三、運用場景與選擇圖標
 

　　運用場景的選擇一定是在設計風格確定后，進行選擇使用的，不能把icon運用場景和設計風格下的圖標概念混淆(你細品)。使用圖標的前提一定是風格類型一致，判斷風格一致的方法就是看圖標設計風格分類和繪制原則。
 

　　主要運用的場景分為5種：頂部導航欄，底部標簽欄，金剛區(qū)，交互區(qū)，分類列表
 

　　1.頂部導航欄
 

　　UI頁面頂部主要以輕便為主，不易過重，圖標使用也以簡單簡潔為主，不能太搶眼，起到便捷引導作用，準確表達，一般使用單圖標，不結合文字。

 

　　2.底部標簽欄
 

　　位于主頁頁面底部，利于用戶頁面切換，圖標數(shù)量一般控制在3～5個為宜，采用圖標結合文字的方式體現(xiàn)產(chǎn)品功能。

 

　　3.金剛區(qū)
 

　　之所以稱之為金剛區(qū)，是因為它一般位于主頁中部位置，在banner或搜索欄之下，是產(chǎn)品主要功能區(qū)的核心集中位置，為子板塊做引流，用戶流量40%～58%都是來自于金剛區(qū)，它占用首屏位置大概在22%～25%之間，采用圖標結合文字的方式體現(xiàn)產(chǎn)品功能。

 

　　4.分類列表
 

　　一般都是瀑布流排列，宮格排列，色塊排列，統(tǒng)一頁面風格，準確表達，利用用戶定位功能模塊。

 

　　5.交互功能區(qū)
 

　　這就是交互性圖標使用最多的地方，收藏，點贊，刷新，搜索等等。
 

　　五、寫給設計師
 

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

　　2. 圖標設計需要在遵循原則的情況下進行個性化創(chuàng)作，與辨識度和適用性相結合，不斷提升用戶使用體驗感和信息感知速度，準確傳達信息。
 

　　3.多分析思考，積累知識，提高自己對運用的敏感性，一起加油吧～
 

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