總覽

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

重要條款

回應式設計:一種設計方法,可讓版面配置動態調整按鈕、文字欄位和對話方塊等元素的格式和位置,提供最佳使用者體驗。採用回應式設計做法,自動為使用者提供更大的螢幕畫面,進而提供額外價值。無論是讓使用者一目瞭然的文字、畫面上的更多操作,或是更大、更容易觸及的目標,回應式設計做法都能為大螢幕使用者提供更優質的體驗。

自適應設計:一種設計方法,可根據已知的使用者、裝置或環境條件變更介面。Material 中的自動調整式設計包含版面配置和元件的調整功能。

版面配置類型

在圓形螢幕上設計自適應版面配置時,捲動和非捲動檢視畫面各自有獨特的縮放 UI 元素需求,並維持平衡的版面配置和組合。

替代文字

自動調整式捲動版面配置

所有頂部、底部和側邊邊界都應以百分比定義,以免裁剪並提供元素的比例縮放功能。

替代文字

自動調整式非捲動版面配置

所有邊界都應以百分比定義,且應定義垂直限制,讓中間的主要內容可延展至填滿可用區域。

主要螢幕尺寸

Wear OS 生態系統中的許多手錶都具有不同螢幕大小。設計 Wear OS 時,請注意應用程式介面會顯示在這些不同螢幕尺寸上。為不同裝置設計時,請謹記以下原則。

替代文字

由小到大排序

請一律先針對支援的小型圓形螢幕模擬器設計:204dp - 216dp。如果版面配置密集,請以 192dp 顯示,確保不會發生任何錯誤。請務必以 192dp 和較大的字型大小測試。然後針對大螢幕裝置進行最佳化調整。

替代文字

規模設計

以百分比 (而非絕對值) 定義外部邊界,讓邊界在圓形螢幕上按比例調整比例,並避免裁剪任何 UI 元素。

替代文字

字型大小

視字型縮放和無障礙設定 (例如粗體文字) 而定,UI 元素的高度可能會以非線性方式變更。

以下螢幕尺寸是 Wear OS 裝置常見的選擇,將 225dp 用於小螢幕和大螢幕之間的中斷點,可帶來許多好處。

替代文字

192dp 至 224dp

替代文字

225 dp 至 240 以上 dp

設計品質等級

我們也以更廣泛且有意義的方式運用形狀語言,利用彈性容器形狀套用圓角/銳角半徑,以便支援形狀變形清單和按鈕狀態。此外,我們也推出了邊緣貼合按鈕,這項新元件和經典設計模式適用於 Wear OS 上的圓形裝置。我們的品質規範分為三個層級。遵守所有三個層級的規範,為使用者提供最佳體驗。

替代文字

可支援所有螢幕大小

確保應用程式可在所有螢幕大小上提供優質體驗。建立能充分利用可用應用程式空間的版面配置。

替代文字

響應式且經過最佳化

為允許的裝置提供更多內容,並採用回應式版面配置,自動調整各種螢幕大小。

替代文字

適應性和差異化

利用斷點,在大螢幕上提供小螢幕裝置無法提供的強大新體驗,充分利用額外空間。