編輯 | 蘇蘇

授權(quán) | 胡曉波工作室 （ID：ziyou-design）

快人一步，掌握2023圖標(biāo)設(shè)計(jì)趨勢(shì)。

圖標(biāo)是產(chǎn)品設(shè)計(jì)重要的組成部分，我們 可以通過(guò)圖標(biāo)增加頁(yè)面效果，讓頁(yè)面更容易被記住。 隨著時(shí)代發(fā)展，圖標(biāo)的設(shè)計(jì)趨勢(shì)每天也在推崇出新，今天我們來(lái)分享下2023年一些圖標(biāo)趨勢(shì)。

▍3D圖標(biāo)

什么圖標(biāo)會(huì)在2023年流行， 一定少不了3D圖標(biāo)。

3D圖標(biāo)能讓界面更容易抓住用戶注意力，它的細(xì)節(jié)更多，更能體現(xiàn)創(chuàng)意想法。如上圖這組圖標(biāo)，每個(gè)圖標(biāo)里都有很多故事，并且這類型圖標(biāo)，大多數(shù)參考生活里面物體，用戶也容易理解。

3D圖標(biāo)非常靈活，可以根據(jù)需要增加各種細(xì)節(jié)，并且能運(yùn)用到各種領(lǐng)域。上面B端場(chǎng)景圖標(biāo)，讓很平淡的表單場(chǎng)景 頁(yè)面瞬間變得生動(dòng)起來(lái)。

展開全文

3D圖標(biāo)因?yàn)橐曈X比較重，所以如果你頁(yè)面本身就比較顏色多，很花哨，那就要慎重使用。另外就是如果我們頁(yè)面需要用戶更專注內(nèi)容，比如閱讀產(chǎn)品。那么3D圖標(biāo)也會(huì)很搶內(nèi)容，所以運(yùn)用時(shí)候一定要克制。

上圖這個(gè)案例將3D圖標(biāo)很好的運(yùn)用進(jìn)去了，頁(yè)面顯得很精致，圖標(biāo)和內(nèi)容貼合度很好，整體的視覺風(fēng)格也比較新穎，這種效果用在產(chǎn)品頁(yè)面，或者項(xiàng)目改版都特別好。

3D圖標(biāo)和普通圖標(biāo)設(shè)計(jì)流程還不太一樣，一般前期先畫草圖，把3D每個(gè)元素構(gòu)思清楚，再去軟件里面畫，同時(shí)對(duì)軟件有些要求。

但是整體的效果呈現(xiàn)，確實(shí)是比扁平化圖標(biāo)看著更有吸引力，更容易讓用戶理解。所以2023年3D圖標(biāo) 這個(gè)趨勢(shì)一定不能忽視。

隨著這兩年3D技術(shù)的流行，3D圖標(biāo)不僅要求是靜態(tài)的，有時(shí)候也要求你做成動(dòng)態(tài)的。

對(duì)于設(shè)計(jì)師造型能力，設(shè)計(jì)想象力都是一個(gè)跳轉(zhuǎn)，只能說(shuō)現(xiàn)在做UI設(shè)計(jì)師是真卷呀。

在UI里面，3D圖標(biāo)運(yùn)用上去就特別新穎，相對(duì)扁平化給人更活潑，更靈動(dòng)。很自然，特別適合一些年輕的產(chǎn)品。

在一些韓國(guó)APP設(shè)計(jì)中，能看見設(shè)計(jì)師很早就在頁(yè)面中去嘗試3D效果，配合簡(jiǎn)潔的頁(yè)面，讓頁(yè)面非常煥然一新。

這效果一放，逼格拉滿，同時(shí) 也和扁平化風(fēng)格瞬間拉開了差異化。

▍手繪圖標(biāo) ????

如果你希望你的產(chǎn)品有一個(gè)獨(dú)一無(wú)二的風(fēng)格，那么這個(gè)圖標(biāo)趨勢(shì)值得研究，你可以自己畫一套手繪圖標(biāo)，然后把他變成矢量的。這種圖標(biāo)這種手繪感，非常有個(gè)性，而且很容易被你用戶記住。

