沉浸式清單

沉浸式清單是所選項目的一列內容和預覽畫面。以更大的可視區域顯示內容。

資源

類型	連結	狀態
設計	設計來源 (Figma)	可用
導入作業	Jetpack Compose	可用

重點特色

• 動態內容預覽。當使用者瀏覽內容列時，預覽區域會自動更新以顯示目前聚焦的項目。
• 沉浸式清單元件可顯示較大的可視區域，以便顯示內容，讓使用者更容易查看和瞭解焦點項目的視覺細節。
• 沉浸式清單可提供焦點項目的相關背景資訊，協助使用者在不離開瀏覽體驗的情況下做出明智的決定。
• 沉浸式清單元件採用漸進式揭露方式，在使用者瀏覽時顯示更多內容相關詳細資料，減少認知負荷並維持使用者參與度。
• 沉浸式清單元件可確保應用程式間的一致互動，為使用者提供熟悉且可預測的體驗。

圖解

1. 圖片背景
2. 內容區塊
3. 聚焦資訊卡
4. 內容格線

1. 電影動態紗罩
2. 海報
3. 背景顏色

規格

行為

在沉浸式清單中切換資訊卡時，所選資訊卡的詳細資料會逐漸顯示在背景中。

當沉浸式清單處於聚焦狀態時，其高度會增加，顯示其他資訊 (例如背景標題和說明)，如以下影片所示。

適用情境

如果想要將注意力放在精選內容或宣傳內容 (例如新發行的作品、熱門節目或專屬名稱)，請使用沉浸式輪轉介面。較大的可視區域和動態預覽能讓您以吸引人的方式展示這些高優先順序的項目。

圖片顯示

1. 資訊卡焦點：當使用者瀏覽輪轉介面時，系統會以視覺元素強調資訊卡，並以 1.1 縮放資訊卡、使用邊框和其他視覺提示，以表示已選取的高度。請確保聚焦資訊卡縮圖的內容標題清晰可辨且易於閱讀。
2. 背景圖片：當資訊卡正在聚焦時，較大的可視區域會顯示對應的背景圖片。我們建議使用這個背景圖片的高畫質與視覺效果，因為這張圖片能為內容提供引人入勝的沉浸式背景幕。

樂曲

為確保在沉浸式清單元件中做為背景使用的圖片品質良好，請務必適當縮放圖片，以免圖片模糊不清或變形。

顯示比例

請盡可能使用 16:9 的背景圖片比例，確保版面配置看起來美觀且一致。