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

更多個人中心設計干貨：

首先來看下優化前后的對比圖：

一、背景色優化

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

二、個人信息展示優化

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

三、數據展示優化

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

四、活動入口優化

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

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

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

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

五、動態卡片優化

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

六、導航欄優化

底部導航欄右側的三個圖標外輪廓都是圓形，我們可以把其中一個外輪廓改成方形，打破這種常規，讓圖標的變化更有節奏感：

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

最后我們再把底部導航欄的投影去掉，背景改成更通透、更有質感的毛玻璃，整個導航欄的優化就完成了：

總結

來回顧下我們都做了哪些優化吧：

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

最后再來看下優化前后的效果圖：

希望對大家有所幫助！

歡迎關注作者的微信公眾號：「菜心設計鋪」