![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-hero.png?authuser=19&hl=zh-tw)
狀態列和導覽列統稱為「系統資訊列」。 手錶會顯示電池電量、時間和 通知快訊,並讓使用者無論身在何處,都能直接與裝置互動。
無論您使用 針對與 Android 作業系統、輸入法或其他互動方式設計 UI 裝置功能將系統資訊列置於大部分層的頂端, 相關影響
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-image-behind.png?authuser=19&hl=zh-tw)
重點整理
在設計中加入系統資訊列,以考量 UI 安全區域和系統 互動、輸入法、螢幕凹口和其他裝置功能。 確保將系統資訊列置於最上層,進而確保系統資訊列顯示在上方。
將系統資訊列設為透明,並以全螢幕模式顯示應用程式。 繼續在長條下方顯示使用者介面,藉此提供完整的無邊框體驗。
避免在手勢插邊中新增輕觸手勢或拖曳目標;這些 與無邊框和手勢操作相衝突。
圖 2:系統手勢插邊。避免放置輕觸畫面 這些領域的目標
在系統資訊列後方繪製內容
無邊框功能可讓 Android 在系統資訊列下方繪製 UI 享受更身歷其境的體驗建議您使用無邊框設計 公開導覽列是使用者經常提出的請求。(瞭解如何 且支援無邊框設計)。
應用程式可以回應插邊,解決內容重疊的問題。插邊說明 您為了避免 Android 作業系統 UI 的某些部分,例如導覽列或狀態列,或是 實體裝置功能,例如螢幕凹口。
設計無邊框使用功能時,請留意下列類型的插邊類型 案件:
- 系統資訊列插邊會套用到可輕觸且不應 圖片會遭系統資訊列遮住。
- 系統手勢插邊適用於系統使用的手勢瀏覽區域 優先考慮你的應用程式
狀態列
在 Android 中,狀態列包含通知圖示和系統圖示。 將狀態列向下拉即可查看通知,進而與狀態列互動 著色。
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-status-bar-region-highlighted.png?authuser=19&hl=zh-tw)
狀態列可能會因所處情境、時段、時段而異 使用者設定的偏好設定或主題以及其他參數您也可以設定 狀態列樣式,如以下範例所示。
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-status-bar-light-dark-theme.png?authuser=19&hl=zh-tw)
確保應用程式內容橫跨整個螢幕,無邊框 這通常代表交易 不會十分要求關聯語意使用透明系統資訊列和無邊框內容,如 範例。
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-transparent-edge-to-edge.png?authuser=19&hl=zh-tw)
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-do-and-dont.png?authuser=19&hl=zh-tw)
收到通知時,狀態列通常會顯示圖示。這個 告知使用者通知導覽匣中有可看到的內容。 這可以是應用程式圖示或符號,用來代表頻道。詳情請見 通知設計。
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-notification-icon.png?authuser=19&hl=zh-tw)
設定狀態列樣式
設定狀態列背景的樣式,成為應用程式主題的一部分,搭配自訂顏色 並設定透明度和透明度
<style name="Theme.MyApp">
<item name="android:statusBarColor">
@android:color/transparent
</item>
</style>
如果您要手動設定背景顏色,可以視需要設定樣式狀態 並調整成淺色或深色來呈現最佳對比效果。
螢幕凹口和狀態列
螢幕凹口是部分裝置上的區域,延伸為螢幕。 為前置感應器提供空間。這會影響 狀態列。螢幕凹口可能因製造商而異。
瞭解如何支援螢幕凹口。
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-display-cutouts.png?authuser=19&hl=zh-tw)
導覽列
Android 可讓使用者使用返回、主畫面和總覽控制項來控制瀏覽功能:
- 直接返回上一個檢視畫面。
- 主畫面會從應用程式轉出,並移至裝置的主畫面。
- 「總覽」會顯示應用程式已開啟且最近已開啟。
使用者可選擇多種導覽列設定,包括手勢 操作方法 (建議) 及三按鈕操作模式。
手勢操作
已在 Android 10 (API 級別 29) 中推出,建議使用手勢操作 瀏覽方式,不過您無法覆寫使用者的偏好設定。手勢 系統不會使用返回、主畫面和總覽按鈕,而是顯示 提供預設用途使用者只要從左側或往左滑動 瀏覽畫面的右側邊緣,即可瀏覽上一個或下一個畫面 回家。向上滑動並按住可開啟總覽面板。
手勢操作是一種擴充性更高的導覽模式,可用於設計 適合行動裝置和更大的螢幕為了提供最佳使用者體驗,請將 手勢操作模式:
- 支援無邊框內容。
- 避免在手勢操作插邊下方新增互動或觸控目標。
瞭解如何實作手勢操作。
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-gesture-handle.png?authuser=19&hl=zh-tw)
三按鈕操作
三按鈕操作機制提供三個按鈕,分別用於返回、主畫面和總覽。
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-3-button-nav.png?authuser=19&hl=zh-tw)
其他導覽列變化版本
視 Android 版本和其他裝置而定,其他導覽列的設定可 才能提供給使用者以雙按鈕操作為例,我們提供兩種 返回主畫面和返回按鈕。
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-2-button-nav.png?authuser=19&hl=zh-tw)
設定導覽樣式
以下範例說明如何實作導覽樣式。
<style name="Theme.MyApp">
<item name="android:navigationBarColor">
@android:color/transparent
</item>
</style>
Android 可處理手勢中使用者介面的所有視覺防護 或按鈕模式。
手勢操作模式:系統會套用動態色彩調整, 系統列的內容會根據內容變更色彩 後方。在以下範例中,導覽列的控制代碼 改為放在淺色內容上方,反之亦然。
圖 12:動態色彩調整 按鈕模式:系統會在系統後方套用半透明的薄紗 長條 (適用於 API 級別 29 以上) 或透明系統列 (適用於 API 級別) 28 以下)。
圖 13:動態色彩調整 (系統資訊列) 根據應用程式背後的內容變更顏色
鍵盤和瀏覽
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-on-screen-keyboard.png?authuser=19&hl=zh-tw)
每種導覽類型都能適當回應螢幕小鍵盤:
讓使用者能執行各種動作,例如關閉或
鍵盤類型。為了確保鍵盤轉換順暢,
同步處理應用程式與鍵盤滑動轉換效果的轉場效果
上下滑動
WindowInsetsAnimationCompat
。
沉浸模式
![](https://developer.android.google.cn/static/images/design/ui/mobile/system-bars-immersive-mode.png?authuser=19&hl=zh-tw)
如果需要全螢幕體驗,可以隱藏系統資訊列。舉例來說, 當使用者看電影時。使用者仍應輕觸 顯示系統資訊列和 UI,以便瀏覽系統控制項或進行互動。 進一步瞭解全螢幕模式的設計,或瞭解如何 在沈浸模式下隱藏系統資訊列。