一个科技类网页小插图设计经验总结

今天给大家分享一下我工作中的一些小案例，看看我是怎么一步一步解决设计中的一些小问题。我们先来看一看最终的设计效果。

这是一个科技类网页的小插图，这样看是OK的，但第一版的图就一言难尽了，如下：

做完设计之后，我往回看看了，发现第一稿真让人头皮发麻呀～最后的呈现效果比之前做的都要强太多了。不管是颜色方向、质感、细节上都甩前者一大截，原因是什么呢？我总结了以下几点：

一、层次关系

客户就说“画面视觉太平了，没有层次，黑白灰关系没有拉开！细节也没有！颜色不好看！自己回去再想想吧！”……黑白灰关系什么意思呢？我的理解就是先把设计稿去色不就能看到黑白灰了吗？

很多同学在做设计时不会考虑黑白灰这个问题，但其实颜色也是有变化的；在颜色中黑白灰的关系就是色彩的明度关系，明度越高就越白。正常情况下画面中的黑白灰关系拉得越开，就越有空间感、层次感。如果画面中黑白灰关系没有拉开，就会使画面飘飘的，很奇怪、不接地气。

如上图就是一个正常的黑白灰关系，每一层都区分的很开，它就会有空间层次感。而且我们也需要保持画面的平衡感，黑色多了就会使得画面沉，白色多了就会使画面飘，灰色多了就会使画面闷。所以我们得把握一个度，把握黑白灰在画面中的节奏感！我们再把黑白灰关系运用到实际工作中：

整个背景采用暗灰色调，主体底板用亮灰色，内容就用亮色系，阴影及厚度用暗色调。这样一来画面的层次拉开了。那么客户说的细节该怎么去加呢？

二、细节

没有细节、太平了，我就想到把它做成立体的感觉，让画面丰富起来，也可以加一些点缀的小元素来修饰画面。

从平面二维到立体三维画面的细节就丰富多了,而且三维空间更加容易出效果。

在加细节的过程中，我感觉到了画面中有点太过于规规矩矩了，全是方方正正形状，就很呆板的感觉，特别是左下角的矩形框，与整个画面之间没有联系、不协调。这就是构图出了问题。解决的方法很简单，只要让图形与图形之间互相穿插、叠加，让它们你中有我我中中有你；甚至可以把图形加以旋转，让图形产生“正”与“斜”的对比。这种方法就可以解决画面死板的问题。