如何用动画来提高用户体验？

如何用动画来提高用户体验？

How to Use Animation to Improve UX？

动画会讲故事。 动画不是长而复杂的故事，而是简单的故事，如“嘿，你现在需要看这里”或者“哈利，你的操作已经成功。然而，动画的目的不是娱乐用户，而是帮助用户了解发生了什么或如何最有效地使用您的应用程序。这个想法在 Zurb 中已清楚地表达：

我们不再只是设计静态界面。 我们正在设计的界面，用户能从这些界面看见实际效果。

动画可以在个各地方和上下文中使用，以兼顾美和功能：它可以影响行为、传达状态、提醒用户注意、帮助用户看到他们动作的结果等。 这里只是几个例子来说明你可以在你的UI设计中添加一些动画来提高体验的地方：

• 加载不再无聊

你应该尽量让等待更愉快，如果你不能缩短加载时间，那么动画可以用来替换令人讨厌的旋转加载指示器（这基本上只是提醒用户，他们在等待）。 几乎任何网站或应用程式都可以在载入内容时利用骨架画面以及微妙的动画来吸引使用者。

骨架屏幕在内容完全加载之前逐渐完成UI。 图片来源：tandemseven

• 状态变化切换的不要太生硬

动画可以使过渡更明显，所以很清楚，动画发生在用户操作开始和结束之间。 精心设计的过渡动画能够使用户清楚地了解他们的注意力应该集中在哪里。 Adrian Zumbrunnen 有一个很好的例子，说明滚动动画是如何帮助用户在点击切换时保持注意力的。 和这种静态的瞬间变化比较，感觉就像一个艰难的切换：

没有动画：

没有什么比突然的变化更不自然了，界面的这种变化对于用户来说很难处理。 图片来源：smashing杂志

有动画：

动画带来“生活”。 图片来源：smashing杂志

正如你所看到的，转换帮助用户了解程序的速度和流程。 它还有助于指导用户进行下一步操作。

• 诠释元素之间的关系

动画可以增强操纵的感觉。如：菜单图标可以平滑地转变到播放控制界面，并再次还原。 该效果既向用户展示按钮的功能，同时添加其他的元素。 将播放图标转换为暂停，意味着两个动作连接，并且两者只能存在一个。

在这种情况下，使用动画将注意力带到音乐控制所在的屏幕上。 图片来源：Material Design

另一个例子：当按下浮动动作按钮时，加号转换成铅笔。 这表明铅笔是主要的创作方法。 这样小的细节意味着必须猜测接下来将发生什么以及知道图标在任一状态下意味着什么的差别。

图片来源：Material Design

• 使用反馈，突出显示某处出现错误

动画可以强化用户执行的操作。

例如，可以使用一些动画大大增强表单条目。 如果输入了正确的数据，可以在完成后引入一个简单的“nod（译者注：点头、竖直）”动画。 而在输入错误时可以使用水平抖动。 当用户注意到这样的动画时，他们立即理解这个动画的含义。

形式基本上就是摇晃你的弹窗。 图片来源：MichaëlVillar

• 使用反馈，显示已完成的内容

动画可以帮助用户看到他们的操作结果。 通过遵循原则“显示，不告诉（译者注：我理解为直展示而不需要做确认操作）”，你可以使用动画反馈显示已完成的操作。

在下面的Stripe（编者注：条状按钮）例子中，当用户点击“Pay（译者注：支付按钮）”时，会在应用程序显示成功状态之前短暂地显示一个旋转器（译者注：菊花）。 完成动画（译者注：指的是圈+对号）让用户感觉他们很容易付款，用户喜欢这样重要的细节。

图片来源：MichaëlVillar

结论： 当以复杂的方式使用时，动画是强大的。 花时间考虑动画是不是适当是非常重要的。 我们需要从一开始就接受动画，并将其视为我们设计的考虑内容，因为设计不仅仅是视觉呈现。 正如史蒂夫·乔布斯所说的设计：

设计并非外观怎样，感觉如何。设计是解决它（译者注：应用程序）是怎样工作的.

谢谢！

关键字：体验, 动画

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！