漫談UI設(shè)計中的圖標設(shè)計

2024-5-28    資深UI設(shè)計者

漫談UI設(shè)計中的圖標設(shè)計

 
 
 

本文共分為4大部分,根據(jù)圖標的使用場景,確定圖標的風(fēng)格,在圖標中融入品牌元素,最終進行自我檢測。

 

在UI設(shè)計中,圖標的使用可以說是占了大壁江山,相信大家都知道圖標的重要性,一個優(yōu)秀的圖標比語言更吸引眼球更可視化,甚至跨越了語言的障礙,傳遞信息也非常的高效。

 

以下是我將要分享的流程節(jié)點:

根據(jù)圖標的使用場景 > 確定圖標的風(fēng)格 > 在圖標中融入品牌元素 > 最終進行自我檢測

 

圖標的使用場景

在著手設(shè)計圖標之前,你得根據(jù)圖標的使用場景去選擇圖標的類型。先來看看圖標的使用場景:

 

1/ 應(yīng)用圖標

要在各個APP中脫穎而出,視覺上要夠搶眼;風(fēng)格上能傳達行業(yè)屬性和品牌調(diào)性。

 

 

2/ 功能入口

作為流量分發(fā)的出口,很重要,體量感上要夠重、夠突出。

 

 

3/ TAB底部導(dǎo)航

雖然很重要,但常駐底部,可弱化。

 

 

4/ 列表流

處于次重點,視覺上次突出。

 

 

5/ 網(wǎng)格布局

處于次重點,視覺上次突出。

 

6/ 標題點綴

處于次重點,視覺上次突出。

 

 

7/ 輔助/裝飾

用于輔助裝飾作用,視覺上要最弱。

 

 

8/ 活動入口

如果作為一個主推的活動入口,要吸睛。

 

 

如上所示,圖標的使用場景大致可分為8大場景,每個場景對圖標都有不同的要求。

 

· 應(yīng)用圖標:夠搶眼
· 功能圖標:最突出
· 底部導(dǎo)航:可弱化
· 列表流/網(wǎng)格布局/標題點綴:次突出
· 輔助/裝飾:要最弱
· 活動入口:要吸睛

 

如何根據(jù)場景選擇圖標類型?

首先,無論是從全局還是從單個頁面來看,根據(jù)內(nèi)容由主到次,圖標也要相應(yīng)的由重到輕;
但是,在具體頁面中也要根據(jù)產(chǎn)品和營銷的需要去做具體的調(diào)整。
根據(jù)產(chǎn)品功能的優(yōu)先級別或者希望用戶關(guān)注的主次,圖標的風(fēng)格也是:面性圖標>線面圖標>線性圖標。

 

 

圖標的風(fēng)格

從圖標的使用場景可以大致確定我們的圖標類型。這時候心里至少要有個方向,知道我們的圖標體量感是什么樣的。然后,我們要開始著手去設(shè)計圖標的風(fēng)格。當(dāng)我接觸一些新的設(shè)計師時,總是能聽到一些抱怨說:    “圖標沒有什么好設(shè)計的,長得都一樣。”

其實不然,圖標是有很多風(fēng)格的。下面我就列舉了38種圖標風(fēng)格,給設(shè)計師們以靈感和參考。也便于我們在設(shè)計時,能盡快的選擇適合自己產(chǎn)品調(diào)性的風(fēng)格。

 

 

面性圖標

 

 

 

1/ 剪影圖標

這是市場上比較最常見的一種設(shè)計風(fēng)格,有很多設(shè)計風(fēng)格都是在其基礎(chǔ)上的延伸。

 

 

 

2/ 微漸變圖標

圖標在有色背板之上;白色的漸變增加一些環(huán)境色。

 

 

 

3/ 雙色漸變圖標

一般采取鄰近色漸變,絢麗多彩。

 

 

 

4/ 雙色圖標

采取兩種顏色,注意用色比例不要均衡,要有主次。

 

 

 

5/ 不透明度圖標

圖標的少部分色塊調(diào)整不透明度,要注意比例不要均衡,要有主次。

 

 

6/ 輕質(zhì)感圖標

比剪影多了些細節(jié)。

@Dea_n

 

 

7/ 輕擬物圖標

處于擬物和扁平中間,就是這種曖昧的感覺。

 

 

8/ 擬物圖標

直觀!真實!辨識度非常高!

 

 

9/ 圖片圖標

當(dāng)圖形不能很好的表達或表達不具吸引力或?qū)嵨锬芨玫谋磉_產(chǎn)品調(diào)性時,也可以選擇使用實物圖片當(dāng)作圖標。

 

 

10/ 文字圖標

