本次案例是優(yōu)化資產(chǎn)中心頁面。難點(diǎn)在于信息和數(shù)據(jù)的類別較多，因此，分清楚信息層級(jí)并有效展示是本次的優(yōu)化重點(diǎn)。

來看看優(yōu)化前：

再來看看優(yōu)化后：

可以看出，頁面內(nèi)容分頭部數(shù)據(jù)和FEED流兩個(gè)部分，一起來看看具體優(yōu)化步驟吧。

方向一：頭部卡片優(yōu)化

步驟1 優(yōu)化標(biāo)題樣式
優(yōu)化前的標(biāo)題樣式普通，我們可以加一點(diǎn)設(shè)計(jì)感：

步驟2 整合信息
優(yōu)化前頭部的3組數(shù)據(jù)（總收益、今日收益和算力余額）排版零散，我們可以運(yùn)用容器思維將它們先全部合并到一個(gè)卡片中去：

步驟3 形式降噪
也就是信息層級(jí)重新梳理，尤其是“今日收益”和“算力余額”，我們可以將這兩組數(shù)據(jù)設(shè)計(jì)成統(tǒng)一排版樣式，并排清晰展示：

步驟4 異性卡片
在視覺上還可以將這個(gè)數(shù)據(jù)卡片異形處理，增添設(shè)計(jì)感：

步驟5 AI生成裝飾圖標(biāo)
在異形空位處加一個(gè)用AI生成的裝飾圖標(biāo)，，將卡片底板制成毛玻璃效果，進(jìn)一步增添設(shè)計(jì)感：

步驟6 背景加光
為了烘托氛圍，我們可以給這個(gè)頁面底板頭部加光感設(shè)計(jì)，頂部卡片也加一點(diǎn)漸變和背景底板呼應(yīng)：

方向二：卡片優(yōu)化

步驟1 優(yōu)化按鈕樣式
優(yōu)化前的按鈕視覺體驗(yàn)上不清晰并且設(shè)計(jì)呆板，我們要對(duì)其進(jìn)行優(yōu)化：

步驟2 優(yōu)化排版
接下來拉開信息層級(jí)，突出信息重點(diǎn)。比如每個(gè)數(shù)據(jù)的名稱我們可以弱化設(shè)計(jì)；再比如對(duì)于“今日收益”這樣存在正負(fù)情況的數(shù)據(jù)，我們用正向和負(fù)向的顏色區(qū)分?jǐn)?shù)據(jù)：

最后，來看看優(yōu)化前后對(duì)比吧：

遇到多信息數(shù)據(jù)的頁面如何優(yōu)化設(shè)計(jì)，你學(xué)會(huì)了嗎？

來源 | 菜心設(shè)計(jì)鋪（ID：caixinshejipu）

作者 | 菜心設(shè)計(jì)鋪 ; 編輯 | 呼呼大睡

內(nèi)容僅代表作者獨(dú)立觀點(diǎn)，不代表早讀課立場(chǎng)