Components
Action Sheet
Badge
Button
Cards‣
Dialog
Fixed Banner
Floating message
Image
Input field‣
Message Block‣
Status
Tab
Tag
TooltipsStatus
用來告知用戶目前頁面處於何種狀態。
⚡️ 相關資源：
Component
Figma File
UI design guideline
Figma File
Anatomy
解構
➊ Status illustrations 狀態插圖
通常是發生問題才會出現的狀況，因此利用插圖來傳達現在的情境，藉以緩和用戶的不耐感。
➋ Title 主標
寫出現在頁面的狀態。例如：你還沒有收藏歌曲
各頁面的文案皆有不同 文案表
➌ Subtitle 副標
以說明文的方式來解釋現在發生什麼事情、用戶可以怎麼做。例如：從「發現」或「線上搜尋」來收藏歌曲
➍ CTA Button 按鈕
如果有可以執行的動作，會以按鈕呈現
Variants（Types）
變形（類型）
➊ Full page
用於整個頁面是同一來源的資料，且資料是空的
必須整個頁面的資料來源為同一個，且沒有其他類型的內容
➋ Half page
用於頁面中“部分資料”是空的，僅以文字說明，避免頁面擁擠
Usage Guidelines
1. 情境
大致可分為下列幾種情境
插圖圖檔 illustrations
❶Empty 空值狀態
當頁面的資料是空的時，屬於空值狀態
❷Error 錯誤狀態
當頁面出問題無法呈現內容時，屬於錯誤狀態
❸No Connection 網路未連接狀態
當處於網路沒有連接時，屬於此狀態
➍Dead Link 此路不通
當走的頁面發生錯誤，無法繼續往下時，屬於此狀態 （需再確認）
➎Offline 離線狀態
當用戶將“離線模式”開啟時，屬於此狀態。也會依據不同的主頁，而有不同的設計
2. 頁面元件
❶ Title
標題最多一行文字，在文案撰寫時需注意，各語系皆相同
❷ Subtitle Optional
- 各語系副標最多二行文字，需注意不同語系文案的字數長度。。
- 副標為 optional，可視情況選擇顯示或不顯示
❸ CTA Button Optional
- 按鈕樣式固定，不得採用其他樣式、顏色、字級
- 按鈕至多一個，且文案須為 “動作”
- 按鈕為optional，可視頁面情境選擇顯示或不顯示
Do & Don’t
- 插圖至多一張，不能疊加其他圖示或插圖
- 當頁面中僅部分資料空值時，請勿採用 full page 的樣式，易造成頁面過於擁擠，亦或一屏無法完整呈現
- 空值的區塊無法提供 CTA 時，不需顯示按鈕，避免按了之後沒反應，誤以為是 bug
- 當使用 half page 時，標題不可以使用粗體深色版，也不可以拿 full page 的模板作 half page 使用
- 圖示跟文字是搭配好的，請勿自行更換插圖
Changelog
Date | Version | Notes | Chapters | Person |
|---|---|---|---|---|
January 31, 2023 | 1.7 | ・新增 Empty Status 草稿 | Status |  Paris Han |
February 3, 2023 | 1.9 | ・將原本的空值狀態跟特殊狀態合併為 Status 一起撰寫 | Status | Paris Han |