個人中心是我們ui設計師最常接觸的頁面觸點之一，如果個人中心都做不好，那就沒辦法在ui崗位上混下去了，今天來一個個人中心頁面的案例，看看咱們同學是怎麼最佳化的！
首先來看下最佳化前後的對比圖：
01 背景色最佳化
最佳化原頁面時，可以先觀察一下，整體頁面使用的是綠色作為主色，但這個綠色太正了，不太好看，我們可以把綠色色相調整的更靠近藍色，同時讓綠色的飽和度不要過高，避免大面積使用時過於刺眼：
02 個人資訊展示最佳化
原頁面中，頭像和右側資訊視覺比例失衡，頭像過大，導致使用者資訊上下的負空間較多，整個模組看起來不夠飽滿，我們可以適當縮小頭像，減少上下的負空間，讓整個個人資訊模組更飽滿：
03 資料展示最佳化
原頁面中的資料展示比較平，雖然有大小和顏色的對比，但對比還不夠強，視覺效果可以更有衝擊力一些，所以我們可以先把數字換成更有設計感的字型，然後選擇比較粗的字重，並加大字號，和文案拉開層級，最後再把資料改的更真實一些，最佳化就完成了：
04 活動入口最佳化
原頁面中活動入口設計的比較普通，除了破形之外沒什麼層次，那我們應該怎麼改呢？
我們可以想方法加層次，首先可以先把文案拆成兩行，標題放大加粗，次要文案縮小弱化，這樣文案就能有兩個層級：
再把按鈕的背景顏色改為黑色，增大與背景的反差，同時調整按鈕大小，讓按鈕更突出：
卡片內部調整好之後，最後再給卡片上覆蓋一層半圓切割的背景，加上一層投影，讓卡片更有空間感，整個入口的最佳化就做完了，來看下最佳化的前後對比吧：
05 動態卡片最佳化
個人中心展示的動態應該是使用者自己釋出的內容，所以卡片中的性別、與其他人的距離這些資訊都可以去掉，減少干擾，不同的卡片用背景色分割，去掉投影，讓頁面更清爽，最後再最佳化下間距，整個卡片的最佳化就做完了：
06 導航欄最佳化
底部導航欄右側的三個圖示外輪廓都是圓形，我們可以把其中一個外輪廓改成方形，打破這種常規，讓圖示的變化更有節奏感：
再把未選中圖示的灰色改為帶有綠色色相的灰色，讓圖示更耐看：
最後我們再把底部導航欄的投影去掉，背景改成更通透、更有質感的毛玻璃，整個導航欄的最佳化就完成了：
07 總結
來回顧下我們都做了哪些最佳化吧：
1、顏色儘量不要用太正的顏色，比如正紅，正綠等，可以往相鄰的色相偏一些，顏色會更好看；
2、負空間過大會讓模組看起來不飽滿，縮小頭像的尺寸可以減少負空間的面積，讓模組看起來更飽滿；
3、加大對比，與文案拉開層級，讓使用者一眼看到重點；
4、層級不夠的時候，可以主動增加層級，例如拆分文案，增加文案的層級；調整按鈕顏色、大小，強化按鈕；增加遮罩和投影，增強空間感等；
5、用背景色分割，去掉投影，讓頁面更清爽；
6、把白色背景改為更通透的毛玻璃，讓頁面更透氣，提升頁面的品質感；
最後再來看下最佳化前後的效果圖：
希望對大家有所幫助！
來源 | 菜心設計鋪（ID：caixinshejipu）
作者 | 菜心設計鋪 ; 編輯 | 荔枝
內容僅代表作者獨立觀點，不代表早讀課立場