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