如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

圖標(biāo)——界面設(shè)計(jì)最重要的元素之一。

菜心經(jīng)常寫關(guān)于圖標(biāo)的教程和感悟，可見圖標(biāo)設(shè)計(jì)在我日常工作中占了很大比重，所以我始終堅(jiān)信能夠把圖標(biāo)做好，也是難得的特長(zhǎng)之一！

這里拿幾個(gè)月前做的第一版小說模塊圖標(biāo)為例（目前已經(jīng)改版為2.0，等正式上線后會(huì)再次與大家分享），簡(jiǎn)單介紹下我的圖標(biāo)設(shè)計(jì)思路，大綱如下：

1.風(fēng)格設(shè)定

2.創(chuàng)意腦爆

3.設(shè)計(jì)執(zhí)行

 

1.風(fēng)格設(shè)定

在開始構(gòu)思之前，我們首先需要確定圖標(biāo)的設(shè)計(jì)風(fēng)格，風(fēng)格可以根據(jù)整體產(chǎn)品的設(shè)計(jì)語言推導(dǎo)，需要符合目標(biāo)人群的喜好以及產(chǎn)品的屬性定位。

雖然我們是小說模塊，但還是附屬于動(dòng)漫產(chǎn)品體系之下，前期的種子用戶還是產(chǎn)品原有的動(dòng)漫人群，所以我將風(fēng)格鎖定在原有動(dòng)漫的視覺風(fēng)格之上，大家可以看下當(dāng)時(shí)動(dòng)漫標(biāo)簽欄圖標(biāo)的樣式：

由此小說模塊圖標(biāo)與上圖保持一致，設(shè)定為“描邊與色塊結(jié)合”風(fēng)格。

2.創(chuàng)意腦爆

鎖定風(fēng)格之后，就要構(gòu)思創(chuàng)意了，也就是如何在這樣的風(fēng)格之下去表達(dá)你的內(nèi)容。

這一步很關(guān)鍵，如何讓圖標(biāo)不普通，大部分因素都就體現(xiàn)在內(nèi)容表達(dá)上（因?yàn)轱L(fēng)格其實(shí)也就那么幾種），我的方法是盡量去發(fā)散核心關(guān)鍵詞，讓圖標(biāo)的含義標(biāo)新立異，舉兩個(gè)這次圖標(biāo)腦暴的例子：

第一個(gè)，“人氣”圖標(biāo)的腦暴路徑：

這里選詞有個(gè)小技巧，我會(huì)遵循兩個(gè)原則，“具象”與“二層”。

首先來說具象：其實(shí)很好理解，如果詞匯太抽象，你是很難表達(dá)的，比如“流行”這個(gè)詞，你是很難表達(dá)的，而“火”就很具象，很容易表現(xiàn)。

再來說“二層”：指的就是盡量不要選擇核心關(guān)鍵詞延展出來的第一層詞匯，因?yàn)檫@些詞是大家都能想到的，并且用爛的，比如人氣直接延展出來的“火”、“獎(jiǎng)杯”等等。（但是如果你的圖標(biāo)沒有文字提示，需要表意特別明確，建議還是使用第一層延伸詞，可以在風(fēng)格上做些差異化表現(xiàn)）。

所以在上面兩個(gè)原則下，我最后設(shè)定人氣圖標(biāo)使用“愛的手勢(shì)”，如下圖：

 

因?yàn)榭吹接行┩瑢W(xué)把“愛”與“搖滾”的手勢(shì)弄混，所以說下它們的區(qū)別：

 

希望大家在使用的時(shí)候不要搞錯(cuò)哦！

第二個(gè)，“完結(jié)”圖標(biāo)的腦暴路徑：

 

也是通過“具象”與“二層”原則，最后使用了商店掛的打烊門牌這一創(chuàng)意來延展：

 

 

每個(gè)關(guān)鍵詞的腦暴都會(huì)產(chǎn)生很多詞匯，各不相同，我們需要學(xué)會(huì)篩選，盡量避開過于抽象或者過于普通的詞匯，避開抽象等于具象，可以方便執(zhí)行；避開普通等于特別，如果所有的設(shè)計(jì)都是大家用爛的創(chuàng)意，那作品一定會(huì)很平庸，以上就是我在腦暴時(shí)使用的方法。

 

我們需要讓自己產(chǎn)出的每一套設(shè)計(jì)至少有一個(gè)“特別”出現(xiàn)，不然如何體現(xiàn)自己的價(jià)值呢？

 

3.設(shè)計(jì)執(zhí)行

這一步就是根據(jù)前面得到的靈感圖來進(jìn)行設(shè)計(jì)，我們來看下執(zhí)行對(duì)比圖：

 

 

對(duì)于執(zhí)行需要注意的基礎(chǔ)細(xì)節(jié)，之前有寫過《圖標(biāo)設(shè)計(jì)五維自檢法》，有興趣的同學(xué)可以看一下，除此之外這里再補(bǔ)充一點(diǎn)——如何讓圖標(biāo)做到有細(xì)節(jié)！

 

本次設(shè)計(jì)總結(jié)了三個(gè)方法供大家參考：

 

3.1 設(shè)計(jì)技法的細(xì)節(jié)

比如給描邊增加短線風(fēng)格：

再比如線條增加面形色塊的組合：

 

3.2 根據(jù)事物本身特征增加細(xì)節(jié)

比如一個(gè)木質(zhì)門牌的細(xì)節(jié)：

 

 

3.3 俏皮的那一筆

比如書架上歪著的一本書：

再比如一根線條的破局：

 

