圖標(biāo)在UI設(shè)計(jì)中占了一席之地,不同風(fēng)格的圖標(biāo)會(huì)影響頁(yè)面整體風(fēng)格效果。主流的圖標(biāo)可分為線性、面性、線面結(jié)合3大類,之前跟大家分享過線性圖標(biāo)今天AAA教育郭老師就來跟大家聊聊面性圖標(biāo)設(shè)計(jì)總結(jié)。
1.圖標(biāo)的作用
事物的價(jià)值在于它的用途是什么,圖標(biāo)的用途是幫助用戶理解信息,所以“識(shí)別性”是圖標(biāo)重要的價(jià)值之一。識(shí)別性可以分為兩個(gè)方面,一是含義識(shí)別,二是視覺識(shí)別。
1.1含義識(shí)別
含義識(shí)別就是你的圖標(biāo)能不能被用戶理解,在設(shè)計(jì)時(shí)要注意2個(gè)方面:
1. 要符合大眾認(rèn)知習(xí)慣,讓用戶不用思考就可以作出反應(yīng)。
2. 選擇真實(shí)世界中的物品為原型,使人下意識(shí)對(duì)圖標(biāo)有預(yù)期認(rèn)識(shí),降低學(xué)習(xí)成本。
1.2視覺識(shí)別
視覺識(shí)別主要是視覺層面對(duì)用戶識(shí)別圖標(biāo)的影響,主要包括圖標(biāo)顏色和復(fù)雜度。
比如一組精致的圖標(biāo)縮小放在底部標(biāo)簽欄時(shí),會(huì)不會(huì)因?yàn)閳D標(biāo)內(nèi)容過于密集而導(dǎo)致復(fù)雜呢?這種復(fù)雜就有可能造成圖標(biāo)的視覺識(shí)別障礙。
再比如面性圖標(biāo)比線性圖標(biāo)更被識(shí)別,如下圖面性的圖標(biāo)是不是識(shí)別性更高一些呢。
因?yàn)槿搜垡ǜ鄷r(shí)間來識(shí)別線性圖標(biāo),所以在實(shí)際應(yīng)用中,一樣的圖標(biāo)內(nèi)容,線性圖標(biāo)在裝飾性上效果更好。
分析了市面上常見的圖標(biāo)之后,這里總結(jié)出了以下幾種類型:
1、面性單色
2、面性多色
多色的處理方法有:
2.1 漸變
漸變可以提升圖標(biāo)質(zhì)感,主要可分為弱漸變和強(qiáng)漸變
弱漸變一般在同色系中變化,更有質(zhì)感
強(qiáng)漸變絢麗豐富大膽,常出現(xiàn)在一些運(yùn)營(yíng)活動(dòng)或游戲界面
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)生交錯(cuò)的負(fù)形,讓圖標(biāo)增加了層次感和空間感,降低了厚重感。
2、面性多色
2.1.面性-雙色-層疊
2.2. 面性-雙色-漸變-層疊
2.3. 面性-底板漸變-透明度變化
2.4. 面性-底板漸變-透明度漸變
3、面性模糊
高斯模糊的效果,使圖標(biāo)富有層次感和空間感,也有較強(qiáng)的設(shè)計(jì)感。
4、面性寫實(shí)
還是那句話,對(duì)于設(shè)計(jì),一定要長(zhǎng)期積累,細(xì)心研究,總結(jié)分析,形成自己的方法論,這樣才能少走彎路。我也還在不斷研究的路上,希望大家互相學(xué)習(xí)進(jìn)步,加油!
好了,今天的分享就到這里了因此,您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息,請(qǐng)?jiān)L問AAA教育,包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。
填寫下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!
?2007-2022/ m.lb577.com 北京漫動(dòng)者數(shù)字科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc