開始使用自動調整式版面配置

Wear OS 生態系統是由各種螢幕尺寸的裝置組成。善用自動調整式 UI 原則是為所有使用者提供優質體驗的關鍵。

什麼是自動調整式 UI?

自動調整式 UI 會延展及變更,因此無論顯示在何種大小的螢幕,都能充分運用所有可用的螢幕空間。

自動調整式 UI 會使用直接內建於版面配置邏輯中的元件和方法,以回應方式變更。這些版面配置也會利用螢幕大小中斷點,針對不同的螢幕大小套用不同的設計,為使用者提供更豐富的體驗。

主要螢幕大小

瞭解設計新體驗時要留意的重要參考大小

螢幕大小

版面配置類型

在圓形螢幕上設計自動調整式版面配置時,每個捲動和非捲動檢視畫面都有獨特的要求,包括縮放 UI 元素及維持平衡的版面配置和組合。

捲動檢視畫面
所有頂端、底部和側邊邊界都必須以百分比定義,以免元素遭到裁剪,並按比例縮放元素。
非捲動檢視畫面
所有邊界都應以百分比定義,並定義垂直限制,讓中間的主要內容可延展以填滿可用區域。

透過自動調整式版面配置和設計做法創造價值

在圓形螢幕上設計自動調整式版面配置時,每個捲動和非捲動檢視畫面都有獨特的要求,包括縮放 UI 元素及維持平衡的版面配置和組合。

下列圖片僅供參考,範例僅供參考。查看每個元件或途徑頁面,取得詳細、情境和回應式指南。

快速瀏覽更多內容
回應式版面配置可提供更多方塊、更多資訊卡、更多行文字,以及更多按鈕,可供您在單一螢幕上使用
顯示更多內容元素
運用新的版面配置 (以已定義的螢幕大小中斷點套用),盡可能提供新內容,在螢幕尺寸較大的裝置上帶給使用者附加價值。
提高一目瞭然的易讀性
使用額外的螢幕空間,提供更大的容器、較大的容器、更大的環狀,以及更精細的資料視覺化內容,讓使用者一目瞭然。
提高可用性
使用額外的螢幕空間,提供更大型的輕觸目標、更大的視覺階層,以及內容項目之間有額外空間,讓介面更容易且更容易互動。
最佳化組合
運用我們的新版元件和範本,為各種螢幕大小的使用者介面提供更優質的外觀和風格。

應用程式品質

我們的品質規範共分為三個等級,只要遵守這三個層級的指南,即可為使用者提供最佳體驗。

品質指南

適用於各種螢幕大小
請確保您的應用程式在各種尺寸的螢幕上提供優質體驗。建立能充分利用可用應用程式空間的版面配置。

立即開始

回應式和最佳化調整
透過支援這項功能的裝置為使用者提供更多內容,並採用能配合不同螢幕大小自動調整的回應式版面配置。

立即開始

彈性調整且與眾不同
運用中斷點,在大螢幕裝置上提供強大的新體驗,這是比小螢幕裝置無法達到的,也能充分發揮額外空間。

立即開始

運用現有的標準版面配置

使用已建立的標準化版面配置,讓 UI 在各種裝置大小的螢幕上都能順暢調整。

標準版面配置經過精心開發,可在所有螢幕大小上提供優質體驗。

標準化版面配置