無(wú)論用在網(wǎng)站，還是空白頁(yè)，還是當(dāng)插圖都是可以的，你可以改變線條，粗細(xì)，形狀，通過(guò)這些調(diào)整，然后找到符合你們產(chǎn)品調(diào)性的圖標(biāo)。

也可以做成貼紙周邊去運(yùn)用，特別有親和力，讓品牌也生動(dòng)起來(lái)了。

手繪圖標(biāo)也可以增加色彩，讓它個(gè)性起來(lái)，獨(dú)一無(wú)二起來(lái)。

這樣一整套圖標(biāo)，能讓頁(yè)面特別活潑，當(dāng)然APP整體調(diào)性得簡(jiǎn)約，這樣才能和這個(gè)風(fēng)格匹配。

這樣的效果用在引導(dǎo)頁(yè)，首頁(yè)登錄效果都非常的nice，真人搭配一個(gè)手繪效果圖形，也會(huì)給人很特別的感受。

設(shè)計(jì)效果特別新穎，圖標(biāo)也很有趣味性，手繪的效果也恰到好處，和整體頁(yè)面簡(jiǎn)潔風(fēng)格搭配起來(lái)，特別精致。

韓國(guó)餓了么，整個(gè)主風(fēng)格就是用的手繪，手繪的美食圖標(biāo)，和手繪的地圖，是不是有點(diǎn)像在日本動(dòng)畫片的感覺。因?yàn)楸旧碓陧n國(guó)使用外賣大多數(shù)也是年輕人，輕松有趣的設(shè)計(jì)語(yǔ)言讓人眼前一亮。

▍厚重的圖標(biāo)

2023年線條圖標(biāo)可能會(huì)成為過(guò)去式了，到了2023年，把線條加粗的圖標(biāo)可能會(huì)成為一個(gè)新的趨勢(shì)。這樣的圖標(biāo)更容易被用戶注意到，也更容易點(diǎn)擊。

蘋果原生圖標(biāo)細(xì)的，可以理解為系統(tǒng)圖標(biāo)。那么你的界面設(shè)計(jì)成厚重粗的圖標(biāo)，用戶會(huì)感覺更有新鮮感，當(dāng)然厚重的圖標(biāo)你也可以做成填充的。但是要注意這樣的圖標(biāo)也是要有技巧的。

厚重的圖標(biāo)，對(duì)于線條厚度，留白空間很重要。有時(shí)候你如果留白空間不合理，這一套圖標(biāo)就毀掉了。

所以新年第一步，做視覺改版，記住這個(gè)趨勢(shì)，把你們很單薄線的圖標(biāo)，優(yōu)化的更厚重穩(wěn)點(diǎn)，當(dāng)然這個(gè)也要看整體頁(yè)面風(fēng)格一起調(diào)整。

厚重的圖標(biāo)，在頁(yè)面里面能引導(dǎo)視覺注意力，如果圖形很細(xì)，有時(shí)候會(huì)讓頁(yè)面很飄，讓頁(yè)面看起來(lái)特別散。

▍2.5D圖標(biāo)

2.5D大家都不陌生，就是在扁平化風(fēng)格下面，去創(chuàng)建立體的效果，讓圖形有3D感，但是相對(duì)于3D視覺會(huì)更輕一些。今年這個(gè)風(fēng)格還會(huì)流行，并且在大量產(chǎn)品中會(huì)被用到。

?????

韓國(guó)滴滴，整套圖標(biāo)都是采用2.5的風(fēng)格，看著非常的高級(jí)，整體圖標(biāo)采用黃色和藍(lán)色配色，非常醒目。同時(shí)圖標(biāo)都是帶一點(diǎn)點(diǎn)角度的立體圖形，整體顯得很獨(dú)特又年輕。???????????

