火星网校
干货满满！UI切换动效的6大要素
发布时间：2018-11-17 19:57:24
今天我们来聊聊在UI动效设计中，如何做好一个切换，以及需要注意的几大要素，感兴趣的朋友赶紧来给你的经验充点值呗！
功能性动效（Functional Animation），是指清晰的、有逻辑、有目的的交互动效。使用得当可以有效的降低用户的认知负担，提高对应用的空间位置认知，避免使用中的盲目性。
动效可以通过灵活变化（形状、大小、位移、融合、重组等）使应用的界面更加充满活力。在应用UI设计中，我们应当巧妙的设计好的功能性动效（Functional Animation），使用户切换各个功能模块/页面的体验更加流畅，更好地解释一个界面里各元素的变化过程，更好地强化各个元素的层级结构关系。
成功的切换动效设计包含以下6大要素：
一、处处响应，及时反馈 （Responsive）
视觉反馈在UI设计中极为重要，因为它给了用户的自然期望以一个及时而符合逻辑的确认。比如，生活中按一个按钮，就可以点亮一盏灯；按门铃，门铃就会响……交互过程中，只要人做出了一个操作，系统就应当予以及时的反馈，这符合我们的习惯和对即将发生的事情的预期。
用户界面应当根据用户触发的操作快速给予反馈，同时，应当表明新的界面和触发它产生的UI元素之间的联系，让人总是知道当前的操作将会带来什么变化。
对象对用户的操作作出恰当的反馈，点击项目-展开详情，切换自然，符合预期
二、关联性（Associative）
触发一个动作的UI控件，与即将出现的新面板之间，必须有逻辑上的紧密联系。这样才有助于用户更好的理解这个操作。下面是两个对比的实例：
第一个例子：触发的菜单和触发它的UI控件隔了较远的距离，打破了触发点和被触发事件之间的联系。
第二个例子：点击菜单图标，菜单从紧贴它位置出现，从视觉格式塔心理学上，靠近的对象之间的联系密切，而远离的对象之间的联系薄弱，体现了它们之间的逻辑关联性。
另一个是播放器“播放”按钮和“暂停”按钮的例子，这两个按钮是紧密关联的，点击其中一个按钮则另一个按钮立马变为可见。所以它们之间也需要具有关联性的过渡变换，下图很好的做到了这一点。
三、过渡流畅自然（Natural）
避免出乎意料的交互动效，任何元素的移动应当遵循现实中的物体运动规律。在现实生活中，一个物体对象的加速或减速一般都受到外力的影响（重力、摩擦力等），而且运动速度的变化是连续而非突变的，所以同样的在动效设计里，突然的/奇怪的运动模式都会显得不自然，丧失愉悦的使用体验。
下面是一个不错的实例：点击小卡片-->卡片和圆对象沿着一道平缓的圆弧进行缓动，而非突然闪现，或者沿着奇怪的路径（比如折线），同时卡片平缓的放大，切换自然舒服。
四、带有目的性，而不是看心情（Intentional）
动效在交互中对视觉体验有着显著的影响，界面中的静态图片或者文字内容的导向作用都没有动效抢。因此，好的动效要正确恰当地指引用户进行下一步操作。
第一次使用某个应用的用户一般并不能预测交互何时何地会怎么发生，但是恰当的动效能帮助用户专注当前的目标，而不被干扰，感觉到当前显示对象的突然变化。
Mac OS的窗口最小化动效，将当前窗口如同纸片一样收纳到下方的工作应用台，告诉用户点击“最小化”按钮的直接作用就是将当前的窗口隐藏到下方的工作台上，并且告知了用户具体的位置，方便他随时可以重新找到再次打开。这个过程也很流畅，用户可以专注于他处理的事件，而不是被突然打断，变得迷茫。
另一个是父子关系转换的例子，用户点击小卡片，小卡片弹开放大显示详细的信息，信息的出现和展示井井有条，一切动效都是为了功能（合理地展示内容），让用户专注于内容本身。
五、快速灵敏（Quick）
界面各个元素在发生位置或状态改变时，变化的速度不能过慢，而导致过长时间的等待。（同样也不能太快，以致于用户看不清、不能理解动效的逻辑含义。）
下面的例子中，各元素的缓动接连发生，且速度过慢，造成了不太必要的延时，是不可取的做法。
改进后的正确做法如下：
六、简明清晰（Clear）
在单次交互动效中，不宜发生太多样、太多元素的动态变化。交互动效应当清晰、简明、一致。“少即是多”的设计原理在此同样适用。酷炫不是目的，帮助功能的实现、信息的展示，适用的便捷才是目的。
下面这个交互动效中动态的样式过多，没有逻辑性，看起来很炫酷，但实际上干扰视觉、打断了体验。
“少即是多”的设计原理在此同样适用。下面是改进后的效果，是不是好了很多，没有多余的视觉噪声，用户可以沉浸在内容中。
结语
交互运动不应该随机产生，我们在设计每一个交互的时候，要记住背后一定需要一个目的/理由来支撑。动效的关键在于引导用户沿着正确的操作路径快速高效的达到目标，在任务过程中不迷失，不被突然打断。无论你的应用是有趣好玩还是简单商务风格，好的动效设计确实可以为用户提供一个清晰快速的操作体验。
注意每一个细节，做到一分不多，一分不少，恰如其分，一定可以创造出更卓越的交互体验，更为人们喜爱的产品！
（译者：卡布咔，原文链接：http://babich.biz/functional-animation-in-ux-design-what-makes-a-good-transition/）
（免责声明：本文整理自网络，版权归原作者所有，如涉及作品内容、版权或其他问题，请及时与我们联系，我们将在第一时间予以删除！感谢您的理解和包容）
分享
学员作品赏析
-
2101期学员李思庭作品
-
2104期学员林雪茹作品
-
2107期学员赵凌作品
-
2107期学员赵燃作品
-
2106期学员徐正浩作品
-
2106期学员弓莉作品
-
2105期学员白羽新作品
-
2107期学员王佳蕊作品
热门课程
专业讲师指导 快速摆脱技能困惑
相关文章
多种教程 总有一个适合自己专业问题咨询
你担心的问题，火星帮你解答-
023年以来，在版号审批、出海政策等影响下，新品游戏大量涌现，这也为游戏市场带来了一些新变量、新现象。
-
学习游戏开发班可以帮助游戏爱好者从零基础成为游戏开发专家，掌握全面的游戏开发技能。
-
火星时代教育为您提供专业的界面设计实战班，在实践中掌握界面设计的核心技巧和最新趋势，成为优秀的UI设计师。
-
了解UI交互设计培训的最佳选择，比较不同培训机构的优势和特点。
-
火星时代教育为您推荐专业的学影视后期培训机构，提供高质量的培训内容及资深导师指导，助您成为优秀的影视后期剪辑师或合成师。
-
火星时代教育是一家专注于交互设计培训的机构，为学员提供专业的交互设计培训课程，并帮助他们成为优秀的交互设计师。
