我之前的一篇关于无偿动画的短文确实引起了人们的共鸣。群众们的回复是热烈的，运用超棒的动画界面设计表达了传达了人们的感受。

最清楚的一点，我不是不赞成情感化的用户界面设计。从远处讲，我有一个关于动画的问题就是动画可能最终只会妨碍用户。

有能力的UI 设计师最明显的标志之一就是克制。是去了解你所选用平台的各种功能款式并且不去使用它们（直到出现完美的机会）。

与其抱怨使用了不必要的动画，我会尽力去建议去在可以从中收益的场景中使用动画。

我期待听到您对此主题的意见和建议。

如果您喜欢这篇文章，您也可能会喜欢

一个人为的例子

以下是我提出的一个快速，认为的例子来展示UI动效设计。虽然这是一个夸张的例子，但实际上有许多用户界面设计中存在这样花哨的动效。

此链接查看这次演示的实时版本https://www.ux-app.com/device/view?s=MRGG9547&l=&pg=35687

这就像我们已经放弃了视觉假象，并将其替换为行为特征，我们的数据就像是有果冻制成或者悬挂在隐形橡皮筋上的。

停止恣意使用动画

动画就像咒语。如果你过度使用它，它会失去所有影响。

动画使用准则

我听说一些UI设计师建议将迪士尼的动画制作准则作为UI设计师的必读内容。这的确有助于加深UI作为娱乐的概念，但这总会降低用户操作效率。

许多UI动画设计师似乎都将用户界面是为动画组合。除非你希望皮克斯能够接受它，否则你应该避免使用动画造成的“Bounce”或”Ease-in-Out”.

什么是界面？

在计算中，接口是共享界面，计算机系统中的两个单独组件通过该边界交换信息。

界面（计算）— 维基百科，免费的百科全书

https://en.wikipedia.org/wiki/Interface_(computing)

界面负责调解信息交换，这就使得界面变得相当重要。设计师面临的挑战是确定他们的设计何时会妨碍这一中心UI原则。

UI设计中的动效

以下是一些对我有用的简单原则，我建议给你们的:

·确保每个动画的使用对用户有用。“它看起来很漂亮”是没资格使用的

·将动画持续时间保持在不超过300毫秒

·避免线性动画渐渐消逝。它会使动效看起来缓慢，无趣和机械

·99%的动画应使用简单的“缓入”或“缓出”。

你很少需要过于炫酷的动画，像Spring，Bounce等。

一些UI示例

查看此演示的实时版本https://www.ux-app.com/device/view?s=MRGG9547&l=1&pg=366

上面的演示使用了强度升级的动画

·在第一次点击时，通知会淡入

·在第二次单击时标签会抖动

如果用户持续点击按钮，则可以使用针对该问题可选的模式来覆盖按钮吸引用户的注意力

此外，按钮本身可以更改的颜色来指示后续失败的操作。

卡片扩展

这是卡片视图的简单但非常有效的实现方法之一，通常在移动设备上使用。我非常喜欢这种互动，是因为它允许用户维护上下文。即使我们对列表的看法模糊不清，我们也知道它位于扩展视图后面。

点击这里查看查看演示实时版本https://www.ux-app.com/device/view?s=MRGG9547&l=1&pg=36662

我故意稍微延迟了显示卡片的关闭图标，我使用了一个动画转换，可以激活位置和不透明度。

这将用户的注意力吸引到需要知道的能够接触卡片的重要UI元素。

重要层次性

作为设计人员和开发人员，我们所做的最重要的事情之一就是确定UI的哪些元素比其他元素更重要。我们用多种方式做到这一点

·通过使用标题

·加下划线或使文字变粗

·使用颜色

·使用形状和图像

·动效

你不会将文档中的每个句子都放入标题中。同样的原则也适用于动画。将UI中的每个动画元素都当做书面文档中的标题。它应该用于表示元素的重要性。过度使用它会简化您的层次结构并淡化您尝试通信的消息。

功能与美学动画

程序眼经常根据“code smell”讨论代码。“code smell”指的是编程代码的功能，这些代码可能不是完全糟糕的，但它们确实激发经验丰富的程序员对潜在的糟糕代码的敏锐感觉。

如果你开始听到团队成员使用诸如“令人愉快”这样的术语来谈论动画，那么你的“desgin smell”警报应该开始消失。为动画而去做动画（几乎总是）是糟糕的设计。

请记住，对于动画要少用。功能总是胜于纯粹的美学动画。

不要让你的动画以你理解的用户方式进行。这就是为什么飞机的导航界面设计不使用任何动画的原因。在你的用户界面添加一个不必要的300ms动画可能不会杀死任何人，但它会让你的用户感到烦躁，而不是“让他们愉悦”！

最后的看法

总的来说在界面设计中使用的动画可以为高速宽带快速传达重要信息。倾向于功能性而不是纯粹的美学设计，并且要珍惜用户投入你界面设计的每分每秒。

Medium原文链接

https://startupsventurecapital.com/your-ui-isn-t-a-disney-movie-703f7fbd24d2

@三米工作室-TFboys三缺一和他们的经纪人