圖標(biāo)中的輔助圖形,怎么設(shè)計(jì)才有亮點(diǎn)?

2022-6-12    純純

1、什么是圖標(biāo)輔助圖形?


很多人知道品牌設(shè)計(jì)中有輔助圖形的概念,輔助圖形對(duì)于品牌識(shí)別體系非常重要,但其實(shí)在圖標(biāo)設(shè)計(jì)時(shí),也會(huì)經(jīng)常用到輔助圖形。圖標(biāo)中的輔助圖形,簡(jiǎn)單理解就是圖標(biāo)的裝飾元素,它能讓圖標(biāo)設(shè)計(jì)有更多的細(xì)節(jié)和特點(diǎn),強(qiáng)化圖標(biāo)識(shí)別性,同時(shí)還能讓圖標(biāo)更具視覺(jué)表現(xiàn)力。


舉個(gè)例子,像下面這套圖標(biāo)中的淺色部分和噪點(diǎn)就是圖標(biāo)中的輔助圖形,去掉這些輔助圖形不大會(huì)影響圖標(biāo)的識(shí)別性,但增加這些輔助圖形后,圖標(biāo)變得更有特點(diǎn),更容易被記住。


undefined

https://dribbble.com/shots/14490441-Feature-Icons


2、如何用好圖標(biāo)輔助圖形?


善用輔助圖形為圖標(biāo)增強(qiáng)表現(xiàn)力是圖標(biāo)設(shè)計(jì)中的一個(gè)秘密武器,彩云在工作中總結(jié)了一些經(jīng)驗(yàn),大概有以下5點(diǎn):


1)盡量讓輔助圖形有意義


《簡(jiǎn)約至上》這本書(shū)中提到過(guò)一個(gè)刪除原則:刪除是將不必要的元素都剔除掉,直到不能再刪除為止。那么在圖標(biāo)設(shè)計(jì)中,這一點(diǎn)尤為重要,因?yàn)閳D標(biāo)本身就濃縮了大量的信息,所以要讓用到的輔助圖形有它存在的價(jià)值,不加多余的元素。


比如下面這個(gè)案例,容易看出其中的輔助圖形是綠色部分。在圖標(biāo)中它們代表的是行動(dòng)或者結(jié)果,作為事物主體的補(bǔ)充,可以理解為主語(yǔ)和賓語(yǔ)的關(guān)系。因?yàn)橛辛诉@樣的輔助圖形存在,強(qiáng)化了圖標(biāo)的識(shí)別性,這就能讓圖標(biāo)增色不少。


undefined

https://dribbble.com/shots/14374503-Covid-19-Back-to-Work


下面這個(gè)案例是星球中一位同學(xué)的練習(xí),整體來(lái)說(shuō)還是不錯(cuò)的,但就輔助圖形的使用上看就有些小問(wèn)題了。淡黃色的輔助圖形圓形跟主體圖形沒(méi)有太大的關(guān)聯(lián),也沒(méi)有太多實(shí)際意義,可以理解為強(qiáng)行為了統(tǒng)一而統(tǒng)一。圖標(biāo)主體已經(jīng)做了雙色設(shè)計(jì),增加這些圓形后讓圖標(biāo)變得比較復(fù)雜且刪除對(duì)圖標(biāo)意義的表達(dá)也沒(méi)影響,所以這里的輔助圖形的使用稍顯多余。 


undefined


2)結(jié)合品牌色

在配色上,輔助圖形還可以結(jié)合品牌色彩。用品牌色的主色作為主體顏色,輔助色作為輔助圖形的顏色,或者直接用品牌主色調(diào)作為輔助圖形的配色都可以作為圖標(biāo)設(shè)計(jì)的亮點(diǎn)。


品牌色的加入,能夠讓圖標(biāo)配色的使用找到立足的理由,馬上就能加分。


比如大家經(jīng)常在畫(huà)圖標(biāo)的時(shí)候,圖標(biāo)主體通常以單色為主,但此時(shí)可以嘗試加入以品牌色裝飾元素作為點(diǎn)綴,立馬就能提升圖標(biāo)細(xì)節(jié)。下面這個(gè)案例是愛(ài)奇藝的首頁(yè)圖標(biāo)設(shè)計(jì),能看出來(lái)它的輔助圖形設(shè)計(jì)配色上是按品牌綠色來(lái)設(shè)計(jì)的。


undefined


3)避免太過(guò)一致

