UI设计缺乏细节？一个实战案例教你提升界面吸引力！

这次需要优化的案例是打卡页。打卡页的设计需要给用户提供满满的情绪价值，所以丰富的视觉元素必不可少。

来看看优化前的页面：

再来看看优化后的页面：

来看看，具体怎么实操的吧。

一、给头部增加视觉亮点

第1步 加入IP

本次的案例是运动赛的打卡页，所以我们可以加上符合运动主题的IP形象，形成差异化的设计：

第2步 设计标题

首先，主标题的字体当然要选用运营类的字体啦，如果没有复用的需求就去找AI生成一个吧。我们将这个字体放大，这样就可以拉开标题和卡片文字的信息层级；

接下来，我们可以给标题加入适当的图形修饰，比如曲线色块：

最后，副标题的底板选用IP上的黄色，产生颜色呼应：

第3步 设计背景底板

我们可以把背景底板的颜色改为绿色，这样较之优化前可以增强视觉冲击力，并且加一些背景底纹丰富细节：

二、设计打卡卡片

第1步：设计标题

我们可以改变标题字体，这里的标题需要复用，所以我们选择现有字体。同样，我们可以放大重点信息，加入曲线色块修饰：

第2步：区分打卡和未打卡的状态

第3步：异形按钮设计

第4步：设计卡片异形

我们可以对打卡卡片异形处理，将右上角挖空，使卡片和IP之间做一些破形穿插，丰富层次：

三、设计打卡活动规则卡片

第1步：排版

首先我们将标题复用打卡卡片的字体和设计样式，形成呼应；大量文案的部分通过字体，字重，灰度，间距拉开文字层级：

第2步：给每个小标题前增加小图标

四、融入轻拟物元素

由于本次主题是运动类，我们可以用轻拟物的方式加点睛之笔：打卡卡片和打卡活动规则卡片用圆环连接。这个灵感来自于运动会使用的计分牌：

最后，我们来看下优化前后的对比：

怎么样？这些设计手法你都掌握了吗？