沉浸式清單

沉浸式清單是由一系列內容結合而成 已選取的項目。在較大的可視區域中提供內容。

資源

類型	連結	狀態
設計	設計來源 (Figma)	可使用
實作	範例	無

重點特色

• 動態內容預覽。當使用者瀏覽至 內容，預覽區域會自動更新，以顯示 目前焦點所在的項目。
• 沉浸式清單元件的可視區域較大 方便使用者觀看與互動 焦點所指項目的視覺細節
• 沉浸式清單會提供相關和情境資訊 協助使用者做出明智的決定 離開瀏覽體驗的可能性。
• 沉浸式清單元件使用漸進式揭露功能來揭露 關於使用者瀏覽內容的詳細資訊，減少認知 以及維持使用者參與度
• 沉浸式清單元件可確保應用程式間的互動保持一致。 提供使用者熟悉且可預期的體驗

圖解

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

1. 電影風格裝飾
2. 海報
3. 背景顏色

規格

行為

在沉浸式清單的資訊卡間切換時， 所選卡片會在背景逐步顯示。

當沉浸式清單為焦點時，其高度會增加並顯示 包括使用背景標題和 說明，如下方影片所示

用量

如果想吸引目光，建議採用沉浸式輪轉介面， 宣傳內容，例如新作、熱門節目或獨家內容 標題較大的可視區域和動態預覽功能 以便展示這些高優先順序的項目

圖片顯示

1. 資訊卡焦點：使用者瀏覽輪轉介面時， 聚焦的資訊卡在視覺上更加顯眼，加上邊框，將資訊卡放大 1.1。 和其他視覺提示則用來指出其選取範圍確保內容 聚焦資訊卡的縮圖可清楚呈現標題 不僅易於閱讀及閱讀
2. 背景圖片：當資訊卡在焦點所在時，會顯示對應背景 圖像會顯示在較大的檢視區中建議使用這個背景 高品質且視覺吸引力 視覺效果吸引人的背景

樂曲

check_circle

正確做法

在畫面右上角縮放及對齊拍攝主體，打造電影效果。

cancel

錯誤做法

避免使用全螢幕裁剪功能來裁剪內容下方的主體。

確保沉浸式清單元件中做為背景的圖片 請確保縮放比例適當，避免模糊不清 或扭曲變形

顯示比例

請盡量使用 16:9 的背景圖片，確保 採用賞心悅目且一致的版面配置