應用程式版面配置
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
設計 Wear OS 應用程式時，請特別留意您選用的版面配置
每個服務項目因為 Wear OS 可以在圓形螢幕上執行，
標準版面配置有兩種類別 (標準版面配置則適用於手持裝置)
。
不捲動的版面配置，著重於一目瞭然的資訊，為使用者提供有價值的資訊
或是完全沒有互動因此，建構
回應這些版面配置：
- 針對語言、字型縮放、裝置和變數的組合進行測試
內容。
- 只在已知或控制內容時使用無法捲動的版面配置
或者如果必須使用特定設計
- 在版面配置中套用建議頂端、底部和側邊邊界。
- 以百分比值定義其他可能影響內容的位置的利潤
擷取。
- 排列元素，盡可能善用
在不同大小的裝置中維持平衡。
如果網頁包含的資訊多於單一畫面可容納，或
如要支援更長、更身歷其境的歷程，請使用捲動功能
檢視畫面。
- 套用建議頂端、底部和側邊邊界。
- 在百分比值中定義外邊界，以避免在
可捲動容器的開始和結尾
- 在 UI 元素之間套用固定 DP 值的邊界。
採用回應式設計做法的捲動檢視畫面，通常會適應多種
螢幕大小但在特殊情況下，您可以使用中斷點
覆寫尺寸並擴增版面配置，以顯示更多選項、改善
方便瀏覽，或是讓內容更符合畫面大小。以下範例
顯示了在較大的螢幕上，如何展開底部的兩個按鈕：
Figma 設計套件
前往設計套件下載頁面，瞭解內建功能的設計版面配置
元件、選項和建議，以建立不同的應用程式和資訊方塊
遵循最佳做法的設計
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間：2025-07-27 (世界標準時間)。
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間：2025-07-27 (世界標準時間)。"],[],[],null,["# App layouts\n\nWhen designing apps for Wear OS, be intentional about the layouts you choose for\neach experience. Because Wear OS runs on circular displays and clipping is more\ncommon than on handheld devices, there are two categories of canonical layouts\nthat you should consider when designing your app.\n\nNon-scrolling app layouts\n-------------------------\n\nNon-scrolling layouts focus on glanceable information and offer users value with\nlittle or no interaction. Because of that, it can be challenging to build\nresponsive behavior into these layouts:\n\n### Build for responsive non-scrolling views\n\n- Test on a combination of languages, font scaling, devices, and variable content.\n- Use non-scrollable layouts only when the content is known or controlled ahead of time, or if you must use a specific design.\n- Apply the [recommended top, bottom, and side margins](/design/ui/wear/guides/components/dialogs#adaptive-layouts) to the layout.\n- Define margins in percentage values in places where content might otherwise be clipped.\n- Arrange elements to make the best possible use of the space within the screen and maintain balance across different device sizes.\n\nScrolling app layouts\n---------------------\n\nFor pages that contain more information than can fit on a single screen, or\nwhich are required to support longer and more immersive journeys, use a scroll\nview.\n\n### Build for responsive scroll views\n\n- Apply the [recommended top, bottom, and side margins](/design/ui/wear/guides/components/dialogs#adaptive-layouts).\n- Define outer margins in percentage values to prevent clipping at the beginning and end of the scrollable container.\n- Apply margins in fixed DP values between UI elements.\n\n### How to build for adaptive scroll views using a screen size breakpoint\n\nScroll views that use responsive design practices usually adapt to a range of\nscreen sizes. However, in some special cases, you can use a breakpoint to\noverride dimensions and augment layouts which show additional options, improve\nglanceability, or make content fit better on screen. The following example\nshows how, on larger screens, the bottom two buttons are widened:\n\nFigma design kits\n-----------------\n\n[Visit the design kit downloads page](/design/ui/wear/guides/foundations/download) to explore design layouts with built-in\ncomponents, options, and recommendations to create different app and tile\ndesigns that follow best practices."]]
