移动菜单交互

这是不同类别菜单交互的动效。界面通过颜色对比和粗体排版使导航更加清晰直观。平滑的运动交互让人很舒服。

中文学习应用

这是中文学习应用，提供中文字符和发音的卡片。卡片形式可以快速切换，点击后可以查看它的音译、翻译及发音。用户可以保存卡片，标记学习情况。有趣的动效使学习过程更欢乐。

这是一个图书交换应用。它通过卡片形式展现图书：点击书卡后会展示书籍简介及其所有者信息，以及两本待交换书籍的卡片。动画细节中看到带有移动箭头按钮“交换”。

该应用使用户能够了解不同种类的葡萄酒，并获得相关服务，例如酒杯推荐，实物搭配等信息。此外还可以根据用户的位置购买葡萄酒。当用户按下“查看更多”时，关于该项目的完整数据会以平滑的动作显示，而其他UI元素（如照片和标题）则会消失。

这是针对购买电影票的应用。左图显示主屏幕的交互，显示电影列表。电影通过海报形式呈现，排列紧密，以便用户可以一次看到更多选项。

右图显示选择和预订座位的流程。用户可以看到可用的座位，挑选他们喜欢的，并预订他们，直接从应用程序支付。

这是一个音乐新闻应用，提供歌词、新闻、游戏等信息。用户界面通过明亮的配色方案和自定义插图呈现，使应用看起来很原始。主页的背景应用几何形状，当用户在屏幕上滑动时会改变它们的位置和颜色。

这是一个控制智能汽车的应用。该应用自动执行定期数据收集，向用户通报车辆的技术状态和使用条件。显示屏幕为用户提供了当前车辆基本状态，如平均速度，距离，油耗和通知。所选时间段的速度曲线图的随着所选位置有着自然的过度，并显示通知。

家庭预算应用允许用户管理他们的开支和收入，图一查看财务的统计数据及变化。尽管有大量数据，动画仍然使得交互和导航更加直观。

图二显示为汉堡导航交互。

这是一个向用户提供食谱的应用。它可以根据用户家中的食材查找食谱。该交互显示了食谱卡交互的过程。用户可以通过侧滑选择食谱。在第一次交互期间不引人注意和优雅的动画可以提示隐藏在卡下的附加功能，引导向下滑动。

...

如你所见，动效可以有效解决用户界面设计中的棘手难题。我们在观看这些炫酷、丝滑的动效时，也可以带着产品的思维进行深度的思考。

如果你喜欢这篇文章，一定要关注我。

本文翻译来自Medium,感谢Tubik Studio

https://uxplanet.org/mobile-motion-20-creative-concepts-of-ui-animation-b7c0f550a754

更多UI动效交互，欢迎来简书关注我