当前位置：首页 >教程首页 > U I 设计 > AI+UX设计大师班 >干货满满！UI切换动效的6大要素

干货满满！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/）

（免责声明：本文整理自网络，版权归原作者所有，如涉及作品内容、版权或其他问题，请及时与我们联系，我们将在第一时间予以删除！感谢您的理解和包容）

上一篇 2011年网页设计趋势全面分析

下一篇揭秘：超火的故宫HTML 5背后的设计故事！

返回列表

学员作品赏析

2101期学员李思庭作品
2104期学员林雪茹作品
2107期学员赵凌作品
2107期学员赵燃作品
2106期学员徐正浩作品
2106期学员弓莉作品
2105期学员白羽新作品
2107期学员王佳蕊作品

热门课程

专业讲师指导快速摆脱技能困惑

多种教程总有一个适合自己

专业问题咨询

你担心的问题，火星帮你解答

迪士尼如何使用Maya制作《海洋奇缘2》

今天，我来和大家聊聊，迪士尼动画《海洋奇缘》系列是怎么用Maya软件为他们最新的续集打造获奖动画的。
有哪些听起来高大上、实际上转行同学也能胜任的岗位？试试虚拟现实工程师！

增强现实（AR）和虚拟现实（VR）是当前备受瞩目的创新技术，对相关的增强现实开发、虚拟现实开发、数字孪生开发工程师的人才需求，......
短视频怎么剪能上推荐？这10个概念请记牢！

在这个短视频盛行的时代，越来越多的人想要尝试自己进行短视频剪辑，却常常因为缺乏专业知识而无从下手。别担心，今天就为大家带来短视......
探秘皮克斯！《头脑特工队》的幕后制作

今天，我们聊聊皮克斯的《头脑特工队》系列
中国首个AIGC导演共创计划今日正式上线：同学，做导演不要？

中国首个AIGC导演共创计划定于12月6日正式上线。该计划由快手自研视频生成大模型产品“可灵AI”，联合李少红、贾樟柯、叶锦添......
2025年春晚吉祥物和新Logo出炉，设计师出来领鸡腿

近日，中央广播电视总台《2025年春节联欢晚会》发布官方吉祥物形象“巳（sì）升升”，祝福全球华人在新的一年如意康宁、好事连连。