Android 系統資訊列

狀態列和導覽列統稱為「系統資訊列」。 應用程式會顯示電池電量、時間和通知快訊等重要資訊，並讓使用者從任何位置直接與裝置互動。

無論您是為了與 Android 作業系統、輸入法或其他裝置功能互動而設計 UI，請務必考量系統資訊列的顯眼程度。將系統資訊列保持在大多數層的最上方，確保其正確顯示。

圖 1：系統資訊列後方的映像檔

受迫失誤數

  • 在設計中加入系統資訊列，以考慮 UI 安全區域、系統互動、輸入法、螢幕凹口和其他裝置功能。確保將系統資訊列置於最上層，進而確保系統資訊列顯示在上方。

  • 建議做法：將系統資訊列設為透明，並以全螢幕模式顯示應用程式，持續在列下方顯示 UI，藉此提供完整的無邊框體驗。

  • 如果無法將這兩條長條設為透明，請確認長條的顏色與應用程式主體的顏色相符。例如，請配合底部導覽列的顏色與手勢列顏色，以及頂端狀態列的顏色與主體顏色。

    圖 2：確保系統資訊列的顏色與應用程式的主體顏色相符

  • 請避免在手勢插邊新增輕觸手勢或拖曳目標，因為這些元素與無邊框和手勢操作有關。

    圖 3：系統手勢插邊。請避免將輕觸目標放在這些區域下方

在系統資訊列後方繪製內容

無邊框功能可讓 Android 在系統資訊列下方繪製 UI，打造更身歷其境的體驗。建議您使用無邊框設計，因為使用者經常要求將導覽列透明化。(瞭解如何支援無邊框設計)。

應用程式可以回應插邊，解決內容重疊的問題。插邊用於說明應用程式內容需要填充多少內容，以避免與 Android 作業系統 UI 的部分 (例如導覽列或狀態列) 或實體裝置功能 (例如「螢幕凹口」) 重疊。

設計無邊框用途時，請注意下列插邊類型：

  • 系統資訊列插邊會套用至可輕觸且不應被系統資訊列遮住的 UI。
  • 系統手勢插邊適用於系統優先 (高於應用程式) 的手勢導覽區域。

狀態列

在 Android 中，狀態列包含通知圖示和系統圖示。使用者將狀態列向下拉來存取通知欄，藉此與狀態列互動。

圖 4：頂端應用程式列頂端醒目顯示的狀態列區域

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

圖 5：淺色和深色主題的狀態列。

現在，請務必讓應用程式內容橫跨整個螢幕，只在必要時採用無邊框設計。使用透明系統資訊列搭配無邊框內容，如以下範例所示。

圖 6：使用無邊框功能的透明長條，非常適合用來在最多螢幕空間中凸顯內容。


圖 7：設定系統資訊列的樣式，藉此強化內容或與應用程式的品牌形象相符。請勿讓系統資訊列保持預設屬性。

收到通知時，狀態列通常會顯示圖示。這會告知使用者通知導覽匣中有某些內容。這可以是應用程式圖示或符號，用來代表頻道。請參閱「通知設計」。

圖 8：狀態列中的通知圖示

設定狀態列樣式

為狀態列背景設定應用程式主題的樣式，並自訂顏色或樣式，並設定透明度和透明度。

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

若要手動設定背景顏色，您可以選擇為狀態列內容設定淺色或深色的樣式，以獲得最佳對比。

螢幕凹口和狀態列

螢幕凹口是部分裝置上的區域，可延伸至螢幕介面，為前置感應器提供空間。這會影響狀態列的外觀。螢幕凹口可能因製造商而異。

瞭解如何支援螢幕凹口。

圖 9：螢幕凹口範例

Android 可讓使用者使用返回、主畫面和總覽控制項來控制瀏覽功能：

  • 直接返回上一個檢視畫面。
  • 主畫面會從應用程式轉出，並移至裝置的主畫面。
  • 「總覽」會顯示應用程式已開啟且最近已開啟。

使用者可以選擇各種導覽列設定，包括手勢操作 (建議做法) 和三按鈕操作模式。

手勢操作

已在 Android 10 (API 級別 29) 中推出，雖然您無法覆寫使用者的偏好設定，但建議使用手勢瀏覽類型。手勢操作不會使用返回、主畫面和總覽按鈕，而是顯示單一手勢控制以提供預設用途。使用者只要從螢幕左側或右側往另一側滑動，即可返回或上一個畫面，藉此返回主畫面。向上滑動並按住可開啟總覽面板。

手勢操作是一種可擴充的導覽模式，適用於行動裝置和大螢幕。為提供最佳使用者體驗，請將手勢導覽納入考量：

  • 支援無邊框內容。
  • 避免在手勢操作插邊下方新增互動或觸控目標。

瞭解如何實作手勢操作。

圖 10：手勢控制導覽列

三按鈕操作

三按鈕操作提供三個按鈕，分別用於返回、主畫面和總覽。

圖 11：三按鈕導覽列

其他導覽列變化版本

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

圖 12：雙按鈕導覽列

設定導覽樣式

以下範例說明如何實作導覽樣式。

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

在手勢操作模式或按鈕模式下，Android 可處理使用者介面的所有視覺防護。

  • 手勢操作模式：系統會套用動態色彩調整，也就是系統資訊列的內容會根據其背後的內容變更顏色。在以下範例中，如果導覽列的控點放在淺色內容上方，則會變更為深色，反之亦然。

    圖 13：動態色彩調整

  • 按鈕模式：系統會在系統列 (API 級別 29 以上) 或透明系統列 (API 級別 28 以下) 後方套用半透明的薄紗。

    圖 14：動態色彩調整，其中系統資訊列會根據背後的內容變更顏色

鍵盤和瀏覽

圖 15：含導覽列的螢幕小鍵盤

每種導覽類型都會對螢幕小鍵盤做出適當反應，以便使用者執行關閉或甚至是變更鍵盤類型等動作。為確保鍵盤轉換順暢，請使用 WindowInsetsAnimationCompat，確保應用程式轉換與螢幕底部上下滑動時的應用程式轉換順暢順暢，

沉浸模式

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

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