在使用輔助圖形的時(shí)候,尤其是對(duì)于多圖標(biāo)體系來(lái)說(shuō),完全一致的輔助圖形就顯得比較呆板,缺乏細(xì)節(jié)。再拿上面那個(gè)星球同學(xué)的練習(xí)來(lái)看,不看輔助圖形的具體含義和復(fù)雜度,在整體上看起來(lái)也缺乏變化,圓形都在同一個(gè)位置,保持著同一個(gè)大小和顏色。

undefined


輔助圖形的使用想要有更好的效果,盡量在一定的范圍能多一些變化。


比如下面這個(gè)例子,雖然圖形的位置和大小都一樣,但在顏色上做了不同的變化,整體看來(lái)細(xì)節(jié)度還是不錯(cuò)的。


undefined

https://dribbble.com/shots/14728145-Project-icon


再比如下面這個(gè)案例,輔助圖形的使用有豐富的變化,使得圖標(biāo)的細(xì)節(jié)滿滿。


undefined

https://dribbble.com/shots/3861669-Australia-Post-Iconography


另外值得注意的是,變化應(yīng)該在一定的范圍,不可以變化太大。


比如星球中另一位同學(xué)的練習(xí),她在圖標(biāo)的底部用了淺色的藍(lán)色填充作為輔助圖形,但這3個(gè)之間的輔助圖形差異太大,前面2個(gè)還能理解是一套,但對(duì)于第三個(gè)圖標(biāo)來(lái)說(shuō),輔助圖形的比例明顯大于前2個(gè)圖標(biāo),顯得不夠統(tǒng)一。


undefined


而對(duì)于下面這組圖標(biāo)來(lái)說(shuō),藍(lán)色的輔助圖形的面積變化相對(duì)一致,顯得更為統(tǒng)一。


undefined

https://dribbble.com/shots/3817782-Gretchen-Rubin-Icons


4)不要喧賓奪主


雖然使用圖標(biāo)輔助圖形會(huì)讓圖標(biāo)顯得更加有特點(diǎn),但也要分清主次,不應(yīng)該超過(guò)圖標(biāo)本身的核心意義,不能太搶用戶的注意力而影響識(shí)別性。


比如下面的案例,圖標(biāo)主體特征一眼就能識(shí)別出來(lái),輔助圖形的加入并不會(huì)影響主次關(guān)系。


undefined


https://dribbble.com/shots/3235311-Clearly-Eyewear-Iconography  


星球中的一位同學(xué)做的練習(xí),這里的輔助圖形有些太過(guò)于搶眼,且蓋在圖標(biāo)上面影響了一定的圖標(biāo)識(shí)別性。修改方向是如果能把輔助圖形的玻璃質(zhì)感做一個(gè)強(qiáng)化,增加一些透明度,把主體元素凸顯出來(lái)就會(huì)好很多。


undefined


這是另一位同學(xué)的練習(xí),也是同樣的問(wèn)題,輔助圖形搶了主體元素的風(fēng)頭。修改方向是把輔助圖形改小一些就會(huì)好很多。 


undefined


她畫(huà)這個(gè)圖標(biāo)是臨摹了原作的效果,能看到原作中的星星輔助圖形小一些會(huì)好很多。 


undefined

5)風(fēng)格保持一致


圖標(biāo)輔助圖形也是圖標(biāo)的一部分,從整體上也需要遵循圖標(biāo)本身的風(fēng)格體系。


這是星球中一位同學(xué)的練習(xí),輔助圖形用星星是沒(méi)問(wèn)題的,但這里星星的尖角相對(duì)于主圖形的圓角來(lái)說(shuō)就顯得風(fēng)格不夠統(tǒng)一,把星星的尖角改為圓角就會(huì)好很多。


undefined


這位同學(xué)的作品也是臨摹了原作的效果,能看到在原作中輔助圖形都是以同樣的圓潤(rùn)圖形為主的,這里就體現(xiàn)了風(fēng)格的一致性。 


undefined


比如對(duì)照看看MBE的圖標(biāo)風(fēng)格,他的輔助圖形跟主圖形一樣,都是比較圓潤(rùn)可愛(ài)的,這樣看起來(lái)整體的風(fēng)格更加統(tǒng)一和諧。

undefined

作者:彩云Sky         來(lái)源:站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群,每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì),如果有興趣的話,可以進(jìn)入一起成長(zhǎng)學(xué)習(xí),請(qǐng)掃碼藍(lán)小助,報(bào)下信息,藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請(qǐng)與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計(jì)尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題,請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)m.820esy.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 
UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司


分享本文至:

日歷

鏈接

個(gè)人資料

存檔