难点在于信息和数据的类别较多,因此,分清楚信息层级并有效展示是本次的优化重点。
可以看出,页面内容分头部数据和FEED流两个部分,一起来看看具体优化步骤吧。
优化前头部的3组数据(总收益、今日收益和算力余额)排版零散,我们可以运用容器思维将它们先全部合并到一个卡片中去:
也就是信息层级重新梳理,尤其是“今日收益”和“算力余额”,我们可以将这两组数据设计成统一排版样式,并排清晰展示:
在视觉上还可以将这个数据卡片异形处理,增添设计感:
在异形空位处加一个用AI生成的装饰图标,,将卡片底板制成毛玻璃效果,进一步增添设计感:
为了烘托氛围,我们可以给这个页面底板头部加光感设计,顶部卡片也加一点渐变和背景底板呼应:
优化前的按钮视觉体验上不清晰并且设计呆板,我们要对其进行优化:
接下来拉开信息层级,突出信息重点。比如每个数据的名称我们可以弱化设计;再比如对于“今日收益”这样存在正负情况的数据,我们用正向和负向的颜色区分数据: