移动APP的7种动效设计和9条设计原则

优秀的设计是看不见的，一个优秀的动态效率你的应用程序变得友好和引人注目，但永远不会让用户分心。今天分享7个移动应用程序 动态效果的设计技巧和9个设计原则，帮助您做出美观实用的动态效果！

优秀的设计是看不见的，一个优秀的动态效率你的应用程序变得友好和引人注目，但永远不会让用户分心。今天分享7个移动应用程序 动态效果的设计技巧和9条设计原则，帮助您做出美观实用的动态效果！

为了充分利用动态效果，你必须了解动态效果在应用程序中的定位和责任。让我们看看动态效果的类型。

视觉反馈

视觉反馈对任何用户界面都至关重要。在现实生活中，人们与任何物体的互动都伴随着回应。

同样，人们也期待着从应用程序元素中获得类似的效果。应用程序提供的视觉、听觉和触觉反馈让用户觉得他们在控制应用程序。同时，视觉反馈有一个更简单的用途：这意味着您的应用程序正常运行。当按钮放大或滑动图像朝正确方向移动时，很明显，应用程序正在运行并响应用户的操作。下面的例子显示，当用户点击屏幕显示完成任务时，包含数据的方块缩小并变绿。

Tinder中使用的左划喜欢右划跳过，这也是一种视觉反馈。这种动画效果已经在开源库Koloda中实现了。

功能改变

这种动态效果显示了元素在与用户互动时是如何变化的。当你想解释一个元素的功能是如何变化的时候，这种动态效果是最好的选择。它经常与按钮、图标和其他小设计元素一起使用。

从第一个例子中，你可以看到一个图标从汉堡菜单变成了“X其实按钮的功能已经改变了。

在第二个例子中，图标随内容的变化而变化：

空间扩展

大多数移动应用程序都有非常复杂的结构，因此设计师的工作是尽可能简化应用程序的导航。动态效果对这项任务非常有帮助。如果您的动态效果显示元素隐藏在哪里，用户下次将很容易找到它。在第一个例子中，我们看到导航栏的菜单。当用户点击按钮时，它会颠倒：

在下面的例子中，我们可以看到更多的选项是如何从屏幕底部出现的，这也改进了用户选择的过程：

元素的层次结构及其交互

动态效果完美地描述了界面的各个部分，并澄清了它们之间的互动方式。动态效果中的每个元素都有其目的和定位。例如，如果一个按钮可以激活弹出菜单，则最好从按钮中弹出，而不是从屏幕侧面滑出：这将向用户显示按钮的响应，以帮助用户理解这两个元素（按钮和弹出菜单）之间的关系。

所有的动态效果都应该解释元素之间的联系。这种层次结构和元素之间的互动对直观界面非常重要。下面的第一个例子显示，当按钮被点击时，菜单栏出现，在用户眼中，菜单栏和按钮基本上是相同的元素，但变大了：

在第二个例子中，用户点击信息后，一张包含信息的卡会变大，让用户知道这是同一个元素，唯一的区别就是尺寸:

视觉提示

动态暗示如何与元素交互。当应用程序元素之间存在不可预测的互动模式时，动态效果提供视觉线索是非常必要的。在这个例子中，当用户打开一个博客系列时，带有文章的卡片出现在屏幕的右侧，用户可以知道要水平滑动来浏览这些卡片：

在第二个例子中，同样的方法只应用于社交图标：

系统状态

在您的应用程序中，总有几个过程在后台运行：从服务器下载数据、计算等。您的任务是让用户知道应用程序没有停止运行或崩溃，并让用户知道应用程序正在工作。通过应用程序显示的视觉符号的进展给用户一种控制感。在理想状态下，应用程序中的每个过程都应该伴随着一个独立的动态效果。例如，当音频录制正在进行时，屏幕可能会显示一个波动的音频轨道。实时声波效应可以显示声音的大小。

最常见的动效类型之一是下拉刷新动效：

有趣的动效

有趣的动态效果可以画龙点睛或虎狗。它们通常毫无意义，并使开发工作非常复杂。但一个非常独特的动态效果可能会吸引用户，并使您的应用程序脱颖而出。这是设计师让用户爱上他们产品的秘密武器。独特的动态效果可以帮助您创建一个高度可识别的品牌。

