編輯 | 蘇蘇

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

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

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

▍3D圖標(biāo)

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

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

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

展開全文

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

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

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

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

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

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

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

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

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

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

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

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

也可以做成貼紙周邊去運用，特別有親和力，讓品牌也生動起來了。

手繪圖標(biāo)也可以增加色彩，讓它個性起來，獨一無二起來。

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

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

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

韓國餓了么，整個主風(fēng)格就是用的手繪，手繪的美食圖標(biāo)，和手繪的地圖，是不是有點像在日本動畫片的感覺。因為本身在韓國使用外賣大多數(shù)也是年輕人，輕松有趣的設(shè)計語言讓人眼前一亮。

▍厚重的圖標(biāo)

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

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

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

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

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

▍2.5D圖標(biāo)

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

?????

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

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

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

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

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

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

▍極簡圖標(biāo)

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

??

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

圖形非常簡單干凈，讓人一目了然，沒有多余的元素?；睘楹喪撬磉_的核心。但該有的細(xì)節(jié)都要有。

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

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

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

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

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

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

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

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

▍漸變圖標(biāo)

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

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

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

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

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

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

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

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

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

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

顏色大多運用這種路徑漸變，讓它有一種流動感。

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

抽象圖標(biāo)因為設(shè)計比較大膽比較前衛(wèi)，所以用色要求比較高，配色一定要高級，有特點，特別是漸變的層次感要有。

— 點擊圖片查看更多視覺新意 —

今天的文末福利：

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

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

1.首先在文章底部點個贊 和 在看

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

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

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

▼

#進設(shè)計群#

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