2022-6-12 純純
很多人知道品牌設(shè)計中有輔助圖形的概念，輔助圖形對于品牌識別體系非常重要，但其實在圖標(biāo)設(shè)計時，也會經(jīng)常用到輔助圖形。圖標(biāo)中的輔助圖形，簡單理解就是圖標(biāo)的裝飾元素，它能讓圖標(biāo)設(shè)計有更多的細(xì)節(jié)和特點(diǎn)，強(qiáng)化圖標(biāo)識別性，同時還能讓圖標(biāo)更具視覺表現(xiàn)力。
舉個例子，像下面這套圖標(biāo)中的淺色部分和噪點(diǎn)就是圖標(biāo)中的輔助圖形，去掉這些輔助圖形不大會影響圖標(biāo)的識別性，但增加這些輔助圖形后，圖標(biāo)變得更有特點(diǎn)，更容易被記住。
https://dribbble.com/shots/14490441-Feature-Icons
善用輔助圖形為圖標(biāo)增強(qiáng)表現(xiàn)力是圖標(biāo)設(shè)計中的一個秘密武器，彩云在工作中總結(jié)了一些經(jīng)驗，大概有以下5點(diǎn)：
《簡約至上》這本書中提到過一個刪除原則：刪除是將不必要的元素都剔除掉，直到不能再刪除為止。那么在圖標(biāo)設(shè)計中，這一點(diǎn)尤為重要，因為圖標(biāo)本身就濃縮了大量的信息，所以要讓用到的輔助圖形有它存在的價值，不加多余的元素。
比如下面這個案例，容易看出其中的輔助圖形是綠色部分。在圖標(biāo)中它們代表的是行動或者結(jié)果，作為事物主體的補(bǔ)充，可以理解為主語和賓語的關(guān)系。因為有了這樣的輔助圖形存在，強(qiáng)化了圖標(biāo)的識別性，這就能讓圖標(biāo)增色不少。
https://dribbble.com/shots/14374503-Covid-19-Back-to-Work
下面這個案例是星球中一位同學(xué)的練習(xí)，整體來說還是不錯的，但就輔助圖形的使用上看就有些小問題了。淡黃色的輔助圖形圓形跟主體圖形沒有太大的關(guān)聯(lián)，也沒有太多實際意義，可以理解為強(qiáng)行為了統(tǒng)一而統(tǒng)一。圖標(biāo)主體已經(jīng)做了雙色設(shè)計，增加這些圓形后讓圖標(biāo)變得比較復(fù)雜且刪除對圖標(biāo)意義的表達(dá)也沒影響，所以這里的輔助圖形的使用稍顯多余。
在配色上，輔助圖形還可以結(jié)合品牌色彩。用品牌色的主色作為主體顏色，輔助色作為輔助圖形的顏色，或者直接用品牌主色調(diào)作為輔助圖形的配色都可以作為圖標(biāo)設(shè)計的亮點(diǎn)。
品牌色的加入，能夠讓圖標(biāo)配色的使用找到立足的理由，馬上就能加分。
比如大家經(jīng)常在畫圖標(biāo)的時候，圖標(biāo)主體通常以單色為主，但此時可以嘗試加入以品牌色裝飾元素作為點(diǎn)綴，立馬就能提升圖標(biāo)細(xì)節(jié)。下面這個案例是愛奇藝的首頁圖標(biāo)設(shè)計，能看出來它的輔助圖形設(shè)計配色上是按品牌綠色來設(shè)計的。
在使用輔助圖形的時候，尤其是對于多圖標(biāo)體系來說，完全一致的輔助圖形就顯得比較呆板，缺乏細(xì)節(jié)。再拿上面那個星球同學(xué)的練習(xí)來看，不看輔助圖形的具體含義和復(fù)雜度，在整體上看起來也缺乏變化，圓形都在同一個位置，保持著同一個大小和顏色。
輔助圖形的使用想要有更好的效果，盡量在一定的范圍能多一些變化。
比如下面這個例子，雖然圖形的位置和大小都一樣，但在顏色上做了不同的變化，整體看來細(xì)節(jié)度還是不錯的。
https://dribbble.com/shots/14728145-Project-icon
再比如下面這個案例，輔助圖形的使用有豐富的變化，使得圖標(biāo)的細(xì)節(jié)滿滿。
https://dribbble.com/shots/3861669-Australia-Post-Iconography
另外值得注意的是，變化應(yīng)該在一定的范圍，不可以變化太大。
比如星球中另一位同學(xué)的練習(xí)，她在圖標(biāo)的底部用了淺色的藍(lán)色填充作為輔助圖形，但這3個之間的輔助圖形差異太大，前面2個還能理解是一套，但對于第三個圖標(biāo)來說，輔助圖形的比例明顯大于前2個圖標(biāo)，顯得不夠統(tǒng)一。
而對于下面這組圖標(biāo)來說，藍(lán)色的輔助圖形的面積變化相對一致，顯得更為統(tǒng)一。
https://dribbble.com/shots/3817782-Gretchen-Rubin-Icons
雖然使用圖標(biāo)輔助圖形會讓圖標(biāo)顯得更加有特點(diǎn)，但也要分清主次，不應(yīng)該超過圖標(biāo)本身的核心意義，不能太搶用戶的注意力而影響識別性。
比如下面的案例，圖標(biāo)主體特征一眼就能識別出來，輔助圖形的加入并不會影響主次關(guān)系。
https://dribbble.com/shots/3235311-Clearly-Eyewear-Iconography
星球中的一位同學(xué)做的練習(xí)，這里的輔助圖形有些太過于搶眼，且蓋在圖標(biāo)上面影響了一定的圖標(biāo)識別性。修改方向是如果能把輔助圖形的玻璃質(zhì)感做一個強(qiáng)化，增加一些透明度，把主體元素凸顯出來就會好很多。
這是另一位同學(xué)的練習(xí)，也是同樣的問題，輔助圖形搶了主體元素的風(fēng)頭。修改方向是把輔助圖形改小一些就會好很多。
她畫這個圖標(biāo)是臨摹了原作的效果，能看到原作中的星星輔助圖形小一些會好很多。
圖標(biāo)輔助圖形也是圖標(biāo)的一部分，從整體上也需要遵循圖標(biāo)本身的風(fēng)格體系。
這是星球中一位同學(xué)的練習(xí)，輔助圖形用星星是沒問題的，但這里星星的尖角相對于主圖形的圓角來說就顯得風(fēng)格不夠統(tǒng)一，把星星的尖角改為圓角就會好很多。
這位同學(xué)的作品也是臨摹了原作的效果，能看到在原作中輔助圖形都是以同樣的圓潤圖形為主的，這里就體現(xiàn)了風(fēng)格的一致性。
比如對照看看MBE的圖標(biāo)風(fēng)格，他的輔助圖形跟主圖形一樣，都是比較圓潤可愛的，這樣看起來整體的風(fēng)格更加統(tǒng)一和諧。
藍(lán)藍(lán)設(shè)計的小編 http://m.yvirxh.cn