在我们的例子中，移动的圆圈看起来非常独特和有吸引力。这种沿着屏幕移动的效果可以带来快乐悦感和游戏感，简单有趣。

我也很确定，如果下拉刷新的动作效果做成煮锅，会给人耳目一新的感觉:

制作有趣的动效时要注意两点：

1)确保动效不会覆盖或隐藏APP功能；

2)千万不要浪费时间。

设计的主要原则

我们已经看到了动态效果的主要类型和功能。为了设计真正成功的动态效果，请永远记住Walt 在UI设计中，Disney最初提出的9个动画原则可以非常有效地应用。

1.材质

向用户展示界面元素是由什么组成的：轻还是重？僵硬还是灵活？平面还是多维？您需要让用户对界面元素的交互模式有一种基本的感觉。

2.运动轨迹

你需要澄清运动的自然属性。一般原则表明，无生命机械物体的运动轨迹通常是直线的，而有生命的物体具有更复杂和非直线的运动轨迹。你必须决定你的UI给用户什么印象，并给它这个属性。

3.时间

在设计动态效果时，时间是最有争议和最重要的考虑因素之一。在现实世界中，物体不遵守直线运动规则，因为它们需要时间来加速或减速。曲线运动规则的使用将使元素的运动更加自然。

4.聚焦动效

专注于屏幕的特定区域。例如，闪烁的图标会吸引用户的注意，用户会知道有提醒并点击。这种动态效果通常用于界面中，细节和元素太多，无法区分特殊元素。

5.跟随和重叠

跟随是动作的终止部分。物体不会迅速停止或开始移动，每个运动都可以分解成每个部分以自己的速度移动的小动作。例如，当你扔球时，你的手仍然在移动。

重叠意味着在第一个动作结束前开始的第二个动作可以吸引用户的注意，因为两个动作之间没有静止期。

6.次要动效

次要动态效果的原则类似于跟随和重叠的原则。简而言之，主要的动态效果可以伴随着次要的动态效果。次要的动态效果使图片更加生动，但如果不小心，就会导致用户不必要的分心。

7.缓入缓出

慢进/慢出是设计的基本原则，尤其是移动开发UI动态效果，与普通动画制作同等重要。虽然很容易理解，但这一原则往往容易被忽视。慢进/慢出的原则来自于现实世界中物体不能立即开始或停止运动的事实。任何物体都需要一定的时间来加速或减速。当你使用慢进/慢出的原则来设计动态效果时，你会导出一种非常真实的运动模式。

8.预期

预期原则适用于提示性视觉元素。在显示动态效果之前，我们给用户一些时间来预测发生了什么。实现预期的方法之一是使用上述缓慢进入原则。物体向特定方向移动也可以提供预期的视觉提示：例如，屏幕上出现一堆卡，你可以让卡顶部的卡倾斜，然后用户可以推测卡可以移动。

9.韵律

动态效果中的节奏与音乐和舞蹈中的节奏具有相同的功能；它使动态效果结构化。使用节奏可以使动态效果更加自然。

10.夸张

夸张的表达方法经常被使用，但它并不那么容易解释，因为它是基于夸张的预期动作或效果。它有助于吸引特殊元素的额外注意力。

在本文中，我们讨论了动态效果的类型和设计动态效果的原则。希望能帮助你创造出独特有效的动态效果。

有五点你需要记住，而且非常重要：

1. 记住谁是你的目标用户，并设计你的原型来解决他们的问题；

2. 请确保你动态效果的每一个元素都有其背后的基本原因(为什么是这样？为什么会这样？为什么这个时间点？)；

3. 努力模仿自然界的运动模式，创造自然动效，使您的产品具有特色；

4. 在项目的任何阶段，都要随时与开发人员沟通；

5. 做好动效，记得分享哦

翻译评论：原作者说：“任何动态效果的主要任务都是向用户解释应用程序的逻辑。”是的，任何动态效果实际上都是为产品服务的，他想完成他存在的使命。因此，请让动态效果的每一帧都有它的真理，这样的动态效果设计是成功的，在动态效果设计中不要炫耀，为了动态效果和动态效果。