這是一個科技類網頁的小插圖，這樣看是OK的，但第一版的圖就一言難盡了，如下：

做完設計之后，我往回看看了，發現第一稿真讓人頭皮發麻呀～
最后的呈現效果比之前做的都要強太多了。

不管是顏色方向、質感、細節上都甩前者一大截，原因是什么呢？我總結了以下幾點：

一、層次關系

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

黑白灰關系什么意思呢？我的理解就是先把設計稿去色不就能看到黑白灰了嗎？

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

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

如上圖就是一個正常的黑白灰關系，每一層都區分的很開，它就會有空間層次感。

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

所以我們得把握一個度，把握黑白灰在畫面中的節奏感！

我們再把黑白灰關系運用到實際工作中：

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

那么客戶說的細節該怎么去加呢？

二、細節

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

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

在加細節的過程中，我感覺到了畫面中有點太過于規規矩矩了，全是方方正正形狀，就很呆板的感覺，特別是左下角的矩形框，與整個畫面之間沒有聯系、不協調。

這就是構圖出了問題。

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

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

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

方的對比是圓，也是一個對比關系，但圓的占比面積太大了，咱們就可以用弧線去代替。

這不，弧線把方正的矩形打破了，畫面就更加生動有節奏。

還有一個細節：

如圖所示，這里就涉及到一個識別度的問題，我們在做設計的時候，一定要把形體交代清楚；

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

還有上升的線條取消發光效果是不是去掉會更好呢？

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

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

三、顏色臟的小技巧

經過嘗試，我總算明白為什么顏色漸變會偏臟了；我總結了以下幾點：

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

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

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

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

總結

以上就是這次小案例帶給我的啟發和思考，希望當遇到類似我這種問題的時候能夠給你點啟發，能夠幫助到你！