邊線陕习、角、曲線的一致性
一址愿、相同的角
我們在繪制圖標(biāo)之前要定義圖標(biāo)的大小该镣、粗細(xì)、角的造型响谓,以及角度的大小损合。這些盡可能保持一致的細(xì)節(jié)元素。
角的造型分為:圓角娘纷、直角或者斜角嫁审。那么圓角又要考慮圓角的大小是多少,斜角也要考慮傾斜的角度大小赖晶,以及傾斜坡面的長度律适。
這里以斜角為例,我們需要考慮的是一致的斜角長度遏插、以及傾斜角度的一致捂贿。這里建議都為45度,原因請查看上周發(fā)布的文章胳嘲。
二厂僧、相同邊線粗細(xì)和曲線弧度
當(dāng)涉及到線條粗細(xì)的時(shí)候,2種粗細(xì)是理想的了牛,3種有時(shí)候也是必要的颜屠。當(dāng)超過三種時(shí)會(huì)讓圖標(biāo)失去統(tǒng)一性辰妙。所以我們在提供視覺層次的同時(shí),不要因此而引入過多的元素破壞整體的一致性汽纤。
在保持邊線粗細(xì)相同的同時(shí),邊線轉(zhuǎn)角的曲線弧度也要一致蕴坪。通常繪制弧度的時(shí)候要采用貝塞爾曲線工具肴掷,而不是手工任意繪制。這樣才能保證像素的精確性背传。
保持顏色呆瞻、漸變層次的一致性
一、顏色層次
通常為了體現(xiàn)圖標(biāo)的層次性径玖,我們會(huì)運(yùn)用2痴脾、3種的不同顏色,當(dāng)然也有超過3種以上的梳星。視圖標(biāo)風(fēng)格而定赞赖,通常2到3種是最常見的,3種以上的圖標(biāo)一般用于無線框圖標(biāo)的形式較多冤灾,例如下圖:
另外我們顏色的透明度差異也會(huì)形成不同的層次前域,再進(jìn)一步我們可以使用漸變、投影的形式來增加層次感韵吨。
例如最上面的大圖標(biāo)匿垄,使用了漸變和不同的顏色,以及投影使得層次感更加豐富归粉,統(tǒng)一性卻又很高椿疗。下面的小圖標(biāo)則摒棄了以往單調(diào)的單色線條,而是整體使用漸變色糠悼,不失為一種層次感届榄。同樣我們也可以使用線條加漸變色,或者漸變疊加倔喂,大家可以多做嘗試痒蓬,或許會(huì)作出與眾不同的圖標(biāo)風(fēng)格。
植入LOGO的造型特點(diǎn)
我們在設(shè)計(jì)小圖標(biāo)之前滴劲,不妨多觀察一下LOGO的特點(diǎn),是圓潤還是平直顾复,是安靜還是跳躍班挖。有沒有什么基本的細(xì)節(jié)造型點(diǎn)可以提取的呢?有沒有什么顏色可以直接拿來用呢芯砸?
例如非常典型的谷歌play萧芙,提取出三角形后给梅,整套圖標(biāo)都是以三角形作為外形進(jìn)行延伸設(shè)計(jì)。
網(wǎng)易云音樂的圖標(biāo)双揪,是抓取logo上圓潤的風(fēng)格特點(diǎn)动羽,并將LOGO也作為小圖標(biāo)的一員,放置在類似首頁的重要位置渔期。
優(yōu)酷的圖標(biāo)不僅采用了LOGO的顏色运吓,更抓取了LOGO上顏色疊層的風(fēng)格特點(diǎn)進(jìn)行了延伸設(shè)計(jì)。
小密圈主要抓取了圖標(biāo)斷線的風(fēng)格特點(diǎn)
總結(jié):
1疯趟、保持邊拘哨、線、角信峻、曲線和角度的一致性
2倦青、保持顏色、漸變盹舞、層次的一致性
3产镐、進(jìn)一步提高逼格可植入LOGO的造型特點(diǎn)
參考文獻(xiàn):http://www.uisdc.com/icon-optimization-guideline-2
? ? ? ? ? ? ? ? ? http://www.uisdc.com/brand-gene-icon-design-pro