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

更多個人中心設(shè)計干貨：

首先來看下優(yōu)化前后的對比圖：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

最后我們再把底部導(dǎo)航欄的投影去掉，背景改成更通透、更有質(zhì)感的毛玻璃，整個導(dǎo)航欄的優(yōu)化就完成了：

總結(jié)

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

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

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

希望對大家有所幫助！

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