移动

运动是一款功能强大的工具,在驾驶环境中应谨慎使用。仅当车钥匙有助于驾驶员注意力分散注意力,不分散注意力时,驾车模式才是合适的做法。

指南一览(要点

  • 避免用不必要的动作分散注意力
  • 使用动画来增强用户的理解和熟练程度
  • 让您的动作语言足够灵活,适合所有相关硬件
  • 根据您的情况使用建议的动作模式

运动原理

为 Android for Cars 界面设计动作时,请牢记以下三项基本原则:安全、信息丰富且灵活。

安全

驾驶是用户的主要任务 - 其他一切都是次要的。将用户的注意力作为有限的资源,并避免使用动画来避免不必要的干扰。

眼睛 GIF

内容丰富

使用动画传达有助于用户的信息。例如,动作可以通过展示元素之间的层次和空间关系来增加用户对产品的了解。此外,动作还可以指示可用的互动,从而帮助用户提高对界面的熟练程度。

信息丰富的 GIF

灵活

定义一种可灵活缩放的运动语言,使其能够灵活适应各种尺寸和形状的屏幕,以及所有类型的用户输入。

Flex 屏幕 GIF

运动模式

为了在所有应用中提供一致的用户体验,Android Automotive 会针对以下特定运动模式提供建议:

  • 在同一级别视图之间切换
  • 移至详情视图
  • 扩展现有操作
  • 最小化和展开操作
  • 中断操作

本部分中的所有运动模式均基于标准加/减速选项,如 Material Design 加/减速指南中所述。也就是说,运动会快速加速,然后更慢地减速,以便将焦点转移到过渡结束。


在同一级别视图之间切换

在应用内同一层级的视图之间切换,例如应用栏中的标签页或播放列表中的歌曲,请使用左右移动。水平移动凸显了在应用中保持同一水平的理念。

对等转换示例
快速淡入淡出会将用户从导航应用转到媒体应用,并在 Android Automotive 中再次返回

示例

在 Android Automotive OS 中,在媒体应用中从“首页”标签页切换到“播放列表”标签页时,左右移动可加强两个标签页都是内容的顶级视图

移至详情视图

从较高级别的内容视图切换到详情视图时,请使用 Z 轴深度运动,它会放大较低层,并在较高层淡出时淡入。这种动作增强了较高级别视图和详情视图之间的父子关系,将焦点引向后者。

父级到子级的过渡
子元素在父屏幕中向上抬起并展开

示例

切换到详情视图
在 Android Automotive OS 媒体模板中,当用户点击专辑网格中的特定专辑时,该专辑的歌曲列表会扩大并展开,让详细信息成为重点

扩展现有操作

当用户在执行操作并执行相关操作时,使用垂直(向上或向下)动作在主要叠加层之上以纱罩背景在全屏叠加层上引入次要操作。通过纱罩看到主要操作可以强调用户仍在进行该操作。

关闭次要操作时,使用以下动作的反转方向。反向动作应比原始动作花费的时间更少,因为用户完成了次要操作并准备退出。

次要操作叠加层
在这里,次要操作会从叠加层上的主要操作呈现,而主要操作在纱罩后面部分可见

示例

Android Auto 操作系统操作叠加层示例
在 Android Automotive OS 媒体模板中,当用户点按溢出按钮以展开控制栏时,其他控件会出现并显示在叠加层上

最小化和展开操作

在将已最小化的操作缩小到较小的屏幕格式以允许多任务处理时,请使用具有全屏淡入效果的展开式窗口掩码。

将进行中的操作最小化时,请反转此动作。最小化动画的执行时间应该比膨胀动作要短,因为用户主要是在离开这个动作,并准备将其移开。

展开最小化屏幕
最小化操作会在淡入在当前操作之上时展开至全屏

示例

Android Automotive OS 控制栏示例
在 Android Automotive OS 媒体模板中,最小化控件栏会展开为完整的播放视图,然后当用户点按向下箭头时,该控件栏会缩回其最小化形式

中断操作

如果正在执行某项操作时,某个简短的非阻塞操作突然出现,请在其从屏幕边缘向下或向上滑动(使用部分纱罩)或淡入中间(使用完整的纱罩)。从离要显示新操作的位置最近的位置开始移动。

简短操作示例
如果干扰性操作应该出现在屏幕顶部附近,请使用局部纱罩将其从顶部滑入

示例

对话框示例
当 Android Automotive OS 媒体模板中间出现干扰性操作时,系统会完全消失,并暂时将所有注意力都放在新操作上,在这种情况下,系统会请求获取使用位置数据的权限