插畫將用戶帶入敘事中,講述一個故事,而圖標(biāo)則有更多的功能目的。它們代表內(nèi)容而不是補充內(nèi)容。一般來說,插畫使用隱喻和敘事來描繪大型主題概念。而圖標(biāo)則簡單得多,更適合描繪非常具體的概念。把插畫看作是段落,把圖標(biāo)看作是要點。
我分享的一些圖標(biāo)相當(dāng)詳細,可以作為插畫處理,所以我讓你決定它們屬于哪一類。
當(dāng)然有幾十種風(fēng)格,然而在本文中,我將談?wù)勎易钕矚g的那些風(fēng)格。
1. 線性圖標(biāo)
通常,黑色的輪廓,1到3個像素,圖標(biāo)的某些部分是彩色的。
這些圖標(biāo)讓網(wǎng)站看起來很有品位,幾乎適合任何風(fēng)格。從更大的圖標(biāo)。
audt.to網(wǎng)站的圖標(biāo)
...到更小、更簡單:
paymentx.io的圖標(biāo)
......或者更細致更有品位:
想法
讓一個再簡單不過的圖標(biāo)成為熱門的方法之一就是給它做個動畫:
從Lordicon這個動畫互動圖標(biāo)庫中獲得一些靈感:
要避免什么
讓我們來看看這套圖標(biāo),看看哪些地方可以做得更好:
kencko.com的圖標(biāo)
1.使用相同的視角。
2.檢查細節(jié)。不要讓一些圖標(biāo)極簡,而其他的圖標(biāo)超級詳細。
3.牢記圖標(biāo)的權(quán)重。有些對象在視覺上比其他對象占據(jù)更多空間。
2. "線條+色塊 “圖標(biāo)
看看這些明亮而友好的插畫:
Packlane的圖標(biāo)
添加色塊可以是一個簡單的方法來刷新極簡主義和標(biāo)準(zhǔn)圖標(biāo)。
Habx的圖標(biāo)
3. 等距插畫
等距插畫可能需要花費很多時間,但結(jié)果往往是非常值得的。
模仿現(xiàn)實或創(chuàng)造一個不真實的魔幻世界,都可以用等距插畫來實現(xiàn)。
在這種情況下,還有很多公司正在創(chuàng)建遵循相同樣式的等軸測圖,從而帶來整體的用戶體驗:
4. 抽象的極簡主義插畫
僅僅是幾個線條和圓圈,如果沒有后續(xù)文字,幾乎無法理解圖標(biāo)的含義。
同時,我們也很難錯過這幅插畫--它實在是太大膽了,太搶眼了且好端端的不規(guī)則。
5. 3D圖標(biāo)
作為一種相當(dāng)不尋常的方式來表示一些想法,3D圖標(biāo)在創(chuàng)作中并不復(fù)雜。通常情況下,這些圖標(biāo)在明亮的色塊上看起來很神奇。
Wealthsimple的圖標(biāo)
豐富的價格計劃設(shè)計與一些驚人的3D圖標(biāo)。
要避免什么
1.盡量不要寫實,而是要增加你的個人風(fēng)格,股票圖標(biāo)很少能喚起人們的信任或興趣。
2.不要混合使用軸側(cè)和三維透視圖標(biāo)。
3.請記住,詳細的圖標(biāo)應(yīng)該足夠大,以便于識別它們。
6. 極簡主義插畫
相當(dāng)容易找到或創(chuàng)建,他們將適用于任何網(wǎng)站或應(yīng)用程序。
想法
嘗試重新思考標(biāo)準(zhǔn)圖標(biāo),并創(chuàng)建極簡版的圖標(biāo)。
要避免什么
過于通用的圖形模板,沒有人可以涉及到。
7. 圖文并茂
這可能是最廣泛使用的風(fēng)格。聽起來可能是一種沉悶的風(fēng)格,然而一些公司證明它可以相當(dāng)時尚。
最大的挑戰(zhàn)是設(shè)計的圖標(biāo)不僅要支持你的想法,而且要以愉快和獨特的外觀為產(chǎn)品增加價值。
想法
部分動畫圖標(biāo)。
8. 補充內(nèi)容的圖標(biāo)
有時候,文字附帶的圖標(biāo)有點出乎意料。
如果你的大多數(shù)用戶發(fā)現(xiàn)很容易將圖標(biāo)與描述聯(lián)系起來,而且圖標(biāo)對他們來說似乎很有價值,那么你就走上了正軌。讓圖標(biāo)變得有趣或有感情,會提升整體體驗。
然而有時很難將圖標(biāo)與描述聯(lián)系起來,或者對圖標(biāo)的認知與它所描述的點的主旨不同。
不要讓人不知道你想用這個圖標(biāo)來表達什么。圖標(biāo)要絕對清晰,不給人留下歧義。
9. 自定義繪制的圖標(biāo)
這種類型的圖標(biāo)可能并不適合每家企業(yè),但一些產(chǎn)品品牌可能會覺得它們很有用。
繪制這樣的圖標(biāo)需要一定的技巧。然而,你可以嘗試Photoshop或Illustrator的插件,將圖像轉(zhuǎn)化為草圖,并節(jié)省一些時間。
“彎曲 "圖標(biāo)。
把毛筆的風(fēng)格改成手繪粉筆,會有很大的不同。
-完-
原文:https://uxplanet.org/9-catchy-icon-styles-to-kill-it-in-your-next-project-618f952cfc83
全站高品質(zhì)素材免費下載!