火星网校
交互动效|优秀的UI动画设计技巧
发布时间：2024-01-12 09:45:56 浏览量：193次
本文笔者将为大家展示一些UI动画的案例，期以通过这些案例，帮助大家在为交互添加动画时做出更好的决策。
让我们看一些UI动画从好到优秀的例子，通过这里和那里的一些调整，你可以使用动画提升你的UI模式。
列出的交互表示状态之间的连续性，表示共享元素之间的关系，并将用户的注意力引用到他们应注意和采取行动的事物上。
为了创建这些动画，我遵循了Material Motion、IBM的动画原则和UX in Motion Manifesto中的指导原则。
所有的交互都是使用InVision Studio的早期访问版本完成的。
01 使标签中的内容滑动
左边的内容淡入淡出。右边那个带标签的幻灯片。
- 一个好的动画将内容从一个状态转换为另一个状态。
- 一个优秀的动画通过使内容在状态之间移动来显示转换的连续性。
当您设计像标签或弹出菜单这样的交互时，请尝试将内容的位置相对于打开它的操作。这样，您不仅可以设置内容的可见性，还可以设置位置的动画。哦，当你在浏览它的时候，添加一个轻扫手势，将你从一个内容带到另一个内容。
02 连接卡片的共享元素
左边的内容打开了一个新的屏幕，可以向上滑动。右边的卡片展开并填满屏幕。
- 一个好的动画使用左推或向上滑动等过渡来在细节屏幕上显示内容。
- 一个优秀的动画通过动画共享内容在两个状态之间建立连接。
在不同状态之间制作动画时，查看它们之间是否存在任何共享元素并连接它们。使用InVision Studio时，在创建Motion转换时会自动连接两个链接屏幕之间重复的组件，这使得原型制作动画变得轻而易举。
查看Motion Manifesto，了解您可以应用的动画类型。上面的示例使用了Masking、Transformation、Parenting和Easing原则的组合。
03 在您的内容中使用级联效果
左侧的卡片通过滑动和淡入显示。右侧的卡片具有相同的动画，但每张卡片都有短暂的延迟。
- 一个好的动画会在材料进入屏幕时改变材质的位置和不透明度。
- 一个优秀的动画很快就会错开每个组或元素的外观。
要完成瀑布效果，请尝试对每个内容或每组内容应用延迟。保持相同的缓和和持续时间，因此感觉一致。
尽管如此，不要对每个小元素进行级联，使内容组具有动画效果。保持动画的快速和活泼。谷歌建议开始每个元素不超过20毫秒。查看Material Motion中的编排原理以查看更多示例。
04 使内容将其他元素排除在外
左边的动画在其他内容之上进行动画。右边的动画随着内容的增长将内容推出。
- 好的动画移动并在上下文中显示元素。
- 优秀的动画在变化时会显示影响周围环境的元素。
使你内容中的元素了解周围环境。这意味着使内容吸引或排斥其周围的元素。有关更多示例，请查看Material Design中的Aware运动原理。
05 使菜单显示在上下文中
左边的菜单从下面飞进来。右边的菜单从创建它的操作按钮展开。
- 好的动画菜单显示从打开它们的按钮方向出现的内容。
- 优秀的动画从创造它们的动作中出现了很棒的动画菜单，从触摸点开始增长。
06 使用按钮显示不同的状态
左侧的按钮显示指示状态的文本。右侧的按钮使用容器显示不同的事件。
- 良好的交互显示按钮旁边的事件。
- 优秀的交互使用按钮本身来显示不同的状态。
尝试使用按钮的容器来提供状态的可视反馈，例如：你可以使用微调器或加载动画替换CTA;或者你可以在显示进度的背景中添加动画。
解决方案取决于你，我们的想法是使用用户已经与之交互的空间。如果你使用按钮颜色并复制以确认成功状态，则奖励积分。
07 注意重要的事情
热门课程推荐
热门资讯
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
2. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
那么,要学习UI设计就要学习哪些课程呢? 其实,UI设计课程涉及到许多领域,一般分为艺术设计课程、设计辅导课程、图形课程、测试课程、动画示范课程等几...
-
8. Photoshop操作教程：自制电子印章 | PS技巧详解
想要学会制作电子公章吗？跟随本教程，详细介绍Photoshop操作步骤，让您轻松掌握PS技巧，制作精美电子印章。
-
学习平面设计要用到哪些软件？随着社会的发展，平面设计在我们日常生活中越来越重要。想了解平面设计软件都有哪些吗？本文为您介绍Photoshop、CorelDRAW、AI和CAD这四款必备的设计软件。
-
10. 物联网APP UI设计:创造智能硬件领域的沉浸式体验
ui设计应该让用户一目了然,能够快速找到所需的信息和功能。在设计过程中,应尽量使用简洁的图标、文字和色彩,避免过多的视觉干扰。符合用户习惯:ui设...
最新文章
