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