个人中心页面我做的最多,今天接到这个需求,我直接乐坏了!

用户头像
深圳/学生/14天前/1334浏览
个人中心页面我做的最多,今天接到这个需求,我直接乐坏了!
今天就教你如何将大同小异的“我的”页面做出差异化
体验过这么多APP,你觉不觉得“我的”页面好似已经形成了固定模式?那么该怎样优化呢?
我们来看看今天的优化前页面:
个人中心页面我做的最多,今天接到这个需求,我直接乐坏了!(图ZMTU1MTg3NTI=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
这是优化后的页面:
个人中心页面我做的最多,今天接到这个需求,我直接乐坏了!(图ZMTU1MTg3NTY=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
我们来看看具体怎么实操吧!
知识点1:优化背景
我们可以将顶部的背景从纯色改为带纹理的渐变效果,页面不再单调,质感更柔和:
个人中心页面我做的最多,今天接到这个需求,我直接乐坏了!(图ZMTU1MTg4MTI=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
知识点2:优化个人信息区
首先,优化前的赞币只有数据显得很单调,我们可以设计一个“赞币”图标,这个图标的灵感来自创意“点赞”,和APP的行业属性呼应:
个人中心页面我做的最多,今天接到这个需求,我直接乐坏了!(图ZMTU1MTg4MjA=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
其次,我们可以对“编辑信息”按钮和“金币充值”按钮进行调整,弱化“编辑信息”按钮,突出“金币充值”按钮:
个人中心页面我做的最多,今天接到这个需求,我直接乐坏了!(图ZMTU1MTg4Mjg=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
知识点3:优化会员卡片
我们需要简单的重组信息并优化排版:
个人中心页面我做的最多,今天接到这个需求,我直接乐坏了!(图ZMTU1MTg4MzI=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
还可以优化会员卡片的质感,并使其和下方功能区形成“前后层”对比,既突出会员转化,又让页面更立体:
个人中心页面我做的最多,今天接到这个需求,我直接乐坏了!(图ZMTU1MTg4MzY=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
知识点4 优化功能图标
优化前的功能图标很平庸,我们可以进行差异化设计:
个人中心页面我做的最多,今天接到这个需求,我直接乐坏了!(图ZMTU1MTg4NDA=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
比如其中的“我的追剧”图标,我们可以继续绑定行业属性,延续之前“赞币”图标的灵感.:
个人中心页面我做的最多,今天接到这个需求,我直接乐坏了!(图ZMTU1MTg4NDQ=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
知识点5 优化底部导航图标
优化前底部导航的图标同样有设计平庸的问题,我们可以进行细节微调,比如“追剧”图标加点小变化:
个人中心页面我做的最多,今天接到这个需求,我直接乐坏了!(图ZMTU1MTg4NDg=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
其中“我的”图标也参考灵感“点赞”进一步绑定行业属性:
个人中心页面我做的最多,今天接到这个需求,我直接乐坏了!(图ZMTU1MTg4NTI=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
来看看页面优化前后的对比吧:
个人中心页面我做的最多,今天接到这个需求,我直接乐坏了!(图ZMTU1MTg4NTY=) - 教程 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
经过这样拆解步骤的讲解,你GET到优化“我的”页面的方法了吗?
31
Report
|
22
Share
相关推荐
评论
用户头像
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
大家都在看
Log in