一个资产中心界面,能有这么多细节,确实能看出来大厂设计师的功底!

用户头像
深圳/学生/2天前/318浏览
一个资产中心界面,能有这么多细节,确实能看出来大厂设计师的功底!
本次案例是优化资产中心页面。
难点在于信息和数据的类别较多,因此,分清楚信息层级并有效展示是本次的优化重点。
来看看优化前:
一个资产中心界面,能有这么多细节,确实能看出来大厂设计师的功底!(图ZMTU1NDUzMjg=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
再来看看优化后:
一个资产中心界面,能有这么多细节,确实能看出来大厂设计师的功底!(图ZMTU1NDUzNDA=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
可以看出,页面内容分头部数据和FEED流两个部分,一起来看看具体优化步骤吧。
方向一:头部卡片优化
步骤1:优化标题样式
优化前的标题样式普通,我们可以加一点设计感:
一个资产中心界面,能有这么多细节,确实能看出来大厂设计师的功底!(图ZMTU1NDUzNDQ=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
步骤2:整合信息
优化前头部的3组数据(总收益、今日收益和算力余额)排版零散,我们可以运用容器思维将它们先全部合并到一个卡片中去:
一个资产中心界面,能有这么多细节,确实能看出来大厂设计师的功底!(图ZMTU1NDUzNDg=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
步骤3:形式降噪
也就是信息层级重新梳理,尤其是“今日收益”和“算力余额”,我们可以将这两组数据设计成统一排版样式,并排清晰展示:
一个资产中心界面,能有这么多细节,确实能看出来大厂设计师的功底!(图ZMTU1NDUzNTI=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
步骤4:异性卡片
在视觉上还可以将这个数据卡片异形处理,增添设计感:
一个资产中心界面,能有这么多细节,确实能看出来大厂设计师的功底!(图ZMTU1NDUzNTY=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
步骤5:AI生成装饰图标
在异形空位处加一个用AI生成的装饰图标,,将卡片底板制成毛玻璃效果,进一步增添设计感:
一个资产中心界面,能有这么多细节,确实能看出来大厂设计师的功底!(图ZMTU1NDUzNjA=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
步骤6:背景加光
为了烘托氛围,我们可以给这个页面底板头部加光感设计,顶部卡片也加一点渐变和背景底板呼应:
一个资产中心界面,能有这么多细节,确实能看出来大厂设计师的功底!(图ZMTU1NDUzNjQ=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
方向二:卡片优化
步骤1:优化按钮样式
优化前的按钮视觉体验上不清晰并且设计呆板,我们要对其进行优化:
一个资产中心界面,能有这么多细节,确实能看出来大厂设计师的功底!(图ZMTU1NDUzNzI=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
步骤2:优化排版
接下来拉开信息层级,突出信息重点。比如每个数据的名称我们可以弱化设计;再比如对于“今日收益”这样存在正负情况的数据,我们用正向和负向的颜色区分数据:
一个资产中心界面,能有这么多细节,确实能看出来大厂设计师的功底!(图ZMTU1NDUzNzY=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
最后,来看看优化前后对比吧:
一个资产中心界面,能有这么多细节,确实能看出来大厂设计师的功底!(图ZMTU1NDUzODA=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
遇到多信息数据的页面如何优化设计,你学会了吗?
2
Report
|
收藏
Share
相关推荐
评论
用户头像
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
大家都在看
Log in