當(dāng)圖形不能很好的表達其含義或者用戶人群比較小白時,直接使用文字也是一種不錯的選擇。

 

 

11/ 圖文圖標

從某種意義上來說辨識度確實會很高。

 

 

 

12/ 折疊圖標

用顏色的細微變化來做出紙張的折疊效果。

 

 

13/ 折紙風(fēng)圖標

用視覺手法模擬折紙的視覺效果。

 

 

14/ 折紙陰影圖標

部分圖形銜接處使用少量陰影體現(xiàn)折紙效果。

 

 

15/ 插畫圖標

插畫圖標的采用,比較個性化!另外較多的細節(jié),也使其更突出!

 

16/ 疊加圖標

將一組圖層進行疊加,形成豐富的層次感,視覺表現(xiàn)力比較豐富,一般比較適合應(yīng)用圖標。

 

 

17/ 長投影圖標

曾經(jīng)也是風(fēng)靡過的網(wǎng)紅。

 

 

18/ 像素圖標

在UI中確實少用,除非要打造出特有或復(fù)古的風(fēng)格。沒有找到合適的例子。

 

 

19/ YOGA風(fēng)格圖標

設(shè)計師Yoga自創(chuàng)的一種風(fēng)格,主要以漸變的穿插和切割為主的一種圖形設(shè)計模式,個性鮮明,色彩大膽,是繼MBE風(fēng)格后的一種新的設(shè)計潮流。

 

 

20/ 2.5D圖標

比普通圖標更具有沖擊力、比3D圖標設(shè)計難度更低,但是也不失立體效果,能為界面增添更多視覺感受。

 

 

21/ 低面建模

用色塊來進行二維、三維的裝飾表達。風(fēng)格很強,很獨特。沒找到合適的產(chǎn)品,大概就是如下的樣子。

 

 

22/ 擴大圖標

使用背板對圖標做一些遮擋,保留一些想象的空間和延展性。

 

 

23/ 背板的設(shè)計

在圖標上玩不出啥花樣了,也可以對背板做一些個性化的設(shè)計。

 

 

 

24/ 其他 歡迎大家補充哦~

 

 

 

線性圖標

 

1/ 傳統(tǒng)線性圖標

先來看看傳統(tǒng)的線性圖標,這也是使用最多的一種圖標類型。隨處可見。


2/ 粗線圖標

較適用于年輕化用戶人群。

 

 

  @孔晨

 

 

3/ 直角圖標

棱角分明,比較硬朗、冷峻,適合工具類、時尚類。

 

 

4/ 斷點圖標

形狀拼接處斷點,相比傳統(tǒng)的封閉式,多了些可以品味的細節(jié)。

 

 

5/ 高光圖標

利用點線來模擬高光的效果,使圖標更豐富。

      @孔晨

 

 

6/ 中國風(fēng)圖標

利用中國漢字筆畫而組成的圖標,非常具有傳統(tǒng)手工藝人的氣質(zhì),很符合其產(chǎn)品調(diào)性。

 

 

7/ 一筆速寫圖標

專門從事圖形和圖標設(shè)計的設(shè)計機構(gòu)Differantly Studio。其創(chuàng)作者的風(fēng)格:以一筆速寫的手法繪制圖標,一筆成型、簡潔概括事物最鮮明的特征,頗具創(chuàng)新性和趣味性!

 

 

8/ 雙色圖標

利用輔色來豐富圖標,輔色面積占比20%即可,不可太多。

 

 

9/ 多色圖標

有時,為了追求一些個性化,也可以突破傳統(tǒng),慎用。

 

 

 

10/ 插畫圖標

相對比較復(fù)雜,當(dāng)內(nèi)容很少時,可以考慮此方法,慎用。

 

 

 

線面結(jié)合圖標

 

 

1/ 線面結(jié)合圖標

相較于面和線,線面結(jié)合可以打造更多的細節(jié)層次感,在視覺上可以作出更多的差異化。

 

 

2/ MBE風(fēng)格圖標

很流行的一種風(fēng)格,此風(fēng)格的作者是法國設(shè)計師MBE,2015年底他在dribbble上發(fā)布了此風(fēng)格的一系列作品,從線性Q版卡通畫演變而來。配色大膽、明亮、飽和度高、適合低齡兒童類產(chǎn)品。

 

 

 

3/ 微投影圖標

利用同色系來給圖標做一個淺淺的投影效果。MBE的簡化版。

 

 

 

4/ 面性點綴圖標

圖標的少部分采用色塊的形式進行點綴。

 

 

 

5/ 線+輕擬物圖標

詞窮了,不知道取啥名字了,反正就是下面這種形式的,線+輕擬物的趕腳….

 

 

 

 

在圖標中融入品牌元素

為什么要在圖標中融入品牌元素呢?因為我們大部分的人做的APP都不是用戶量巨大的APP(如微信),我們需要通過融入品牌元素的手段去提升產(chǎn)品的辨識度,增加產(chǎn)品的特色。而微信這種擁有強大用戶量的產(chǎn)品,打造產(chǎn)品的品牌特色已經(jīng)不是他們的強烈需求,他們會更注重圖標本身的含義。

在圖標中融入品牌元素方法:

 

 

1/ 品牌logo的直接應(yīng)用

在底部導(dǎo)航中,運用品牌Logo作為首頁的圖標。

 

 

 

2/ 品牌名稱的直接使用

在底部導(dǎo)航中,直接運用品牌名稱作為底部tab導(dǎo)航。

 

 

3/ 品牌logo風(fēng)格的延續(xù)

在圖標中延續(xù)logo的風(fēng)格,包括顏色、線條、設(shè)計手法等等。

 

 

 

4/ 提取品牌logo中的元素

找到品牌logo中的特色元素,融入到其他圖標中。

 

 

5/ 提取品牌logo中的色彩

“統(tǒng)一色彩”幾乎是所有設(shè)計手法中要達到“統(tǒng)一”的最常見、最簡約的一種方法。

 

 

 

最后進行自我檢測

 

當(dāng)我們認真在做設(shè)計,而往往太投入而看不到其中的問題,這時候就需要一套既定的標準來去衡量這套圖標是否合格。

我將從以下維度來評判圖標是否合格: 

是否具有辨識度?
是否統(tǒng)一?
風(fēng)格是否符合行業(yè)調(diào)性?
是否具有品牌特色?

 

 

1/ 辨識度

不忘初衷,別忘了圖標的使命感是幫助用戶更好的識別,請不要造成干擾而得不償失。

 

含義辨識度

要讓你的圖標能被你的用戶所理解。

 

視覺辨識度

國外有個測試,測試四種樣式的圖標:
實心圖標:白底黑圖,黑底白圖
空心圖標:白底黑圖,黑底白圖
最后得出的結(jié)果是:空心圖標的黑底白圖要比其他的圖慢0.17秒,也就是這種圖的視覺辨識度最弱:

 

 

2/ 統(tǒng)一性

當(dāng)做整套圖標時,要復(fù)盤一下圖標的統(tǒng)一性。

 

統(tǒng)一飽滿度

 

統(tǒng)一色彩飽和度

 

統(tǒng)一圓角

 

統(tǒng)一描邊

 

統(tǒng)一線條末端

 

 

3/ 風(fēng)格

風(fēng)格就像靈魂一樣,通過視覺表現(xiàn)的手法來傳達自己的特性,讓你的用戶迅速抓住你的產(chǎn)品特征。
比如:

 

幼兒:給低幼兒童使用的產(chǎn)品,可愛、活潑。

 

 

傳統(tǒng)文化:蘊含東方美學(xué)的原創(chuàng)好物,融入中國元素,能快速的傳達東方美學(xué)。

 

 

女性:柔美,較多粉色系,圖標圓潤。

 

 

 

男性:剛硬,較多深色系,圖標方直。

 

4/ 品牌

風(fēng)格能讓你的產(chǎn)品擁有自己的性格,打造產(chǎn)品的品牌特色,提升產(chǎn)品的辨識度。讓你的產(chǎn)品在眾多產(chǎn)品中脫穎而出。
常見的方式有:色彩、特殊元素、吉祥物…(詳見第三部分:在圖標中融入品牌元素)

 

 

總結(jié)

根據(jù)圖標的使用場景 > 確定圖標的風(fēng)格 > 在圖標中融入品牌元素 > 最終進行自我檢測

本篇文章對圖標的設(shè)計過程做了一個全局的分析和總結(jié),但是還是有很多東西還沒總結(jié),也說的還不夠透徹,我會爭取下次總結(jié)的更好。希望本篇總結(jié)能對你有所啟發(fā)和幫助,有所不足的地方也歡迎大家的指正。希望能和大家互相分享,互相學(xué)習(xí),共同進步。

PS:另外文中用到的案例是我平時保存的素材,現(xiàn)在很多找不到出處了,知道的同學(xué)歡迎補充。

 

藍藍設(shè)計(m.sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計UI咨詢、高端網(wǎng)站設(shè)計平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。

關(guān)鍵詞:UI咨詢UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)



作者:體驗設(shè)計桃子
鏈接:https://www.zcool.com.cn/article/ZODQ5OTQ0.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

 

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.sillybuy.com

存檔