Components

Action Sheet

Badge

Button

Cards

Dialog

Fixed Banner

Floating message

Image

Input field

Message Block

Status

Tab

Tag

Tooltips

Message Block

頁面內容中出現的通知形式，較不干擾使用體驗，可讓用戶選擇在適合的情境下閱讀。 中卡RD已元件化 小卡及大卡未實作

⚡️ 相關資源：

Components Figma File

UI Spec Figma File

Anatomy

解構

1. Image 搭配資訊主題的插圖
2. Badge Optional 用以增加資訊醒目度的標示
3. Title 主標題，簡短帶出溝通的內容主軸
4. Text 輔助說明文字
5. CTA Optional 依不同的卡片類型屬性，提供 Btn 或 Link 形式
6. Close Btn

Variants（Types）

變形（類型）

❶ 通知大卡

含長形插圖的卡片形式，具有較充足的空間溝通訊息，使用於非急迫性但重要度較高的通知資訊，用戶閱讀完可自行關閉。

如新功能通知、高音質一鍵轉換提示等等。

Ⓐ 多則顯示

當一則以上的通知大卡於同一時間顯示時，會以左右並排可滑動的形式呈現，一次最多可顯示三張卡片。

Ⓑ 單則顯示

當當下只有一則通知大卡時，會固定於畫面中不可滑動。

❷ 通知中卡

含正方形插圖的卡片形式，使用於告知用戶當下狀態或執行指定操作，重要性僅次於通知大卡。具有不同 CTA 形式供選擇，用戶閱讀完可自行關閉。

Ⓐ Btn 版

使用於具有明確指定行為，希望用戶當下做確認或啟動任務，藉以幫助產品使用體驗更完整，如引導完成 TUWUL 任務卡片。

Ⓑ Link 版

非強烈指定用戶執行的 CTA，若用戶當下不點擊亦不影響使用，通常用於提供用戶更多延伸資訊，如“了解更多”的內容入口。

Ⓒ Text 版

單純的訊息溝通，無指定 CTA。

❸ 通知小卡

含插圖的卡片形式，插圖固定以圓形 KK 藍色塊作為底色，並加上對應的相關 icon。 此形式卡片用戶無法自行關閉，會一直顯示直到用戶身份轉換或執行完成該指定任務後消失，如未付費用戶升級提示。

Behaviors

行為

大卡及中卡

• 含有 Close Btn，用戶可自行關閉卡片。當用戶主動關閉並再次進入畫面時，該則卡片將不再出現（用戶重新安裝 APP不在此限）。
• 若用戶將卡片完全關閉後，下方資訊需自動上移遞補原有的空間。
• 當用戶點擊卡片，連結到指定頁面的同時，該則卡片將自行關閉。
• 顯示次數及時間，會依據各項資訊類型而有不同設定。

小卡

• 不含 Close Btn，用戶無法自行關閉卡片。
• 當用戶點擊卡片連結到指定頁面後，卡片不會主動消失，一直要到用戶身份轉換或執行完成該指定任務後才會消失。

Usage Guidelines

使用規範

大卡和小卡一定要有 CTA，且為 Link 的形式

只有大卡可多則顯示，中卡和小卡一次僅能出現一則

• 大卡僅可使用於 Landing 頁，中卡及小卡可使用於各頁面（除現正播放頁）。
• 建議一次最多出現兩種尺寸的卡片。

Changelog

On This Page

• Message Block
• Anatomy
• Variants（Types）
• ❶ 通知大卡
• ❷ 通知中卡
• ❸ 通知小卡
• Behaviors
• 大卡及中卡
• 小卡
• Usage Guidelines
• Changelog