火星网校
国外干货：如何利用动画效果来提升用户体验？
发布时间：2018-11-17 19:57:24
动画效果会讲故事，但不是冗长和完整的故事，而是简单的故事，比如“嗨，你现在该看这里了”或者“哇，你的操作完全正确。”然而，动效的目的不是为了愉悦用户，而是为了帮助理解操作会有什么进展亦或是提高用户使用APP的效率。这一点我们可以在Zurb的陈述里证实。
我们不仅仅只是设计图形界面，我们设计的是用户与他们的屏幕如何互动。或许动画效果应用在广范围的背景来构建美学与功能的统一：动效能够影响用户行为，沟通状态，引导用户的注意力以及帮助用户看到自己动作的反馈。这里有一些例子说明你可以在界面的什么地方增加动画效果来提升用户体验。
加载不能太无聊
你应该尝试让等待变得愉悦，如果你不能缩减等待时间的话。动效可以代替烦人的转啊转啊转（这基本上只是提醒用户他们正在等待），几乎任何网页或者应用都可以利用屏幕框架和巧妙的动画来维持用户的兴趣。
在页面完全加载完之前用屏幕框架递增的方式完成
状态切换不能太生硬
动画效果可以让过渡更加显著，所以当用户开始和结束，动画效果要能展示到底发生了什么。好的过渡设计会让用户清楚的明白自己的注意力应该往什么地方放。
Adrian Zumbrunnen举了一个关于当用户点击链接的时候，滚动动画是如何帮助用户保持所在的环境的好例子。只要比较静止的那一瞬间的变化就能明白切换的感觉就像硬切一样：
突然，不自然地就改变了，这样的界面切换对用户来说是非常不舒服的
有动画效果动作时：
动效给画面带来生气
解释元素之间的关系
动画可以提升用户直接操作的感觉。
举个例子，一个菜单按钮平滑过度变成播放控制，再变回来。这个效果会告知用户这个按钮的功能，当用户不太明白这个交互的作用时候。播放按钮转变正暂停表明这两个动作是有关系的，当其他元素出现的时候它们是不存在的。
这个例子里，动画用来引导眼镜去看屏幕的中心也就是音乐控件的位置。
另外一个例子，当按下浮动按钮的时候，加号就会变成一支笔，这说明笔是最主要的创作方式。一个小小的细节也能显示出接下来会发生什么，让用户明白不同情况下标识的含义之间的不同。
错误的操作必须有鲜明的反馈
动画可以加强用户习惯的的操作。
举个例子，表上登记的项目可以极大的增强一些动画。如果正确的数据允许登录，一个简单的“点头”的动画可以解释这一点。而水平的抖动可以用来表示未输入或者输入错误，当用户注意到动画的时候他们立刻就能明白这个动作的含义是什么。
图中展现的是最基本的抖动形式
利用反馈来展现动作完成
动画可以帮助用户明白他们操作之后的结果。根据“别说，展现出来”的原则，你可以用动画反馈展示出到底完成了什么。
下面的例子中，当用户点击“付款”，一个简单的旋转加载出现在APP支付成功的情况下，对号标志动画让用户觉得很轻松的付了款并且用户会感谢这些重要的细节。
总结
当动效使用的非常成熟了时候，它是非常有用的，这对与时间安排以及考虑一个动画是否是有效的是非常重要的。我们需要从开始就接受动画效果，并且考虑这对于我们设计来说是否自然，因为设计不仅仅只是视觉的展示。就像乔布斯曾经说过一样：
设计不只是看起来及摸起来像什么，设计是如何运作。
分享
学员作品赏析
-
2101期学员李思庭作品
-
2104期学员林雪茹作品
-
2107期学员赵凌作品
-
2107期学员赵燃作品
-
2106期学员徐正浩作品
-
2106期学员弓莉作品
-
2105期学员白羽新作品
-
2107期学员王佳蕊作品
热门课程
专业讲师指导 快速摆脱技能困惑
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题，火星帮你解答-
在火星时代教育，我们为学生提供全方位的UE设计学习途径，让学生理解并精通UE设计的核心内容和技能
-
该文章深入探讨火星时代教育推出的原画快速培训班，旨在帮助读者了解原画的艺术风格，让他们在短时间内掌握原画创作的要诀。
-
文章详细介绍并分析了UE5数字展厅培训设计的重要性，分享了理解和优化设计的策略。本文是火星时代教育的知识分享，帮助读者对UE5......
-
本文揭示了一些顶尖的UE设计学习机构，分析了各自的特色和优势，并在文章末尾提供了火星时代教育的相关信息。
-
本文详细介绍了UE4和UE5在虚拟现实学习中的应用，向读者展示了不同层面的虚拟现实学习方法。火星时代教育为全球虚拟现实学习者提......
-
这篇文章主要介绍了影视3D广告包装的重要性，以及如何选择合适的影视3D广告包装培训班。
