网页设计如何让你的微动画更具吸引力

微动画造就大不同，为什么更多的设计师不使用微动画呢？是的，微动画确实很普遍——事实上，它们无处不在。然而，这些动画中的许多要么太无聊要么太疯狂而无法完成任何事情。这个问题是可以理解的；在乐趣和功能之间取得平衡是非常困难的。但这并不意味着问题无法解决。让我们重申为什么微动画如此重要，然后探索如何使它们变得更好。

什么是微动画？

微动画是将界面或设计元素联系在一起的小动作。它们在网站和应用程序中都有无数用途，对设计师来说是无价的。当您切换开关时，会出现微动画的最简单示例之一。

圆圈不是立即从“关闭”切换到“开启”，而是向右滑动，条形改变颜色。这种视觉反馈是一个微动画。

虽然这些术语经常互换使用，但微动画与微交互略有不同。微交互作用与触发器启动一个衬托的指令的列表，并提供视觉反馈。可以将其视为嵌入在较大流程的单个步骤中的小型输入输出机器。拨动开关是输入，小动画是输出。整个开关切换步骤是一个微交互，而视觉提示是微动画。区别可能很小，但很重要。你的界面可能有精心设计的微交互，但有设计糟糕的微动画。了解差异是做出正确改变的关键一步。

为什么需要微动画

创造焦点

设计师的工作是通过设计、界面或图形来吸引用户的注意力并引导它。虽然构建视觉层次结构的策略数不胜数，但微动画简化了这项任务。它们对于使原本静态的图形变得生动起来特别有用。从我们在自定义和半自定义网站上的帖子中获取这张无动画的特征图像。

图像本身经过精心设计，并遵循设计、色彩理论和构图的基本原则。但是，这是带有一些微动画的相同图像。

图像仍然基本相同，但运动使它看起来更有趣。插图几乎似乎与观众一起呼吸。因此，我们使用后一个动画版本作为最终帖子的特色图片。

微型动画也不需要那么复杂。更简单的动画，例如我们的移动应用程序开发页面上的动画，可以吸引您的注意力而不会妨碍您。

使用具有不同复杂程度的动画创建强大的视觉层次结构，引导用户浏览应用程序或网站。

改进导航

由于微动画可以引导用户的视线穿过页面，它们还可以向用户显示下一步要采取的步骤。即使页面设计尽可能简单，动作也会阐明用户需要做什么才能正确使用应用程序或网站。例如，当你点击这个汉堡菜单时，它会变成一个 X。

这样，您会立即知道再次单击该图标会关闭菜单。

提供反馈

运动向用户传达重要信息。最明显的例子是加载图标或进度条。它表示页面正在加载，而不是冻结。

然而，微动画也可以提供更微妙的反馈。例如，当用户将光标拖到按钮上时，大小和颜色的变化表明当您单击它时会发生某些事情。

这种反馈不像加载图标那么明显，但它非常重要。看看没有任何微动画的同一个按钮。

这是因为动画反馈表明因果关系，这对于良好的 UI/UX 设计至关重要。在任何时候，用户都应该了解他们的行为会发生什么，而微动画是关键。

什么才是好的微动画？

并非所有的微动画都是一样的。但是，通过始终牢记一些关键因素，您可以轻松地将好的动画变成出色的动画。

简单

微型动画应该增加清晰度，但如果您被带走，它们只会使您的界面混乱。事实上，过于复杂的动画比有用更让人分心和烦人。保持你的动画微妙和雅致。根据经验，超过半秒的动画可能太复杂了。然而，总有例外。警惕过于复杂的微动画。

功能

永远不要为了添加动画而添加动画。单个动画中的每一个微小动作都应服务于功能目的或传达某种形式的信息。当光标悬停在按钮上时，不要让按钮旋转；那毫无意义。这里有一个提示：问问自己“如果没有这个动作，我的界面是否更清晰？” 在完成任何动画之前。如果界面在没有额外动作的情况下更清晰，则它无法提供足够清晰的功能。

以用户为中心

UX 总是从用户开始，以体验结束。未能专注于用户的设计师也无法创建引人注目的动画和设计。最重要的是，在为 UI/UX 设计微动画时，优先考虑目标受众的意见和偏好。

创造力

带有乏味动画的界面几乎和完全没有动画的界面一样糟糕。尽量让你的动画有趣而不会过火。

微型动画将成就或破坏您的界面。虽然精心设计的动画会给您的网站或应用程序带来特殊的光彩，但设计不佳或缺少微动画会使您的项目看起来令人困惑和不专业。