版面配置是結構範本，可提供架構來維持應用程式之間的視覺一致性。透過定義視覺格線、間距和區段，版面配置可以建立連貫且井然有序的結構，以呈現資訊和 UI 元素。
重點特色
- 與網路或行動裝置不同的是，電視的螢幕長寬比為 16:9。
- 沿著水平軸和垂直軸最佳化版面配置，使用起來更方便。
原則
設計電視版面配置時，您可以參考這些指南來做出設計決定。
針對大螢幕設計
自 HDTV 廣受歡迎，顯示比例為 16:9 的矩形電視已成為常態。電視過去是以 4:3 或 1.33 至 1 的正方形形狀製作。
在 Android 平台上設計
設計時，請使用 dp 以在不同密度的螢幕上，一致顯示元素，就像任何其他 Android 裝置一樣。設計時，請一律採用 MDPI 解析度為 960 像素 * 540 像素。
在 MDPI 1px = 1dp 時。
素材資源必須為 1080p。這可讓 Android 系統視需要將版面配置元素縮減至 720p。
確保資料顯示情形和監控功能安全
確保使用者隨時能看到重要元素。做法是將元素放在左側和右側邊界 48dp 的邊界為 5%，並在版面配置的頂端和底部保留 27dp。這可確保版面配置的畫面元素位於過度掃描範圍。
填滿全螢幕
請勿為遮蔽安全區域調整或裁剪背景元素。建議您改為顯示部分畫面外元素。這可確保所有螢幕畫面都能正確顯示背景和畫面外元素。
使用軸進行最佳化
考量使用者如何透過電視使用遙控器。確認電視介面能輕鬆與遙控器搭配使用。設計每個方向 (向上、向下、向左、向右) 的設計應以明確的目的和導覽模式，協助使用者瞭解如何瀏覽眾多選項。
版面配置
電視螢幕大小會因裝置而異。由於新型電視的長寬比為 16:9，因此建議您在設計應用程式時，將螢幕大小設為 960 x 540 像素。這可確保所有元素都能按照 HD 高畫質或 4K 螢幕上的比例調整。
過度掃描邊界
過度掃描邊界是指內容之間的空間，以及螢幕左側和右側邊緣。
960 * ~5% = 48dp
540 * ~5% = 27dp round off to 24dp
這些邊框邊界可避免主要元素發生過度掃描問題。為確保內容和資訊的安全，請使用 5% 的邊界版面配置 (側邊 58dp，頂端和底部邊緣為 28dp)。
欄和溝槽
內容會放在畫面中有欄和溝槽的區域。網格系統有 12 欄。溝槽是欄之間的空格，有助於分割內容。
使用寬度為 52dp 的 12 欄，並在各欄之間保留 20dp 的空間。兩側都要有 58dp 的空間，以及行之間有 4dp 的垂直間距。
版面配置模式
您可以根據預定用途和顯示裝置，採用三種版面配置模式：水平堆疊版面配置、垂直堆疊版面配置和格線版面配置。
水平堆疊版面配置
水平堆疊版面配置會水平排列元件。大小、長寬比和格式都可能不同。此版面配置通常用於將內容和元件分組。
垂直堆疊版面配置
垂直堆疊版面配置會以垂直方式排列元件，因此能夠彈性調整大小、比例和格式。通常用於將各種類型的文字、互動式元件和版面配置模式分組。
格線版面配置
格線是相交的欄和列集合，格線版面配置會在此格線中顯示內容。並以符合邏輯的方式排列內容 方便使用者瀏覽和瀏覽
為避免重疊，請務必考量項目之間的邊框間距，以及聚焦狀態的尺寸增加。例如醒目顯示聚焦的元件 (例如資訊卡) 時。如果您使用我們建議的格狀版面配置 (12 欄為 52dp，溝槽為 20dp)，請參閱資訊卡，瞭解建議的元件版面配置和預覽畫面。
版面配置結構
以下提供一些版面配置結構，協助您在設計電視版面配置時做出更明智的決策。水平分割電視螢幕，有助於區分不同類型的元件，以及通訊資訊階層和導覽邏輯。窗格可包含多個單位欄。每個面板都能代管不同的版面配置模式，例如 Stack Layout 和 Grid Layout。
單一窗格版面配置
單一窗格版面配置有助於將注意力放在主要內容上。與內容導向體驗和重要資訊頁面搭配使用。
雙窗格版面配置
當頁面顯示階層式內容時，雙窗格版面配置的成效較佳。廣泛用於以任務為主的體驗。
認知超載
複雜且不清楚的內容可能會導致使用者產生混淆、不安或參與度。讓您的設計一目瞭然、保持井然有序，且只呈現重要資訊。
避免使用過多面板將內容分組。這會造成不必要的認知負載，並對使用者產生了階層結構。
正確做法
錯誤做法
Express 階層與導覽
面板在視覺上分隔並整理內容。它們有助於引導使用者，也能建立更直覺化的介面來提升體驗。
正確做法
錯誤做法
版面配置範本
版面配置範本可提升順序、一致性和熟悉度。這項設計可以打造舒適的 UI 體驗，清楚指出使用者的位置和可前往的位置。
Browse
瀏覽器範本會顯示媒體內容「叢集」或垂直堆疊中的資料列。使用者可以上下瀏覽來瀏覽資料列，而左右瀏覽則可瀏覽特定資料列的內容。
左側重疊
左側導覽面板會在畫面左側顯示重疊面板。通常會顯示可與背景內容相關的導覽或項目。
右側重疊
右側疊加層範本會在畫面右側顯示重疊面板。這類內容通常會顯示你進行操作的項目，與背景內容無關。
中心重疊
中央重疊範本會顯示強制回應元素，疊加在現有檢視畫面上方。用於傳達緊急資訊或提示決策。
底部重疊
底部重疊範本經常用於底部功能表。底部功能表是包含錨定在畫面底部的補充內容。可讓你建立簡短的流程，同時保留目前網頁的結構定義。
動作
動作範本會在左側顯示標題和子標題，並在右側顯示選項或動作。系統通常會要求使用者啟用範本或執行操作。
內容詳情
內容詳細資料範本會在水平堆疊版面配置中顯示內容。內容通常包括標題、中繼資料、簡短說明、快速操作和相關資訊叢集。
編譯
編譯範本會在畫面左側顯示 Podcast 等項目的詳細資料，並在右側面板中顯示相關元素 (例如單集節目)。
格線
格狀範本會以井然有序的格狀顯示內容集合。這個程式庫會以清楚的遠端導覽邏輯展示內容，提供最佳瀏覽體驗。
快訊
快訊範本會顯示全螢幕訊息。通常需要採取行動才能解除封鎖快訊並返回上一個畫面。
資訊卡欄
1 張資訊卡版面配置
資訊卡寬度 - 844dp
2 張資訊卡版面配置
資訊卡寬度 - 412dp
3 張資訊卡版面配置
資訊卡寬度 - 268dp
4 卡版面配置
資訊卡寬度 - 196dp
5 張資訊卡版面配置
資訊卡寬度 - 124dp
