非捲動式應用程式的常見版面配置

不捲動的應用程式檢視畫面版面配置包括媒體播放器、確認對話方塊、挑選器、切換器，以及使用進度指標的特殊健身或追蹤畫面。您可以限制任何畫面的高度，確保使用者專注於單一工作或一組控制項，而不需要瀏覽選項清單。為了配合螢幕尺寸較小的裝置，請在設計時考量到尺寸限制，確保可一目瞭然，並在適當情況下採用圓形螢幕。

建立回應式及最佳化設計

不捲動的檢視畫面著重於一目瞭然的資訊，並以最少的互動方式為使用者提供價值。不過，在這些版面配置中建立回應式行為可能相當困難。為解決這個問題，我們已更新 Android UI 程式庫版面配置和元件，並內建回應式行為，包括以百分比為依據的邊界和邊框間距。如果您使用 Compose 元件，可以自動繼承這項回應能力。

針對獨特的螢幕設計，請在各種螢幕尺寸上徹底測試，確保元件和元素能順利調整，並避免內容遭到裁剪。百分比邊界可有效調整間距，建議您使用 225dp 的斷點，在較大的智慧手錶螢幕上顯示其他資訊和強化功能。

確認元件會根據可用的寬度和高度進行調整

所有元件都是以回應式方式建構，也就是說，它們會根據可用的寬度 (以及全螢幕時的高度) 進行調整。請務必留有必要的邊界，確保內容不會因螢幕圓弧曲線而遭到裁剪。此外，請確認必要的版面配置行為，確保非捲動螢幕內容不會推送版面配置捲動或遭到截斷。

建構可自動調整且獨樹一格的設計

為了在較大的螢幕尺寸上充分利用額外空間，請在 225dp 處新增大小中斷點。這個中斷點可讓您顯示其他內容，包括更多資訊、選項、資料，或變更版面配置，以便更適合較大的螢幕尺寸。

這需要為每個暫停點設計不同的版面配置。較大的螢幕設計 (225 以上) 可納入下列額外元素：

增加現有元件的大小或變更其狀態

使用中斷點可顯示更多詳細資料，或讓內容更一目了然。只要確保在小螢幕上不會發生體驗或功能中斷的情況，且大螢幕的變更僅是額外的變更即可。

在目前版面配置中新增內容

透過新增元件或內容，版面配置可提供更多選項、詳細資料，並最終提供價值。

但這絕不應犧牲一目瞭然的設計。

使用分頁

如果體驗需要更多內容，但希望保留非捲動式版面配置，請考慮使用多頁面版面配置，並搭配垂直或水平分頁。

回應式和自動調整行為

Compose 程式庫中的所有元件都會自動調整為更寬的螢幕尺寸，並獲得寬度和高度。對於這類檢視畫面，使用中斷點可為所有使用者提供特別豐富且有價值的體驗。以百分比定義所有邊界，並定義垂直限制，讓中間的主要內容可延伸至填滿可用的顯示區域。

設計時，最好將不捲動的畫面分成頂端、中間和底部區段。這樣一來，您就能在頂端和底端區段新增內部邊界，避免遭到裁剪，但讓中間區段充分利用螢幕的完整寬度。在螢幕大小受限時，建議使用旋轉捲動按鈕控制螢幕元素，因為單靠輕觸互動可能無法提供最佳體驗。

檢查清單

  • 建立彈性版面配置，讓所有螢幕尺寸都能正常顯示。
  • 套用建議的頂端、底部和側邊邊界。
  • 在內容可能遭到裁剪的位置，以百分比值定義邊界。
  • 運用版面配置限制，讓元素盡可能善用螢幕空間，並在不同裝置尺寸之間維持平衡。
  • 適應時間文字 (如有使用)，但不得重疊頁面頂端區段 (請參閱頂端有空白的進度指標)
  • 建議使用貼邊按鈕，充分利用有限的空間。
  • 建議您在 225dp 處套用中斷點，以便在較大的螢幕尺寸上顯示其他內容，或讓現有內容更容易瀏覽。

全螢幕進度指標

進度指標會自動調整至螢幕大小，因此不會有行為變更，但建議您在中央區域套用比例 (百分比) 邊界和邊框，以便充分利用空間。另外，您也可以考慮使用中斷點，在較大的螢幕上增加元件的大小或數量。

打造與眾不同的體驗

您可以自訂非捲動版面配置，但在可新增至畫面的內容量和最適合的元件類型方面，這類版面配置的限制較多。使用圖示按鈕而非較寬的橢圓形按鈕，可更有效地運用有限的空間，而進度指標和大型資料點等視覺圖形，則有助於以圖像方式傳達重要資訊。所有緊貼螢幕邊框的元素都會隨著螢幕大小自動放大，因此更具影響力。