應用程式圖塊應在各種尺寸的 Wear OS 裝置上順利運作，盡可能享有額外空間，在螢幕較小的裝置上也能呈現最佳顯示效果。本指南將提供相關建議，協助您達成此使用者體驗。
如要進一步瞭解自動調整式版面配置的設計原則，請參閱設計指南。
使用 ProtoLayout 建構回應式版面配置
ProtoLayout Material 程式庫提供預先定義的版面配置，可協助您建構資訊方塊。這些版面配置已專為配合螢幕大小而設計。
請參閱 Figma 設計版面配置，瞭解可用的標準版面配置，以及如何使用這些版面配置建立設計：
針對多數用途，我們建議使用 PrimaryLayout 或 EdgeContentLayout 做為頂層版面配置。使用 setResponsiveContentInsetEnabled 設定回應式行為，例如：
PrimaryLayout.Builder(deviceParameters)
.setResponsiveContentInsetEnabled(true)
.setContent(
// ...
)
.build()
透過中斷點提供不同的體驗
ProtoLayout Material 程式庫的版面配置已採用回應式設計，並採用正確的元素位置和顯示設定。不過，在某些情況下，您可能需要變更可見元素的數量，才能獲得最佳成效。舉例來說，您可能會在較小的螢幕上顯示 3 個按鈕，在較大的螢幕上顯示 5 個按鈕。
如要實作這種與眾不同的體驗，請使用螢幕大小中斷點。如要在螢幕大小超過 225 dp 時顯示不同的版面配置，請按照下列步驟操作：
PrimaryLayout.Builder(deviceParameters)
.setResponsiveContentInsetEnabled(true)
.setContent(
MultiButtonLayout.Builder()
.addButtonContent(button1)
.addButtonContent(button2)
.addButtonContent(button3)
.apply {
if (deviceParameters.screenHeightDp >= 225) {
addButtonContent(button4)
addButtonContent(button5)
}
}
.build()
)
.setPrimaryLabelTextContent(label)
.setPrimaryChipContent(compactChip)
.build()
設計指南說明瞭更多商機。
使用預覽畫面在不同螢幕大小上測試圖塊
請務必在不同螢幕大小上測試版面配置。使用資訊方塊預覽註解以及 TilePreviewHelper 和 TilePreviewData 類別：
@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData(
onTileRequest = { request ->
TilePreviewHelper.singleTimelineEntryTileBuilder(
buildLayout()
).build()
}
)
這樣一來，您就能直接在 Android Studio 中預覽資訊方塊版面配置。上述中斷點範例說明瞭螢幕空間允許時，其他按鈕在預覽時的顯示方式：
小型和大型顯示器顯示中斷點的效果
如需完整範例，請參閱 GitHub 上的媒體圖塊範例。