在一些Banner小插畫的圖形上，也是用的這種立體圖標(biāo)，整體頁(yè)面風(fēng)格非常一致性，同時(shí)品質(zhì)感很高。

設(shè)計(jì)師可以通過(guò)透視，色彩，投影加上形狀工具去創(chuàng)建一個(gè)立體效果?？梢杂玫膱?chǎng)景還特別的廣泛，背景圖，占位空白圖都可以運(yùn)用。

但是需要注意，2.5的圖標(biāo)也要注意細(xì)節(jié)，圖標(biāo)面積越小細(xì)節(jié)越少，如果圖標(biāo)面積越大，細(xì)節(jié)越豐富。如果圖標(biāo)很小，細(xì)節(jié)太多會(huì)顯得很瑣碎。如上圖因?yàn)槊娣e很大，所以圖標(biāo)可以加很多細(xì)節(jié)，車上還可以畫各種圖案，元素。

這一款金融工具產(chǎn)品，用2.5D圖標(biāo)來(lái)做引導(dǎo)頁(yè)面，傳遞穩(wěn)重感，并且圖標(biāo)處理的很利索，干凈，很有細(xì)節(jié)。特別值得學(xué)習(xí)。

一點(diǎn)輕量化，帶點(diǎn)角度的2.5D效果，很多設(shè)計(jì)師能駕馭，它不需要我們用3D軟件去建模渲染，通過(guò)sketch和AI都能輕松做出來(lái)，這個(gè)趨勢(shì)在今年也備受關(guān)注。

▍極簡(jiǎn)圖標(biāo)

這種圖標(biāo)風(fēng)格代表了「少即是多」的理念，簡(jiǎn)單的元素，砍掉很多細(xì)節(jié)是今年流行重點(diǎn)。在很多優(yōu)秀設(shè)計(jì)里面都能看見。這種圖標(biāo)設(shè)計(jì)核心是：表意精準(zhǔn)。能用一個(gè)元素表達(dá)，不要用多個(gè)元素，不要為了細(xì)節(jié)而細(xì)節(jié)。

??

這類圖表對(duì)于圖形概括能力有一定要求，要用盡量少的元素傳遞你圖形的含義，從一開始用戶看見圖標(biāo)就能理解你想表達(dá)的意思。

圖形非常簡(jiǎn)單干凈，讓人一目了然，沒有多余的元素。化繁為簡(jiǎn)是它表達(dá)的核心。但該有的細(xì)節(jié)都要有。

圖標(biāo)樣式你可以加上拼色，讓它有個(gè)對(duì)比，效果更有層次。

也可以是一個(gè)簡(jiǎn)單的色塊展示，也很舒服，顏色上面大家可以多去大膽嘗試。

▍帶顏色形狀的圖標(biāo)

如果你想用線型圖標(biāo)，但是覺得黑色有些單調(diào)，想加點(diǎn)創(chuàng)意，那么就可以在背后加點(diǎn)形狀，比如圓形，方形，然后加一個(gè)顏色，這樣細(xì)節(jié)就會(huì)增加很多。

比如這組圖標(biāo)，設(shè)計(jì)師在每個(gè)圖標(biāo)后面增加圖標(biāo)輪廓幾何圖形，這樣會(huì)讓圖標(biāo)有兩層效果，看起來(lái)更有層次感，也更加活潑。

handse的這組圖標(biāo)，背后的幾何圖形非常有個(gè)性，加上圖標(biāo)本身有方向性，讓圖標(biāo)顯得很活潑很生動(dòng)。

帶顏色形狀的圖標(biāo)適合于產(chǎn)品比較年輕化，用戶人群年輕人，比較追求個(gè)性的產(chǎn)品調(diào)性，會(huì)讓頁(yè)面充滿靈動(dòng)力。

通常填充的顏色都當(dāng)作背景，你可以取圖標(biāo)一個(gè)小局部，比如筆的筆桿部分，比如優(yōu)惠券券的部分。這里很多細(xì)節(jié)可以嘗試，但是有一個(gè)前提就是基礎(chǔ)圖形得好看。這個(gè)趨勢(shì)也會(huì)在2023年被大量廣泛用到。

