➊ Message Block 中的通知大卡

1. 功能特色：
• 可一次顯示多則，左右滑動瀏覽
• 含長形插圖的卡片形式，具有較充足的空間溝通訊息
2. 互動形式：
• 每則卡片含有一個 Link
• 卡片屬於內容的一部分，可隨內容被划走
• 用戶可自行關閉卡片
3. 設計進度：
• 已完成 Figma Hand off 檔案
4. RD 進度：
• 未元件化

❷ Message Block 中的通知中卡

1. 功能特色：
• 含正方形插圖的卡片形式
2. 互動形式：
• 含 Button, Link 兩種 CTA ，也可選擇不使用
• 卡片屬於內容的一部分，可隨內容被划走
• 用戶可自行關閉卡片
3. 設計進度：
• 已元件化
4. RD 進度：
• 已元件化

❸ Dialog 中的插圖版

1. 功能特色：
• 含插圖視覺軟化溝通情緒
• 以彈出形式呈現，吸引用戶當下關注並閱讀
2. 互動形式：
• 含有三種層級 button 可選擇使用
• 強制遮擋畫面，需執行後才能繼續操作
• 用戶點彈窗以外的範圍可以關閉
3. 設計進度：
• 已元件化
• 此版本的細節規格尚未完整符合新的設計規則，因此建議開發團隊可在實作時，同時將設計規格調整到位，詳細待優化項目請參考 Dialog UI Spec
4. RD 進度：
• 已元件化

❹ Dialog 中的圖片溢出版

1. 功能特色：
• 含插圖且圖片可凸出卡片外輪廓，具有強烈視覺效果的形式
• 以彈出形式呈現，吸引用戶當下關注並閱讀
• 適合用在“只出現一次” 的情境
2. 互動形式：
• 含有三種層級 button 可選擇使用
• 強制遮擋畫面，需執行後才能繼續操作
• 用戶點彈窗以外的範圍可以關閉
3. 設計進度：
• 已完成 Figma Hand off 檔案，圖片的顯示規則已和前端工程師完成可行性評估
4. RD 進度：
• 未元件化，因此建議開發團隊可接續完成實作。

➊ 底色蓋版通知

1. 功能特色：
• 置頂由上往下推的通知版位
• 可一次顯示多則，左右滑動瀏覽
• 當頁面滑動時，卡片會固定在最上方
• 主要用於溝通會員權益及重大系統公告
2. 互動形式：
• 各頁含有一個 button
• 用戶可自行關閉卡片
3. 設計進度：
• 目前已完成手機版設計，待後續設計完成並元件化。設計可參考figma
4. RD 進度：
• 未元件化

➊ Dialog 中的文字版

1. 功能特色：
• 純文字為主，主要用於操作行為的通知
• 不含圖片，讓用戶專注在文字內容
2. 互動形式：
• 含有三種層級 button 可選擇使用
• 強制遮擋畫面，需執行後才能繼續操作
• 用戶點彈窗以外的範圍可以關閉
3. 設計進度：
• 已元件化
• 此版本的細節規格尚未完整符合新的設計規則，因此建議開發團隊可在實作時，同時將設計規格調整到位，詳細待優化項目請參考 Dialog UI Spec
4. RD 進度：
• 已元件化且已上線

➊ Fixed banner

1. 功能特色：
• 固定顯示於指定位置的橫幅資訊
2. 互動形式：
• 含有一個 Link
• 可依據內容類型決定是否要讓用戶關閉
3. 設計進度：
• 已元件化，但還未上線
4. RD 進度：
• 未元件化，建議開發團隊可接續完成實作。

➋ Message Block 中的通知小卡

1. 功能特色：
• 含 icon 插圖的卡片形式
2. 互動形式：
• 含有一個 Link
• 卡片屬於內容的一部分，可隨內容被划走
• 用戶不可關閉卡片，待用戶身份轉換或執行完成該指定任務後消失
3. 設計進度：
• 已元件化
4. RD 進度：
• 已實作完成，但還未元件化