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