ui设计要学习哪些动效

UI动效可以直观地描述用户操作时的当前状态，使用户能够清晰地感受到对象之间的位置。下面就来看看这篇ui设计要学习哪些动效，相信你们会喜欢的。

滑动

信息列表随着用户的交互手势移动，然后卡片移动到适当的位置，保持整齐感。它属于一个指向型动画，物体的滑动取决于用户使用的手势。它的目的是通过指向转换有效地帮助用户清理页面层次结构的安排。

适合场景:在设计需要导航到列表的元素时使用滑块。例如，一些明星的选择，款式的选择，适合用这样的表现方式呈现。

扩大

页面中的卡片将从缩略图转换为全屏视图(卡片的中心也将移动到屏幕的中心)。反向动画是将卡片从全屏视图转换为缩略图。它的优点是能够清楚地告诉用户在哪里单击和放大。

适合场景:当你设计需要与用户进行单一交互的元素时。例如，单击图片查看详细信息，让转场过渡更自然。

最小化

页面元素被点击之后缩小，然后移动到屏幕上相应的位置。相反的动效就扩大，从缩略图再次扩展到全屏。这种方法的优点是，用户很清楚在哪里可以找到最小化的元素，如果没有动效引导，用户可能需要花时间自己去寻找。

适合场景:当用户希望最小化一个元素时。像搜索、添加快捷按钮的点击事件，符合从哪来到哪去的原理。

切换对象

当前页面移到后面，而新页面移到前面，这清楚地解释了页面之间的切换，而不会显得太突然或令人困惑。

适合场景:当用户在元素之间切换时。滑动效果是比较单一和常见的，而使用动态效果开关可以使用户产生眼前一亮的效果，如一些商品款式的切换，就可以使用这样的效果。

翻页

当用户实施滑动时，效果就像在现实生活中翻页一样。真实的动态转换还可以清晰地显示列表层次结构的信息体系结构，更有效地模拟真实的动态效果。

适合场景:当用户翻页时。例如，阅读小说和读长篇文章，效果会更贴近现实生活，引起用户的共鸣。

尊重原创文章，转载请注明出处与链接：https://m.qinxue365.com/jsjzx/Graphic_Design/618060.html，违者必究！