在腾讯磨练4年，掌握了这一套运动感UI设计方法！

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

这种词都被用烂了！

今天分享一个最近做的体育相关的UI项目，因为和体育相关，所以我所有的设计语言全部围绕“运动感”来打造。

往期教程：

运动感怎么实现呢？

可以围绕两个方向：碰撞与动势。

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

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

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

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

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

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

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

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

并且将图形体系用在视觉banner中：

或者用在空页面的背景纹理中：

这样，以碰撞发散出的图形体系就分别融入到了图标、IP、视觉图形三个维度中，以此来达到核心理念“运动感”的设计语言！

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

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

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

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

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

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

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

实际界面中的效果：

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

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

其实现在AI已经可以很大程度上辅助我们完成UI设计了：

比如，不会3D软件，可以让AI将平面的东西变成3d化：

不会动态软件，可以让AI将静态的东西变成动态的：

只会做一种风格UI，可以让AI快速实现界面风格的转换：

没有手绘能力，可以让AI辅助延展各种形象动作：

没有视觉能力，可以让AI辅助你完成大场景视觉界面设计：