標準自動調整設計版面配置

這些標準化版面配置是經過實證、功能多元的應用程式版面配置,可在大螢幕裝置上提供最佳使用者體驗。

資訊方塊

資訊方塊可讓使用者快速存取必要資訊和動作,流暢地處理大小事務。使用者只要滑動錶面,就能掌握自己的健身目標進度、查看天氣資訊,以及執行其他操作。例如透過資訊方塊快速啟動應用程式或完成重要工作。

使用我們的元件和樣式進行自訂

您可以將品牌樣式套用至特定元件。包括主要顏色、應用程式圖示、字型、圖示,以及所有適用於資訊方塊體驗的視覺素材資源。

建構回應式版面配置 (固定高度和百分比邊界)

為了配合大螢幕調整程式碼和設計版面配置,我們已更新這些版面配置,使其內建回應式行為,包括以百分比為依據的邊界和邊框間距。如果您使用我們的範本,就能自動透過 Tiles API 繼承這些更新,而您只需提供在螢幕大小中斷點之後加入其他內容或元件的版面配置。如需瞭解如何利用較大螢幕大小的完整指南和建議,請參閱資訊方塊指南。

所有範本都使用兩個預設螢幕大小中斷點:192dp 和 225dp。系統會依據螢幕大小,將邊界設為百分比值,以使資料列填滿可用空間,但不會增加到太遠,以覆蓋頂端和底部的曲線畫面。資訊方塊的螢幕高度固定,因此我們調整了邊框間距,以充分利用有限的螢幕空間,避免建立不必要的裁剪。

兩個主要範本 (主要版面配置和邊緣內容版面配置 (含進度環)) 有不同的邊界,但所有設計版面配置都是為了對應至其中一種範本。每個資訊方塊有三個主要區塊,以及分配給各圖塊的運算單元。在某些情況下,可能會發生額外的內建邊界和邊框間距,以協助內容填滿可用空間,同時維持一目瞭然且平衡的設計。

打造與眾不同的體驗

提供四個主要的標準化版面配置,且內建 80 種以上的排列組合,可以提供幾乎無限制的自訂項目。資訊方塊是以以版位為基礎的系統建構而成,因此您可以將標準版面配置中的版位替換為任何所選內容。在這種情況下,請維持回應式行為,並遵循我們的設計建議。

這些自訂項目應受到限制,而且不應破壞資訊方塊範本的結構。這是為了確保使用者在 Wear OS 裝置上捲動資訊方塊輪轉介面時保持一致性。

在較大螢幕上的大小中斷點後方新增值

為了在較大螢幕大小上使用額外空間,請新增大小中斷點為 225dp。這個中斷點可讓您顯示其他內容、加入更多按鈕或資料,或是變更版面配置,以便更適合大螢幕。

捲動和非捲動應用程式版面配置

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

非捲動式應用程式版面配置

標準版面配置和全螢幕元件 (包括媒體和健身)

非捲動的應用程式檢視畫面版面配置包括媒體播放器、確認對話方塊、挑選器、切換工具,以及使用進度指標的特殊健身或追蹤畫面。您可以限制任何畫面的高度,確保使用者聚焦於單一工作或一組控制項,而不必瀏覽選項清單。如要配合螢幕大小較小的裝置,設計應用程式時請考量尺寸有限,並確保其一目瞭然,並採用合適的圓形螢幕。

回應能力指南 (百分比邊界)

定義所有邊界,並定義垂直限制,讓中間的主要內容可以延伸,以填滿可用的顯示區域。

建議您在設計時將非捲動畫面分割為頂端、中間和底部部分。如此一來,您就可以在頂端和底部區段新增內邊界,以避免遭到裁切,但可讓中間部分充分利用螢幕的寬度。在螢幕受限時,建議您使用旋轉捲動按鈕來控制螢幕元素,因為單獨輕觸互動可能無法提供最佳體驗。

打造與眾不同的體驗

非捲動式版面配置可以自訂,但在畫面上新增的內容量及效果最好。使用 IconButtons 而非 Chips,可充分利用有限空間,而 ProgressIndicators 和大型資料點等視覺化圖形有助於以圖形呈現重要資訊。

所有遮住螢幕邊框的元素,都會自動隨著螢幕大小自動調整,影響程度。

如何在大螢幕大小的中斷點後方新增值

針對較大的螢幕尺寸建立回應式設計時,非捲動應用程式版面配置可充分運用額外的螢幕空間。現有元素可以擴大以填滿額外空間,改善可用性,元件和內容則可在螢幕大小中斷點後顯示。

以下列舉幾個例子:

  • 媒體播放器可以使用額外的按鈕或更大的控制項。
  • 確認對話方塊可以提供插圖或更多資訊。
  • 健身螢幕可以取得其他指標,元素可能會放大。

捲動應用程式版面配置

標準版面配置

捲動應用程式檢視畫面的版面配置包括清單 (ScalingLazyColumn) 和對話方塊。這些版面配置可構成大部分的應用程式畫面,代表一組需要配合較大螢幕大小調整的元件。

檢查元件是否有回應式,也就是是否填滿可用寬度,並在螢幕高度可用時採用 ScalingLazyColumn 調整。這些版面配置已經建立回應式設計,我們還提供了一些額外建議,協助您進一步善用擴展的實體狀態。

回應能力指南 (百分比邊界)

所有頂端、底部和側邊邊界都應以百分比定義,以避免裁剪,並提供元素的比例縮放。您會發現,當使用者捲動畫面時,PositionIndicator 就會出現,而且不論螢幕大小為何,其邊框都會自動遮住螢幕邊框。

打造與眾不同的體驗

捲動檢視畫面提供高度自訂功能,可以按照任何順序加入任何元件組合。

頂部和底部邊界可以根據元件位於頂端和底部的元件而改變。這是為了避免畫面持續增加的曲線遭到裁剪。

在大型螢幕上的中斷點後方新增值

由於捲動版面配置會自動顯示更多先前隱藏在螢幕摺疊下方的內容,因此您不必手動新增值。每個元件都會填滿可用寬度,在某些情況下,元件可能會產生額外的文字列 (例如資訊卡),或延伸元件以填滿可用寬度 (例如圖示按鈕)。