大廠設計師是如何做圖標的?四個章節(jié)教會你!
我們設計師,在畫圖時總是要經歷各種各樣的嘗試,一種是自己的嘗試,一種是被逼得嘗試來自甲方爸爸的建議。
畫 icon 也是同樣的,我們都不知道什么是最好的,只能在多次的嘗試后得出最優(yōu)解。
挑選最優(yōu)解很簡單,重要的是哪來那么多的方案/靈感?這篇文章我就以繪制四個底部 tab 的 icon——首頁、低碳生活、低碳商城、我的,跟大家分享一下我的方案從哪來。
一、尋找參考:要先腦爆,再找參考
我們以最常見的「首頁」icon 為例,想到首頁你會想到什么圖形?
那一定是「房子」對不對?如果你直接去 iconfont 上搜首頁,也是給你出來一堆房子:
如果你的思路在開頭就僅限于此,那后續(xù)方向嘗試也會受到局限。
我們需要在這一步就發(fā)散下思路,腦爆一下,可以從行業(yè)角度和自身產品的角度去出發(fā)。
比如我現在畫的這個首頁 icon,屬于是環(huán)保行業(yè)內的,那我的首頁 icon 是不是可以是「地球」「樹苗」?再從自身產品角度出發(fā),看看我們 app 內的 LOGO、吉祥物。
那么現在光首頁這個 icon 就能想到 5 個可設計的方向。
只有聯想的關鍵詞越多,可檢索的范圍就越廣。
按照這種思路我們每個 icon 都能找到很多參考,我們再根據參考畫出 icon
此時「首頁」這個圖標我們畫出了以上六種圖標造型,「樹苗」「地球」的圖標都比較獨特,但是目前房子這個圖標就太常見、太大眾了。
我們在畫圖標時不可避免地也會有一些比較常見的、普通的 icon,我們可以對這些常見的 icon 進行調整,讓它不至于這么大眾。
二、細化圖形:從小到大將差異化融入
我們可以賦予普通圖標一點差異化,讓它看起來更不同一些。
從小點入手,我們可以將它基礎形進行微調,從大點入手,我們可以將行業(yè)屬性和品牌圖形融入圖標。
如果從小的調整入手,可以考慮將圖標外輪廓做一些微調。我們將房子的外部造型進行調整,一共微調出 5 種房子的造型:
小的調整能讓這個圖標稍微變得不一樣一些。而從大方向上可以發(fā)生更明顯、直觀的變化,讓圖標的差異化特征也更加明顯。
如何對圖標進行更大的改觀?
大家可以從行業(yè)屬性的融入、品牌圖形的融入去嘗試。比如這個首頁圖標我們希望他帶有環(huán)保的行業(yè)屬性,而環(huán)保類 icon 的參考里常見的元素有樹苗、樹葉、閃電:
這些元素都可以和房子進行很好地結合:
除了融入行業(yè)屬性,大家也可以將自己產品的品牌圖形融入 icon,比如像飛豬、馬蜂窩 app 都有將自己的吉祥物 or 品牌圖形融入其中:
三、細化風格:優(yōu)先參考 app 的設計風格
通過以上兩步,我們把 icon 的外形確定下來后,就可以開始細化圖標風格了,如果不知道該采用什么風格,不如先看看自家 app 的風格或設計語言是什么,可以根據 app 風格細化圖標風格。
我們這款 app 的頁面風格是扁平、漸變、線條:
那么 icon 就可以按照扁平、漸變、帶線條的方向去走。以首頁這個 icon 舉例,我們就能畫出以下幾種方向:
四、整體調整:最關鍵最基礎的設計修養(yǎng)
我們用上面講到的三大步驟,補齊剩下三個 icon,最后一步就是對這一組 icon 進行整體的調整。
我們基于三大點去做調整:
1. 要保證一套圖標起碼有 2 個以上的不同點,個別圖標沒有過多的想法,可以保持普通。
2. 遵循統(tǒng)一性
我們要最后檢查一遍整體 icon 統(tǒng)一性,包括視覺大小統(tǒng)一、圓角統(tǒng)一、正負形比例統(tǒng)一、描邊粗細統(tǒng)一。
3. 視覺平衡。每一個 icon 在視覺上看起來都要在中央
總結
以上就是我在設計圖標時必須經歷的幾大步驟和我獲取圖標設計靈感的辦法。其實無論經驗豐富與否,只有反復的嘗試才能得出最好的方案,希望大家都越來越牛!
作者:菜心設計鋪
想了解更多網站技術的內容,請訪問:網站技術