Android 系統資訊列

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

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

圖 1. 系統資訊列後方的圖片。

重點整理

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

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

狀態列

在 Android 中，狀態列包含通知圖示和系統圖示。使用者可透過將狀態列向下拉來存取通知遮罩，與狀態列互動。狀態列樣式可以是透明或半透明。

圖 2. 頂端應用程式列上方醒目顯示的狀態列區域。

狀態列圖示

狀態列圖示的顯示方式可能會因情境、時間、使用者設定的偏好設定或主題和其他參數而異。詳情請參閱「系統列圖示」。

圖 3. 淺色和深色主題的狀態列圖示。

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

圖 4. 狀態列中的通知圖示。

設定狀態列樣式

將狀態列設為透明或半透明，確保應用程式內容可橫跨整個畫面。接著，請設定系統列圖示的樣式，讓圖示具有適當的對比度。

Android 15 會強制採用無邊框模式，因此狀態列預設為透明。呼叫 enableEdgeToEdge() 以便回溯相容。

在下方左側圖片中，狀態列為透明，TopAppBar 的綠色背景會繪製在狀態列後方。

圖 5. 建議你採用全螢幕設計，讓內容更吸睛。不要使用不透明的系統列。

如果 UI 不會顯示在狀態列下方，或是圖片會在狀態列下方繪製，則透明狀態列是理想的做法。當 UI 在狀態列下方捲動時，半透明狀態列是理想的選擇。如要進一步瞭解漸層保護功能，請參閱「從邊到邊的設計」。

圖 6. 無邊框應用程式，具有雙色漸層保護，橫跨系統狀態列後方的兩個窗格。

Android 可讓使用者使用「返回」、「主畫面」和「總覽」控制項控制導覽：

  • Back 會直接返回上一個檢視畫面。
  • 主畫面可從應用程式轉換至裝置的主畫面。
  • 總覽畫面會顯示目前執行中的應用程式，以及未關閉的最近使用應用程式。

使用者可以選擇各種導覽列設定，包括手勢操作 (建議) 和三按鈕操作。為提供最佳體驗，請考量多種導覽類型。

手勢操作

除非使用者在偏好設定中選擇其他方式，否則建議您使用手勢導覽功能。手勢操作機制不會使用返回、主畫面和總覽按鈕，而是會顯示單一手勢操作手柄，以便使用者操作。使用者可從螢幕左側或右側邊緣滑動返回上一個畫面，從底部向上滑動則可返回主畫面。向上滑動並按住可開啟總覽。

手勢操作是更具擴充性的導覽模式，可用於設計行動裝置和大螢幕裝置。為提供最佳使用者體驗，請按照下列步驟考量手勢導覽功能：

  • 支援無邊框內容。
  • 請勿在手勢導覽內嵌區下方新增互動或觸控目標。

詳情請參閱「新增手勢導覽功能支援」。

圖 7. 手勢操作導覽列。

三按鈕操作

三按鈕操作列提供「返回」、「主畫面」和「總覽」三個按鈕。

圖 8.三按鈕導覽列。

其他導覽列變化版本

視 Android 版本和裝置而定，使用者可能可使用其他導覽列設定。舉例來說，雙按鈕操作會提供「主畫面」和「返回」這兩個按鈕。

圖 9.兩個按鈕的導覽列。

導覽列圖示的顯示方式也可能因使用者設定的偏好設定或主題而異。詳情請參閱「系統列圖示」。

設定導覽列樣式

Android 會在手勢導覽模式和按鈕模式中，處理使用者介面的視覺保護機制。系統會套用動態色彩調整功能，系統列的內容會根據後方內容變更顏色。

手勢操作模式

指定 Android 15 或在 Activity 上呼叫 enableEdgeToEdge 後，系統會繪製透明的手勢導覽列，並套用動態色彩調整功能。在下列範例中，如果導覽列中的手把位於淺色內容上方，則會變更為深色，反之亦然。

圖 10. 動態色彩調整。

我們一律建議使用透明的手勢導覽列。

正確做法

保持手勢導覽列的透明狀態。

錯誤做法

為手勢導覽列新增背景。

按鈕模式

指定 Android 15 或在 Activity 上呼叫 enableEdgeToEdge 後，系統會在按鈕導覽列後方套用半透明的遮罩，您可以將 Window.setNavigationBarContrastEnforced() 設為 false 來移除。

圖 11. 動態色彩調整功能，搭配透明遮罩。

如果有底部應用程式列或底部應用程式導覽列，或是 UI 不會在三按鈕導覽列下方捲動，建議您使用透明的三按鈕導覽列。如要取得透明導覽列，請將 Window.setNavigationBarContrastEnforced() 設為 false，並在底部應用程式列中加入間距，以便在系統導覽列下方繪製，如圖 7、8 和 9 所示。詳情請參閱「系統列保護」。

使用透明的三按鈕導覽功能捲動內容。如要進一步瞭解半透明導覽列的注意事項，請參閱。

鍵盤和導覽

圖 12. 螢幕小鍵盤和導覽列。

每種導覽類型都會適當回應螢幕小鍵盤，讓使用者執行操作，例如關閉或變更鍵盤類型。如要確保應用程式與鍵盤從螢幕底部上下滑動的轉換作業同步，請使用 WindowInsetsAnimationCompat。

螢幕凹口

螢幕凹口是指部分裝置上延伸至螢幕表面的區域，用於提供前置感應器的空間。顯示螢幕缺口可能因製造商而異。請考量螢幕缺口與內容、方向和邊緣到邊緣的互動方式。

圖 13.螢幕凹口示例。

沉浸模式

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

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