Wear OS 生態系統包含各種螢幕尺寸的裝置。為了為所有使用者提供最高品質的體驗,請務必採用自適應 UI 設計原則。
什麼是自動調整式 UI?
無論在哪種大小的螢幕上算繪,自動調整式 UI 都會延展及變更,盡可能充分運用所有可用的螢幕空間。
自動調整式 UI 會使用直接建構在版面配置邏輯中的元件和方法,以回應式方式進行變更。這些版面配置也會使用螢幕大小斷點 (在不同螢幕大小上套用不同的設計),為使用者打造更豐富的體驗。
主要螢幕尺寸

瞭解設計新體驗時應留意的關鍵參考尺寸
版面配置類型
在圓形螢幕上設計自適應版面配置時,捲動和非捲動檢視畫面各自有獨特的縮放 UI 元素和維持平衡版面配置和組合的要求。

捲動檢視畫面
所有頂端、底部和側邊邊框間距都應以百分比定義,以免遭到裁剪,並提供元素的比例縮放功能。
所有頂端、底部和側邊邊框間距都應以百分比定義,以免遭到裁剪,並提供元素的比例縮放功能。

非捲動檢視畫面
所有邊界都應以百分比定義,且應定義垂直限制,以便中間的主要內容可延伸至填滿可用區域。
所有邊界都應以百分比定義,且應定義垂直限制,以便中間的主要內容可延伸至填滿可用區域。
透過自適應版面配置和設計做法增添價值
在圓形螢幕上設計自適應版面配置時,捲動和非捲動檢視畫面各自有獨特的縮放 UI 元素和維持平衡版面配置和組合的要求。
以下圖片為大致建議,示例僅供參考。查看各個元件或途徑頁面,取得詳細的內容相關回應指南。

一覽更多內容
彈性版面配置可讓更多方塊、資訊卡、文字行和按鈕顯示在單一畫面上
彈性版面配置可讓更多方塊、資訊卡、文字行和按鈕顯示在單一畫面上

顯示更多可見的內容元素
使用新版面配置,並套用至已定義的螢幕大小切換點,以便在可行時引入新內容,為使用者提供更大的螢幕尺寸。
使用新版面配置,並套用至已定義的螢幕大小切換點,以便在可行時引入新內容,為使用者提供更大的螢幕尺寸。

改善一目瞭然的效果
使用額外的螢幕空間,提供更大的容器、更大的文字、更厚的圓環,以及更精細的資料視覺化效果,讓使用者一目瞭然。
使用額外的螢幕空間,提供更大的容器、更大的文字、更厚的圓環,以及更精細的資料視覺化效果,讓使用者一目瞭然。

改善可用性
使用額外的螢幕空間,提供更大的觸控目標、更大的視覺階層,以及內容項目之間的額外空間,讓使用者更容易與介面互動。
使用額外的螢幕空間,提供更大的觸控目標、更大的視覺階層,以及內容項目之間的額外空間,讓使用者更容易與介面互動。

最佳化組合
利用更新的元件和範本,為所有螢幕尺寸提供更優質的 UI 外觀和感受。
利用更新的元件和範本,為所有螢幕尺寸提供更優質的 UI 外觀和感受。
應用程式品質

我們的品質指南分為三個層級,遵守所有三個層級的規範,為使用者提供最佳體驗。
支援所有螢幕大小 |
回應式和最佳化 |
自動調整和差異化 |
使用已建立的標準版面配置

使用已建立的標準版面配置,讓 UI 在各種裝置尺寸下都能順利調整。
我們精心設計標準版面配置,可在所有螢幕尺寸上提供高品質的體驗。