Android 系統資訊列

狀態列、說明文字列和導覽列統稱為系統資訊列。這些小工具會顯示電池電量、時間和通知快訊等重要資訊,並可在任何地方直接與裝置互動。

無論您是設計與 Android 作業系統、輸入法或其他裝置功能互動的 UI,都必須考量系統列的醒目程度。

圖 1:系統列後方的圖片

重點整理

  • 設計應用程式時,請一併納入系統資訊列。請考量 UI 安全區、系統互動、輸入方法、螢幕缺口、狀態列、字幕列、導覽列和其他裝置功能。

  • 請保持系統狀態列和導覽列的透明度或半透明度,並在這些列後方繪製內容,以便無邊框顯示。

  • 請勿在手勢內嵌區下方新增輕觸手勢或拖曳目標,因為這會與邊到邊和手勢導覽功能發生衝突。

    圖 2:系統手勢內嵌。請勿將輕觸目標放在這些區域下方

在系統列後方繪製內容

無邊框功能可讓 Android 在系統資訊列下方繪製 UI,提供身歷體驗,這也是使用者常見的要求。

應用程式可以回應內嵌,解決內容重疊的問題。插邊會說明應用程式內容需要多少邊框間距,才能避免與 Android OS UI 的部分 (例如狀態列、說明文字列、導覽列) 重疊,或與螢幕缺口等實體裝置功能重疊。請參閱ComposeView 的相關說明,瞭解如何支援無邊框並處理插邊。

為邊到邊用途設計時,請注意下列內嵌類型:

  • 系統資訊列插邊適用於可點選且不應遭到系統資訊列遮蔽的 UI。
  • 系統手勢內嵌會套用至系統使用的手勢導覽區域,優先順序高於應用程式。
  • 螢幕凹口內嵌適用於延伸至螢幕表面的裝置區域,例如相機凹口。

狀態列

在 Android 中,狀態列包含通知圖示和系統圖示。使用者可透過將狀態列向下拉來存取通知遮罩,與狀態列互動。

圖 3:頂端應用程式列頂端的狀態列區域已醒目顯示

狀態列圖示的顯示方式可能會因情境、時間、使用者設定的偏好設定或主題和其他參數而有所不同。您可以設定狀態列圖示樣式,如以下範例所示。

圖 4:淺色和深色主題的狀態列圖示。

請確認應用程式內容會橫跨整個螢幕。如以下範例所示,請讓狀態列和導覽列保持透明或半透明,並顯示無邊框內容。

圖 5:採用透明系統列的無邊框應用程式,可讓您充分利用螢幕空間,讓內容更顯眼。

Android 15 會強制採用無邊框畫面,因此系統列預設為透明或半透明。在舊版 Android 中,請勿讓系統資訊列保持不透明。

圖 6:請以無邊框方式顯示內容,以便強化內容。不要使用不透明的系統列。

收到通知時,狀態列通常會顯示圖示。這會向使用者發出信號,表示通知匣中有內容需要查看。這可以是代表頻道的應用程式圖示或符號。請參閱通知設計

圖 7:狀態列中的通知圖示

設定狀態列樣式

請呼叫 enableEdgeToEdge(),確保所有版本的狀態列都是透明的。請務必更新狀態列圖示的顏色,以便對比。舉例來說,如要建立深色圖示:

WindowCompat.getInsetsController(window, window.decorView)
    .isAppearanceLightStatusBars = false

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:顯示螢幕缺口範例

螢幕缺口可能會影響 UI 的外觀。指定 Android 15 (API 級別 35) 以上版本時,應用程式會預設在螢幕裁切區域中繪製。應用程式必須處理螢幕缺口內嵌,以免重要的 UI 繪製在螢幕缺口下方。請參閱這篇文章,瞭解如何支援螢幕凹口。

沉浸模式

圖 15:沉浸式模式在橫向的行動裝置上顯示全螢幕體驗

如需全螢幕體驗 (例如使用者觀看電影時),您可以隱藏系統資訊列。使用者仍應能輕觸顯示系統列和 UI,以便瀏覽或與系統控制項互動。進一步瞭解如何為全螢幕模式設計,或瞭解如何隱藏沉浸模式的系統資訊列