Android 系统栏

状态栏、标题栏和导航栏统称为系统栏。它们会显示电池电量、时间和通知提醒等重要信息,并支持用户随时随地直接与设备互动。

无论您是设计用于与 Android OS、输入法或其他设备功能进行交互的界面,都必须考虑系统栏的重要性。

图 1. 系统栏后面的图片

要点总结

  • 在设计应用时,请添加系统栏。请考虑界面安全区域、系统互动、输入法、显示屏缺口、状态栏、字幕栏、导航栏和其他设备功能。

  • 将系统状态栏和导航栏保持透明或半透明状态,并在这些栏后面绘制内容以实现全屏显示。

  • 避免在手势内边距下添加点按手势或拖动目标;这些手势会与边到边和手势导航功能冲突。

图 2. 系统手势边衬区。避免将点按目标放置在这些区域下

在系统栏后面绘制内容

借助边到边功能,Android 可以在系统栏下绘制界面,从而提供沉浸式体验,这是用户的常见要求。

应用可以通过响应内边距来解决内容重叠问题。边衬区用于说明应用内容需要的内边距,以避免与 Android OS 界面的某些部分(例如状态栏、标题栏、导航栏)或实体设备功能(例如显示屏缺口)重叠。了解如何在 ComposeView 中支持无边框设计并处理边衬区。

针对边到边用例进行设计时,请注意以下类型的内边距:

  • 系统栏边衬区适用于可点按且不应被系统栏遮挡的界面。
  • 系统手势内边距适用于系统使用的手势导航区域,这些区域的优先级高于您的应用。
  • 显示屏刘海屏内嵌适用于延伸到显示屏表面的设备区域,例如摄像头刘海屏。

状态栏

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

图 3. 顶部应用栏顶部突出显示的状态栏区域

状态栏图标

状态栏图标可能会因上下文、时间、用户设置的偏好设置或主题以及其他参数而有所不同。请参阅系统栏图标

图 4. 浅色和深色主题的状态栏图标。

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

图 5. 状态栏中的通知图标

设置状态栏样式

确保您的应用内容可跨整个屏幕显示。让状态栏和导航栏保持透明或半透明状态,并显示无边框内容,如以下示例所示。

图 6. 采用透明系统栏的无边框应用非常适合充分利用屏幕空间,让您的内容脱颖而出。

Android 15 强制采用无边框设计,因此系统栏默认处于透明或半透明状态。在较低版本的 Android 中,通过调用 enableEdgeToEdge() 移除不透明的系统栏。

图 7. 请采用边到边设计,以增强内容效果。不使用不透明的系统栏。

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

  • “返回”会直接返回上一视图。
  • 主屏幕转场效果会从应用转到设备的主屏幕。
  • “概览”会显示正在运行的应用和最近打开的应用。

用户可以从各种导航栏配置(包括手势导航 [推荐] 和三按钮导航)中进行选择。为了提供最佳体验,请考虑多种类型的导航。

手势导航

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

手势导航是一种更可伸缩的导航模式,适用于在移动设备和大屏设备上进行设计。为了提供最佳用户体验,请通过以下方式考虑手势导航:

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

了解如何实现手势导航

图 8. 手势处理程序导航栏

三按钮导航

“三按钮”导航栏提供了“返回”“主屏幕”和“概览”三个按钮。

图 9. 三按钮导航栏

其他导航栏变体

您的用户可能可以使用其他导航栏配置,具体取决于 Android 版本和设备。例如,“双按钮”导航提供了两个按钮,分别用于返回和返回上一页。

图 10. 双按钮导航栏

设置导航栏样式

通过调用 enableEdgeToEdge(),确保导航栏在所有版本中都是透明或半透明的。

在 Android 15 及更高版本的设备上,或在调用 enableEdgeToEdge() 后,手势导航默认处于透明状态。三按钮导航栏默认是半透明的,如果位于大屏设备上的任务栏内,则为不透明。

如果您的应用具有底部应用栏,请将 Window.setNavigationBarContrastEnforced() 设为 false,以确保底部应用栏可以在系统导航栏下方绘制,而无需在三按钮导航栏中应用半透明遮罩。

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

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

图 11. 动态配色

按钮模式:系统会在按钮导航栏后面应用半透明遮罩,您可以通过将 Window.setNavigationBarContrastEnforced() 设置为 false 来移除该遮罩。

图 12. 动态配色自适应,系统栏会根据其后面的内容更改颜色

键盘和导航

图 13. 带导航栏的屏幕键盘

每种导航栏类型都会对屏幕键盘做出适当响应,以便用户执行操作,例如关闭或甚至更改键盘类型。为确保键盘平稳过渡,请使用 WindowInsetsAnimationCompat,以便将应用的过渡与键盘从屏幕底部滑动向上和向下同步。

刘海屏

刘海屏是指某些设备显示屏上的一个区域延伸到显示面,这样既能为用户提供全面屏体验,又能为前置传感器留出空间。显示屏切口可能会因制造商而异。

图 14. 刘海屏示例

显示屏缺口可能会影响界面的外观。以 Android 15(API 级别 35)或更高版本为目标平台时,应用会默认绘制到显示屏切口区域。应用必须处理显示屏刘海屏内嵌,以免重要界面绘制在刘海屏下方。了解如何支持刘海屏

沉浸模式

图 15. 在横向模式的移动设备上显示全屏体验的沉浸式模式

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