版面配置是結構範本,可提供用來維護 應用程式的視覺一致性定義視覺化格線、間距 版面配置、版面配置和版面配置的 資訊和 UI 元素的呈現方式
![版面配置的封面圖片](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/cover-layouts.webp?authuser=0000&hl=zh-tw)
重點特色
- 與網頁或行動裝置不同的是,電視的螢幕固定顯示比例是 16:9。
- 沿著水平和垂直軸將版面配置最佳化,使用起來更加方便 同時人類得以適當指引和控管
原則
這些指南可協助您在設計電視版面配置時做出設計決策。
![大螢幕裝置的設計](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/design-for-large-screens.webp?authuser=0000&hl=zh-tw)
針對大螢幕設計
由於 HDTV 廣受大眾歡迎,長寬比為 16:9 的矩形電視已成為主流。電視螢幕以往是以長寬比 4:3 或 1.33 到 1 的正方形格式製造。
![專為 Android 設計](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/design-on-android-platform.webp?authuser=0000&hl=zh-tw)
在 Android 平台上設計
設計時,如同其他 Android 裝置,請使用 dp 來顯示元素,以便在不同密度的螢幕上保持一致。設計時請一律採用 MDPI 解析度,解析度為 960px * 540px。
MDPI 1px = 1dp。
素材資源必須呈現 1080p 的畫質。這可讓 Android 系統視需要將版面配置元素縮減為 720p。
![確保資訊清楚可見](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/ensuring-visibility-and-overscan-safety.webp?authuser=0000&hl=zh-tw)
確保可見性和過度掃描安全
確保使用者隨時能看見重要元素。如要這麼做,請將元素置於左側和右側為 5% 的 5%,以及版面配置頂端和底部 27dp 的位置。這可確保版面配置的畫面元素位於過度掃描內。
![填滿整個全螢幕](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/fill-the-full-screen.webp?authuser=0000&hl=zh-tw)
填滿整個全螢幕
請勿調整或裁剪背景螢幕元素至過度掃描安全區域。請改為允許部分畫面外元素顯示。這可確保所有螢幕都能正確顯示背景和畫面外元素。
![使用軸進行最佳化](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/optimize-with-axes.webp?authuser=0000&hl=zh-tw)
使用軸進行最佳化
考量使用者如何搭配電視使用遙控器。確認電視介面可以輕鬆與遙控器搭配使用。設計每個方向 (向上、向下、向左、向右) 應以清楚的用途與瀏覽模式,協助使用者瞭解如何切換大型選項。
版面配置
電視的螢幕大小因裝置而異。因為現代電視 長寬比 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 顯示),請參閱資訊卡中的說明 建議的元件版面配置和預覽畫面
版面配置結構
以下提供一些版面配置結構,協助您製作更出色的內容 因此在設計電視版面配置時 必須考量一些因素只要將電視螢幕水平分成兩個方向, 有助於區分不同類型的元件 階層和導覽邏輯一個窗格可以包含多個單位欄。 每個面板皆可代管不同的版面配置模式,例如堆疊版面配置 以及格線版面配置
![單一窗格版面配置範例](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/single-pane-layout.webp?authuser=0000&hl=zh-tw)
單一窗格版面配置
單窗格版面配置有助於吸引使用者註意主要內容。並搭配以內容為主的體驗和重要資訊頁面。
![雙窗格版面配置範例](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/two-pane-layout.webp?authuser=0000&hl=zh-tw)
雙窗格版面配置
如果頁面顯示階層式內容,雙窗格版面配置的成效會更好。在以任務為中心的體驗中廣泛使用。
認知過載
內容冗長且不清楚的內容,可能會讓使用者感到困惑、困惑,並產生負面思考 提高參與度設計易於瀏覽、保持簡潔又有條不紊的設計 只提供必要資訊
避免使用過多面板來分類內容。這會建立 讓使用者產生不必要的認知負載和階層
![](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/layout-do.webp?authuser=0000&hl=zh-tw)
正確做法
![](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/layout-dont.webp?authuser=0000&hl=zh-tw)
錯誤做法
快速階層結構與導覽
面板會以視覺化方式分隔並整理內容。有助引導使用者 並打造更直覺化的介面,提升使用體驗。
![](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/two-pane-layout.webp?authuser=0000&hl=zh-tw)
正確做法
![](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/hierarchy-dont.webp?authuser=0000&hl=zh-tw)
錯誤做法
版面配置範本
版面配置範本可提高順序、一致性和熟悉度。設計 提供舒適的 UI 體驗,清楚 以及他們可以造訪的地方
瀏覽
瀏覽器範本顯示媒體內容「叢集」或是垂直堆疊中的多個資料列使用者可以向上或向下瀏覽資料列,然後向左或向右瀏覽,即可瀏覽特定資料列的內容。
![瀏覽](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/browse.webp?authuser=0000&hl=zh-tw)
左側疊加層
左側導覽面板會在畫面左側顯示重疊面板。這類元件通常會呈現的導覽或項目,方便您根據背景內容採取行動。
![左側疊加層](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/left-overlay.webp?authuser=0000&hl=zh-tw)
右側重疊
右側疊加層範本會在畫面右側顯示重疊面板。這通常會顯示您有權對內容採取動作的項目,與背景內容無關。
![右側重疊](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/right-overlay.webp?authuser=0000&hl=zh-tw)
置中重疊
中央疊加層範本顯示會重疊在現有檢視畫面上方的強制回應元素。用於傳達緊急資訊或促使我們做出決定。
![置中重疊](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/center-overlay.webp?authuser=0000&hl=zh-tw)
底部疊加
底部重疊範本通常用於底部功能表。底部功能表是包含補充內容的介面,這些內容會固定在畫面底部。可讓您建立迷你流程,而不會遺失目前頁面的結構定義。
![底部疊加](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/bottom-overlay.webp?authuser=0000&hl=zh-tw)
動作
動作範本會在左側顯示標題和副標題,右側是選項或動作。通常會要求使用者使用這個範本執行選項或執行特定動作。
![動作](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/actions.webp?authuser=0000&hl=zh-tw)
內容詳情
內容詳細資料範本會以水平堆疊版面配置顯示內容。內容通常包含標題、中繼資料、簡短說明、快速操作和相關資訊叢集。
![內容詳情](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/content-detail.webp?authuser=0000&hl=zh-tw)
編譯
編譯範本會在右側面板顯示 Podcast 等項目的詳細資料和元素 (例如節目的劇集)。
![編譯](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/compilation.webp?authuser=0000&hl=zh-tw)
格線
格狀範本會以井然有序的格線顯示內容集合。這類應用程式會以清楚的遠端導覽邏輯展現內容,提供最佳瀏覽體驗。
![格線](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/grid-example.webp?authuser=0000&hl=zh-tw)
快訊
快訊範本會顯示全螢幕訊息。一般來說,你需要採取行動取消快訊並返回上一個畫面。
![快訊](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/alert.webp?authuser=0000&hl=zh-tw)
資訊卡欄
1 張資訊卡版面配置
資訊卡寬度 - 844dp
![1 張資訊卡版面配置](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/1-card.webp?authuser=0000&hl=zh-tw)
雙卡版面配置
資訊卡寬度 - 412dp
![雙卡版面配置](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/2-card.webp?authuser=0000&hl=zh-tw)
3 張資訊卡版面配置
資訊卡寬度 - 268dp
![3 張資訊卡版面配置](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/3-card.webp?authuser=0000&hl=zh-tw)
4 卡版面配置
資訊卡寬度 - 196dp
![4 卡版面配置](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/4-card.webp?authuser=0000&hl=zh-tw)
5 卡版面配置
資訊卡寬度 - 124dp
![5 卡版面配置](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/5-card.webp?authuser=0000&hl=zh-tw)