体育赛事UI设计语言提炼—小脑府

很多UI设计师在提炼设计语言的时候，联想的关键词都是非常“泛”的，比如年轻、简洁、高级.......

这种词都被用烂了！

今天菜心分享一个最近做的体育相关的UI项目，因为和体育相关，所以我所有的设计语言全部围绕

来打造。

运动感怎么实现呢？

可以围绕两个方向：

。

我们先来说碰撞，在我们搜索

这两个字的时候，输入法会直接关联出一个碰撞的图形，类似于爆炸、撞击后的效果，如下图：

基于这个图形，我们可以发散出很多“碰撞类”的图形延展：

而这样的形状，我们可以尝试与图标进行结合，如下图效果，都是结合碰撞图形的图标：

这里需要强调的是，碰撞的图形可以有节奏的穿插在图标里，不要每一个都带有这样的图形，否则就会看起来有些凌乱，下图为最终稿效果：

除了图标，ip吉祥物也是基于碰撞的造型来进行创意发散的，画了很多的草图尝试：

最后确定为这个造型，头部与碰撞的造型进行结合：

再做一些3d效果的延展：

来到图形体系，依然可以继续使用碰撞的造型进行延展：

这样，以碰撞发散出的图形体系就分别融入到了

三个维度中，以此来达到核心理念“运动感”的设计语言！

接下来，我们再来说“动势”这个方向。

动势也很好解释，更多的是用在吉祥物ip中，有动势和没动势，一眼即可分辨出有无“运动感”：

所以我们将ip形象设计的具有动势感，要么有动作，要么有透视：

并且，我们在交互体验的时候，引导页还带有视觉差动效，以此来表达“动势与运动感”：

除此之外，个人中心下拉后，在ip换运动服饰的时候，我们也可以采用一定的动效来表达“动势与运动感”：

当然，动势除了在ip形象的动作与动效中，也可以用在图形体系当中，比如表达动势的分割线，可以这样提取出来：

然后使用在界面分割当中：

实际界面中的效果：

也可以做出一些具有动势感的控件，比如倾斜的按钮、标签、进度条、图标等等：

这些都是设计语言赋予我们的设计能力！

我们在整体看一下设计内容：