国产亚洲精_丰满老熟好大的大bbb_男男激情做爰视频免费观看_欧美一区二区三区精品国产

如何選擇合適的圖標(biāo)?來看這份圖標(biāo)類型和風(fēng)格匯總

2021-1-27    ui設(shè)計(jì)分享達(dá)人

常見的分類是簡單的線性分類,缺少立體化的圖標(biāo)分類思維。文章通過梳理來幫助大家對(duì)不同類型及風(fēng)格的圖標(biāo)有一個(gè)體系化的認(rèn)知。

大家好,我是Clippp??吹胶玫膱D標(biāo)我們會(huì)習(xí)慣性地截圖保存,但隨著收集的圖標(biāo)越來越多,會(huì)發(fā)現(xiàn)對(duì)圖標(biāo)的分類會(huì)變得越來越混亂…做設(shè)計(jì)時(shí)也不清楚到底該參考或運(yùn)用哪種風(fēng)格最合適。來看看如何解決這些問題!

一、定義圖標(biāo)類型

對(duì)圖標(biāo)進(jìn)行分類時(shí),普遍會(huì)遇到的問題是一個(gè)圖標(biāo)有多種風(fēng)格。例如下面這個(gè)水滴圖標(biāo),樣式很簡單,但可以劃分到多個(gè)類別中。

面對(duì)這樣的問題,推薦使用系統(tǒng)性的結(jié)構(gòu)來劃分圖標(biāo)類別: 
  • 首先將圖標(biāo)按尺寸大小分為兩類;

  • 繼續(xù)細(xì)分對(duì)應(yīng)的面性、線性、線面結(jié)合、扁平、擬物化等類型;

  • 最后選擇標(biāo)準(zhǔn)、容器、漸變、3D、手繪、陰影等風(fēng)格。

利用這種結(jié)構(gòu)層級(jí),可以明確定義圖標(biāo)類別。

二、圖標(biāo)尺寸

圖標(biāo)的大小取決于具體功能。例如帶有漸變和陰影的圖標(biāo)看起來很酷,但把它縮小到16px,這些酷炫的效果都無法呈現(xiàn)出來。

在對(duì)圖標(biāo)歸類時(shí),首先要考慮圖標(biāo)用在什么位置需要多大尺寸。這里將圖標(biāo)分為兩大類: 
  • 大尺寸圖標(biāo)通常指標(biāo)志性圖標(biāo),例如App啟動(dòng)圖標(biāo)或代表品牌形象; 
  • 小尺寸圖標(biāo)用作UI控件,起到引導(dǎo)功能或裝飾目的。

三、圖標(biāo)類型

確定圖標(biāo)尺寸后,進(jìn)一步細(xì)分圖標(biāo)類型: 
面性圖標(biāo) 
線性圖標(biāo) 
線面結(jié)合圖標(biāo) 
扁平化圖標(biāo) 
擬物化圖標(biāo) 


利用這種簡單的分類方式就能避免圖標(biāo)發(fā)生重疊。另外擬物化這種細(xì)膩的風(fēng)格不適用于小尺寸圖標(biāo)中,所以在小圖標(biāo)分類中沒有展示。

四、圖標(biāo)組成


圖標(biāo)尺寸越小,展示的細(xì)節(jié)越有限。相比于大圖標(biāo),小圖標(biāo)的尺寸有一定局限性,圖標(biāo)組成包括 標(biāo)準(zhǔn)和容器兩種。 


大圖標(biāo)利用尺寸上的優(yōu)勢(shì)能展示更多內(nèi)容,分為多種組成形式。

五、小尺寸圖標(biāo)樣式


簡單的圖像可以更具包容性。圖標(biāo)的尺寸越小,越考驗(yàn)設(shè)計(jì)師傳達(dá)信息的能力。 

1.面性圖標(biāo)

1.1標(biāo)準(zhǔn)面性圖標(biāo)

面性圖標(biāo)易識(shí)別,適合應(yīng)用在小尺寸圖標(biāo)中。 
關(guān)鍵點(diǎn):
確保圖標(biāo)有清晰的邊緣,避免羽化; 
圖標(biāo)復(fù)雜程度隨著尺寸變小而靈活調(diào)整。 

1.2帶有背景色的面性圖標(biāo)

彩色背景為簡約設(shè)計(jì)帶來了更多可能。通過這個(gè)技巧使面性圖標(biāo)更友好,更具吸引力。 
關(guān)鍵點(diǎn):
為背景選擇4-12種顏色。 
考慮圖標(biāo)是淺色還是深色,是否適用于所有背景色。 
在彩色背景上使用白色圖標(biāo)比黑色效果更好。 

2.線性圖標(biāo)

2.1標(biāo)準(zhǔn)線性圖標(biāo)

線性圖標(biāo)因?yàn)楹啙嵭院同F(xiàn)代性而受到用戶的歡迎。隨著屏顯越來越清晰,我們可以更加大膽地使用線性圖標(biāo)。 
關(guān)鍵點(diǎn):
確保輪廓像素清晰。 
越簡單越好。 
追求更簡單的細(xì)節(jié)。 

