救命!为什么你的个人中心总被开发怼『没设计感』?

用户头像
深圳/学生/1年前/6849浏览
救命!为什么你的个人中心总被开发怼『没设计感』?
个人中心怎么做才更好,今天来分享下我的优化思路吧!
首先来看下优化前后的对比图:
救命!为什么你的个人中心总被开发怼『没设计感』?(图ZMTUwNTk4MzI=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
1.背景色优化
优化原页面时,可以先观察一下,整体页面使用的是绿色作为主色,但这个绿色太正了,不太好看,我们可以把绿色色相调整的更靠近蓝色,同时让绿色的饱和度不要过高,避免大面积使用时过于刺眼:
救命!为什么你的个人中心总被开发怼『没设计感』?(图ZMTUwNTk4MzY=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
救命!为什么你的个人中心总被开发怼『没设计感』?(图ZMTUwNTk4NDA=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
2.个人信息展示优化
原页面中,头像和右侧信息视觉比例失衡,头像过大,导致用户信息上下的负空间较多,整个模块看起来不够饱满,我们可以适当缩小头像,减少上下的负空间,让整个个人信息模块更饱满:
救命!为什么你的个人中心总被开发怼『没设计感』?(图ZMTUwNTk4NDQ=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
3.数据展示优化
原页面中的数据展示比较平,虽然有大小和颜色的对比,但对比还不够强,视觉效果可以更有冲击力一些,所以我们可以先把数字换成更有设计感的字体,然后选择比较粗的字重,并加大字号,和文案拉开层级,最后再把数据改的更真实一些,优化就完成了:
救命!为什么你的个人中心总被开发怼『没设计感』?(图ZMTUwNTk4NDg=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
4.活动入口优化
原页面中活动入口设计的比较普通,除了破形之外没什么层次,那我们应该怎么改呢?
救命!为什么你的个人中心总被开发怼『没设计感』?(图ZMTUwNTk4NTI=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
我们可以想方法加层次,首先可以先把文案拆成两行,标题放大加粗,次要文案缩小弱化,这样文案就能有两个层级:
救命!为什么你的个人中心总被开发怼『没设计感』?(图ZMTUwNTk4NTY=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
再把按钮的背景颜色改为黑色,增大与背景的反差,同时调整按钮大小,让按钮更突出:
救命!为什么你的个人中心总被开发怼『没设计感』?(图ZMTUwNTk4NjA=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
卡片内部调整好之后,最后再给卡片上覆盖一层半圆切割的背景,加上一层投影,让卡片更有空间感,整个入口的优化就做完了,来看下优化的前后对比吧:
救命!为什么你的个人中心总被开发怼『没设计感』?(图ZMTUwNTk4NjQ=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
5.动态卡片优化
个人中心展示的动态应该是用户自己发布的内容,所以卡片中的性别、与其他人的距离这些信息都可以去掉,减少干扰,不同的卡片用背景色分割,去掉投影,让页面更清爽,最后再优化下间距,整个卡片的优化就做完了:
救命!为什么你的个人中心总被开发怼『没设计感』?(图ZMTUwNTk4Njg=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
6.导航栏优化
底部导航栏右侧的三个图标外轮廓都是圆形,我们可以把其中一个外轮廓改成方形,打破这种常规,让图标的变化更有节奏感:
救命!为什么你的个人中心总被开发怼『没设计感』?(图ZMTUwNTk4NzI=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
再把未选中图标的灰色改为带有绿色色相的灰色,让图标更耐看:
救命!为什么你的个人中心总被开发怼『没设计感』?(图ZMTUwNTk4NzY=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
最后我们再把底部导航栏的投影去掉,背景改成更通透、更有质感的毛玻璃,整个导航栏的优化就完成了:
救命!为什么你的个人中心总被开发怼『没设计感』?(图ZMTUwNTk4ODA=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
7.总结
来回顾下我们都做了哪些优化吧:
1、颜色尽量不要用太正的颜色,比如正红,正绿等,可以往相邻的色相偏一些,颜色会更好看;
2、负空间过大会让模块看起来不饱满,缩小头像的尺寸可以减少负空间的面积,让模块看起来更饱满;
3、加大对比,与文案拉开层级,让用户一眼看到重点;
4、层级不够的时候,可以主动增加层级,例如拆分文案,增加文案的层级;调整按钮颜色、大小,强化按钮;增加遮罩和投影,增强空间感等;
5、用背景色分割,去掉投影,让页面更清爽;
6、把白色背景改为更通透的毛玻璃,让页面更透气,提升页面的品质感;
最后再来看下优化前后的效果图:
救命!为什么你的个人中心总被开发怼『没设计感』?(图ZMTUwNTk4ODQ=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
162
Report
|
130
Share
相关推荐
评论
用户头像
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
大家都在看
Log in