第 2 級:回應式和最佳化

採用回應式版面配置,並自動調整為不同螢幕尺寸的應用程式,可為使用者提供額外價值,並提供更有效率、更吸引人的使用者體驗。

回應式版面配置可動態調整按鈕、文字欄位和對話方塊等元素的格式和位置,提供最佳使用者體驗。運用回應式設計做法,自動為應用程式使用者提供大螢幕的額外價值。無論是讓使用者一目瞭然的文字更多、螢幕上可執行的動作更多,還是可輕鬆觸碰的目標更大,回應式做法都能為大螢幕使用者提供更優質的體驗。

透過回應式設計增加價值

  • 使用內建回應式和自適應行為的 M3 Compose 元件程式庫。
  • 使用回應式版面配置,自動流暢調整,以填滿各螢幕尺寸的可用空間。
  • 為了填滿額外空間而延展 UI 元素,包括文字欄位、按鈕、對話方塊
  • 除非字型主要用於圖像,否則請放大字型大小。

為 Wear OS 建構回應式應用程式和資訊方塊

無論在哪種大小的螢幕上算繪,回應式 UI 都會延伸及變更,盡可能善用所有可用的螢幕空間。

在圓形螢幕上設計回應式版面配置時,捲動和非捲動檢視畫面各有獨特需求,以維持使用者介面元素的縮放比例,並維持平衡的版面配置和組合。針對捲動檢視畫面,請使用百分比定義所有頂端、底部和側邊邊界,以免遭到裁剪,並提供元素的比例縮放功能。針對非捲動檢視畫面,請使用百分比和垂直限制來設定所有邊界。這樣一來,中間的主要內容就能延伸至可用區域。

捲動檢視畫面

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

不可捲動的檢視畫面

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

範例

以下圖片顯示回應式及最佳化應用程式的範例。

邊緣貼合按鈕

資訊卡清單

切換器和按鈕清單

含圖片資訊卡的方塊

含圖片的卡片清單

含有圖表的圖塊