移动应用程序|UI设计的七个基本动画总结

详情如下：

01.视觉反馈

 

在用户界面中，视觉反馈（英文：Visual Feedback）是一个非常重要的元素。在日常生活中思考，我回应了一些对物体起作用的东西。用户期望对移动应用程序的设计元素有类似的反应。视听（UK：Visual）就像聆听和触摸，是指应用程序的反馈。

视觉反馈也可用于简单的功能，指示应用程序是否正常工作。通过增加按钮的大小或用一个方向滑动来移动照片的行为很好地反映出应用程序正在为用户操作“做某事”。

例如，在下面的示例中，当您单击已完成的任务时，可以看到该框的大小缩小，并变为绿色。

02.功能的变化

 

当您想要解释元素如何根据用户的操作而变化时，这种类型的动画是一种有用的技术，特别是当您想要解释功能变化时。通常它也经常应用于按钮，图标和其他小型设计元素。

在下面的示例中，清楚地显示了通过将外观从“汉堡包菜单”改变为“X标记”已经改变了按钮的功能。

03.利用定向空间

 

许多移动应用程序结构复杂，设计师尽可能简单地制作导航菜单是一个挑战。动画将是一个非常有用的项目来实现这个艰巨的任务。通过显示动画并显示设计元素的隐藏位置，用户将更容易找到下一次。

在下面的示例中，将显示菜单，以便用户可以通过单击导航按钮进行翻转。

04.设计元素和操作的层次结构

 

动画技术也非常适合表达界面的一部分，并解释每个元素是如何工作的。对于每个元素，我们来看看使用动画的目的和地点。

例如，通过点击按钮，当弹出菜单被显示时，最好不要简单地从屏幕侧面滑动，而是从按钮本身滑动。通过这样做，用户可以理解两个元素（按钮和弹出屏幕）如何相关联，表示按下按钮时的反应。

每个动画都需要解释设计元素是如何相关的。这个层次和运动是直观的界面不可或缺的要素。

下面的示例例如，当您点击图标显示菜单栏，只有当它为用户扩展，它是不能缺少的菜单时，已变得可以立即看到一个重要因素。

05.最敏捷，敏捷的视觉

 

动画是设计元素如何工作的一个暗示，特别是当你使用在应用程序中经常看不到的行为时，作为一个视觉提示变得非常重要。

在下面的例子中，当用户打开博客页面时，文章内容显示在屏幕的右侧，用户可以通过水平滑动来读取该卡片。

06.系统状态

 

移动应用程序背后正在进行许多过程，例如计算从服务器下载的数据。因此，通知用户应用程序已经解决或没有崩溃，并通知正在处理该进程将是一个问题。

通过观察正在处理的内容，我们可以感觉到用户正在操作和控制应用程序本身。理想情况下，您可以同时为不同的动画使用不同的动画。

在下面的示例中，显示正在录制的音频轨道，用户通过音量来录制实时响应的音量动画。

07.有趣的动画

 

独特的动作动画是需要技巧处理的技巧。许多人也被白白使用，应用开发的复杂，它可以被看作是混乱的原因，但真正独特的动画，应用程序的用户，你可以非常有吸引力脱颖而出。它可以说是设计师隐藏的技术，为用户创造一个喜欢产品和服务的机会，使其更容易识别品牌。

在下面的示例中，您将通过一种看不见的方法来移动圆形，并引导用户的视线。此外，通过在屏幕上自由移动这些圆圈，还可以包含趣味和游戏等元素（英文：Gamefication）。

在考虑有趣的动画设计时，（1）不要放一个影子，不要隐藏其他的应用功能，（2）不要浪费时间加载。

关于动画的基本原理

 

到目前为止，我们已经看到了动画的主要类型和功能。更多利用动画已经打出品牌多年的迪斯尼网站，动画的基本原理12（UK：动画的12个原则）是牢记，有效地被UI设计应用你可以做到这一点。

向迪士尼公司学习！在HTML / CSS中全面复制12个基本的动画原理！然后，你可以用演示文件检查实际的运动，也可参考借鉴，本文讲解到这里详情内容请戳原文。