动作

动态影像是一项强大的工具,但在驾驶环境中应谨慎使用。只有当它能够帮助驾驶员获取信息而不分散其注意力时,才是合适的。

简要指南(TL;DR):

  • 避免用不必要的动作分散用户的注意力
  • 利用动态效果来增进用户理解并提升其熟练程度
  • 确保你的运动控制语言足够灵活,能够兼容所有相关的硬件。
  • 根据您的具体情况,使用推荐的动作模式。

运动原理

在为 Android for Cars 界面设计动态效果时,请牢记三个基本原则:安全、信息丰富、灵活。

安全的

驾驶是用户的首要任务——其他一切都是次要的。要将用户的注意力视为有限的资源,避免利用动态效果造成不必要的干扰。

眼睛 gif

信息丰富

利用动态效果传递信息,帮助用户更好地理解产品。例如,动态效果可以通过展示元素之间的层级关系和空间关系,加深用户对产品的理解。此外,动态效果还可以通过指示可用的交互方式,帮助用户熟练掌握界面操作。

信息丰富的GIF

灵活的

定义一种具有可扩展性和灵活性的动态语言,以适应各种尺寸和形状的屏幕以及各种类型的用户输入。

Flex 屏幕 gif

运动模式

为了确保所有应用都能提供一致的用户体验,Android Automotive 针对以下情况提供了特定的运动模式建议:

  • 在同一级别视图之间切换
  • 切换到详细视图
  • 扩展现有行动
  • 最小化和扩大行动
  • 扰乱一项行动

本节中的所有动画效果均基于标准缓动,如 Material Design缓动指南中所述。也就是说,动画速度会迅速加快,然后逐渐减慢,从而将观众的注意力吸引到过渡的最后阶段。


在同一级别视图之间切换

在应用中同一层级的不同视图之间切换时,例如应用栏中的标签页或播放列表中的歌曲,请使用左右滑动的动画效果。这种水平滑动能够强化用户在应用内保持同一层级的概念。

同伴过渡示例
在 Android Automotive 系统中,用户可以通过快速淡入淡出效果在导航应用和媒体应用之间来回切换。

例子

在 Android Automotive OS 中,媒体应用中从“主页”标签页切换到“播放列表”标签页时的左右滑动效果,强化了这两个标签页都是内容顶级视图的理念。

切换到详细视图

从内容的高层视图切换到细节视图时,使用 Z 轴深度动画,使底层视图逐渐放大并淡入,同时高层视图逐渐淡出。这种动画强化了高层视图和细节视图之间的父子关系,从而将注意力吸引到细节视图上。

父母到孩子的过渡
从父屏幕中,子元素向上提起并展开到位。

例子

切换到详细视图
在 Android Automotive OS 媒体模板中,当用户点击专辑网格中的特定专辑时,该专辑的歌曲列表会放大展开,使用户能够更清晰地查看详细信息。

扩展现有行动

当用户正在进行某个操作并执行相关操作时,使用垂直(向上或向下)的滑动操作,在主操作上方以全屏叠加层的形式引入辅助操作,并带有薄纱背景。透过薄纱背景可以看到主操作,可以强化用户仍在执行当前操作的印象。

关闭辅助操作时,请使用该操作的反向动作。反向动作应比原始动作耗时更短,因为用户已完成辅助操作并准备退出。

标注图标
期间
Material Design 关于过渡时间应有多长的指导原则
辅助动作叠加
在此,次要动作通过叠加层从主要动作中升起,而主要动作则在幕布后方部分可见。

例子

Android Auto OS 操作叠加示例
在 Android Automotive OS 媒体模板中,当用户点击溢出按钮展开控制栏时,额外的控件会弹出并显示在叠加层上。

最小化和扩大行动

当要将已最小化到较小屏幕格式的正在进行的操作扩展以允许多任务处理时,请使用带有全屏淡入效果的扩展窗口遮罩。

最小化正在进行的动作时,请使用该动作的逆向操作。最小化动作应比展开动作耗时更短,因为用户实际上是在结束当前动作,并准备将其关闭。

标注图标
期间
Material Design 关于过渡时间应有多长的指导原则
展开最小化的屏幕
最小化的操作会逐渐扩展到全屏,并淡入显示在当前操作之上。

例子

Android Automotive OS 控制栏示例
在 Android Automotive OS 媒体模板中,最小化的控制栏会展开成完整的播放视图,然后在用户点击向下箭头时收缩回最小化状态。

扰乱一项行动

当需要在正在进行的动作上方突然出现一个短暂的、非阻塞性的动作时,可以将其从屏幕边缘上下滑动(使用部分遮罩),或者淡入屏幕中央(使用全遮罩)。从距离新动作出现位置最近的位置开始移动。

简短行动示例
当干扰性动作应该出现在屏幕顶部附近时,用部分遮光帘从顶部将其滑入。

例子

对话示例
当 Android Automotive OS 媒体模板中间出现干扰性操作时,它会以全屏遮挡的方式淡入,暂时将用户注意力集中到新操作上——在本例中,该操作是请求使用位置数据的权限。