Android 系統資訊列

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

狀態列和導覽列合稱為「系統列」。可顯示電池電量、時間和通知快訊等重要資訊，並與任何地點的使用者直接與裝置互動。

無論您是要設計與 Android 作業系統互動的使用者介面、輸入法或其他裝置功能，請務必考量系統資訊列的顯眼程度。將系統資訊列置於大多數層頂端，確保系統能妥善計算這些資訊。

圖 1：系統列後方的圖片

受迫失誤數

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

• 建議做法：將系統資訊列設為透明，並以全螢幕模式排列應用程式，延續長條下方的使用者介面，提供完整的無邊框體驗。

• 如果無法同時將兩條長條設為透明，請確認長條的顏色與應用程式主體的顏色相符。舉例來說，請將底部導覽列的顏色與手勢列的顏色配對，並將頂端狀態列顏色與主體顏色配對。

  

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

• 避免在手勢插邊底下新增輕觸手勢或拖曳目標，這些元素會與無邊框和手勢操作相衝突。

  

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

  注意： 系統資訊列和導覽可能會因裝置製造商而異。舊版裝置可能會使用硬體導覽按鈕，而非軟體按鈕。

在系統列後方繪製內容

無邊框功能可讓 Android 在系統資訊列下方繪製 UI，提供更身歷其境的體驗。我們建議使用無邊框設計，因為導覽列是使用者的常用要求。(瞭解如何支援無邊框技術)。

注意： 請不要隱藏系統資訊列，除非暫時提供沉浸模式體驗，例如觀看全螢幕影片。

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

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

• 系統資訊列插邊適用於可輕觸且不應遭到系統列遮擋的 UI。
• 系統手勢插邊適用於系統使用的手勢操作區域，這類區域的優先順序高於應用程式。

狀態列

在 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：手勢控制導覽列

提示： 您無法判斷使用者啟用的導覽類型。為了提供最佳體驗，請將多種導覽類型納入考量。如果您願意優先處理工作，建議您優先採用手勢操作，因為這是許多現有和新的 Android 使用者最熟悉的導覽類型。

三按鈕操作

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

圖 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：沉浸模式在橫向導向的行動裝置上顯示全螢幕體驗

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