Android 系统栏

状态栏和导航栏统称为系统栏。它们显示重要的信息，例如电池电量、时间和通知警报，并提供从任何地方进行直接的设备交互。

无论您是在为与 Android 操作系统、输入法或其他设备功能的交互设计 UI，都必须考虑系统栏的突出程度。将系统栏保留在大多数图层的顶部，以确保它们得到考虑。

要点

在您的设计中包含系统栏，以考虑 UI 安全区域、系统交互、输入法、显示切口和其他设备功能。将系统栏保留在最顶层可确保它们得到考虑。
操作：使系统栏透明，并将您的应用程序布局为全屏，在栏下继续 UI，以提供完整的边缘到边缘体验。
如果您无法将两个栏都设置为透明，请确保栏的颜色与应用程序主体的颜色匹配。例如，将底部导航栏颜色与手势栏颜色匹配，将顶部状态栏颜色与主体颜色匹配。

图 2： 确保系统栏颜色与应用程序的主体颜色匹配
避免在手势内嵌下添加点击手势或拖动目标；这些与边缘到边缘和手势导航冲突。

图 3： 系统手势内嵌。避免将点击目标放置在这些区域内

注意： 系统栏和导航可能会因设备制造商而异。较旧的设备可能具有硬件导航按钮而不是软件按钮。

边缘到边缘功能允许 Android 在系统栏下方绘制 UI，以获得更沉浸式的体验。我们建议您使用边缘到边缘，因为使导航栏透明是用户常见的请求。（了解如何支持边缘到边缘）。

应用程序可以通过对内嵌做出反应来解决内容重叠问题。内嵌描述了应用程序的内容需要填充多少才能避免与 Android 操作系统 UI 的部分（例如导航栏或状态栏）或物理设备功能（例如显示切口）重叠。

在为边缘到边缘用例设计时，请注意以下类型的内嵌

在 Android 上，状态栏包含通知图标和系统图标。用户通过下拉状态栏来访问通知栏与之交互。

状态栏的外观可能会因上下文、一天中的时间、用户设置的偏好或主题以及其他参数而异。您还可以设置状态栏样式，如以下示例所示。

现在，边缘到边缘是必需的，请确保您的应用程序内容跨越整个屏幕。使用透明系统栏和边缘到边缘内容，如以下示例所示。

当通知到达时，状态栏中通常会显示一个图标。这向用户发出信号，表明通知抽屉中有一些内容需要查看。这可能是您的应用程序图标或代表该频道的符号。请参阅通知设计。

图 8： 状态栏中的通知图标

将状态栏背景设置为应用程序主题的一部分，使用自定义颜色或样式，以及设置透明度和不透明度。

<style name="Theme.MyApp">
  <item name="android:statusBarColor">
    @android:color/transparent
  </item>
</style>

如果您正在手动设置背景颜色，可以选择将状态栏内容设置为浅色或深色，以获得最佳对比度。

显示切口是某些设备上延伸到显示表面以提供空间用于前置传感器的区域。它可能会影响状态栏的外观。显示切口可能会因制造商而异。

阅读有关如何支持显示切口的内容。

Android 允许用户使用后退、主页和概览控件来控制导航

用户可以选择各种导航栏配置，包括手势导航（推荐）和三按钮导航。

Android 10（API 级别 29）引入的手势导航是推荐的导航类型，尽管您无法覆盖用户的偏好。手势导航不使用按钮进行后退、主页和概述，而是显示一个用于提供功能的手势操作句柄。用户可以通过从屏幕的左侧或右侧边缘滑动来进行后退和前进，从底部向上滑动回到主页。向上滑动并按住会打开概述。

手势导航是一种更可扩展的导航模式，用于跨移动设备和更大屏幕进行设计。为了提供最佳的用户体验，请通过以下方式考虑手势导航：

阅读有关实施手势导航的内容。

三按钮导航提供三个按钮，分别用于后退、主页和概述。

根据 Android 版本和设备，您的用户可能可以使用其他导航栏配置。例如，双按钮导航提供两个按钮，用于主页和后退。

以下示例展示了如何实现导航样式。

<style name="Theme.MyApp">
  <item name="android:navigationBarColor">
    @android:color/transparent
  </item>
</style>

Android 在手势导航模式或按钮模式下处理所有用户界面视觉保护。

手势导航模式：系统会应用动态颜色适应，其中系统栏的内容会根据其背后的内容更改颜色。在以下示例中，如果导航栏中的句柄放置在浅色内容上方，则会更改为深色，反之亦然。

图 13： 动态颜色适应
按钮模式：系统会在系统栏后面应用半透明遮罩（对于 API 级别 29 或更高）或透明系统栏（对于 API 级别 28 或更低）。

图 14： 动态颜色适应，系统栏根据其背后的内容更改颜色