<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          圖標中的輔助圖形,怎么設計才有亮點?

          2022-6-12    純純

          1、什么是圖標輔助圖形?


          很多人知道品牌設計中有輔助圖形的概念,輔助圖形對于品牌識別體系非常重要,但其實在圖標設計時,也會經常用到輔助圖形。圖標中的輔助圖形,簡單理解就是圖標的裝飾元素,它能讓圖標設計有更多的細節和特點,強化圖標識別性,同時還能讓圖標更具視覺表現力。


          舉個例子,像下面這套圖標中的淺色部分和噪點就是圖標中的輔助圖形,去掉這些輔助圖形不大會影響圖標的識別性,但增加這些輔助圖形后,圖標變得更有特點,更容易被記住。


          undefined

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


          2、如何用好圖標輔助圖形?


          善用輔助圖形為圖標增強表現力是圖標設計中的一個秘密武器,彩云在工作中總結了一些經驗,大概有以下5點:


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


          《簡約至上》這本書中提到過一個刪除原則:刪除是將不必要的元素都剔除掉,直到不能再刪除為止。那么在圖標設計中,這一點尤為重要,因為圖標本身就濃縮了大量的信息,所以要讓用到的輔助圖形有它存在的價值,不加多余的元素。


          比如下面這個案例,容易看出其中的輔助圖形是綠色部分。在圖標中它們代表的是行動或者結果,作為事物主體的補充,可以理解為主語和賓語的關系。因為有了這樣的輔助圖形存在,強化了圖標的識別性,這就能讓圖標增色不少。


          undefined

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


          下面這個案例是星球中一位同學的練習,整體來說還是不錯的,但就輔助圖形的使用上看就有些小問題了。淡黃色的輔助圖形圓形跟主體圖形沒有太大的關聯,也沒有太多實際意義,可以理解為強行為了統一而統一。圖標主體已經做了雙色設計,增加這些圓形后讓圖標變得比較復雜且刪除對圖標意義的表達也沒影響,所以這里的輔助圖形的使用稍顯多余。 


          undefined


          2)結合品牌色

          在配色上,輔助圖形還可以結合品牌色彩。用品牌色的主色作為主體顏色,輔助色作為輔助圖形的顏色,或者直接用品牌主色調作為輔助圖形的配色都可以作為圖標設計的亮點。


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


          比如大家經常在畫圖標的時候,圖標主體通常以單色為主,但此時可以嘗試加入以品牌色裝飾元素作為點綴,立馬就能提升圖標細節。下面這個案例是愛奇藝的首頁圖標設計,能看出來它的輔助圖形設計配色上是按品牌綠色來設計的。


          undefined


          3)避免太過一致

          在使用輔助圖形的時候,尤其是對于多圖標體系來說,完全一致的輔助圖形就顯得比較呆板,缺乏細節。再拿上面那個星球同學的練習來看,不看輔助圖形的具體含義和復雜度,在整體上看起來也缺乏變化,圓形都在同一個位置,保持著同一個大小和顏色。

          undefined


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


          比如下面這個例子,雖然圖形的位置和大小都一樣,但在顏色上做了不同的變化,整體看來細節度還是不錯的。


          undefined

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


          再比如下面這個案例,輔助圖形的使用有豐富的變化,使得圖標的細節滿滿。


          undefined

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


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


          比如星球中另一位同學的練習,她在圖標的底部用了淺色的藍色填充作為輔助圖形,但這3個之間的輔助圖形差異太大,前面2個還能理解是一套,但對于第三個圖標來說,輔助圖形的比例明顯大于前2個圖標,顯得不夠統一。


          undefined


          而對于下面這組圖標來說,藍色的輔助圖形的面積變化相對一致,顯得更為統一。


          undefined

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


          4)不要喧賓奪主


          雖然使用圖標輔助圖形會讓圖標顯得更加有特點,但也要分清主次,不應該超過圖標本身的核心意義,不能太搶用戶的注意力而影響識別性。


          比如下面的案例,圖標主體特征一眼就能識別出來,輔助圖形的加入并不會影響主次關系。


          undefined


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


          星球中的一位同學做的練習,這里的輔助圖形有些太過于搶眼,且蓋在圖標上面影響了一定的圖標識別性。修改方向是如果能把輔助圖形的玻璃質感做一個強化,增加一些透明度,把主體元素凸顯出來就會好很多。


          undefined


          這是另一位同學的練習,也是同樣的問題,輔助圖形搶了主體元素的風頭。修改方向是把輔助圖形改小一些就會好很多。 


          undefined


          她畫這個圖標是臨摹了原作的效果,能看到原作中的星星輔助圖形小一些會好很多。 


          undefined

          5)風格保持一致


          圖標輔助圖形也是圖標的一部分,從整體上也需要遵循圖標本身的風格體系。


          這是星球中一位同學的練習,輔助圖形用星星是沒問題的,但這里星星的尖角相對于主圖形的圓角來說就顯得風格不夠統一,把星星的尖角改為圓角就會好很多。


          undefined


          這位同學的作品也是臨摹了原作的效果,能看到在原作中輔助圖形都是以同樣的圓潤圖形為主的,這里就體現了風格的一致性。 


          undefined


          比如對照看看MBE的圖標風格,他的輔助圖形跟主圖形一樣,都是比較圓潤可愛的,這樣看起來整體的風格更加統一和諧。

          undefined

          作者:彩云Sky         來源:站酷
          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          魏華的微信.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。
          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 
          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合