Wear OS 生態系統是由各種螢幕尺寸的裝置組成。善用自動調整式 UI 原則是為所有使用者提供優質體驗的關鍵。
什麼是自動調整式 UI?
自動調整式 UI 會延展及變更,因此無論顯示在何種大小的螢幕,都能充分運用所有可用的螢幕空間。
自動調整式 UI 會使用直接內建於版面配置邏輯中的元件和方法,以回應方式變更。這些版面配置也會利用螢幕大小中斷點,針對不同的螢幕大小套用不同的設計,為使用者提供更豐富的體驗。
主要螢幕大小
![](https://developer.android.google.cn/static/wear/images/design/key-screen-sizes.png?authuser=3&hl=zh-tw)
瞭解設計新體驗時要留意的重要參考大小
版面配置類型
在圓形螢幕上設計自動調整式版面配置時,每個捲動和非捲動檢視畫面都有獨特的要求,包括縮放 UI 元素及維持平衡的版面配置和組合。
![](https://developer.android.google.cn/static/wear/images/design/scrolling-view.gif?authuser=3&hl=zh-tw)
所有頂端、底部和側邊邊界都必須以百分比定義,以免元素遭到裁剪,並按比例縮放元素。
![](https://developer.android.google.cn/static/wear/images/design/non-scrolling-view.gif?authuser=3&hl=zh-tw)
所有邊界都應以百分比定義,並定義垂直限制,讓中間的主要內容可延展以填滿可用區域。
透過自動調整式版面配置和設計做法創造價值
在圓形螢幕上設計自動調整式版面配置時,每個捲動和非捲動檢視畫面都有獨特的要求,包括縮放 UI 元素及維持平衡的版面配置和組合。
下列圖片僅供參考,範例僅供參考。查看每個元件或途徑頁面,取得詳細、情境和回應式指南。
![](https://developer.android.google.cn/static/wear/images/design/content-at-a-glance.png?authuser=3&hl=zh-tw)
回應式版面配置可提供更多方塊、更多資訊卡、更多行文字,以及更多按鈕,可供您在單一螢幕上使用
![](https://developer.android.google.cn/static/wear/images/design/content-elements-visible.png?authuser=3&hl=zh-tw)
運用新的版面配置 (以已定義的螢幕大小中斷點套用),盡可能提供新內容,在螢幕尺寸較大的裝置上帶給使用者附加價值。
![](https://developer.android.google.cn/static/wear/images/design/glanceability.png?authuser=3&hl=zh-tw)
使用額外的螢幕空間,提供更大的容器、較大的容器、更大的環狀,以及更精細的資料視覺化內容,讓使用者一目瞭然。
![](https://developer.android.google.cn/static/wear/images/design/usability.png?authuser=3&hl=zh-tw)
使用額外的螢幕空間,提供更大型的輕觸目標、更大的視覺階層,以及內容項目之間有額外空間,讓介面更容易且更容易互動。
![](https://developer.android.google.cn/static/wear/images/design/optimized-compositions.png?authuser=3&hl=zh-tw)
運用我們的新版元件和範本,為各種螢幕大小的使用者介面提供更優質的外觀和風格。
應用程式品質
![](https://developer.android.google.cn/static/wear/images/design/quality-guidelines.png?authuser=3&hl=zh-tw)
我們的品質規範共分為三個等級,只要遵守這三個層級的指南,即可為使用者提供最佳體驗。
適用於各種螢幕大小 |
回應式和最佳化調整 |
彈性調整且與眾不同 |
運用現有的標準版面配置
![](https://developer.android.google.cn/static/wear/images/design/canonical-layouts.png?authuser=3&hl=zh-tw)
使用已建立的標準化版面配置,讓 UI 在各種裝置大小的螢幕上都能順暢調整。
標準版面配置經過精心開發,可在所有螢幕大小上提供優質體驗。