上一章 缓动和持续时间

转场动画

UX百科编辑部2024-07-04 发布
154人在学·0条笔记
收藏

转场动画模式

转场动画是连接应用程序各个元素或全屏视图的简短动画。它们是优秀用户体验的基础,因为它们可以帮助用户了解应用程序的工作原理。设计精良的转场动画能让用户感受到高品质的体验和丰富的表现力。对于一个强大的动作执行来说,它们应该是重中之重。

以下是六种常见的转换模式:

  1. 容器转换
  2. 向前和向后
  3. 横向切换
  4. 顶层过渡
  5. 进入和退出
  6. 框架加载

容器切换

此模式用于无缝转换元素以显示更多细节,如卡片扩展到详细信息页面。

持久元素用于无缝连接过渡的开始和结束状态。最常见的持久元素是容器,即用于表示封闭区域的形状。它也可以是一个重要元素,例如图像。在所有过渡模式中,这种模式在元素之间建立了最强的关系。它也被认为是最具表现力的。

打开应用程序和卡片时会使用容器转换。这使得屏幕之间的关系一目了然,并赋予了过渡的表现力。

全屏视图

容器变换用于将该图像扩展为全屏视图
容器变换用于将该列表项展开为全屏视图
容器转换用于将此卡片和搜索框扩展为全屏视图

在同一屏幕内

使用容器变换来扩展该搜索框
这种容器变换 FAB 过渡有一个持久容器和图标
在浮层上使用容器变换

向前和向后

此模式用于在连续的层次结构的屏幕之间导航,例如从收件箱导航到消息线程。

水平滑动表示在屏幕之间向前或向后移动。Android 和 iOS 具有不同的默认样式:

  1. Android在屏幕滑动时使用淡入淡出效果。这样可以减少动作量,因为屏幕不必滑动到设备的整个宽度。
  2. iOS使用视差效果,这意味着背景滑动的速度比前景慢。这也会减少运动量。
1:安卓的默认向前和向后的过渡 2:iOS 的默认向前和向后的过渡
安卓系统上的填充按钮采用前后过渡
iOS 上的卡片使用的前后过渡
安卓系统中的搜索图标按钮使用的前后过渡
在平板电脑上轻点列表项时,可使用前后过渡功能

横向切换

此模式用于在同一层次结构的对等内容之间导航,例如在内容库的选项卡之间滑动。

  • 常用于: 标签、轮播和图片库
  • 阅读更多: 指南

横向切换使用类似于前后模式的滑动动作,但不使用淡入淡出或视差效果。相反,元素被分组并一起滑动,从而形成强大的同级关系。这也暗示能够通过手势滑动元素进行导航。

横向切换用于轻点或轻扫标签组件时
横向切换用于轻扫相册时
与旋转木马组件一起使用的横向切换组件

顶层过渡

此模式用于在应用程序的一级导航栏之间进行顶层过渡,例如点击导航栏中的目的地。

退出屏幕快速淡出,然后进入屏幕淡入。由于一级导航栏内容不一定相关,因此动作有意不使用分组或持久元素来在屏幕之间创建强关系。

导航栏使用顶层过渡
点击导航抽屉中的项目可使用顶层过渡在目的地之间移动
导航栏使用顶层过渡

进入和退出

此模式用于在屏幕上引入或者移除组件。组件可以在屏幕边界内进入和退出,例如应用上方显示的对话框。它们还可以通过跨越屏幕边界进入和退出,例如在屏幕上滑动的抽屉式导航栏或底部操作条。

在屏幕范围内

  • 常用于: FAB、对话框、菜单、信息栏、时间选择器和工具提示
  • 阅读更多: 指南

Android组件在进入和退出时会沿 x 轴或 y 轴展开和折叠。应避免缩放和 z 轴运动,因为它们会暗示海拔变化,这与 M3 的缩小海拔模型不匹配。

iOS组件在进入和淡出时均匀缩放。

1.Android 进入和退出的过渡 2. iOS 进入和退出的过渡
进入屏幕后,屏幕顶部的菜单会向下扩展
提醒和FAB 采用进入和退出过渡方式

超出屏幕边界

  • 常用于: 应用栏、横幅、导航栏、导航栏、导航抽屉和表格

Android组件在屏幕上滑动时会沿 x 轴或 y 轴展开和折叠。这突出了它们的形状,使原本简单的过渡更具表现力。

iOS组件在屏幕上滑动时不会改变形状。

1.Android 进入和退出的过渡 2. iOS 进入和退出的过渡

侧边栏等组件也可以在与主内容相同的高度进入和退出。剩下的会缩小内容的可用区域。

侧边会进行进入和退出的过渡
在滚动过程中,顶部应用栏会从屏幕上滑下或滑上屏幕
滚动时,导航栏会从屏幕上滑下或滑入屏幕

位置组件的进入和退出有助于建立应用程序的整体空间模型:

  1. 通知从顶部进入,表示通知抽屉也可以从顶部下拉
  2. 左侧导航抽屉可帮助用户了解其在屏幕外的位置
  3. 底部工作表和键盘从屏幕底部进入。这是工作表进入的合理默认位置,因为屏幕底部最容易触及。

框架加载

此模式用于从临时加载状态转换到完全加载的 UI。

框架加载是一种 UI 抽象,用于提示内容加载后会出现在何处。它们与其他过渡结合使用,以减少感知延迟并在内容加载时稳定布局。

框架加载在应用程序启动后使用,以显示内容正在加载中

框架加载有一个微妙的脉动动画来表示不确定的进度。它从屏幕的左上角开始,然后向下移动到右下角。

一旦内容加载完成,它就会快速淡入框架加载的顶部。

脉动动画表示加载不确定
加载完毕框架立刻消失
154人在学·0条笔记
收藏
已学会
1人已学会
下一篇应用转场动画
应用转场动画 什么才是好的过场动画? 精心设计的转场动画应具有以下特征: 遵循无障碍设置 大多数平台都设有简化的动画设置,以帮助对动作敏感的用户。如果启用该设置,过渡应该: 使用微妙的淡入淡出动画,而不是强烈的滑动或缩放动画 禁用视差或形状变形等装饰效果 1:默认动作设置的转场 2:已打开减少动画设...
本章笔记
仅看自己
logo