當(dāng)然增加細(xì)節(jié)的方法有太多種，總的目的就是防止圖標(biāo)過于簡(jiǎn)單、簡(jiǎn)陋，希望你也可以有自己的一套秘方來進(jìn)行設(shè)計(jì)，大家互相學(xué)習(xí)。

最后再看下圖標(biāo)整體的效果吧：

 

附上過程中的一些稿子，哈哈，別嚇到你：

 

對(duì)于執(zhí)行這一塊，別人再怎么說，你不做大量的練習(xí)與思考也是無濟(jì)于事，這個(gè)道理毋庸贅言了。效果圖如下：

 

 

接下來分享的也是這幾個(gè)圖標(biāo)，不過是延伸版，切入的角度會(huì)略有不同。

 

這次改版背景很簡(jiǎn)單：首頁(yè)整體架構(gòu)調(diào)整的同時(shí)，主圖標(biāo)的設(shè)計(jì)語言改成了面性，而由于時(shí)間緊，小說圖標(biāo)還沒來得及改，所以這次的設(shè)計(jì)目標(biāo)就一個(gè)，把第一版圖標(biāo)改成面性的。

 

本來我以為，直接由線性改成填充的形式就可以了，分分鐘搞定，但沒想到改過來的效果是這樣的：

 

于是經(jīng)過調(diào)整又得到這樣的：

 

為什么還是不好看？

我也不知道啊！

這種情況就去多找參考，分析分析別人的優(yōu)秀作品，比如下圖谷歌的圖標(biāo)：

為什么人家的看起來就那么好看，那么精致？

 

我個(gè)人覺得最大原因就是它的透氣感比較好，導(dǎo)致透氣感好的原因在于，它采用了多元素組合的方式，并且使用大量留白與彩色形成對(duì)比。

 

在這樣的分析之下，我對(duì)圖標(biāo)進(jìn)行了重新構(gòu)思，直接在腦暴階段就重新思考（因?yàn)樵袌D標(biāo)是一個(gè)元素，很難再拆分成兩個(gè)元素來進(jìn)行組合）。

為了能做到獨(dú)特，我最終選用的圖標(biāo)含義如下（盡量避開用爛的詞匯）：

 

書架：兩本書互相依靠

 

熱門：手捧愛心

 

免費(fèi)：冰淇淋甜筒（創(chuàng)意來自甜筒經(jīng)常會(huì)有第二份半價(jià)，或者買一  送一的活動(dòng)）

 

完結(jié)：黑子手捧完結(jié)的牌子

 

 

 

最后的執(zhí)行效果如下：

 

新版圖標(biāo)也是利用元素的組合，并且圖標(biāo)內(nèi)有大量留白使圖標(biāo)更加透氣。

 

除了透氣以外，我還在圖標(biāo)之中融入了一些“有生命感的內(nèi)容”，比如手，品牌形象，擬人化的書等等：

 

使圖標(biāo)變更加可愛，有情感，充滿一些故事感。

除此之外，對(duì)圖標(biāo)還增加了一點(diǎn)點(diǎn)的小細(xì)節(jié)作為小彩蛋：

 

一般我們?cè)谧鲆唤M東西的時(shí)候，都希望能夠有一個(gè)主旨貫穿始終，這樣解釋起來更加有說法，有說服力。

 

比如上面這組小說圖標(biāo)，設(shè)計(jì)關(guān)鍵詞是溫暖，情感，可愛，在這樣的理念下，我將溫暖轉(zhuǎn)化為陽光作為視覺語言。

 

可是陽光怎么落地呢，我當(dāng)時(shí)能想到的就是高光和投影，本次使用的就是充滿光感的長(zhǎng)投影：

 

當(dāng)然，為了使圖標(biāo)輕量化，投影不宜過重，起到點(diǎn)睛的作用即可：

除此之外，像前面所說，為了體現(xiàn)可愛的主旨，融入了手，品牌形象等有生命的元素（并且整體圖形都是比較圓潤(rùn)，避免尖角的出現(xiàn)），這也是貫穿主旨的一條路徑。

 

方法很多，各不相同，其本質(zhì)目的還是希望大家做設(shè)計(jì)的時(shí)候要有適當(dāng)?shù)睦砟钬灤?/span>

 

整個(gè)設(shè)計(jì)過程就差不多這些了，其實(shí)花在調(diào)整細(xì)節(jié)的時(shí)間還是比較多的，隨便一個(gè)圖標(biāo)有了大方向和思路之后，還是需要不斷的修改修改再修改。

 

 

 

顏色的搭配、五官的間距、元素之間的大小關(guān)系等等，都需要不斷的調(diào)整，而真正考驗(yàn)我們的也就在這些細(xì)節(jié)當(dāng)中。

 

這里再補(bǔ)充兩個(gè)增加可愛度的實(shí)用小技巧：

 

1 五官緊湊

一般情況下，縮小五官的間距，可以一定程度上實(shí)表情更加可愛，尤其是嘴鼻和眼睛的間距：

 

2 腮紅

 

一般來說，在我的印象中只有可愛的東西才會(huì)有腮紅，五大三粗的大老爺們加個(gè)腮紅，咦～，不敢想！

 

所以畫可愛的形象或表情時(shí)，可以考慮加個(gè)腮紅：

不過我這次由于元素太多，所以沒加，大家可以根絕實(shí)際情況自行實(shí)踐。

 

最后：

看萬卷書，行萬里路！不走，書白看。

看萬篇文，練萬個(gè)習(xí)！不練，文白看。

 

 

藍(lán)藍(lán)設(shè)計(jì)( m.820esy.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。