▍漸變圖標(biāo)

漸變是這兩年的一個(gè)趨勢(shì)，無(wú)論UI、平面還是品牌。漸變讓扁平變的有趣有變化。也能在一堆純色，扁平設(shè)計(jì)里面脫穎而出。今年很多公司也開始把漸變加圖標(biāo)里面了，像像 Adobe 和 Instagram 這樣的公司已經(jīng)加入了這一潮流。

漸變的圖標(biāo)能讓頁(yè)面潮起來(lái)，增強(qiáng)圖標(biāo)品牌感，如上圖圖標(biāo)，運(yùn)用到暗黑模式就特別適合。

你也可以在漸變里面增加一些厚度和立體感，讓整體色彩豐富起來(lái)。

也可以增加一些磨砂透明效果，讓圖標(biāo)豐富起來(lái)。這些細(xì)節(jié)大家都可以大膽嘗試。

如果你感覺你的圖標(biāo)缺少點(diǎn)創(chuàng)新，加點(diǎn)漸變，加點(diǎn)磨砂效果，可能效果會(huì)瞬間不一樣。

這兩年隨著iOS暗黑模式的運(yùn)用，這種漸變風(fēng)格在深色底上運(yùn)用就更游刃有余了。所以這個(gè)風(fēng)格大家在項(xiàng)目改版和作品集改版都可以大量去嘗試。

▍幾何抽象圖標(biāo)

幾何抽象風(fēng)格顧名思義，就是用非常簡(jiǎn)單的幾何圖形去做圖標(biāo)，和2.5D相反，它需要營(yíng)造一些抽象空間，才能更有吸引力。如上圖的一組幾何抽象圖標(biāo)，第一眼可能不知道什么意思，但是仔細(xì)看，每個(gè)都有自己獨(dú)特含義

幾何抽象圖標(biāo)，它不會(huì)用一些大家生活熟悉的物，但是圖標(biāo)都會(huì)用一些抽象幾何圖形組合，通過(guò)色彩疊加，漸變顏色方向運(yùn)用，形成一些空間感。比如上圖這個(gè)圖標(biāo)，就通過(guò)漸變形成一個(gè)不可能的空間。

這類圖標(biāo)用在LOGO里面也是合適的，非常簡(jiǎn)約高級(jí)。今年大家如果做品牌可以大膽試試。

顏色大多運(yùn)用這種路徑漸變，讓它有一種流動(dòng)感。

比如這組天氣圖標(biāo)，也是很高級(jí)，簡(jiǎn)單的幾何圖形就把天氣的變化隱喻進(jìn)去了。

抽象圖標(biāo)因?yàn)樵O(shè)計(jì)比較大膽比較前衛(wèi)，所以用色要求比較高，配色一定要高級(jí)，有特點(diǎn)，特別是漸變的層次感要有。

— 點(diǎn)擊圖片查看更多視覺新意 —

今天的文末福利：

贈(zèng)送大家【 1000+款幾何填充底紋，AI格式】 感興趣的小伙伴可以都拿去！

領(lǐng)取方式如下：

1.首先在文章底部點(diǎn)個(gè)贊 和 在看

底紋，小編會(huì) 將下載地址發(fā)給你 （小編不是機(jī)器人，回復(fù)會(huì)慢一些，大家稍等 ）。

提前加好友，朋友圈每日放送更多有價(jià)值的設(shè)計(jì)資源

關(guān)注設(shè)計(jì)圈視頻號(hào)，獲取更多有趣有料的設(shè)計(jì)知識(shí)

▼

#進(jìn)設(shè)計(jì)群#

設(shè)計(jì)圈交流群：僅對(duì)星標(biāo)“設(shè)計(jì)圈”公眾號(hào)的用戶開放。添加上方領(lǐng)福利的小編微信備注「設(shè)計(jì)群」加入。