Components
Action Sheet
Badge
Button
Cards‣
Dialog
Fixed Banner
Floating message
Image
Input field‣
Message Block‣
Status
Tab
Tag
TooltipsImage
圖片呈現。
⚡️ 相關資源：
Figma Components
Figma File
UI Spec
Figma File
Variants（Types）
變形（類型）
❶ Square 方形
使用方形圖表示專輯封面、歌單封面、Podcast 頻道或單集。
❷ Round 圓形
使用圓形圖表示人物。
❸ Rectangle 其他矩形
其他尺寸的圖片通常用於文章、行銷或背景，尺寸規則請參閱 UI Spec (暫無)。
Anatomy
解構
Image Border 圖片框線
圖片需使用框線與背景色區隔，大/小尺寸、亮/暗模式分別使用不同的外框設計。
圖片框線規格 Object Style / Image Border
Rounding 圓角
方形或矩形圖皆使用圓角，大/小尺寸的圖分別使用不同尺寸的圓角。特殊形狀的行銷需求圖片，不受此規則限制。
圖片圓角設計 Object Style / Rounding
State
狀態
Default 預設圖
圖片載入中或無資料時需顯示預設圖，讓使用者知道此區域應顯示圖片。
預設圖設計檔 Figma：Icon / Default Image
亮暗模式使用不同顏色
若由 Client 端提供預設圖， Client 端可判斷使用者系統亮/暗模式的設定，分別顯示不同設計；若由 Sever 端提供預設圖，因 Sever 在傳送資料前無法得知使用者的系統亮/暗模式設定，然後根據亮/暗模式傳送不同資料，所以僅提供一種設計。（參考附圖）
根據內容型態顯示對應的 icon 設計
Disabled 不可訪問
使用 30% 透明度表示圖片目前不可訪問。
Changelog
Date | Version | Notes | Chapters | Person |
|---|---|---|---|---|
January 17, 2023 | 1.4 | ・新增 Image 草稿 | Image |  Verna Wang |