什么是品牌的基因

打開一些App，我們會發現App的圖標設計的非常普通，沒有任何特色，在素材網站上都可以下載到這樣的圖標貼合上去。例如微信的底部導航欄圖標(圖1-1)，對于超級App的圖標，因為本身已經具有足夠的用戶量，已經不需要通過特別的視覺設計手段去提升用戶的認知度。另外微信需要面對的人群更加廣泛，此時圖標設計功能識別性是更加重要，所以采取保守了設計策略，圖標設計看起來普適性，缺乏個性的設計。但一般的App的圖標設計如果也采用這種普適性設計策略，那么界面設計將缺乏特色，看起來非常的普通。那么如何設計非常有特色的圖標設計了?這時候我們需要引入品牌設計的理念。

(圖1-1)微信主界面

通常意義的品牌包括了理念、視覺、行為三個部分，而我這里所講的品牌只是視覺表現層面的。品牌基因是一個圖形符號，在界面設計中，我們需要將這些基因、靈感可視化，提取出一個或者多個視覺符號傳達給用戶。

圖標的屬性構成

圖標設計視覺形式多樣，新人經常陷入臨摹各種海量圖標中。事實上這是沒有必要的，我們只需要總結好圖標的屬性規則，通過組合每個屬性的變化，就可以構成無數種風格組合，也就可以得到無數種圖標視覺風格。下面是我歸納構成圖標的一些屬性。每個屬性可以有多種變化方法。

元素的設計

元素(單元素)

圖標設計用一種事物暗喻另一種事物。例如用“相機”表達照相功能，構成圖標的寓意一般使用單一元素去表達一個功能，這也是主流的圖標設計形式。例如ENJOY(圖1-2)的個人中心功能圖標，全部使用了單一元素去表達相應的功能。

(圖1-2)單元素圖標

元素(雙元素)

有時候為了同組圖形有所區分，會增加一個元素，用雙元素構成新一個圖標圖形。雙元素會顯得圖標表達拖沓，屬于一組圖標，圖形之間單一元素無法區分，才會使用的設計策略。例如最美有物的(圖1-3)個人中心的表單功能圖標，“我的畫報”和“心愿清單”使用矩形框只能表達一個紙質讀物的含義，必須附加另外的圖形，才能讓這兩個圖標有所區分。

(圖1-3)雙元素圖標

面的設計

面(剪影)

在App中使用的圖標常見的兩種風格就是剪影和線性風格，剪影圖標通過面來塑造形體的圖標，例如良倉(圖1-4)的底部標簽欄圖標采用了剪影的設計形式，通過線或者面去切割基礎輪廓面，通過分型來塑造圖標的體積感。不同的切割手法造成了剪影圖標設計感的差別。

(圖1-4)剪影圖標

面(線性)

線性圖標與剪影圖標不同的是，線性圖標通過線來塑造形體的輪廓。線也是一種面，只不過線是比較細的面。例如落網(圖1-5)底部標簽欄圖標采用了線性設計。App的圖標尺寸并不大，所以如果線過于復雜，在小面積中過多的線會對識別性產生較大的困擾。另外最新的蘋果iOS11系統傾向于使用剪影圖標，所以線性圖標風格可能會使用越來越少。

(圖1-5)線性圖標

面(混合)

在App中如個人中心的表單欄，可能使用的風格不限于剪影或者線性，而是兩種風格混合在一起使用。例如良倉(圖1-6)首頁的功能圖標采用剪影線性混合設計形式，面一般選擇整個圖形的陰影面填充。

(圖1-6)填充陰影面剪影線性混合圖標

除了填充陰影面外，還可以線框內再尋找一個面填充，如男衣邦首頁的功能圖標(圖1-7)。因為外描邊線+圖標中間填色的做法很像卡通漫畫，所以此類風格如果搭配大圓角，會顯得圖標非常的卡通化。

(圖1-7)剪影線性混合圖標

線的設計

線(粗、細)

圖標設計中使用的線有粗細之分，常用的App圖標設計線的粗細一般有2PX或者3PX兩種。線條的粗細可以帶來不一樣的視覺效果。例如淘寶(圖1-8)采用了2PX的細線設計，而京東(圖1-9)采用了3PX的粗線設計。

(圖1-8)2PX細線圖標

(圖1-9)3PX粗線圖標

細線顯得精致，粗線視覺面積大，顯得厚重敦實。最美有物(圖1-10)的底部標簽欄圖標采用粗線條設計，線條使用了夸張的5PX，這個必須圖形極簡才適合使用。

(圖1-10)最美有物粗線圖標

有一種特殊做法(圖1-11)為了增加圖標的設計豐富度，可以采用外粗內細的手法取得不一樣的視覺效果。由于這種特殊的紋理感，適合風格特立獨行的應用。需要注意的是由于采用雙線設計，如果圖標的圖形本身線條比較多，那么會顯得圖標設計非常的復雜拖沓。

(圖1-11)粗細線圖標

線(連續、斷開)

常見的圖標使用線的設計形式，線是連續的。為了追求設計形式感的不一樣，圖標設計中使用的線可以是斷開的。例如ONE(圖1-12)的底部標簽欄圖標，采用了斷線風格。斷開線后的圖標設計很像我們小時候畫的一筆簡筆畫。

(圖1-12)斷線圖標

當你決定界面的圖標使用斷線風格的時候，那么這個斷線就是你界面的獨特設計語言，那么就需要把這個設計語言貫穿在整個界面中。界面內所有的圖標都需要繼續使用斷線風格。例如ONE的標簽欄使用了斷線風格，個人中心的功能圖標(圖1-13)也繼續使用了斷線的設計風格。

(圖1-13)ONE個人中心斷線圖標

圓角和直角設計

圓角：(直角或者圓角)

圖標的線或者面轉折的地方采用直接或者圓角直接影響圖標的風格，直角的風格更加硬朗，充滿了力量感，例如男衣邦(圖1-14)的底部標簽欄圖標采用的全直角設計，彰顯男士硬朗的風格。

(圖1-14)直角圖標

圓角的圖標顯得風格溫潤爾雅，例如好物(圖1-15)的而圓角底部標簽欄圖標采用的小圓角設計，顯得整體風格柔和，這與應用的定位非常符合。如果圓角非常大，會顯得圖標偏卡通感覺。需要注意的是使用圓角，那么每個圓角的弧度盡可能保持一致。

(圖1-15)圓角圖標

填色設計

填色：(單色、雙色、多色)

圖標面的填充方式最常見的是單色，顏色選擇灰色或者品牌色。而雙色和多色略少。雙色圖標可能是兩種顏色，例如陌陌(圖1-16)的個人中心頁的功能圖標采用了雙色填充設計形式，顏色使用了鄰近色搭配，這樣顏色搭配柔和不突兀。

(圖1-16)雙色圖標

多色的圖標使用比較少，ENJOY(圖1-17)的首頁功能圖標使用了三色搭配的設計形式。這三種顏色互為臨近色。

(圖1-17)多色圖標