2.2雙色線性圖標(biāo)

設(shè)計(jì)小尺寸圖標(biāo)時(shí),必須放棄細(xì)節(jié)并強(qiáng)調(diào)簡單的形狀。但當(dāng)使用一種顏色效果不太理想時(shí),可以考慮添加一些顏色。 
關(guān)鍵點(diǎn):
使用兩種搭配和諧的顏色。 
考慮將一種顏色用于主要形狀,另一種顏色用于細(xì)節(jié)。 
少即是多。 
使用粗線條。 

3.線面結(jié)合圖標(biāo)

線面結(jié)合擁有更多細(xì)節(jié),提升用戶的愉悅感。 
關(guān)鍵點(diǎn):
最好使用深色而不是純黑色描邊。 
限制圖標(biāo)的顏色種類。 
避免過多細(xì)節(jié)。 

 4.扁平化圖標(biāo) 

扁平化圖標(biāo)既簡單又巧妙,表達(dá)品牌形象的同時(shí)具有豐富的內(nèi)涵。 
關(guān)鍵點(diǎn):
避免在<20px的尺寸中使用此圖標(biāo)樣式。 
選擇2-3種顏色,可以一起使用。 
一種顏色為主色,另一種顏色應(yīng)為高光/細(xì)節(jié)色。 

六、大尺寸圖標(biāo)樣式

大尺寸圖標(biāo)在界面中使用較少,更多用于產(chǎn)品標(biāo)識(shí)或品牌宣傳。 

 1.線性圖標(biāo) 

1.1標(biāo)準(zhǔn)線性圖標(biāo)

在設(shè)計(jì)任何圖標(biāo)前,都可以先創(chuàng)建一個(gè)線性輪廓,確保形狀看起來足夠美觀后再添加顏色。 
關(guān)鍵點(diǎn):
這類圖標(biāo)最容易制作。 
避免出現(xiàn)輪廓羽化。 
線條粗細(xì)要一致。 
不要害怕添加細(xì)節(jié)。 

1.2漸變線性圖標(biāo)

添加一些漸變能讓原本單一的線性圖標(biāo)賦予更多的個(gè)性。 
關(guān)鍵點(diǎn):
在小尺寸圖標(biāo)中添加漸變會(huì)降低圖標(biāo)的可視性。 
選擇漸變時(shí),首先考慮鄰近色。 
線條越粗,漸變?cè)矫黠@。 
線條細(xì)節(jié)越多,漸變?cè)矫黠@。 

1.3等距線性圖標(biāo)

2.5D圖標(biāo)做起來會(huì)花費(fèi)很多時(shí)間,但效果會(huì)很好。在設(shè)計(jì)汽車、房屋、家具等實(shí)體產(chǎn)品時(shí),建議優(yōu)先使用2.5D圖標(biāo)。 
關(guān)鍵點(diǎn):
同一組圖標(biāo)要使用相同的等軸測(cè)網(wǎng)格。 
2.5D等軸圖標(biāo)很復(fù)雜,在較小的尺寸下會(huì)失去作用。 
如果可以,讓所有圖標(biāo)都朝向同一個(gè)方向。 

1.4手繪線性圖標(biāo)

隨著設(shè)計(jì)趨勢(shì)向簡約化、扁平化發(fā)展,很多設(shè)計(jì)師喪失了手繪圖標(biāo)的能力。實(shí)際上手繪圖標(biāo)讓品牌更真實(shí)甚至更有趣。 
關(guān)鍵點(diǎn):
手繪圖標(biāo)掃描后,再用數(shù)字方式重新繪制,這樣可以保證線條粗細(xì)一致。 
盡量讓所有的線條保持相同的顏色,這會(huì)使文件更小。 

1.5斷線圖標(biāo)

標(biāo)準(zhǔn)的線性圖標(biāo)看起來可能會(huì)很單調(diào),而簡單靈活的斷線處理能為圖標(biāo)增加更多個(gè)性。 
關(guān)鍵點(diǎn):
斷線粗細(xì)應(yīng)該相同。 
圖標(biāo)的中斷次數(shù)盡可能保持一致。 

1.6雙色線性圖標(biāo)

關(guān)鍵點(diǎn):
確保兩種顏色具有相同的對(duì)比度,否則可能會(huì)導(dǎo)致用戶看不清其中一種顏色,因此無法識(shí)別完整的圖標(biāo)。例如左下角的淺綠色對(duì)于視力弱的用戶來說就很不友好。 

2.線面結(jié)合圖標(biāo)

線面結(jié)合圖標(biāo)可以看作是添加顏色后的線性圖標(biāo)。線面結(jié)合具有很強(qiáng)的輪廓,讓圖標(biāo)能夠清晰可見。 
2.1標(biāo)準(zhǔn)線面結(jié)合圖標(biāo)

