厲害的UI設計師使用的圖標設計秘訣

厲害的UI設計師使用的圖標設計秘訣

品牌基因包括品牌核心價值和品牌個性。具有不同的品牌基因是品牌之間形成差異化的根本原因。品牌基因是品牌資產的主體部分,現在這篇告訴大家厲害的UI設計師如何設計圖標。

利用“品牌識別基因進行圖標設計”的大綱:

  1. 什麼是品牌基因?
  2.  如何提取品牌基因
  3. 如何將品牌基因注入到圖標設計中
  4. 圖標製作過程中需要注意的事項

一、什麼是品牌基因?

品牌包括了理念、視覺、行為三個部分,而本文所講的品牌基因只是視覺層面的。
既然是視覺上的,那就一定是可以看見的東西。
沒錯,簡單來說,品牌基因就是一個符號,而這個符號可以來源於任何事物,就像三星GALAXY SIII的靈感是來自於大自然的鵝卵石,國際版QQ的靈感是來自於氧氣…,但不論怎麼樣,最後我們都需要將這些基因、靈感可視化,變成一個或者一組符號傳達給用戶。
一句話總結:品牌基因(視覺層面)就是通過一件事物提取出一個(或一組)視覺符號。

二、如何提取品牌基因

就拿上期那套圖標來說吧,靈感來自於哪裡呢?
最初在做「我的」圖標時,找了很多參考,網上一搜一大把,如圖:
品牌識別基因圖
但是如果隨便下載一個改一改就直接用,你會有一種很不踏實的感覺,因為當別人問你為什麼這樣設計的時候,你總不能說「我看網上都這麼做的啊」。
那問題就來了,如何能做一個有理有據的圖標呢?這時候你的腦袋裡就可以思考「品牌基因」了。我們可以去觀察品牌的logo、輔助圖形、設計來源等等,這些都可以幫助你去提取符號、特徵。
所以通過這個思路我去觀察了logo,如圖所示
品牌識別基因圖
將logo的「i」字母放大後,我們會發現下面這個局部形狀和人型(「我的」圖標)很相似,
品牌識別基因圖
所以在經過優化之後得到下圖:
品牌識別基因圖
這樣當別人問你為什麼設計成這個樣子的時候,你可以很自信的告訴他,你是通過logo上的元素提取優化得到的!
但是僅僅做這一個圖標是不夠的,我們需要提煉出一個能夠貫穿整套圖標的視覺符號,於是我再次去觀察和思考logo的樣式,細心的同學可能已經發現,其實整個logo的每一筆開頭都有一個共同的特徵,如下圖
品牌識別基因圖
而這個共同的特徵就是我們要找的符號,也就是所謂的品牌基因,是貫穿整個logo的靈魂所在,至於這個特徵是怎麼來的,那是做logo之前的事情,這裡我們就不在闡述了。

三、如何將品牌基因注入到圖標設計中?

得到這個視覺符號之後,就需要將這個特徵注入到我們的圖標設計中了,舉個例子,我們現在來做「收藏」的圖標,也就是一個愛心。
那首先我們還是需要去找一些參考,去瞭解愛心的結構,並在本子上畫一些草圖,最後思考如何與我們提取出來的符號相結合。
如果這些前期內容你都做完了,恭喜你,我們可以開始電腦繪製了,步驟如下:
品牌識別基因圖
就這樣一個有理有據的圖標就完成了。
同理,其他圖標也用類似的方法進行繪製!

四、圖標製作過程中需要注意的事項

首先我們來看一下整套圖標的效果
品牌識別基因圖

1. 避免過於生硬的結合

當有些圖標與提取出來的視覺符號很難完全結合時,那就不要去強行結合,只要大體調性是對的就ok,比如「掃一掃」的圖標,最開始我就強行使用了一個10px的圓角和三個2px的圓角,如下圖:
品牌識別基因圖
做完後,我總覺得怪怪的,並且有點複雜,那這時候倒不如讓四個圓角都是10px,可能會看著更舒服一些。
再比如有些圓形圖標,我們也無法將符號特徵融入進去,這時候只要最後的風格與基本特徵保持一直就ok,例如斷線和雙色。
所以大家在執行的過程中千萬不要生硬的將符號特徵與圖標相結合,避免造成過於死板的情況出現。

2. 制定好斷線及粗細規範

製作斷線的時候,一定要制定好斷線的規則,比如說我在做這套圖標的時候,我會以50x50px的大小來繪製圖標,線條描邊是2px,所有斷線的開口大小為10px,所有的斷點要在大圓角拐角處破開(圓形圖標除外),有了這些規則之後,才能夠保證你輸出的圖標統一、規範!

3. 圖標的特徵不要太多

我這一套其實是有一點點複雜的,因為它同時擁有三個屬性,分別是不同大小的圓角、雙色、斷線,正常來說有1-2個特性就可以了,不然可能會讓圖標顯的過於繁瑣,所以大家在作圖標的時候,這一點可以斟酌一下!
好了,以上就是本期分享的《利用品牌識別基因進行圖標設計》,希望能對大家有所啟發!

Category

GogoShark 給你最好的網頁設計

無論您的事業才剛起步、漸上軌道,或計劃向大中華區拓展市場,GogoShark 團隊將提供全方位的服務,為您量身打造數位品牌形象。