这么普通的界面,我居然做出了设计感!

用户头像
深圳/学生/123天前/2064浏览
这么普通的界面,我居然做出了设计感!
这次的案例是直播排行榜页面,客户的要求是要更具设计感,来看看优化前:
这么普通的界面,我居然做出了设计感!(图ZMTUzMzcyOTI=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
再来看看优化后:
这么普通的界面,我居然做出了设计感!(图ZMTUzMzcyOTY=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
接下来,我们一一拆解优化方向。
方向一:拉开等级
在这个案例中,我们可以根据整体的“梦幻”主题找一些视觉元素,比如魔法阵、皇冠、金镶边,和旗帜等:
这么普通的界面,我居然做出了设计感!(图ZMTUzMzczMDA=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
第1步:增加前三名的设计感
我们可以增加旗帜样式的底板,并通过图形繁简度拉开层级:
这么普通的界面,我居然做出了设计感!(图ZMTUzMzczMDQ=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
第2步:增加排名卡片的设计感
我们还可以将原本的排名卡片的纯色样式,优化一下符合整体调性:
这么普通的界面,我居然做出了设计感!(图ZMTUzMzczMDg=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
方向二:标签状态
为了信息传递更高效直观,我们可以把“直播中”的文字标识改为更有辨识度的图形标识:
这么普通的界面,我居然做出了设计感!(图ZMTUzMzczMTI=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
方向三:头部优化
第1步:优化标题字体
“心动榜”三个字可以采用符合“梦幻”主题的字体,不用我多说,最快得到好字体的方式你也该知道了吧?对,丢给AI让它帮你拿捏:
这么普通的界面,我居然做出了设计感!(图ZMTUzMzczMTY=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
第2步:增加底纹
因为字体已经比较出彩,所以我们再增加符合主体的底纹做装饰即可:
这么普通的界面,我居然做出了设计感!(图ZMTUzMzczMjA=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
第3步:优化返回icon样式
为了匹配整个页面的调性,返回icon也需要具有一定的设计感:
这么普通的界面,我居然做出了设计感!(图ZMTUzMzczMjQ=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
最后,来看看优化前后的对比吧:
这么普通的界面,我居然做出了设计感!(图ZMTUzMzczMjg=) - 观点 - 站酷设计师菜心轻量文原创素材 - 站酷ZCOOL
Collect
希望从这次的案例中,你能得到有用的知识,和更多优化思路。
60
Report
|
27
Share
相关推荐
评论
用户头像
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
相关收藏夹
大家都在看
Log in