關(guān)鍵點(diǎn):
使用有限的顏色和統(tǒng)一的線條風(fēng)格,使圖標(biāo)具有品牌性。 
使用線條和點(diǎn)來添加更多細(xì)節(jié)。 
避免使用純黑色描邊。 

2.2帶有背景色的線面結(jié)合圖標(biāo)

關(guān)鍵點(diǎn):
描邊斷開時(shí),圖標(biāo)效果很更好。 
避免在小尺寸時(shí)使用。 
使用有限的調(diào)色板。 
考慮使用較淺的描邊/背景色。 
考慮在圖標(biāo)下方添加一條水平線,使圖形具有相同的位置(中間的圖標(biāo)示例) 

2.3錯(cuò)位線面結(jié)合圖標(biāo)

當(dāng)填充色與描邊錯(cuò)位時(shí),顏色移到右邊圖標(biāo)左上角留出高光,帶來一種清新的感覺。 
關(guān)鍵點(diǎn):
考慮使用斷線描邊。 
使用有限的調(diào)色板。 
確保描邊和填充色簡單且一致。 

2.4色塊圖標(biāo)

這種風(fēng)格的圖標(biāo)的特點(diǎn)在于并不依賴于顏色,僅將其用于裝飾。 
關(guān)鍵點(diǎn):
選擇有限的調(diào)色板。 
先關(guān)注輪廓再關(guān)注顏色,顏色僅用于裝飾。 
避免形狀色和背景色過于相似,降低可見度。 

2.4單色線面結(jié)合圖標(biāo)

關(guān)鍵點(diǎn):
避免使用暖色調(diào)尤其是紅色,會(huì)讓用戶感到壓抑。 
首先確定合適的描邊顏色,再考慮填充色。 

 3.扁平化圖標(biāo) 

扁平化圖標(biāo)通常沒有描邊,主要使用形狀和顏色來完成組合搭配。簡潔、友好和適當(dāng)?shù)募?xì)節(jié),讓這類圖標(biāo)非常具有吸引力。 
3.1標(biāo)準(zhǔn)扁平化圖標(biāo)

關(guān)鍵點(diǎn):
使用柔和的調(diào)色板,避免明亮的顏色。 
分清簡化和添加細(xì)節(jié)之間的界限。 

3.2帶有容器的扁平化圖標(biāo)

嘗試讓圖形打破容器,帶來動(dòng)態(tài)的感覺。 
關(guān)鍵點(diǎn):
嘗試讓圖形從容器中凸出來,以增加深度。 
因?yàn)樵谌萜髦校梢蕴砑痈嗟募?xì)節(jié)而不用擔(dān)心圖形變得混亂。 
嘗試使用正方形、橢圓形或與品牌相關(guān)的容器形狀。 

3.3等距圖標(biāo)

關(guān)鍵點(diǎn):
保持所有圖標(biāo)朝向同一方向。 
選擇恰當(dāng)?shù)恼{(diào)色板能讓圖標(biāo)看起來更一致。 
避免小尺寸使用。 

3.4半陰影扁平圖標(biāo)

半陰影圖標(biāo)是在扁平圖標(biāo)的基礎(chǔ)上添加半色調(diào)陰影,得到更具個(gè)性的圖標(biāo)。 
關(guān)鍵點(diǎn):
小尺寸圖標(biāo)不起作用。 
使用有限的調(diào)色板。 
確保所有的圖標(biāo)色調(diào)相似。 

3.5長陰影扁平圖標(biāo)

當(dāng)圖標(biāo)位于容器中時(shí),可以考慮添加長陰影,主要包括純色陰影和漸變陰影兩種類型。 
關(guān)鍵點(diǎn):
使容器具有相同的顏色或類似的色調(diào)。 
只在大尺寸圖標(biāo)中使用。 
將半陰影與長陰影組合使用效果更好。 

 4.擬物化圖標(biāo) 

擬物化圖標(biāo)實(shí)際上已經(jīng)包含了大部分的樣式,例如它們是立體的,有豐富的漸變和陰影。 

這種風(fēng)格的圖標(biāo)看起來與現(xiàn)實(shí)生活中的圖標(biāo)盡可能類似,讓用戶感到更舒適。 
關(guān)鍵點(diǎn):
考慮添加底部陰影。 
使光源來自同一方向。 
確保圖標(biāo)都朝向相同的方向。 
目前絕大多數(shù)界面不在有這種風(fēng)格的圖標(biāo),可以考慮使用3D建模來實(shí)現(xiàn)這種效果。 

總結(jié)

希望大家能對(duì)圖標(biāo)的分類及設(shè)計(jì)有更全面深入的認(rèn)識(shí),從而構(gòu)建一套完整的圖標(biāo)思維體系。


文章來源:站酷     作者:Clip設(shè)計(jì)夾



藍(lán)藍(lán)設(shè)計(jì)paul-jarrel.com )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

日歷

鏈接

個(gè)人資料

存檔