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

往期干货:

这次的案例是直播排行榜页面,客户的要求是要更具设计感,来看看优化前:

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

再来看看优化后:

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

接下来,我们一一拆解优化方向。

一、拉开等级

在这个案例中,我们可以根据整体的“梦幻”主题找一些视觉元素,比如魔法阵、皇冠、金镶边,和旗帜等:

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

第 1 步:增加前三名的设计感

我们可以增加旗帜样式的底板,并通过图形繁简度拉开层级:

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

第 2 步:增加排名卡片的设计感

我们还可以将原本的排名卡片的纯色样式,优化一下符合整体调性:

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

二、标签状态

为了信息传递更高效直观,我们可以把“直播中”的文字标识改为更有辨识度的图形标识:

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

三、头部优化

第 1 步:优化标题字体

“心动榜”三个字可以采用符合“梦幻”主题的字体,不用我多说,最快得到好字体的方式你也该知道了吧?对,丢给 AI 让它帮你拿捏:

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

第 2 步:增加底纹

因为字体已经比较出彩,所以我们再增加符合主体的底纹做装饰即可:

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

第 3 步:优化返回 icon 样式

为了匹配整个页面的调性,返回 icon 也需要具有一定的设计感:

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

最后,来看看优化前后的对比吧:

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

希望从这次的案例中,你能得到有用的知识,和更多优化思路。

收藏
点赞 26

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。