版面配置是結構範本,可提供一個架構,以維持應用程式的視覺一致性。版面配置定義視覺格線、間距和區段後,便會為資訊和 UI 元素呈現建立一致且井然有序的結構。
![版面配置的封面圖片](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/cover-layouts.webp?authuser=3&hl=zh-tw)
重點特色
- 不同於網路或行動裝置,電視的螢幕顯示比例固定為 16:9。
- 根據水平和垂直軸將版面配置最佳化,以便使用和控制。
開發原則
這些指南可協助您在設計電視版面配置時做出設計決定。
![針對大螢幕設計](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/design-for-large-screens.webp?authuser=3&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=3&hl=zh-tw)
利用 Android 平台進行設計
設計時請使用 dp,以便在不同密度的螢幕上以等方式顯示元素,就像使用其他 Android 裝置一樣。設計時請一律為 MDPI 解析度為 960 像素 * 540 像素。
於 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=3&hl=zh-tw)
確保資訊可見度和過度掃描安全
確保使用者一律能看到重要元素。做法如下:這可以確保版面配置的畫面元素在過度掃描範圍內。
![全螢幕](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/fill-the-full-screen.webp?authuser=3&hl=zh-tw)
全螢幕
請勿調整或裁剪背景畫面元素至遮蔽安全區域。而是允許顯示部分畫面外元素。這可確保所有螢幕都能正確顯示背景和畫面外元素。
![以軸線進行最佳化](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/optimize-with-axes.webp?authuser=3&hl=zh-tw)
以軸線進行最佳化
想想使用者如何搭配電視使用遙控器。確認電視介面能輕鬆與遙控器搭配使用。每種方向 (上、下、左、右) 皆應有明確的目的和導覽模式,藉此協助使用者瞭解如何瀏覽大量選項。
版面配置
電視的螢幕大小會因裝置而異。由於新型電視的顯示比例為 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),請參閱建議元件版面配置和預覽的資訊卡。
版面配置結構
以下是一些版面配置結構,有助於您在設計電視版面配置時做出更妥善的決定。藉由水平分割電視畫面,有助於區分不同類型的元件,傳達資訊階層及瀏覽邏輯。一個窗格可以包含多個單位欄。每個面板都可以代管不同的版面配置模式,例如堆疊版面配置和格線版面配置。
![單窗格版面配置範例](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/single-pane-layout.webp?authuser=3&hl=zh-tw)
單窗格版面配置
單一窗格版面配置有助於吸引讀者註意主要內容。請將其用於提供內容導向的體驗和重要資訊頁面。
![雙窗格版面配置範例](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/two-pane-layout.webp?authuser=3&hl=zh-tw)
雙窗格版面配置
使用雙窗格版面配置時,使用階層式內容時的效能會更好。廣泛用於以工作為重的體驗。
認知超載
複雜且不清楚的內容可能會造成混淆、令人不悅,並降低參與度。讓您的設計容易遭掃描、保持簡潔,只呈現重要資訊。
避免使用過多面板將內容分組。這會為使用者產生不必要的認知負載和階層。
![](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/layout-do.webp?authuser=3&hl=zh-tw)
正確做法
![](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/layout-dont.webp?authuser=3&hl=zh-tw)
錯誤做法
快速階層與導覽
面板會以視覺方式分隔內容,以便整理內容。不僅可以引導使用者,也可以建立更直覺化的介面,進而提升使用者體驗。
![](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/two-pane-layout.webp?authuser=3&hl=zh-tw)
正確做法
![](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/hierarchy-dont.webp?authuser=3&hl=zh-tw)
錯誤做法
版面配置範本
版面配置範本可提高順序、一致性和熟悉度。這個設計可提供舒適的 UI 體驗,清楚傳達使用者的位置和目的地。
瀏覽
瀏覽器範本會顯示媒體內容「叢集」或垂直堆疊中的多列。使用者可以上下瀏覽資料列,然後左右瀏覽即可瀏覽特定資料列的內容。
![瀏覽](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/browse.webp?authuser=3&hl=zh-tw)
左側疊加層
左側導覽面板會在畫面左側顯示重疊面板。這類項目通常會顯示與內容相關的導覽或項目,方便你採取行動。
![左側疊加層](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/left-overlay.webp?authuser=3&hl=zh-tw)
右側疊加層
右側重疊範本會在畫面右側顯示重疊面板。這個頁面通常會顯示您尋找的項目與背景內容無關的項目。
![右側疊加層](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/right-overlay.webp?authuser=3&hl=zh-tw)
置中重疊
中央疊加層範本會在現有檢視畫面上方顯示強制回應元素。用於傳達緊急資訊或提示使用者做出決定。
![置中重疊](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/center-overlay.webp?authuser=3&hl=zh-tw)
底部重疊
底部重疊範本通常用於底部功能表。底部功能表是一種表面,包含固定在畫面底部的補充內容。這種做法可讓你建立迷你流程,而不會失去目前頁面的背景資訊。
![底部重疊](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/bottom-overlay.webp?authuser=3&hl=zh-tw)
動作
動作範本會在左側顯示標題和子標題,並在右側顯示選項或動作。使用者通常會要求或用這個範本做出選擇或執行動作。
![動作](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/actions.webp?authuser=3&hl=zh-tw)
內容詳情
內容詳細資料範本會在水平堆疊版面配置中顯示內容。內容通常包含標題、中繼資料、簡短說明、快速操作和相關資訊叢集。
![內容詳情](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/content-detail.webp?authuser=3&hl=zh-tw)
編譯
編譯範本會在畫面左側顯示 Podcast 等項目的詳細資料,以及相關元素 (例如節目劇集)。
![編譯](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/compilation.webp?authuser=3&hl=zh-tw)
GRid
格狀範本會以井然有序的格狀方式顯示內容集合。透過明確的遠端導覽邏輯,提供最佳的瀏覽體驗。
![GRid](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/grid-example.webp?authuser=3&hl=zh-tw)
快訊
快訊範本會顯示全螢幕訊息。通常需要採取行動來解除封鎖快訊,並返回上一個畫面。
![快訊](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/alert.webp?authuser=3&hl=zh-tw)
資訊卡欄
1 個資訊卡版面配置
資訊卡寬度 - 844dp
![1 個資訊卡版面配置](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/1-card.webp?authuser=3&hl=zh-tw)
2 張資訊卡版面配置
資訊卡寬度 - 412dp
![2 張資訊卡版面配置](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/2-card.webp?authuser=3&hl=zh-tw)
3 張資訊卡版面配置
資訊卡寬度 - 268dp
![3 張資訊卡版面配置](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/3-card.webp?authuser=3&hl=zh-tw)
4 張資訊卡版面配置
資訊卡寬度 - 196dp
![4 張資訊卡版面配置](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/4-card.webp?authuser=3&hl=zh-tw)
5 張資訊卡版面配置
資訊卡寬度 - 124dp
![5 張資訊卡版面配置](https://developer.android.google.cn/static/design/ui/tv/guides/styles/images/layouts/5-card.webp?authuser=3&hl=zh-tw)