北京
本次案例是優化資產中心頁面。難點在于信息和數據的類別較多，因此，分清楚信息層級并有效展示是本次的優化重點。
來看看優化前：
再來看看優化后：
可以看出，頁面內容分頭部數據和FEED流兩個部分，一起來看看具體優化步驟吧。
方向一：頭部卡片優化
步驟1 優化標題樣式
優化前的標題樣式普通，我們可以加一點設計感：
步驟2 整合信息
優化前頭部的3組數據（總收益、今日收益和算力余額）排版零散，我們可以運用容器思維將它們先全部合并到一個卡片中去：
步驟3 形式降噪
也就是信息層級重新梳理，尤其是“今日收益”和“算力余額”，我們可以將這兩組數據設計成統一排版樣式，并排清晰展示：
步驟4 異性卡片
在視覺上還可以將這個數據卡片異形處理，增添設計感：
步驟5 AI生成裝飾圖標
在異形空位處加一個用AI生成的裝飾圖標，，將卡片底板制成毛玻璃效果，進一步增添設計感：
步驟6 背景加光
為了烘托氛圍，我們可以給這個頁面底板頭部加光感設計，頂部卡片也加一點漸變和背景底板呼應：
方向二：卡片優化
步驟1 優化按鈕樣式
優化前的按鈕視覺體驗上不清晰并且設計呆板，我們要對其進行優化：
步驟2 優化排版
接下來拉開信息層級，突出信息重點。比如每個數據的名稱我們可以弱化設計；再比如對于“今日收益”這樣存在正負情況的數據，我們用正向和負向的顏色區分數據：
最后，來看看優化前后對比吧：
遇到多信息數據的頁面如何優化設計，你學會了嗎？
來源 | 菜心設計鋪（ID：caixinshejipu）
作者 | 菜心設計鋪 ; 編輯 | 呼呼大睡
內容僅代表作者獨立觀點，不代表早讀課立場
特別聲明：以上內容(如有圖片或視頻亦包括在內)為自媒體平臺“網易號”用戶上傳并發布，本平臺僅提供信息存儲服務。
Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.
