UI設(shè)計(jì)中面性圖標(biāo)設(shè)計(jì)總結(jié)

　　圖標(biāo)在UI設(shè)計(jì)中占了一席之地，不同風(fēng)格的圖標(biāo)會影響頁面整體風(fēng)格效果。主流的圖標(biāo)可分為線性、面性、線面結(jié)合3大類，之前跟大家分享過線性圖標(biāo)今天AAA教育郭老師就來跟大家聊聊面性圖標(biāo)設(shè)計(jì)總結(jié)。
 

　　1.圖標(biāo)的作用
 

　　事物的價(jià)值在于它的用途是什么，圖標(biāo)的用途是幫助用戶理解信息，所以“識別性”是圖標(biāo)重要的價(jià)值之一。識別性可以分為兩個方面，一是含義識別，二是視覺識別。
 

　　1.1含義識別
 

　　含義識別就是你的圖標(biāo)能不能被用戶理解，在設(shè)計(jì)時(shí)要注意2個方面：
 

　　1. 要符合大眾認(rèn)知習(xí)慣，讓用戶不用思考就可以作出反應(yīng)。
 

　　2. 選擇真實(shí)世界中的物品為原型，使人下意識對圖標(biāo)有預(yù)期認(rèn)識，降低學(xué)習(xí)成本。
 

　　1.2視覺識別
 

　　視覺識別主要是視覺層面對用戶識別圖標(biāo)的影響，主要包括圖標(biāo)顏色和復(fù)雜度。
 

　　比如一組精致的圖標(biāo)縮小放在底部標(biāo)簽欄時(shí)，會不會因?yàn)閳D標(biāo)內(nèi)容過于密集而導(dǎo)致復(fù)雜呢?這種復(fù)雜就有可能造成圖標(biāo)的視覺識別障礙。
 

　　再比如面性圖標(biāo)比線性圖標(biāo)更被識別，如下圖面性的圖標(biāo)是不是識別性更高一些呢。
 

　　因?yàn)槿搜垡ǜ鄷r(shí)間來識別線性圖標(biāo)，所以在實(shí)際應(yīng)用中，一樣的圖標(biāo)內(nèi)容，線性圖標(biāo)在裝飾性上效果更好。

 

　　2.面性圖標(biāo)常見樣式
 

　　分析了市面上常見的圖標(biāo)之后，這里總結(jié)出了以下幾種類型：
 

　　1、面性單色
 

　　2、面性多色
 

　　多色的處理方法有：
 

　　2.1 漸變
 

　　漸變可以提升圖標(biāo)質(zhì)感，主要可分為弱漸變和強(qiáng)漸變
 

　　弱漸變一般在同色系中變化，更有質(zhì)感
 

　　強(qiáng)漸變絢麗豐富大膽，常出現(xiàn)在一些運(yùn)營活動或游戲界面
 

　　2.2透明度變化
 

　　2.3層疊
 

　　通過顏色的深淺變化，使得形狀斜街處產(chǎn)生明暗變化，圖標(biāo)更有有層次感。
 

　　3、面性模糊
 

　　4、面性寫實(shí)
 

　　下面是部分案例示意圖：
 

　　1、面性單色
 

　　1.1 面性-單色-無彩色

 

　　1.2. 面性-單色-彩色

 

　　1.3. 面性-單色-透明度變化
 

　　透明度的變化，讓原本單色的圖標(biāo)設(shè)計(jì)細(xì)節(jié)更加豐富。

 

　　1.4. 面性-單色-透明度層疊

 

　　1.5. 面性-單色漸變

 

　　1.6. 面性-單色-斜線漸變

 

　　1.7. 面性-單色漸變-透明度變化

 

　　1.8. 面性-單色漸變-層疊
 

　　透明度變化，疊加之后產(chǎn)生交錯的負(fù)形，讓圖標(biāo)增加了層次感和空間感，降低了厚重感。

 

　　2、面性多色
 

　　2.1.面性-雙色-層疊

 

　　2.2. 面性-雙色-漸變-層疊

 

　　2.3. 面性-底板漸變-透明度變化

 

　　2.4. 面性-底板漸變-透明度漸變

 

　　3、面性模糊
 

　　高斯模糊的效果，使圖標(biāo)富有層次感和空間感，也有較強(qiáng)的設(shè)計(jì)感。

 

　　4、面性寫實(shí)

 

　　還是那句話，對于設(shè)計(jì)，一定要長期積累，細(xì)心研究，總結(jié)分析，形成自己的方法論，這樣才能少走彎路。我也還在不斷研究的路上，希望大家互相學(xué)習(xí)進(jìn)步，加油!
 

　　好了，今天的分享就到這里了因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請?jiān)L問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。