個(gè)人中心是我們 UI 設(shè)計(jì)師最常接觸的頁(yè)面觸點(diǎn)之一，如果個(gè)人中心都做不好，那就沒(méi)辦法在 UI 崗位上混下去了，今天來(lái)看個(gè)人中心頁(yè)面的案例，看看咱們同學(xué)是怎么優(yōu)化的！

首先來(lái)看下優(yōu)化前后的對(duì)比圖：

一、背景色優(yōu)化

優(yōu)化原頁(yè)面時(shí)，可以先觀察一下，整體頁(yè)面使用的是綠色作為主色，但這個(gè)綠色太正了，不太好看，我們可以把綠色色相調(diào)整的更靠近藍(lán)色，同時(shí)讓綠色的飽和度不要過(guò)高，避免大面積使用時(shí)過(guò)于刺眼：

二、個(gè)人信息展示優(yōu)化

原頁(yè)面中，頭像和右側(cè)信息視覺(jué)比例失衡，頭像過(guò)大，導(dǎo)致用戶信息上下的負(fù)空間較多，整個(gè)模塊看起來(lái)不夠飽滿，我們可以適當(dāng)縮小頭像，減少上下的負(fù)空間，讓整個(gè)個(gè)人信息模塊更飽滿：

三、數(shù)據(jù)展示優(yōu)化

原頁(yè)面中的數(shù)據(jù)展示比較平，雖然有大小和顏色的對(duì)比，但對(duì)比還不夠強(qiáng)，視覺(jué)效果可以更有沖擊力一些，所以我們可以先把數(shù)字換成更有設(shè)計(jì)感的字體，然后選擇比較粗的字重，并加大字號(hào)，和文案拉開(kāi)層級(jí)，最后再把數(shù)據(jù)改的更真實(shí)一些，優(yōu)化就完成了：

四、活動(dòng)入口優(yōu)化

原頁(yè)面中活動(dòng)入口設(shè)計(jì)的比較普通，除了破形之外沒(méi)什么層次，那我們應(yīng)該怎么改呢？

我們可以想方法加層次，首先可以先把文案拆成兩行，標(biāo)題放大加粗，次要文案縮小弱化，這樣文案就能有兩個(gè)層級(jí)：

再把按鈕的背景顏色改為黑色，增大與背景的反差，同時(shí)調(diào)整按鈕大小，讓按鈕更突出：

卡片內(nèi)部調(diào)整好之后，最后再給卡片上覆蓋一層半圓切割的背景，加上一層投影，讓卡片更有空間感，整個(gè)入口的優(yōu)化就做完了，來(lái)看下優(yōu)化的前后對(duì)比吧：

五、動(dòng)態(tài)卡片優(yōu)化

個(gè)人中心展示的動(dòng)態(tài)應(yīng)該是用戶自己發(fā)布的內(nèi)容，所以卡片中的性別、與其他人的距離這些信息都可以去掉，減少干擾，不同的卡片用背景色分割，去掉投影，讓頁(yè)面更清爽，最后再優(yōu)化下間距，整個(gè)卡片的優(yōu)化就做完了：

六、導(dǎo)航欄優(yōu)化

底部導(dǎo)航欄右側(cè)的三個(gè)圖標(biāo)外輪廓都是圓形，我們可以把其中一個(gè)外輪廓改成方形，打破這種常規(guī)，讓圖標(biāo)的變化更有節(jié)奏感：

再把未選中圖標(biāo)的灰色改為帶有綠色色相的灰色，讓圖標(biāo)更耐看：

最后我們?cè)侔训撞繉?dǎo)航欄的投影去掉，背景改成更通透、更有質(zhì)感的毛玻璃，整個(gè)導(dǎo)航欄的優(yōu)化就完成了：

總結(jié)

來(lái)回顧下我們都做了哪些優(yōu)化吧：

1. 顏色盡量不要用太正的顏色，比如正紅，正綠等，可以往相鄰的色相偏一些，顏色會(huì)更好看；
2. 負(fù)空間過(guò)大會(huì)讓模塊看起來(lái)不飽滿，縮小頭像的尺寸可以減少負(fù)空間的面積，讓模塊看起來(lái)更飽滿；
3. 加大對(duì)比，與文案拉開(kāi)層級(jí)，讓用戶一眼看到重點(diǎn)；
4. 層級(jí)不夠的時(shí)候，可以主動(dòng)增加層級(jí)，例如拆分文案，增加文案的層級(jí)；調(diào)整按鈕顏色、大小，強(qiáng)化按鈕；增加遮罩和投影，增強(qiáng)空間感等；
5. 用背景色分割，去掉投影，讓頁(yè)面更清爽；
6. 把白色背景改為更通透的毛玻璃，讓頁(yè)面更透氣，提升頁(yè)面的品質(zhì)感；

最后再來(lái)看下優(yōu)化前后的效果圖：

希望對(duì)大家有所幫助！

作者：菜心設(shè)計(jì)鋪