Components
Action Sheet
Badge
Button
Cards‣
Dialog
Fixed Banner
Floating message
Image
Input field‣
Message Block‣
Status
Tab
Tag
TooltipsDialog
出現於畫面正中央的用戶溝通板位，以彈出的呈現形式，吸引用戶當下關注並閱讀資訊。
RD已元件化（舊版）線上已存在舊版的RD元件可供套用，但此舊版的細節尚未完整符合新的設計規範。
此篇文章以下所撰寫的內容是新的規格定義。
⚡️ 相關資源：
Components
Figma File
UI Spec
Figma File
Anatomy
解構
- Image
Optional搭配資訊主題的視覺，可為插畫或動態圖檔
插圖繪製及應用可參考此篇 illustration 介紹
- Image-front 當使用『圖片溢出版』時，需增加的一個前景主題插圖
『圖片溢出版』為 Dialog 的三種變形之一，其顯示圖片包含背景及前景兩張，詳細細節請閱讀下方Variants介紹
- Title 主標題，簡短帶出溝通的內容主軸
標題撰寫方法可參考此篇 Contnet 介紹
- Text 輔助說明文字
- BtnBlockL_Primary 主要按鈕，提供用戶對應的CTA
- BtnBlockL_Secondary
Optional第二層級按鈕，若有多個 CTA 時可選擇使用 - BtnBlockL_Tertiary
Optional第三層級按鈕，若有多個 CTA 時可選擇使用
Variants（Types）
變形（類型）
❶ 文字版
純文字的形式，使用於告知用戶當下狀態或提示操作說明，引導用戶接續操作。
如活動徽章任務開始提示、編輯操作中中斷使用的警告或重要通知。
❷ 插圖版
含插圖的形式，藉由圖片視覺軟化溝通情緒，吸引用戶閱讀。
如 Freemium 聆聽功能權益提示、限時活動徽章的已獲得徽章提示。
上圖左例和右例一樣是提供扁平的長方形圖給工程師，由於左例的圖除了徽章本體外，其餘留白部分是以背景透明的方式處理，所以在相同圖片規則下，可產生和右例滿版圖不同的視覺效果。
❸ 圖片溢出版
含插圖且圖片可凸出卡片外輪廓，具有強烈視覺效果的形式。
此版型因圖片變化性較大，因此目前並無建立 UI 元件供使用，但圖片的顯示規則已和前端工程師完成可行性評估，建議設計師可使用『插圖版』的 UI 元件進行調整，製作成『圖片溢出版』的形式，詳細設計規則可參閱 Figma 相關文件
Behaviors
行為
可點擊 ❶ 按鈕或 ❷ 空白處關閉離開當前 Dialog
Usage Guidelines
使用規範
所有 Dialog 形式，最少皆需顯示一個 Primary button，當指定的 CTA 項目多於一個時，可增加最多三個層級的 button。
通常 BtnBlockL_Tertiary button 的行為會用於關閉 dialog。
所有 Dialog 形式，當只顯示一個 button 時，必須為藍色的 Primary button
所有 Dialog 形式，點擊 Dialog 卡片以外的背景處，皆須設定為關閉 Dialog，無論 Button 上是否提供關閉行為。
iOS 『為你打造』的新功能上線提示，圖片部分是使用動態圖檔，且由於目前 iOS元件限制問題，動態圖檔的圖片比例必需是正方形，因此產生與 UI Spec 不同的特殊使用案例。
若欲取用『為你打造 』Dialog 原始檔時需注意，此範例當時是使用舊的線上元件，和上方描述新規格元件有細節上的差異。如需使用 Dialog，請從頁面上方的相關資源單元連結或 Figma assets 中的 iOS/Android Components v2 中取得新的元件，避免使用舊元件。
Changelog
Date | Version | Notes | Chapters | Person |
|---|---|---|---|---|
February 13, 2023 | 1.14 | ・新增 Dialog 草稿 | Dialog | C Camille Cheng |