高手是如何做UI界面优化的？先从这2个角度切入！

这次跟大家分享一个UI界面的优化修改，老规矩先看一下前后对比图：

一、构图问题

原图最大的问题就是太散乱，不知道该看哪里。我们可以从3个角度切入去进行调整：

①：饱满度不够的问题,我们可以把画面里的所有物体都用红色区分画出来:

然后就会发现整体的空白区域余留的太多，我们可以去放大他们，减少留白的空间。

②：没有视觉中心问题，现在图里的两个比叫重要的元素，标题文字，光碟各在一边，切都不在中心，造成了视觉的分散，也是我们需要修改的点。

③：缺乏绝对对比，同样的是把所有的物体用红框画出来：

我们会发现所有的红色区域都差不多大，这是导致画面很平均没有主次的原因。

结合这三个问题，我们看下怎么改。

①饱满度问题：适当放大所有的元素，不要都小小的，留白过多。

散乱的感觉是不是好了一些？我们接着优化！

②视觉中心问题：现在两个重要信息元素是分开的，并且是偏离中心的，那我们可以想想办法看能不能把这两个重要信息合二为一，化零为整，比如这样：

采用包装盒的形式，把文字和CD结合在一起，并把它放置在画面中心：

是不是一下就聚焦了？

③ 绝对对比问题：单独放大中心的元素，让它与其他的元素拉开大小对比。

OK，构图问题我们分别从饱满度，视觉中心，绝对对比上去做了优化和调整。接下来我们看看主体如何去刻画才好看。

二、主体问题

给同学讲了问题点之后，同学按照反馈改了一版。我们先来看一下他改完后的效果：

改完之后确实更聚焦了，散装的状态好勒许多。但是这个主体刻画的我不是很满意，我们来看看怎么修改：

①清晰度问题：CD有些模糊，对比不足看起来有些轻浮。

②缺乏兴趣点：没什么亮点，普普通通，吸引不到注意力。

③精致度问题：比例、结构、细节都不耐看，看起来相对粗糙。

我们可以找一个清晰的CD素材，起码保证他是清晰的，不模糊的,然后再此基础上去进行调整优化，让CD的风格和光影融入我们的画面：

接着是前面的纸质包装，我们也需要加入更多的细节：

把调整后的主体替换进画面：

是不是耐看不少？一些细节和兴趣点的植入也可以让人多看两眼，不会说一眼就看光了。

最后加一个简单的包装效果：

欢迎关注作者的微信公众号：「菜心设计铺」