Android 系统栏

<img <="" amount="" src="/static/images/design/ui/mobile/system-bars-hero.png" />

状态栏和导航栏统称为系统栏。它们显示电池电量、时间和通知提醒等重要信息,并提供来自任何位置的直接设备交互。

无论您是要设计用于与 Android 操作系统、输入法,还是其他设备功能交互的界面,都必须考虑系统栏的显眼程度。将系统栏置于大多数层的顶部,以确保将它们纳入考量。

图 1:系统栏后面的图片

断球数

  • 在您的设计中添加系统栏,以将界面安全区域、系统交互、输入法、刘海屏和其他设备功能考虑在内。将系统栏置于最顶层,确保考虑到它们。

  • 正确做法:将系统栏设置为透明,并全屏布置您的应用,继续在系统栏下方放置界面,以提供全面的全面体验。

  • 如果无法将两个栏都设置为透明,请确保栏的颜色与应用正文的颜色一致。例如,应使底部导航栏颜色与手势栏颜色保持一致,将顶部状态栏颜色与正文颜色保持一致。

    图 2:确保系统栏颜色与应用的正文颜色匹配
  • 避免在手势边衬区下方添加点按手势或拖动目标;这些会与无边框和手势导航相冲突。

    图 3:系统手势边衬区。请避免将点按目标放置在这些区域下方

在系统栏后绘制内容

通过无边框功能,Android 可以在系统栏下方绘制界面,从而提供沉浸感更强的体验。我们建议您使用无边框,因为将导航栏设置为透明是用户常见的请求。(了解如何支持无边框)。

应用可以通过对边衬区做出响应来解决内容重叠问题。边衬区说明了需要为应用的内容留出多大的内边距,以避免与 Android OS 界面的各部分(如导航栏或状态栏)或实体设备功能(如刘海屏)重叠。

在针对无边框用例进行设计时,请注意以下类型的边衬区:

  • 系统栏边衬区适用于既可点按又不应被系统栏在视觉上遮挡的界面。
  • 系统手势边衬区适用于系统使用的手势导航区域,这些区域的优先级高于您的应用。

状态栏

在 Android 中,状态栏包含通知图标和系统图标。用户可通过下拉状态栏访问通知栏来与状态栏互动。

图 4:顶部应用栏顶部突出显示的状态栏区域

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

图 5:浅色主题和深色主题下的状态栏。


图 6:默认栏(黑色)


图 7:自定样式的条形


图 8:使用无边框功能的透明条形,非常适合利用尽可能多的屏幕空间,让您的内容更加醒目。


图 9:设置系统栏的样式以增强内容或与应用的品牌风格保持一致。请勿将系统栏设置为默认属性。

收到通知时,状态栏中通常会显示一个图标。这会向用户表明,抽屉式通知栏中有要显示的内容。这可以是代表频道的应用图标或符号。请参阅通知设计

图 10:状态栏中的通知图标

设置状态栏样式

将状态栏背景设置为应用主题的一部分,在其中使用自定义颜色或样式,并设置透明度和不透明度。

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

如果您要手动设置背景颜色,则可以选择将状态栏内容的样式设为浅色或深色,以获得最佳对比度。

刘海屏和状态栏

刘海屏是某些设备上的一个区域,它延伸到显示屏表面,为前置传感器提供空间。它可能会影响状态栏的外观。刘海屏可能因制造商而异。

了解如何支持刘海屏

图 11:刘海屏示例

Android 允许用户使用“返回”“主屏幕”和“概览”控件控制导航:

  • “返回”按钮直接返回上一个视图。
  • 主屏幕从应用切换到设备主屏幕。
  • “概览”部分显示应用处于打开状态和最近打开过。

用户可以从各种导航栏配置中进行选择,包括手势导航(推荐)和三按钮导航。

手势导航

手势导航是 Android 10(API 级别 29)中引入的导航类型,不过您无法替换用户的偏好设置。手势导航不使用“返回”“主屏幕”和“概览”按钮,而是显示单个手势手柄以实现功能可见性。用户可通过从屏幕左侧或右侧边缘滑动来返回、前进和从底部向上滑动来返回主屏幕。向上滑动并按住即可打开概览。

手势导航是一种可扩展性更高的导航模式,适用于在移动设备和更大的屏幕上进行设计。为了提供最佳用户体验,请根据以下因素考虑手势导航:

  • 支持全屏内容。
  • 避免在手势导航边衬区下方添加互动或触摸目标。

了解如何实现手势导航

图 12:手势手柄导航栏

三按钮导航

“三按钮”导航提供了三个按钮,分别用于返回、主屏幕和概览。

图 13:三按钮导航栏

导航栏的其他变体

您的用户或许能够使用其他导航栏配置,具体取决于 Android 版本和设备。例如,“双按钮”导航为“主屏幕”和“返回”提供了两个按钮。

图 14:双按钮导航栏

设置导航样式

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

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

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

  • 手势导航模式:系统会应用动态配色自适应,其中系统栏的内容会根据其后面的内容改变颜色。在以下示例中,如果导航栏中的手柄放置在浅色内容上方,它会变为深色,反之亦然。

    图 15:动态配色自适应
  • 按钮模式:系统会在系统栏(对于 API 级别 29 或更高级别)或透明系统栏(对于 API 级别 28 或更低级别)后面应用半透明纱罩。

    图 16:动态配色自适应,其中系统栏根据其背后的内容而改变颜色

键盘和导航

图 17:带导航栏的屏幕键盘

每种导航类型都会对屏幕键盘做出适当的响应,允许用户执行关闭甚至更改键盘类型等操作。为了确保键盘顺畅转换,为了确保顺畅转换,使应用的转换与键盘在屏幕底部上下滑动的时间同步,请使用 WindowInsetsAnimationCompat

沉浸模式

图 18:在横屏移动设备上显示全屏体验的沉浸模式

当您需要全屏体验时(例如,当用户观看电影时),可以隐藏系统栏。用户应仍能够点按以显示系统栏和界面,以便进行导航或与系统控件互动。详细了解如何针对全屏模式进行设计,或了解如何隐藏系统栏以实现沉浸模式