經(jīng)驗(yàn)分享|利用品牌基因法進(jìn)行圖標(biāo)設(shè)計(jì)
在看這篇文章之前你需要清楚,我所講的東西并不是什么權(quán)威,只是在工作中總結(jié)出來的一些的小經(jīng)驗(yàn)而已,制作圖標(biāo)的方法也有很多種,這里只是給大家一個(gè)思路上的啟發(fā),希望能對你有所幫助吧!
按照慣例,我們還是先來看一下本文的大綱:
- 什么是品牌基因
- 如何提取品牌基因
- 如何將品牌基因注入到圖標(biāo)設(shè)計(jì)中
- 圖標(biāo)制作過程中需要注意的事項(xiàng)
一、什么是品牌基因?
品牌包括了理念、視覺、行為三個(gè)部分,而本文所講的品牌基因只是視覺層面的。
既然是視覺上的,那就一定是可以看見的東西。沒錯(cuò),簡單來說,品牌基因就是一個(gè)符號,而這個(gè)符號可以來源于任何事物,就像三星GALAXY SIII的靈感是來自于大自然的鵝卵石,國際版QQ的靈感是來自于氧氣…,但不論怎么樣,最后我們都需要將這些基因、靈感可視化,變成一個(gè)或者一組符號傳達(dá)給用戶。
一句話總結(jié):品牌基因(視覺層面)就是通過一件事物提取出一個(gè)(或一組)視覺符號。
二、如何提取品牌基因
就拿上期那套圖標(biāo)來說吧,靈感來自于哪里呢?
最初在做“我的”圖標(biāo)時(shí),找了很多參考,網(wǎng)上一搜一大把,如圖:
但是如果隨便下載一個(gè)改一改就直接用,你會有一種很不踏實(shí)的感覺,因?yàn)楫?dāng)別人問你為什么這樣設(shè)計(jì)的時(shí)候,你總不能說“我看網(wǎng)上都這么做的啊”。
那問題就來了,如何能做一個(gè)有理有據(jù)的圖標(biāo)呢?這時(shí)候你的腦袋里就可以思考“品牌基因”了。我們可以去觀察品牌的logo、輔助圖形、設(shè)計(jì)來源等等,這些都可以幫助你去提取符號、特征。
所以通過這個(gè)思路我去觀察了logo,如圖所示:
將logo的“i”字母放大后,我們會發(fā)現(xiàn)下面這個(gè)局部形狀和人型(“我的”圖標(biāo))很相似,
所以,在經(jīng)過優(yōu)化之后得到下圖:
這樣當(dāng)別人問你為什么設(shè)計(jì)成這個(gè)樣子的時(shí)候,你可以很自信的告訴他,你是通過logo上的元素提取優(yōu)化得到的!
但是僅僅做這一個(gè)圖標(biāo)是不夠的,我們需要提煉出一個(gè)能夠貫穿整套圖標(biāo)的視覺符號,于是我再次去觀察和思考logo的樣式,細(xì)心的同學(xué)可能已經(jīng)發(fā)現(xiàn),其實(shí)整個(gè)logo的每一筆開頭都有一個(gè)共同的特征,如下圖
而這個(gè)共同的特征就是我們要找的符號,也就是所謂的品牌基因,是貫穿整個(gè)logo的靈魂所在,至于這個(gè)特征是怎么來的,那是做logo之前的事情,這里我們就不在闡述了。
后經(jīng)過優(yōu)化后,我將符號總結(jié)為以下特征:
三、如何將品牌基因注入到圖標(biāo)設(shè)計(jì)中?
得到這個(gè)視覺符號之后,就需要將這個(gè)特征注入到我們的圖標(biāo)設(shè)計(jì)中了,舉個(gè)例子,我們現(xiàn)在來做“收藏”的圖標(biāo),也就是一個(gè)愛心。
那首先我們還是需要去找一些參考,去了解愛心的結(jié)構(gòu),并在本子上畫一些草圖,最后思考如何與我們提取出來的符號相結(jié)合。如果這些前期內(nèi)容你都做完了,恭喜你,我們可以開始電腦繪制了,步驟如下:
就這樣一個(gè)有理有據(jù)的圖標(biāo)就完成了。同理,其他圖標(biāo)也用類似的方法進(jìn)行繪制!
四、圖標(biāo)制作過程中需要注意的事項(xiàng)
首先來回顧一下整套圖標(biāo)的效果:
關(guān)于圖標(biāo)設(shè)計(jì)中注意的事項(xiàng),之前有寫過一篇,大家可以自行查閱《實(shí)例分析:圖標(biāo)設(shè)計(jì)4原則》,這里針對這一套圖標(biāo)再來增加三點(diǎn)。
1. 避免過于生硬的結(jié)合
當(dāng)有些圖標(biāo)與提取出來的視覺符號很難完全結(jié)合時(shí),那就不要去強(qiáng)行結(jié)合,只要大體調(diào)性是對的就ok,比如“掃一掃”的圖標(biāo),最開始我就強(qiáng)行使用了一個(gè)10px的圓角和三個(gè)2px的圓角,如下圖:
2. 制定好斷線及粗細(xì)規(guī)范
制作斷線的時(shí)候,一定要定好斷線的規(guī)則,比如說我在做這套圖標(biāo)的時(shí)候,我會以50x50px的大小來繪制圖標(biāo),線條描邊是2px,所有斷線的開口大小為10px,所有的斷點(diǎn)要在大圓角拐角處破開(圓形圖標(biāo)除外),有了這些規(guī)則之后,才能夠保證你輸出的圖標(biāo)統(tǒng)一、規(guī)范!
3. 圖標(biāo)的特征不要太多
我這一套其實(shí)是有一點(diǎn)點(diǎn)復(fù)雜的,因?yàn)樗瑫r(shí)擁有三個(gè)屬性,分別是不同大小的圓角、雙色和斷線,正常來說有1-2個(gè)特征就可以了,不然可能會讓圖標(biāo)顯的過于繁瑣,所以大家在作圖標(biāo)的時(shí)候,這一點(diǎn)可以斟酌一下!
好了,以上就是本期分享的《利用品牌基因法進(jìn)行圖標(biāo)設(shè)計(jì)》,希望能對大家有所啟發(fā)!
看文章,你需要取其精華去其糟粕,不斷的將精華內(nèi)容納入到自己的知識體系當(dāng)中,不然……你懂得,科科!
#專欄作家#
菜心(微信號:18588404451? 微信公眾號:菜心設(shè)計(jì)鋪),人人都是產(chǎn)品經(jīng)理專欄作家,華為ITUX用戶體驗(yàn)設(shè)計(jì)師(主視覺),3年工作經(jīng)驗(yàn),參與華為Welink、3MS、連長社區(qū)等多個(gè)項(xiàng)目的用戶體驗(yàn)設(shè)計(jì)工作。歡迎大家互相交流關(guān)注。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
我覺得你的文章好棒,簡短干練,精辟~
很贊啊,學(xué)到了
終于等到了!
哈哈,看來是真愛