旗下產(chǎn)業(yè): A產(chǎn)業(yè)/?A實(shí)習(xí)/?A計劃
全國統(tǒng)一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設(shè)計 > 如何設(shè)計風(fēng)格統(tǒng)一的圖標(biāo)

如何設(shè)計風(fēng)格統(tǒng)一的圖標(biāo)

時間:2020-11-11來源:m.5wd995.cn點(diǎn)擊量:作者:Gella
時間:2020-11-11點(diǎn)擊量:作者:Gella

  

  如何設(shè)計風(fēng)格統(tǒng)一的圖標(biāo)。圖標(biāo)是決定一個APP風(fēng)格的重要構(gòu)成元素,要設(shè)計一款講究的APP,成為一個講究的設(shè)計師。掌握如何設(shè)計一套統(tǒng)一風(fēng)格的icon是對UI設(shè)計師的基本要求。今天AAA教育胡老師和大家探討如何設(shè)計風(fēng)格統(tǒng)一的圖標(biāo)。
 

  APP中的圖標(biāo)的類型多種多樣,最常出現(xiàn)的有:面形圖標(biāo),線形圖標(biāo),扁平描線圖標(biāo)。文章主要講這3種圖標(biāo)。圖標(biāo)的形式?jīng)]有絕對的對錯,只要在當(dāng)下是合適就是最好的。設(shè)計圈有點(diǎn)像時尚界,有些反復(fù),時不時會流行復(fù)古,時不時又流行現(xiàn)代……
 

  一. 面形圖標(biāo)
 

  面形圖標(biāo)的視覺占比大,有比較強(qiáng)的視覺表達(dá)力,通常用在應(yīng)用中的主要入口。最新的蘋果iOS 11底部標(biāo)簽欄就使用了面形圖標(biāo)。那么面型圖標(biāo)的風(fēng)格要如何統(tǒng)一呢?
 

  在APP界面中,面型圖標(biāo)通常有兩種使用方法:正形和反白。我將分別講下這兩種使用情況下,如何進(jìn)行統(tǒng)一。
 

  1.正形

  

如何設(shè)計風(fēng)格統(tǒng)一的圖標(biāo)


 

 
 

  上圖是面形圖標(biāo)的正形使用,要統(tǒng)一風(fēng)格,要注意的是:
 

  a. 面的面積
 

  b.負(fù)形的面積
 

  c. 線條的統(tǒng)一
 

  d. 形的統(tǒng)一??梢詮男蔚男螤睿瑘A角進(jìn)行統(tǒng)一

  

如何設(shè)計風(fēng)格統(tǒng)一的圖標(biāo)
 

 

  示例中的icon,在面的形上也進(jìn)行了統(tǒng)一,全部用了圓形進(jìn)行布爾運(yùn)算,這種統(tǒng)一在需要畫大量功能性icon時,并不是必要條件。滿足以上3個條件,基本就可以做一套風(fēng)格統(tǒng)一的面形icon了。
 

  2.反白

  

如何設(shè)計風(fēng)格統(tǒng)一的圖標(biāo)
 

 

  上圖是面形圖標(biāo)的反白使用,反白使用時,除了正形圖標(biāo)的3個注意點(diǎn),還需注意圖標(biāo)和背板的尺寸比例,比例并沒有嚴(yán)格的規(guī)定,但是建議用0.618黃金比例。
 

  注意點(diǎn)如下:
 

  a. 面的面積
 

  b. 負(fù)形的面積
 

  c. 線條的統(tǒng)一
 

  d. 形的構(gòu)成統(tǒng)一。比如:圓角統(tǒng)一
 

  e. 背板和圖標(biāo)的比例
 

  .線形圖標(biāo)
 

  線形圖標(biāo)比較輕量化,減少視覺干擾,讓用戶集中在產(chǎn)品核心功能上。在iOS11以前,iOS原生應(yīng)用的導(dǎo)航欄,標(biāo)簽欄,工具欄全部采用了2px線框的圖標(biāo)設(shè)計。
 

  線形圖標(biāo)的使用也有兩種:正形和反白。大海不建議線形圖標(biāo)的反白使用,因為從設(shè)計邏輯上講,背板結(jié)合線形圖標(biāo)是互相矛盾的。
 

  正形

  

如何設(shè)計風(fēng)格統(tǒng)一的圖標(biāo)
 

 

  上圖中線形圖標(biāo),要統(tǒng)一風(fēng)格,有以下幾點(diǎn):
 

  a. 線的形狀
 

  b. 閉合區(qū)域的大小
 

  c. 線的粗細(xì)
 

  d. 線的斷點(diǎn)

  

如何設(shè)計風(fēng)格統(tǒng)一的圖標(biāo)
 

 

  三.扁平描線圖標(biāo)
 

  扁平描線圖標(biāo)其實(shí)是面形和線形的結(jié)合,一開始這種設(shè)計形式,主要用來做復(fù)雜度比較高的插畫,后來逐漸在標(biāo)簽欄,首頁功能入口這些位置開始應(yīng)用。這類圖標(biāo)相對于純面形,純線形來說,風(fēng)格明顯,個性化程度更強(qiáng)。
 

  扁平描線圖標(biāo),統(tǒng)一風(fēng)格,除了要注意線形圖標(biāo)設(shè)計以外,要注意填色區(qū)域的大小。

  

如何設(shè)計風(fēng)格統(tǒng)一的圖標(biāo)
 

 

  a. 線的形狀
 

  b.線的粗細(xì)
 

  c. 線的斷點(diǎn)
 

  d. 填色區(qū)域的大小,顏色
 

  圖標(biāo)設(shè)計有專業(yè)的參考網(wǎng)格,按照參考網(wǎng)格設(shè)計可以很大程度的使圖標(biāo)大小更為統(tǒng)一,但是胡老師建議大家千萬不要太拘泥于網(wǎng)格,視覺統(tǒng)一最重要,參考網(wǎng)格是幫助設(shè)計的工具,不要被它所限制。理論結(jié)合實(shí)踐,實(shí)踐的過程中不斷的自我總結(jié),才能不斷的成長。

預(yù)約申請免費(fèi)試聽課

填寫下面表單即可預(yù)約申請免費(fèi)試聽!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會?助教全程陪讀,隨時解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!

?2007-2021/北京漫動者教育科技有限公司版權(quán)所有
備案號:京ICP備12034770號

?2007-2022/ m.5wd995.cn 北京漫動者數(shù)字科技有限公司 備案號: 京ICP備12034770號 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc

京公網(wǎng)安備 11010802035704號

網(wǎng)站地圖