版面配置是結構範本，可提供在整個應用程式間維持視覺一致性的架構。透過定義視覺化格線、間距和區塊，版面配置可以建立有條理且有條理的結構，以便顯示資訊和 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 中應顯示空白邊)，請參閱建議的元件版面配置和預覽的資訊卡。
版面配置結構
以下提供一些版面配置結構，協助您在設計電視版面配置時做出更好的決策。將電視畫面水平分割，有助於區隔不同類型的元件，傳達資訊階層和導覽邏輯。窗格可以包含多個單位欄。 每個面板都可以代管不同的版面配置模式，例如堆疊版面配置和格狀版面配置。
單窗格版面配置
單窗格版面配置有助於提高主要內容的注意力。可搭配內容導向體驗和重要資訊頁面使用。
雙窗格版面配置
如果頁面顯示階層內容，雙窗格版面配置的成效較佳。廣泛用於工作導向體驗。
認知超載
複雜且不清楚的內容可能導致混淆、困擾，並降低參與度。讓設計易於掃描、保持簡潔且僅顯示重要資訊。
避免使用過多面板來將內容分組。這會導致使用者產生不必要的認知負載和階層。
正確做法
錯誤做法
快速階層結構與導覽
面板會以視覺化方式區隔和整理內容。不但有助於引導使用者，並打造更直覺易用的介面，改善使用體驗。
正確做法
錯誤做法
版面配置範本
版面配置範本可提升順序、一致性和熟悉度。這項設計打造出舒適的 UI 體驗，能夠清楚傳達使用者的位置和導向位置。
瀏覽
瀏覽器範本會以垂直堆疊顯示媒體內容「叢集」或資料列。使用者可以透過上下捲動的方式瀏覽資料列，而左右瀏覽則可瀏覽特定資料列的內容。
左側重疊
左側導覽面板範本會在畫面左側顯示重疊面板。通常會顯示導覽或可處理背景內容的項目。
右側重疊
右側重疊範本會在畫面右側顯示重疊面板。通常會顯示在背景中單獨顯示內容的項目。
中央重疊
中央重疊範本顯示強制回應元素，疊加在現有檢視區塊上方。用於傳達緊急資訊或提示決定。
底部重疊
底部重疊範本常用於底部功能表。底部功能表是固定在畫面底部的輔助內容，這些元件可讓你建立迷你流程，而不會失去目前頁面的內容。
動作
動作範本左側顯示標題和副標題，右側為選項或動作。使用者通常會使用這個範本選擇要不要做什麼，或執行什麼操作。
內容詳情
內容詳細資料範本會在水平堆疊版面配置中顯示內容。內容通常包括標題、中繼資料、簡短說明、快速操作和相關資訊叢集，
編譯
編譯範本會在畫面左側顯示項目 (例如 Podcast) 的詳細資料和元素 (例如劇集)。
格線
格狀範本會以分類格方式顯示內容集合。它以清楚的遠端導覽邏輯和最佳瀏覽體驗來展示內容。
快訊
快訊範本會顯示全螢幕訊息。通常需要採取行動解除封鎖快訊，並返回上一個畫面。
資訊卡欄
1 張資訊卡版面配置
資訊卡寬度 - 844dp
2 張資訊卡版面配置
資訊卡寬度 - 412dp
3 卡版面配置
資訊卡寬度 - 268dp
4 卡版面配置
資訊卡寬度 - 196dp
5 卡版面配置
資訊卡寬度 - 124dp
