這是一個(gè)科技類(lèi)網(wǎng)頁(yè)的小插圖,這樣看是OK的,但第一版的圖就一言難盡了,如下:
做完設(shè)計(jì)之后,我往回看看了,發(fā)現(xiàn)第一稿真讓人頭皮發(fā)麻呀~
最后的呈現(xiàn)效果比之前做的都要強(qiáng)太多了。
不管是顏色方向、質(zhì)感、細(xì)節(jié)上都甩前者一大截,原因是什么呢?我總結(jié)了以下幾點(diǎn):
一、層次關(guān)系
客戶就說(shuō)“畫(huà)面視覺(jué)太平了,沒(méi)有層次,黑白灰關(guān)系沒(méi)有拉開(kāi)!細(xì)節(jié)也沒(méi)有!顏色不好看!自己回去再想想吧!”……
黑白灰關(guān)系什么意思呢?我的理解就是先把設(shè)計(jì)稿去色不就能看到黑白灰了嗎?
很多同學(xué)在做設(shè)計(jì)時(shí)不會(huì)考慮黑白灰這個(gè)問(wèn)題,但其實(shí)顏色也是有變化的;在顏色中黑白灰的關(guān)系就是色彩的明度關(guān)系,明度越高就越白。
正常情況下畫(huà)面中的黑白灰關(guān)系拉得越開(kāi),就越有空間感、層次感。
如果畫(huà)面中黑白灰關(guān)系沒(méi)有拉開(kāi),就會(huì)使畫(huà)面飄飄的,很奇怪、不接地氣。
如上圖就是一個(gè)正常的黑白灰關(guān)系,每一層都區(qū)分的很開(kāi),它就會(huì)有空間層次感。
而且我們也需要保持畫(huà)面的平衡感,黑色多了就會(huì)使得畫(huà)面沉,白色多了就會(huì)使畫(huà)面飄,灰色多了就會(huì)使畫(huà)面悶。
所以我們得把握一個(gè)度,把握黑白灰在畫(huà)面中的節(jié)奏感!
我們?cè)侔押诎谆谊P(guān)系運(yùn)用到實(shí)際工作中:
整個(gè)背景采用暗灰色調(diào),主體底板用亮灰色,內(nèi)容就用亮色系,陰影及厚度用暗色調(diào)。這樣一來(lái)畫(huà)面的層次拉開(kāi)了。
那么客戶說(shuō)的細(xì)節(jié)該怎么去加呢?
二、細(xì)節(jié)
沒(méi)有細(xì)節(jié)、太平了,我就想到把它做成立體的感覺(jué),讓畫(huà)面豐富起來(lái),也可以加一些點(diǎn)綴的小元素來(lái)修飾畫(huà)面。
從平面二維到立體三維畫(huà)面的細(xì)節(jié)就豐富多了,而且三維空間更加容易出效果。
在加細(xì)節(jié)的過(guò)程中,我感覺(jué)到了畫(huà)面中有點(diǎn)太過(guò)于規(guī)規(guī)矩矩了,全是方方正正形狀,就很呆板的感覺(jué),特別是左下角的矩形框,與整個(gè)畫(huà)面之間沒(méi)有聯(lián)系、不協(xié)調(diào)。
這就是構(gòu)圖出了問(wèn)題。
解決的方法很簡(jiǎn)單,只要讓圖形與圖形之間互相穿插、疊加,讓它們你中有我我中中有你;甚至可以把圖形加以旋轉(zhuǎn),讓圖形產(chǎn)生“正”與“斜”的對(duì)比。
這種方法就可以解決畫(huà)面死板的問(wèn)題。
但是我覺(jué)得不能夠加矩形了,畫(huà)面中方形形狀已經(jīng)很多了,那么我們是不是可以考慮一下用圓去增加畫(huà)面節(jié)奏感。
方的對(duì)比是圓,也是一個(gè)對(duì)比關(guān)系,但圓的占比面積太大了,咱們就可以用弧線去代替。
這不,弧線把方正的矩形打破了,畫(huà)面就更加生動(dòng)有節(jié)奏。
還有一個(gè)細(xì)節(jié):
如圖所示,這里就涉及到一個(gè)識(shí)別度的問(wèn)題,我們?cè)谧鲈O(shè)計(jì)的時(shí)候,一定要把形體交代清楚;
我做了一個(gè)銀幣的效果,但是形體邊緣輪廓沒(méi)有交代清楚,整個(gè)銀幣糊在一堆了,看不清里面的字符是什么,這樣的感覺(jué)不是很好,整個(gè)元素是虛的。
還有上升的線條取消發(fā)光效果是不是去掉會(huì)更好呢?
這樣是不是畫(huà)面會(huì)更加的完整呢,這點(diǎn)很重要呀,我們得把物體交代清楚,不能模棱兩可就糊弄過(guò)去了!物體虛虛的給人感覺(jué)很飄,不穩(wěn)。
其實(shí)還有中間的一稿,但是顏色一不小心就弄臟了:
三、顏色臟的小技巧
經(jīng)過(guò)嘗試,我總算明白為什么顏色漸變會(huì)偏臟了;我總結(jié)了以下幾點(diǎn):
1、飽和度低的顏色占比不要太多,多了顏色就容易顯得臟。
如圖,右邊的顏色飽和度偏低,這類(lèi)顏色就會(huì)發(fā)灰,灰色多了能不臟嗎?
2、盡量不要用對(duì)比色去拉漸變,對(duì)比色漸變對(duì)于新手來(lái)說(shuō)不太友好,“紅配綠賽狗屁”就是這種說(shuō)法。
只要注意到這兩點(diǎn)就基本可以避開(kāi)顏色太臟的情況
總結(jié)
以上就是這次小案例帶給我的啟發(fā)和思考,希望當(dāng)遇到類(lèi)似我這種問(wèn)題的時(shí)候能夠給你點(diǎn)啟發(fā),能夠幫助到你!
轉(zhuǎn)載請(qǐng)注明:學(xué)UI網(wǎng)》讓我一個(gè)沒(méi)有美術(shù)基礎(chǔ)的人畫(huà)插圖,太難為我了吧!
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專(zhuān)注而深入的界面設(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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司