UI设计缺乏形式感和氛围感？教你一招快速提升！

往期干货：

这次我们要优化的界面，是康复人员在户外做康复训练时，需要维持设定速度以下走路的特殊场景。

先来看看优化前的模样：

难怪老板说没有设计感，只有扁平化的数据展示，普通的，这根本就是张交互稿嘛！

我们再来看看优化后的模样：

相较而言，是不是优化后立刻变得有设计感了？接下来我们一一拆解怎样为页面增加和氛围感。

一、轻拟物

刚开始提到的使用场景，有一个重点，即“维持设定速度以下”。想想我们生活中什么东西可以让人感知到速度？没错，节拍器！

这是一款机械节拍器工作的样子，它会摇摆发声协助你更好掌握节奏。我们把扁平的“平均配速”数据以节拍器的样子展示，设计感这不就轻松拿捏了吗？

注意，拟物设计的精细程度要匹配项目的整体调性。比如这个页面，只是提炼出节拍器的简易轮廓，指针和刻度就可以满足需求。但如果遇到需要更生动的元素设计需求，那就另当别论了。

二、质感

1. 节拍器

节拍器下面可以加一个渐变消失效果，这样就不会影响到操作区视觉层级：

2. 跑步中卡片

我们可以先将总公里数信息弱化，和节拍器数据形成对比，将其单拎出来设计成一张卡片；这个时候会发现右侧有点空，所以再加一个装饰性的简单版的地图：

3. 按钮

为了匹配整个页面，设置、路线和暂停开始按钮，也可以加一些描边细节：

4. 背景

为了让元素更好地融合界面，我们增加一个光影质感的背景：

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

结合使用场景，融入拟物元素来提升界面的形式感和氛围感，这招你学会了吗？