2019-6-20 ui設(shè)計(jì)分享達(dá)人
如果您想訂閱本博客內(nèi)容,每天自動(dòng)發(fā)到您的郵箱中, 請(qǐng)點(diǎn)這里
圖標(biāo)——界面設(shè)計(jì)最重要的元素之一。
菜心經(jīng)常寫(xiě)關(guān)于圖標(biāo)的教程和感悟,可見(jiàn)圖標(biāo)設(shè)計(jì)在我日常工作中占了很大比重,所以我始終堅(jiān)信能夠把圖標(biāo)做好,也是難得的特長(zhǎng)之一!
這里拿幾個(gè)月前做的第一版小說(shuō)模塊圖標(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è)定
在開(kāi)始構(gòu)思之前,我們首先需要確定圖標(biāo)的設(shè)計(jì)風(fēng)格,風(fēng)格可以根據(jù)整體產(chǎn)品的設(shè)計(jì)語(yǔ)言推導(dǎo),需要符合目標(biāo)人群的喜好以及產(chǎn)品的屬性定位。
雖然我們是小說(shuō)模塊,但還是附屬于動(dòng)漫產(chǎn)品體系之下,前期的種子用戶還是產(chǎn)品原有的動(dòng)漫人群,所以我將風(fēng)格鎖定在原有動(dòng)漫的視覺(jué)風(fēng)格之上,大家可以看下當(dāng)時(shí)動(dòng)漫標(biāo)簽欄圖標(biāo)的樣式:
由此小說(shuō)模塊圖標(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è)原則,“具象”與“二層”。
首先來(lái)說(shuō)具象:其實(shí)很好理解,如果詞匯太抽象,你是很難表達(dá)的,比如“流行”這個(gè)詞,你是很難表達(dá)的,而“火”就很具象,很容易表現(xiàn)。
再來(lái)說(shuō)“二層”:指的就是盡量不要選擇核心關(guān)鍵詞延展出來(lái)的第一層詞匯,因?yàn)檫@些詞是大家都能想到的,并且用爛的,比如人氣直接延展出來(lái)的“火”、“獎(jiǎng)杯”等等。(但是如果你的圖標(biāo)沒(méi)有文字提示,需要表意特別明確,建議還是使用第一層延伸詞,可以在風(fēng)格上做些差異化表現(xiàn))。
所以在上面兩個(gè)原則下,我最后設(shè)定人氣圖標(biāo)使用“愛(ài)的手勢(shì)”,如下圖:
因?yàn)榭吹接行┩瑢W(xué)把“愛(ài)”與“搖滾”的手勢(shì)弄混,所以說(shuō)下它們的區(qū)別:
希望大家在使用的時(shí)候不要搞錯(cuò)哦!
第二個(gè),“完結(jié)”圖標(biāo)的腦暴路徑:
也是通過(guò)“具象”與“二層”原則,最后使用了商店掛的打烊門(mén)牌這一創(chuàng)意來(lái)延展:
每個(gè)關(guān)鍵詞的腦暴都會(huì)產(chǎn)生很多詞匯,各不相同,我們需要學(xué)會(huì)篩選,盡量避開(kāi)過(guò)于抽象或者過(guò)于普通的詞匯,避開(kāi)抽象等于具象,可以方便執(zhí)行;避開(kāi)普通等于特別,如果所有的設(shè)計(jì)都是大家用爛的創(chuàng)意,那作品一定會(huì)很平庸,以上就是我在腦暴時(shí)使用的方法。
我們需要讓自己產(chǎn)出的每一套設(shè)計(jì)至少有一個(gè)“特別”出現(xiàn),不然如何體現(xiàn)自己的價(jià)值呢?
3.設(shè)計(jì)執(zhí)行
這一步就是根據(jù)前面得到的靈感圖來(lái)進(jìn)行設(shè)計(jì),我們來(lái)看下執(zhí)行對(duì)比圖:
對(duì)于執(zhí)行需要注意的基礎(chǔ)細(xì)節(jié),之前有寫(xiě)過(guò)《圖標(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ì)門(mén)牌的細(xì)節(jié):
3.3 俏皮的那一筆
比如書(shū)架上歪著的一本書(shū):
再比如一根線條的破局:
當(dāng)然增加細(xì)節(jié)的方法有太多種,總的目的就是防止圖標(biāo)過(guò)于簡(jiǎn)單、簡(jiǎn)陋,希望你也可以有自己的一套秘方來(lái)進(jìn)行設(shè)計(jì),大家互相學(xué)習(xí)。
最后再看下圖標(biāo)整體的效果吧:
附上過(guò)程中的一些稿子,哈哈,別嚇到你:
對(duì)于執(zhí)行這一塊,別人再怎么說(shuō),你不做大量的練習(xí)與思考也是無(wú)濟(jì)于事,這個(gè)道理毋庸贅言了。效果圖如下:
接下來(lái)分享的也是這幾個(gè)圖標(biāo),不過(guò)是延伸版,切入的角度會(huì)略有不同。
這次改版背景很簡(jiǎn)單:首頁(yè)整體架構(gòu)調(diào)整的同時(shí),主圖標(biāo)的設(shè)計(jì)語(yǔ)言改成了面性,而由于時(shí)間緊,小說(shuō)圖標(biāo)還沒(méi)來(lái)得及改,所以這次的設(shè)計(jì)目標(biāo)就一個(gè),把第一版圖標(biāo)改成面性的。
本來(lái)我以為,直接由線性改成填充的形式就可以了,分分鐘搞定,但沒(méi)想到改過(guò)來(lái)的效果是這樣的:
于是經(jīng)過(guò)調(diào)整又得到這樣的:
為什么還是不好看?
我也不知道?。?span lang="EN-US">
這種情況就去多找參考,分析分析別人的優(yōu)秀作品,比如下圖谷歌的圖標(biāo):
為什么人家的看起來(lái)就那么好看,那么精致?
我個(gè)人覺(jué)得最大原因就是它的透氣感比較好,導(dǎo)致透氣感好的原因在于,它采用了多元素組合的方式,并且使用大量留白與彩色形成對(duì)比。
在這樣的分析之下,我對(duì)圖標(biāo)進(jìn)行了重新構(gòu)思,直接在腦暴階段就重新思考(因?yàn)樵袌D標(biāo)是一個(gè)元素,很難再拆分成兩個(gè)元素來(lái)進(jìn)行組合)。
為了能做到獨(dú)特,我最終選用的圖標(biāo)含義如下(盡量避開(kāi)用爛的詞匯):
書(shū)架:兩本書(shū)互相依靠
熱門(mén):手捧愛(ài)心
免費(fèi):冰淇淋甜筒(創(chuàng)意來(lái)自甜筒經(jīng)常會(huì)有第二份半價(jià),或者買(mǎi)一 送一的活動(dòng))
完結(jié):黑子手捧完結(jié)的牌子
最后的執(zhí)行效果如下:
新版圖標(biāo)也是利用元素的組合,并且圖標(biāo)內(nèi)有大量留白使圖標(biāo)更加透氣。
除了透氣以外,我還在圖標(biāo)之中融入了一些“有生命感的內(nèi)容”,比如手,品牌形象,擬人化的書(shū)等等:
使圖標(biāo)變更加可愛(ài),有情感,充滿一些故事感。
除此之外,對(duì)圖標(biāo)還增加了一點(diǎn)點(diǎn)的小細(xì)節(jié)作為小彩蛋:
一般我們?cè)谧鲆唤M東西的時(shí)候,都希望能夠有一個(gè)主旨貫穿始終,這樣解釋起來(lái)更加有說(shuō)法,有說(shuō)服力。
比如上面這組小說(shuō)圖標(biāo),設(shè)計(jì)關(guān)鍵詞是溫暖,情感,可愛(ài),在這樣的理念下,我將溫暖轉(zhuǎn)化為陽(yáng)光作為視覺(jué)語(yǔ)言。
可是陽(yáng)光怎么落地呢,我當(dāng)時(shí)能想到的就是高光和投影,本次使用的就是充滿光感的長(zhǎng)投影:
當(dāng)然,為了使圖標(biāo)輕量化,投影不宜過(guò)重,起到點(diǎn)睛的作用即可:
除此之外,像前面所說(shuō),為了體現(xiàn)可愛(ài)的主旨,融入了手,品牌形象等有生命的元素(并且整體圖形都是比較圓潤(rùn),避免尖角的出現(xiàn)),這也是貫穿主旨的一條路徑。
方法很多,各不相同,其本質(zhì)目的還是希望大家做設(shè)計(jì)的時(shí)候要有適當(dāng)?shù)睦砟钬灤?/span>
整個(gè)設(shè)計(jì)過(guò)程就差不多這些了,其實(shí)花在調(diào)整細(xì)節(jié)的時(shí)間還是比較多的,隨便一個(gè)圖標(biāo)有了大方向和思路之后,還是需要不斷的修改修改再修改。
顏色的搭配、五官的間距、元素之間的大小關(guān)系等等,都需要不斷的調(diào)整,而真正考驗(yàn)我們的也就在這些細(xì)節(jié)當(dāng)中。
這里再補(bǔ)充兩個(gè)增加可愛(ài)度的實(shí)用小技巧:
1 五官緊湊
一般情況下,縮小五官的間距,可以一定程度上實(shí)表情更加可愛(ài),尤其是嘴鼻和眼睛的間距:
2 腮紅
一般來(lái)說(shuō),在我的印象中只有可愛(ài)的東西才會(huì)有腮紅,五大三粗的大老爺們加個(gè)腮紅,咦~,不敢想!
所以畫(huà)可愛(ài)的形象或表情時(shí),可以考慮加個(gè)腮紅:
不過(guò)我這次由于元素太多,所以沒(méi)加,大家可以根絕實(shí)際情況自行實(shí)踐。
最后:
看萬(wàn)卷書(shū),行萬(wàn)里路!不走,書(shū)白看。
看萬(wàn)篇文,練萬(wàn)個(gè)習(xí)!不練,文白看。
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(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ù)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com