旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實習/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設計 > UI設計中圖標類型指南

UI設計中圖標類型指南

時間:2020-08-24來源:m.5wd995.cn點擊量:作者:Gella
時間:2020-08-24點擊量:作者:Gella

  圖標是 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對比就很明顯。

 



 

  首頁圖標也都屬于,以美團為例子,它結(jié)合了線性圖標,漸變面形圖標,將金剛區(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.混合圖標
 

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

 



 

  設計風格分類
 

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

  1.面性圖標
 

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

 



 

  2.線性圖標
 

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

 



 

  3.扁平圖標
 

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

 



 

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

 



 

  三、運用場景與選擇圖標
 

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

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

  1.頂部導航欄
 

  UI頁面頂部主要以輕便為主,不易過重,圖標使用也以簡單簡潔為主,不能太搶眼,起到便捷引導作用,準確表達,一般使用單圖標,不結(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)品功能。

 



 

  4.分類列表
 

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

 



 

  5.交互功能區(qū)
 

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

  五、寫給設計師
 

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

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

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

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



 

預約申請免費試聽課

填寫下面表單即可預約申請免費試聽!怕錢不夠?可先就業(yè)掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業(yè)?一地學習,可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權所有
備案號:京ICP備12034770號

老師想和你聊一聊

?2007-2021/ m.5wd995.cn 北京漫動者教育科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號

網(wǎng)站地圖