沉浸式清單
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
沉浸式清單是由一系列內容結合而成
已選取的項目。在較大的可視區域中提供內容。
資源
重點特色
- 動態內容預覽。當使用者瀏覽至
內容,預覽區域會自動更新,以顯示
目前焦點所在的項目。
- 沉浸式清單元件的可視區域較大
方便使用者觀看與互動
焦點所指項目的視覺細節
- 沉浸式清單會提供相關和情境資訊
協助使用者做出明智的決定
離開瀏覽體驗的可能性。
- 沉浸式清單元件使用漸進式揭露功能來揭露
關於使用者瀏覽內容的詳細資訊,減少認知
以及維持使用者參與度
- 沉浸式清單元件可確保應用程式間的互動保持一致。
提供使用者熟悉且可預期的體驗
圖解
- 圖片背景
- 內容區塊
- 資訊卡焦點
- 內容格線
- 電影風格裝飾
- 海報
- 背景顏色
規格
行為
在沉浸式清單的資訊卡間切換時,
所選卡片會在背景逐步顯示。
當沉浸式清單為焦點時,其高度會增加並顯示
包括使用背景標題和
說明,如下方影片所示
用量
如果想吸引目光,建議採用沉浸式輪轉介面,
宣傳內容,例如新作、熱門節目或獨家內容
標題較大的可視區域和動態預覽功能
以便展示這些高優先順序的項目
圖片顯示
- 資訊卡焦點:使用者瀏覽輪轉介面時,
聚焦的資訊卡在視覺上更加顯眼,加上邊框,將資訊卡放大 1.1。
和其他視覺提示則用來指出其選取範圍確保內容
聚焦資訊卡的縮圖可清楚呈現標題
不僅易於閱讀及閱讀
- 背景圖片:當資訊卡在焦點所在時,會顯示對應背景
圖像會顯示在較大的檢視區中建議使用這個背景
高品質且視覺吸引力
視覺效果吸引人的背景
樂曲
check_circle
正確做法
在畫面右上角縮放及對齊拍攝主體,打造電影效果。
cancel
錯誤做法
避免使用全螢幕裁剪功能來裁剪內容下方的主體。
確保沉浸式清單元件中做為背景的圖片
請確保縮放比例適當,避免模糊不清
或扭曲變形
顯示比例
請盡量使用 16:9 的背景圖片,確保
採用賞心悅目且一致的版面配置
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間:2024-08-19 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u4e0a\u6b21\u66f4\u65b0\u6642\u9593\uff1a2024-08-19 (\u4e16\u754c\u6a19\u6e96\u6642\u9593)\u3002"}
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2024-08-19 (世界標準時間)。"]]