沉浸式清單是一列內容以及所選項目的預覽畫面。這個版本的可視區域較大。
資源
類型 | 連結 | 狀態 |
---|---|---|
設計 | 設計來源 (Figma) | 可使用 |
導入作業 | Jetpack Compose | 可使用 |
重點特色
- 動態內容預覽。當使用者瀏覽內容列時,預覽區域會自動更新,顯示目前聚焦的項目。
- 沉浸式清單元件提供較大的可視區域,方便使用者查看聚焦項目的視覺詳細資料,
- 沉浸式清單會提供聚焦項目的相關和背景資訊,協助使用者做出明智的決策,而不會離開瀏覽體驗。
- 沉浸式清單元件採用漸進式揭露機制,可在使用者瀏覽內容時,顯示內容更多詳細資料,減少認知負載,並維持使用者參與度。
- 沉浸式清單元件可確保應用程式上的互動一致,讓使用者享有熟悉且可預測的體驗。
圖解
- 圖片背景
- 內容封鎖
- 聚焦資訊卡
- 內容格線
- 電影動態紗罩
- 海報
- 背景顏色
規格
行為
在沉浸式清單中的資訊卡間瀏覽時,所選資訊卡的詳細資料會在背景中逐步顯示。
沉浸式清單在焦點時,高度會增加以顯示其他資訊,例如背景標題和說明,如以下影片所示。
使用方式
如果您希望吸引使用者註意精選內容或宣傳內容,例如新上架、熱門節目或專屬名稱,請使用沉浸式輪轉介面。較大的可視區域和動態預覽 有助於展示這些高優先順序項目
圖片顯示
- 資訊卡焦點:當使用者瀏覽輪轉介面時,聚焦的資訊卡會經過強調、將資訊卡放大 1.1、使用邊框,以及其他視覺提示做為表示選項的高度。確保聚焦資訊卡縮圖的內容標題清晰顯示並易於閱讀。
- 背景圖片:當資訊卡處於焦點時,較大的可視區域會顯示對應的背景圖片。這個背景圖片能為內容提供身歷其境的沉浸式背景,因此建議您使用高品質且引人注目的圖片。
樂曲
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/immersive-list/immersive-list-image-composition-do.webp?authuser=3&hl=zh-tw)
正確做法
縮放畫面及右上角拍攝主體的位置,提供如電影般的體驗。
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/immersive-list/immersive-list-image-composition-dont.webp?authuser=3&hl=zh-tw)
錯誤做法
避免使用全螢幕裁剪功能,導致內容下方的主體遭到裁剪。
為確保沉浸式清單元件中做為背景的圖片看起來沒問題,請務必適當縮放,避免圖片模糊或變形。
顯示比例
請盡可能讓背景圖片使用 16:9 比例,以確保視覺效果一致且一致的版面配置。