火星网校
实用干货！如何利用动画效果来提升用户体验？
发布时间：2018-11-17 19:57:24
动画效果会讲故事，但不是冗长和完整的故事，而是简单的故事，比如“嗨，你现在该看这里了”或者“哇，你的操作完全正确。”然而，动效的目的不是为了愉悦用户，而是为了帮助理解操作会有什么进展亦或是提高用户使用APP的效率。这一点我们可以在Zurb的陈述里证实。
我们不仅仅只是设计图形界面，我们设计的是用户与他们的屏幕如何互动。
或许动画效果应用在广范围的背景来构建美学与功能的统一：动效能够影响用户行为，沟通状态，引导用户的注意力以及帮助用户看到自己动作的反馈。这里有一些例子说明你可以在界面的什么地方增加动画效果来提升用户体验。
加载不能太无聊
你应该尝试让等待变得愉悦，如果你不能缩减等待时间的话。动效可以代替烦人的转啊转啊转（这基本上只是提醒用户他们正在等待），几乎任何网页或者应用都可以利用屏幕框架和巧妙的动画来维持用户的兴趣。
在页面完全加载完之前用屏幕框架递增的方式完成
状态切换不能太生硬
动画效果可以让过渡更加显著，所以当用户开始和结束，动画效果要能展示到底发生了什么。好的过渡设计会让用户清楚的明白自己的注意力应该往什么地方放。
Adrian Zumbrunnen举了一个关于当用户点击链接的时候，滚动动画是如何帮助用户保持所在的环境的好例子。只要比较静止的那一瞬间的变化就能明白切换的感觉就像硬切一样：
突然，不自然地就改变了，这样的界面切换对用户来说是非常不舒服的。
有动画效果动作时：
动效给画面带来生气
解释元素之间的关系
动画可以提升用户直接操作的感觉。
举个例子，一个菜单按钮平滑过度变成播放控制，再变回来。这个效果会告知用户这个按钮的功能，当用户不太明白这个交互的作用时候。播放按钮转变正暂停表明这两个动作是有关系的，当其他元素出现的时候它们是不存在的。
这个例子里，动画用来引导眼镜去看屏幕的中心也就是音乐控件的位置。
另外一个例子，当按下浮动按钮的时候，加号就会变成一支笔，这说明笔是最主要的创作方式。一个小小的细节也能显示出接下来会发生什么，让用户明白不同情况下标识的含义之间的不同。
错误的操作必须有鲜明的反馈
动画可以加强用户习惯的的操作。
举个例子，表上登记的项目可以极大的增强一些动画。如果正确的数据允许登录，一个简单的“点头”的动画可以解释这一点。而水平的抖动可以用来表示未输入或者输入错误，当用户注意到动画的时候他们立刻就能明白这个动作的含义是什么。
图中展现的是最基本的抖动形式
利用反馈来展现动作完成
动画可以帮助用户明白他们操作之后的结果。根据“别说，展现出来”的原则，你可以用动画反馈展示出到底完成了什么。
下面的例子中，当用户点击“付款”，一个简单的旋转加载出现在APP支付成功的情况下。对号标志动画让用户觉得很轻松的付了款并且用户会感谢这些重要的细节。
总结
当动效使用的非常成熟时候，它是非常有用的。这对与时间安排以及考虑一个动画是否是有效的是非常重要的。我们需要从开始就接受动画效果，并且考虑这对于我们设计来说是否自然，因为设计不仅仅只是视觉的展示。就像乔布斯曾经说过一样：设计不只是看起来及摸起来像什么，设计是如何运作。
（本文转载于UI中国，译者：佳作分享，原文地址：http://i.ui.cn/ucenter/115137.html）
分享
学员作品赏析
-
2101期学员李思庭作品
-
2104期学员林雪茹作品
-
2107期学员赵凌作品
-
2107期学员赵燃作品
-
2106期学员徐正浩作品
-
2106期学员弓莉作品
-
2105期学员白羽新作品
-
2107期学员王佳蕊作品
热门课程
专业讲师指导 快速摆脱技能困惑
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题，火星帮你解答-
杭州室内设计师培训班有哪些已成为许多设计爱好者进入创意领域的理想起点。在杭州这座设计之都，室内设计行业蓬勃发展，带动了培训需求......
-
在视觉内容主导传播的当下，掌握专业的视频剪辑技能，已成为众多求职者和职场人士提升竞争力的关键路径。面对日益增长的市场需求，石家......
-
在数字媒体蓬勃发展的当下，影视后期制作是创意产业的核心驱动力。湛江，这座滨海城市，文化底蕴独特，区位优势明显，影视行业正快速崛......
-
济南UI设计培训正成为越来越多人的职业起点。在这个数字时代，界面设计需求激增，济南作为一座文化底蕴深厚的城市，为学习者提供了丰......
-
柳州UI设计培训避坑指南：开启你的创意职业之旅
-
荆州平面设计培训在当今数字化浪潮中扮演着关键角色。随着品牌营销和视觉传达需求的激增，专业设计师成为各行各业的热门人才。然而，选......
