日日躁夜夜躁狠狠久久AV,国产无码一区二区三区在线观看

UI設(shè)計中圖標類型指南

時間：2020-08-24來源：m.lb577.com點擊量：次作者：Gella

時間：2020-08-24點擊量：次作者：Gella

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

　　一、存在意義

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

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

　　圖片對比

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

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

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

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

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

　　二.多緯度分類

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

　　功能分類

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

　　1.交互性圖標

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

　　2.裝飾性圖標

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

　　3.說明性圖標

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

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

　　表現(xiàn)形式分類

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

　　1.象形圖標

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

　　2.隱喻圖標

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

　　3.工具圖標

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

　　4.混合圖標

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

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

　　按設(shè)計風(fēng)格分類：面性圖標，線性圖標，扁平圖標，擬物圖標，2.5D圖標和桌面應(yīng)用圖標

　　1.面性圖標

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

　　2.線性圖標

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

　　3.扁平圖標

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

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

　　三、運用場景與選擇圖標

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

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

　　1.頂部導(dǎo)航欄

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

　　2.底部標簽欄

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

　　3.金剛區(qū)

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