四步优化画面精致度【案例实操】

最近把之前结束了的项目，拿回来重新优化了一版～总结了些个人方法，这里也分享给你。先看下前后对比：

是不是左右区别还挺大的？下面说下我调整了哪些地方。

一、构图

1) 整体构图

一开始的构图，内容散乱，感觉整个画面都不是很饱满。我在想，怎样才能让内容集中饱满呢？

我尝试先调整标题。把标题分为两行，加个底托住，这样头部的视觉就饱满些了。同时结合了下面保护罩圆圆的特征，给字形做了优化，让它看起来更圆润可爱。

2) 局部构图

标题看上去ok了。但往下看，下面的内容还是散乱，各种元素挤在一起，视线不够集中。（左图）

分析了一下，感觉很大原因还是层次和对比不够。于是我作了这样的处理：

1、先放大主体（肝）。把主体层次提高。

2、附近的小病毒拉开，从空间上营造近大远小的关系；

3、调整水飞蓟形态。之前的水飞蓟太大了，颜色和肝也接近，主次关系没分清。调整后的水飞蓟，可以更好地突出肝主体。

二、颜色

之前的颜色是比较乱的，没有一个统一的标准。怎样才能更好地管理颜色呢？我作了这些处理：

1、整体根据 外暗内亮 过渡。可以更好地营造氛围感和空间感。

2、头部标题颜色留白，给界面透透气。

3、主体的颜色饱和度是最高的，周围小病毒饱和度低。这样视觉就不会分散。

4、按钮使用最亮的点缀色突出。

这样的安排，界面的颜色比较有规律。而且视觉重心可以集中在中下部分。

这里再介绍一个颜色调整方法：新建一个灰色层，图层样式改为饱和度，画面变成黑白。这样可以更敏锐地观察页面明暗颜色关系。我们通过这个方法看下前后颜色对比

右边的颜色是不是更规律和谐了？

三、 角色统一

在这个页面中，需要画很多小人物。怎样才能做到各个元素统一而不呆板？我找了些参考：

可能你也发现了，别人在处理角色关系时，都会刻意地保留一两个明显的共有特征。例如左图那个blingbling眼睛，例如右图小怪物的外形和的颜色。之后才是在基础特征上做延展。

我也采用了这样的方法，用了大眼睛作为共通点。同时外形调整得更圆润些。减少一些不必要的阴影渐变。不抢眼球。把视觉重心留给c位。

感觉右边的统一舒服多了。

另外水飞蓟，一开始也是从保留眼睛特征的想法出发的。

但后来发现这样会有点复杂，而且和后面肝的层次拉不开，就做了进一步简化和形态调整。保留了大眼睛的特征，外形改成比较尖锐感的形态，跟其他角色产生差距。

四、 细节处理

之前的肝，看上去会比较平。我希望它可以更生动些。

所以我又加了些汗水细节，表情也更夸张。画面看上去更有趣了。

总结

检查画面精致感，这里我通过调整构图、颜色、角色统一、和细节去调整。

希望对你有帮助启发啦～谢谢观看。