本文授權轉自：菜心設計鋪（ID：caixinshejipu）

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

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

1.背景色優化

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

2.個人信息展示優化

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

3.數據展示優化

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

4.活動入口優化

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

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

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

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

5.動態卡片優化

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

6.導航欄優化

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

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

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

7.總結

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

1、顏色盡量不要用太正的顏色，比如正紅，正綠等，可以往相鄰的色相偏一些，顏色會更好看；

2、負空間過大會讓模塊看起來不飽滿，縮小頭像的尺寸可以減少負空間的面積，讓模塊看起來更飽滿；

3、加大對比，與文案拉開層級，讓用戶一眼看到重點；

4、層級不夠的時候，可以主動增加層級，例如拆分文案，增加文案的層級；調整按鈕顏色、大小，強化按鈕；增加遮罩和投影，增強空間感等；

5、用背景色分割，去掉投影，讓頁面更清爽；

6、把白色背景改為更通透的毛玻璃，讓頁面更透氣，提升頁面的品質感；

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

在科技浪潮奔涌向前的當下，人工智能正深刻重塑我們的生活與工作。人機之間的關系，也從簡單交互邁向深度協作。想知道如何在這一趨勢下把握體驗設計的新方向嗎？2025 年 10 月將在北京舉辦的 IXDC 國際體驗設計大會聚焦 “人機共生：人工智能時代人機協作新范式” ，作為全球領先的用戶體驗創新盛會，它將匯聚前沿理念與實踐。一起來關注這場盛會，探索人機協作的無限可能。

文章轉載：菜心設計鋪，版權歸原作者所有

原文鏈接：https://mp.weixin.qq.com/s/C4GEx8mIvMJl_FiBwq5XCA

版權聲明：“IXDC”所推送的文章，除非確實無法確認，我們都會注明作者和來源，本公眾號對轉載、分享的內容、陳述、觀點判斷保持中立，不對所包含內容的準確性、可靠性或完善性提供任何明或暗示的保證，僅供讀者參考。部分文章推送時未能與原作者取得聯系，若涉及內容或作品等版權問題，煩請原作者聯系我們，給出內容所在的網址并提供相關證明資料，我們會核查后立即更正或者刪除有關內容！本公眾號不承擔任何責任，并擁有對此聲明的最終解釋權。

聯系微信：18802086168

聯系電話：18802086168

編排 | 黃春燕

終審 | 蘇 菁

點這里，學習更多設計知識！