非捲動檢視畫面著重於一目瞭然的資訊,使用者幾乎不必互動就能獲得價值。因此,在這些版面配置中建構回應式行為可能很困難。
預設非捲動式版面配置元件
對話方塊
對話方塊是暫時性疊加層,會占據整個螢幕。使用者可以透過這個元件執行單一動作。

- 對話方塊會將注意力集中在確認內容是否已解決。
- 對話方塊應直接傳達資訊,並專用於完成工作。
- 對話方塊應用於回應使用者工作或動作,並提供相關及相對資訊。

確認重疊說明
確認疊加層會在短時間內向使用者顯示確認訊息。您可以使用這個元件,在使用者執行動作後吸引他們的注意。

在手機上開啟
使用者選擇在手機上繼續操作時,系統會觸發「在手機上開啟」疊加層。疊加畫面會顯示進度指標,並告知使用者何時該查看手機。

踏步機
Stepper 提供全螢幕的控制體驗,讓使用者可以從多種值中選取。使用者可以透過按鈕或錶冠控制互動,並透過彎曲的等級指標查看具體等級。
時間挑選器
挑選器可讓使用者從可捲動區段的有限項目中選擇。 時間挑選器最多有三欄,視秒數是否可用,以及時鐘是 12 小時制還是 24 小時制而定。使用者一次與一欄互動,將數字保留在焦點中,然後繼續選取。
日期選擇器
挑選器可讓使用者從可捲動區段的有限項目中選擇。 日期挑選器最多有三欄,可根據用途互換日期、時間和年份的順序。日期挑選器需要較長的內容字串,因此一次只會顯示一欄,提示左側或右側的內容。使用者一次與一欄互動,方法是將焦點停留在要選取的數字上,然後繼續操作。
自訂非捲動式版面配置範例
非捲動式應用程式畫面不限於設定的元件。您可以結合多種元素,打造想要的版面配置。
您應留意非捲動式螢幕的空間有限,並使用回應式 (百分比) 邊界和邊框間距,充分利用可用螢幕空間。您也可以考慮在 225 dp 處套用中斷點,以便在較大的螢幕上顯示額外內容,或讓現有內容更易於瀏覽。
對應
緊急覆疊畫面
緊急警報
回應式和自動調整行為
Compose 程式庫中的所有元件都會自動配合較大的螢幕尺寸調整,並增加寬度和高度。對於這些特定檢視畫面,使用中斷點可為所有使用者提供特別豐富且有價值的體驗。
針對許多 UI 的按鈕、資訊卡和邊界,請延伸並填滿不同螢幕大小的空間,充分利用 UI 上的可用空間,同時打造均衡的版面配置。
請使用下列檢查清單,確認回應式參數定義正確無誤:
- 建立彈性版面配置,在所有螢幕大小上都能呈現合理的外觀。
- 套用建議的上下和兩側邊界。
- 在內容可能遭到裁剪的位置,以百分比值定義邊界。
- 運用版面配置限制,讓元素盡可能充分利用螢幕空間,並在不同裝置大小之間維持平衡。
- 如要使用時間文字,請預留空間,但不要與頁面頂端區塊重疊。
- 建議使用邊緣按鈕,充分利用有限空間。
- 建議在 225 dp 處套用中斷點,以便在大螢幕上顯示額外內容,或讓現有內容更易於瀏覽。
使用分頁的多個非捲動頁面歷程
如果體驗需要更多內容,但想保留非捲動式版面配置,請考慮使用垂直或水平分頁的多頁面版面配置。