Android 系統資訊列

狀態列和導覽列統稱為「系統資訊列」。 手錶會顯示電池電量、時間和 通知快訊,並讓使用者無論身在何處,都能直接與裝置互動。

無論您使用 針對與 Android 作業系統、輸入法或其他互動方式設計 UI 裝置功能將系統資訊列置於大部分層的頂端, 相關影響

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

重點整理

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

  • 將系統資訊列設為透明,並以全螢幕模式顯示應用程式。 繼續在長條下方顯示使用者介面,藉此提供完整的無邊框體驗。

  • 避免在手勢插邊中新增輕觸手勢或拖曳目標;這些 與無邊框和手勢操作相衝突。

    圖 2:系統手勢插邊。避免放置輕觸畫面 這些領域的目標

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

無邊框功能可讓 Android 在系統資訊列下方繪製 UI 享受更身歷其境的體驗建議您使用無邊框設計 公開導覽列是使用者經常提出的請求。(瞭解如何 且支援無邊框設計)。

應用程式可以回應插邊,解決內容重疊的問題。插邊說明 您為了避免 Android 作業系統 UI 的某些部分,例如導覽列或狀態列,或是 實體裝置功能,例如螢幕凹口

設計無邊框使用功能時,請留意下列類型的插邊類型 案件:

  • 系統資訊列插邊會套用到可輕觸且不應 圖片會遭系統資訊列遮住。
  • 系統手勢插邊適用於系統使用的手勢瀏覽區域 優先考慮你的應用程式

狀態列

在 Android 中,狀態列包含通知圖示和系統圖示。 將狀態列向下拉即可查看通知,進而與狀態列互動 著色。

圖 3:以方框特別標出頂端應用程式列頂端的狀態列區域

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

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

確保應用程式內容橫跨整個螢幕,無邊框 這通常代表交易 不會十分要求關聯語意使用透明系統資訊列和無邊框內容,如 範例。

圖 5:使用 無邊框功能,非常適合用來凸顯內容 盡可能運用更多的螢幕空間。


圖 6:設定系統資訊列的樣式,以增強內容或配合應用程式的 品牌請勿讓系統資訊列保持預設屬性。

收到通知時,狀態列通常會顯示圖示。這個 告知使用者通知導覽匣中有可看到的內容。 這可以是應用程式圖示或符號,用來代表頻道。詳情請見 通知設計

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

設定狀態列樣式

設定狀態列背景的樣式,成為應用程式主題的一部分,搭配自訂顏色 並設定透明度和透明度

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

如果您要手動設定背景顏色,可以視需要設定樣式狀態 並調整成淺色或深色來呈現最佳對比效果。

螢幕凹口和狀態列

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

瞭解如何支援螢幕凹口

圖 8:螢幕凹口範例

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

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

使用者可選擇多種導覽列設定,包括手勢 操作方法 (建議) 及三按鈕操作模式。

手勢操作

已在 Android 10 (API 級別 29) 中推出,建議使用手勢操作 瀏覽方式,不過您無法覆寫使用者的偏好設定。手勢 系統不會使用返回、主畫面和總覽按鈕,而是顯示 提供預設用途使用者只要從左側或往左滑動 瀏覽畫面的右側邊緣,即可瀏覽上一個或下一個畫面 回家。向上滑動並按住可開啟總覽面板。

手勢操作是一種擴充性更高的導覽模式,可用於設計 適合行動裝置和更大的螢幕為了提供最佳使用者體驗,請將 手勢操作模式:

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

瞭解如何實作手勢操作

圖 9:手勢控點導覽列

三按鈕操作

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

圖 10:三按鈕導覽列

其他導覽列變化版本

視 Android 版本和其他裝置而定,其他導覽列的設定可 才能提供給使用者以雙按鈕操作為例,我們提供兩種 返回主畫面和返回按鈕。

圖 11:雙按鈕導覽列

設定導覽樣式

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

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

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

  • 手勢操作模式:系統會套用動態色彩調整, 系統列的內容會根據內容變更色彩 後方。在以下範例中,導覽列的控制代碼 改為放在淺色內容上方,反之亦然。

    圖 12:動態色彩調整
  • 按鈕模式:系統會在系統後方套用半透明的薄紗 長條 (適用於 API 級別 29 以上) 或透明系統列 (適用於 API 級別) 28 以下)。

    圖 13:動態色彩調整 (系統資訊列) 根據應用程式背後的內容變更顏色

鍵盤和瀏覽

圖 14:含導覽列的螢幕小鍵盤

每種導覽類型都能適當回應螢幕小鍵盤: 讓使用者能執行各種動作,例如關閉或 鍵盤類型。為了確保鍵盤轉換順暢, 同步處理應用程式與鍵盤滑動轉換效果的轉場效果 上下滑動 WindowInsetsAnimationCompat

沉浸模式

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

如果需要全螢幕體驗,可以隱藏系統資訊列。舉例來說, 當使用者看電影時。使用者仍應輕觸 顯示系統資訊列和 UI,以便瀏覽系統控制項或進行互動。 進一步瞭解全螢幕模式的設計,或瞭解如何 在沈浸模式下隱藏系統資訊列