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