高手是如何做UI界面優(yōu)化的？來看實(shí)戰(zhàn)案例！

今天來做的這個(gè)頁面，光是一開始就薅了好久的頭發(fā)。

這個(gè)頁面的最初版長(zhǎng)這樣：

最后調(diào)整為這樣：

到底為什么要做這些改動(dòng)呢？

大概為了以下幾點(diǎn)：

1. 當(dāng)畫面中有很多亮色時(shí)，需要有黑色壓下去
2. 彩色里融入無彩色，畫面會(huì)更好看
3. 使層次更豐富
4. 帶有透視角度的物體，運(yùn)動(dòng)感更強(qiáng)

除了這幾大點(diǎn)之外，過程中還有一些細(xì)節(jié)小點(diǎn)，接下來分享給大家

一、當(dāng)畫面中有很多亮色時(shí)，需要有黑色壓下去

不知道大家留意過這類的設(shè)計(jì)風(fēng)格沒有，他們?cè)陧撁嬷羞\(yùn)用了很多明度較高、飽和度較高、較亮眼的顏色

為了能壓住頁面，也都用了一塊面積的黑色，不讓整個(gè)頁面顯得很輕、很浮。黑色的文字和圖標(biāo)也是起到這樣的作用

當(dāng)然黑色面積也不一定非得用在按鈕上，比如插畫、圖片上：

背景里：

總之，思維不局限在一定要加個(gè)黑色按鈕，各種地方都可以，只為了服務(wù)于畫面更加平衡和美觀～

所以回到我們做的頁面，嘗試直接把卡片變成黑色的，或者在頭部加個(gè)黑色背景試一下

二、彩色里融入無彩色，畫面會(huì)更好看

Icon 里融入黑色面塊：

背景改成灰色：

三、使層次更豐富

現(xiàn)在卡片的層次大致分為三層：

在此基礎(chǔ)上，嘗試再加一層，讓金幣從畫面中凸出來。

這樣使頭部卡片更豐富、在頁面中更強(qiáng)調(diào)：

這樣看著比較合適，我們?cè)侔呀饚诺娘L(fēng)格跟頁面調(diào)整統(tǒng)一

四、帶有透視角度的物體，運(yùn)動(dòng)感更強(qiáng)

現(xiàn)在的金幣是扁平的，不太像金幣，更像貼紙，扁平的拍在畫面上。

當(dāng)加入一些側(cè)面，變化就很明顯：

1. 能夠豐富金幣插畫的層次，看著更精致
2. 也讓金幣更像是立體的，像在往畫面里飛

最后一點(diǎn)調(diào)整

1. 將線條處理為斷線：

2. 調(diào)整卡片紋理

卡片紋理依舊用以前的還是有些瑣碎了，所以將紋理調(diào)整的更整體，再用一些較細(xì)的線和元素進(jìn)行點(diǎn)綴即可！

3. 標(biāo)題點(diǎn)綴綠色高亮，豐富頁面

總結(jié)

紙上得來終覺淺，絕知此事要躬行。

現(xiàn)在眼睛學(xué)會(huì)了，遇到相關(guān)案例，就用手去嘗試下吧！

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