無邊框設計

邊到邊應用程式會在系統列下方繪製 UI，充分利用整個螢幕。

圖 1. 左側。應用程式不是無邊框設計。沒錯。無邊框應用程式。

重點整理

  • 繪製背景和捲動內容至系統資訊列下方，打造從邊到邊的體驗。
  • 請勿在系統內嵌區下方新增輕觸手勢或拖曳目標，因為這會與邊到邊和手勢導覽功能發生衝突。
圖 2. 應用程式，其中手勢內嵌項目以綠色醒目顯示。

在系統列後方繪製內容

無邊框功能可讓您在系統列下方繪製 UI，提供身歷其境的體驗。

應用程式可以回應內嵌，解決內容重疊問題。邊框會說明應用程式內容需要多少邊框間距，才能避免與系統資訊列或實體裝置功能 (例如螢幕缺口) 重疊。瞭解如何在 Compose 和 View 中支援無邊框並處理插邊。

設計邊到邊用途時，請注意下列內嵌類型：

  • 系統列插邊適用於可點選且不應遭到系統列遮蔽的 UI。
  • 系統手勢內嵌會套用至作業系統使用的手勢導覽區域，優先於應用程式。
  • 螢幕凹口內嵌適用於延伸至螢幕表面的裝置區域，例如相機凹口。

狀態列注意事項

如需基本系統列設計指南，請參閱「Android 系統列」。下一個章節將討論其他狀態列考量。

捲動內容

頂端應用程式列應在捲動時收合。瞭解如何收合 Material 3 TopAppBar。

正確做法

如果應用程式列是固定的，請將頂端應用程式列收合至狀態列高度。

正確做法

如果頂端應用程式列不是固定的，請加入相符的背景顏色漸層。

當使用者介面在下方捲動時，狀態列應為半透明，以免狀態列圖示看起來雜亂。如要達成這項目標，請先按照 LazyColumn 或 RecyclerView 說明文件中的步驟，建立可從邊到邊捲動的 UI。接著，請採取下列其中一種做法，確保系統列為半透明：

  • 在捲動時，視情況依賴 Material 3 TopAppBar 自動防護功能。
  • 建立具有 60% 透明度的自訂可組合項，或為 View 使用 GradientProtection。
圖 3. 應用程式，其中手勢內嵌項目以綠色醒目顯示。

針對自適應版面配置，請確保不同背景顏色的窗格有個別的保護措施。

請勿

漸層防護與每個窗格的背景不符

正確做法

提供與每個窗格背景相符的漸層保護。

同樣地，導覽匣也應與應用程式的其他部分分開保護。

圖 4. 導覽匣的半透明狀態列。這張圖片顯示導覽匣的狀態列保護功能，但不是應用程式。

請勿堆疊狀態列防護措施，例如同時使用 Material 3 TopAppBar 內建防護措施和自訂防護措施。

如需基本導覽列設計指南，請參閱「Android 系統資訊列」。下節將說明其他導覽列考量事項。

捲動內容

捲動時，底部應用程式列應會收合。

正確做法

當底部應用程式列以動畫效果消失時，請為三鍵導覽功能新增系統列遮罩。

正確做法

保持手勢操作列的透明度，且不要再新增遮罩。

螢幕凹口

螢幕缺口可能會影響 UI 的外觀。應用程式必須處理螢幕缺口內嵌，以免 UI 的重要部分繪製在螢幕缺口下方。

正確做法

使用螢幕裁切邊距內嵌重要 UI。

請勿

將重要的 UI 放在螢幕邊緣。

不過，應用程式列的單色背景應繪製至螢幕凹口，如下圖所示。

圖 5. 應用程式列的實心背景會繪製至螢幕缺口，而重要的 UI 則會內嵌。

確保水平輪轉介面會繪製到螢幕凹口位置。

圖 6. 邊到邊的橫向螢幕，輪轉介面會在螢幕缺口中捲動。

請參閱如何在 Compose 和 Views 中支援螢幕凹口。

其他指南

一般來說，背景和分隔線也應從邊緣到邊緣繪製，而文字和按鈕等內容則應內嵌，以免與系統 UI 和硬體元素重疊。