本次案例是优化资产中心页面。难点在于信息和数据的类别较多，因此，分清楚信息层级并有效展示是本次的优化重点。
来看看优化前：
打开网易新闻 查看精彩图片
再来看看优化后：
打开网易新闻 查看精彩图片
可以看出，页面内容分头部数据和FEED流两个部分，一起来看看具体优化步骤吧。
方向一：头部卡片优化
步骤1 优化标题样式
优化前的标题样式普通，我们可以加一点设计感：
打开网易新闻 查看精彩图片
步骤2 整合信息
优化前头部的3组数据（总收益、今日收益和算力余额）排版零散，我们可以运用容器思维将它们先全部合并到一个卡片中去：
打开网易新闻 查看精彩图片
步骤3 形式降噪
也就是信息层级重新梳理，尤其是“今日收益”和“算力余额”，我们可以将这两组数据设计成统一排版样式，并排清晰展示：
打开网易新闻 查看精彩图片
步骤4 异性卡片
在视觉上还可以将这个数据卡片异形处理，增添设计感：
打开网易新闻 查看精彩图片
步骤5 AI生成装饰图标
在异形空位处加一个用AI生成的装饰图标，，将卡片底板制成毛玻璃效果，进一步增添设计感：
打开网易新闻 查看精彩图片
步骤6 背景加光
为了烘托氛围，我们可以给这个页面底板头部加光感设计，顶部卡片也加一点渐变和背景底板呼应：
打开网易新闻 查看精彩图片
方向二：卡片优化
步骤1 优化按钮样式
优化前的按钮视觉体验上不清晰并且设计呆板，我们要对其进行优化：
打开网易新闻 查看精彩图片
步骤2 优化排版
接下来拉开信息层级，突出信息重点。比如每个数据的名称我们可以弱化设计；再比如对于“今日收益”这样存在正负情况的数据，我们用正向和负向的颜色区分数据：
打开网易新闻 查看精彩图片
最后，来看看优化前后对比吧：
打开网易新闻 查看精彩图片
遇到多信息数据的页面如何优化设计，你学会了吗？
来源 | 菜心设计铺（ID：caixinshejipu）
作者 | 菜心设计铺 ; 编辑 | 呼呼大睡
内容仅代表作者独立观点，不代表早读课立场
热门跟贴