這次跟大家分享一個(gè)UI界面的優(yōu)化修改，老規(guī)矩先看一下前后對(duì)比圖：

一、構(gòu)圖問(wèn)題

原圖最大的問(wèn)題就是太散亂，不知道該看哪里。我們可以從3個(gè)角度切入去進(jìn)行調(diào)整：

①：飽滿度不夠的問(wèn)題,我們可以把畫面里的所有物體都用紅色區(qū)分畫出來(lái):

然后就會(huì)發(fā)現(xiàn)整體的空白區(qū)域余留的太多，我們可以去放大他們，減少留白的空間。

②：沒有視覺中心問(wèn)題，現(xiàn)在圖里的兩個(gè)比叫重要的元素，標(biāo)題文字，光碟各在一邊，切都不在中心，造成了視覺的分散，也是我們需要修改的點(diǎn)。

③：缺乏絕對(duì)對(duì)比，同樣的是把所有的物體用紅框畫出來(lái)：

我們會(huì)發(fā)現(xiàn)所有的紅色區(qū)域都差不多大，這是導(dǎo)致畫面很平均沒有主次的原因。

結(jié)合這三個(gè)問(wèn)題，我們看下怎么改。

①飽滿度問(wèn)題：適當(dāng)放大所有的元素，不要都小小的，留白過(guò)多。

散亂的感覺是不是好了一些？我們接著優(yōu)化！

②視覺中心問(wèn)題：現(xiàn)在兩個(gè)重要信息元素是分開的，并且是偏離中心的，那我們可以想想辦法看能不能把這兩個(gè)重要信息合二為一，化零為整，比如這樣：

采用包裝盒的形式，把文字和CD結(jié)合在一起，并把它放置在畫面中心：

是不是一下就聚焦了？

③ 絕對(duì)對(duì)比問(wèn)題：?jiǎn)为?dú)放大中心的元素，讓它與其他的元素拉開大小對(duì)比。

OK，構(gòu)圖問(wèn)題我們分別從飽滿度，視覺中心，絕對(duì)對(duì)比上去做了優(yōu)化和調(diào)整。接下來(lái)我們看看主體如何去刻畫才好看。

二、主體問(wèn)題

給同學(xué)講了問(wèn)題點(diǎn)之后，同學(xué)按照反饋改了一版。我們先來(lái)看一下他改完后的效果：

改完之后確實(shí)更聚焦了，散裝的狀態(tài)好勒許多。但是這個(gè)主體刻畫的我不是很滿意，我們來(lái)看看怎么修改：

①清晰度問(wèn)題：CD有些模糊，對(duì)比不足看起來(lái)有些輕浮。

②缺乏興趣點(diǎn)：沒什么亮點(diǎn)，普普通通，吸引不到注意力。

③精致度問(wèn)題：比例、結(jié)構(gòu)、細(xì)節(jié)都不耐看，看起來(lái)相對(duì)粗糙。

我們可以找一個(gè)清晰的CD素材，起碼保證他是清晰的，不模糊的,然后再此基礎(chǔ)上去進(jìn)行調(diào)整優(yōu)化，讓CD的風(fēng)格和光影融入我們的畫面：

接著是前面的紙質(zhì)包裝，我們也需要加入更多的細(xì)節(jié)：

把調(diào)整后的主體替換進(jìn)畫面：

是不是耐看不少？一些細(xì)節(jié)和興趣點(diǎn)的植入也可以讓人多看兩眼，不會(huì)說(shuō)一眼就看光了。

最后加一個(gè)簡(jiǎn)單的包裝效果：

歡迎關(guān)注作者的微信公眾號(hào)：「菜心設(shè)計(jì)鋪」