這是一個(gè)科技類網(wǎng)頁(yè)的小插圖，這樣看是OK的，但第一版的圖就一言難盡了，如下：

做完設(shè)計(jì)之后，我往回看看了，發(fā)現(xiàn)第一稿真讓人頭皮發(fā)麻呀～
最后的呈現(xiàn)效果比之前做的都要強(qiáng)太多了。

不管是顏色方向、質(zhì)感、細(xì)節(jié)上都甩前者一大截，原因是什么呢？我總結(jié)了以下幾點(diǎn)：

一、層次關(guān)系

客戶就說“畫面視覺太平了，沒有層次，黑白灰關(guān)系沒有拉開！細(xì)節(jié)也沒有！顏色不好看！自己回去再想想吧！”……

黑白灰關(guān)系什么意思呢？我的理解就是先把設(shè)計(jì)稿去色不就能看到黑白灰了嗎？

很多同學(xué)在做設(shè)計(jì)時(shí)不會(huì)考慮黑白灰這個(gè)問題，但其實(shí)顏色也是有變化的；在顏色中黑白灰的關(guān)系就是色彩的明度關(guān)系，明度越高就越白。
正常情況下畫面中的黑白灰關(guān)系拉得越開，就越有空間感、層次感。

如果畫面中黑白灰關(guān)系沒有拉開，就會(huì)使畫面飄飄的，很奇怪、不接地氣。

如上圖就是一個(gè)正常的黑白灰關(guān)系，每一層都區(qū)分的很開，它就會(huì)有空間層次感。

而且我們也需要保持畫面的平衡感，黑色多了就會(huì)使得畫面沉，白色多了就會(huì)使畫面飄，灰色多了就會(huì)使畫面悶。

所以我們得把握一個(gè)度，把握黑白灰在畫面中的節(jié)奏感！

我們?cè)侔押诎谆谊P(guān)系運(yùn)用到實(shí)際工作中：

整個(gè)背景采用暗灰色調(diào)，主體底板用亮灰色，內(nèi)容就用亮色系，陰影及厚度用暗色調(diào)。這樣一來畫面的層次拉開了。

那么客戶說的細(xì)節(jié)該怎么去加呢？

二、細(xì)節(jié)

沒有細(xì)節(jié)、太平了，我就想到把它做成立體的感覺，讓畫面豐富起來，也可以加一些點(diǎn)綴的小元素來修飾畫面。

從平面二維到立體三維畫面的細(xì)節(jié)就豐富多了,而且三維空間更加容易出效果。

在加細(xì)節(jié)的過程中，我感覺到了畫面中有點(diǎn)太過于規(guī)規(guī)矩矩了，全是方方正正形狀，就很呆板的感覺，特別是左下角的矩形框，與整個(gè)畫面之間沒有聯(lián)系、不協(xié)調(diào)。

這就是構(gòu)圖出了問題。

解決的方法很簡(jiǎn)單，只要讓圖形與圖形之間互相穿插、疊加，讓它們你中有我我中中有你；甚至可以把圖形加以旋轉(zhuǎn)，讓圖形產(chǎn)生“正”與“斜”的對(duì)比。

這種方法就可以解決畫面死板的問題。

但是我覺得不能夠加矩形了，畫面中方形形狀已經(jīng)很多了，那么我們是不是可以考慮一下用圓去增加畫面節(jié)奏感。

方的對(duì)比是圓，也是一個(gè)對(duì)比關(guān)系，但圓的占比面積太大了，咱們就可以用弧線去代替。

這不，弧線把方正的矩形打破了，畫面就更加生動(dòng)有節(jié)奏。

還有一個(gè)細(xì)節(jié)：

如圖所示，這里就涉及到一個(gè)識(shí)別度的問題，我們?cè)谧鲈O(shè)計(jì)的時(shí)候，一定要把形體交代清楚；

我做了一個(gè)銀幣的效果，但是形體邊緣輪廓沒有交代清楚，整個(gè)銀幣糊在一堆了，看不清里面的字符是什么，這樣的感覺不是很好，整個(gè)元素是虛的。

還有上升的線條取消發(fā)光效果是不是去掉會(huì)更好呢？

這樣是不是畫面會(huì)更加的完整呢，這點(diǎn)很重要呀，我們得把物體交代清楚，不能模棱兩可就糊弄過去了！物體虛虛的給人感覺很飄，不穩(wěn)。

其實(shí)還有中間的一稿，但是顏色一不小心就弄臟了：

三、顏色臟的小技巧

經(jīng)過嘗試，我總算明白為什么顏色漸變會(huì)偏臟了；我總結(jié)了以下幾點(diǎn)：

1、飽和度低的顏色占比不要太多，多了顏色就容易顯得臟。

如圖，右邊的顏色飽和度偏低，這類顏色就會(huì)發(fā)灰，灰色多了能不臟嗎？

2、盡量不要用對(duì)比色去拉漸變，對(duì)比色漸變對(duì)于新手來說不太友好，“紅配綠賽狗屁”就是這種說法。

只要注意到這兩點(diǎn)就基本可以避開顏色太臟的情況

總結(jié)

以上就是這次小案例帶給我的啟發(fā)和思考，希望當(dāng)遇到類似我這種問題的時(shí)候能夠給你點(diǎn)啟發(fā)，能夠幫助到你！