Components

Action Sheet

Badge

Button

Cards

‣

Controls

‣

List

Message Block

‣

Navigation

Status

Tab

Tag

Tooltips

Audio List Item

使用於聲音內容的列表物件。

⚡️ 相關資源：

Components Figma File

UI Spec Figma File

Anatomy

解構

圖為 Main Component 展開後

List 由多個列表物件排列而成的列表。
Left Items Optional 列表中左側的物件，通常為照片 (Image) 或圖標 (Icon)，用來幫助使用者快速辨認這是什麼項目。
Main Contents 主要內容，通常為一行或兩行文字，表示此項目的標題和內容。
Right Items Optional 列表中右側的物件，通常為操作物件。

Variants（Types）

變形（類型）

❶ Single Content 單一內容

單一內容類型的列表，為最低層級且無法再點擊進入內頁的物件，分為歌曲的Song in Playlist（歌單中的歌曲）、Song in Album（專輯中的歌曲），以及 Podcast 的 Podcast Episode（Podcast 單集）。

歌曲的 Song in Playlist 和 Song in Album 最大的差異是左側物件在 Song in Playlist 顯示「專輯封面圖」，在 Song in Album 顯示歌曲在該專輯中的「排序數字」。

Podcast 單集類型的列表，顯示邏輯與 Song in Playlist 類似。

❷ Collection 合輯

合輯類型的列表，分為 Playlist（歌單）、 Album（專輯）和 Podcast Channel（Podcast 頻道）。

❸ Artist 藝人

藝人類型的列表，Left Items 顯示圓形的藝人圖，和 Contents、Collection 等做區隔，圖片的使用規則請參考章節 Image。

States

狀態

Pressed 點擊

列表點擊狀態一律替換背景色。

Unavailable 無授權

無授權狀態主要出現在 Single Content 和 Collection 中，凡列表中的圖片和 Icon，皆以 30% 透明度呈現，文字則依照 semantic color 規則顯示。

Playing 播放中

正在播放狀態的列表，會在 Left item 顯示動態的播放 Icon（俗稱舞動三兄弟）。

💡

因使用者回饋播放狀態的 Icon 顯示不明顯，所以後來設計調整成除動態 Icon 外，標題文字顯示藍色，但排入開發未被實作。

Usage Guideline

使用規範

副標文字會根據不同的頁面目的揭露不同資訊

在綜合列表中為了幫助使用者區分內容型態，副標會顯示歌單、專輯、頻道、單集等對應文字，文字邏輯可參考情境懶人包 UI Spec。

💡

我的頁中的列表設計久未更新，所以副標的顯示邏輯較不一致，有時沒有顯示、有時顯示更新時間、有時顯示藝人名稱，設計師需直接參考 App。

iOS 不支援長按預覽

考量開發資源與效益，2022 年決議移除 iOS App 中的 Long pressed（長按）預覽功能，所以 2022 年後更新的頁面一律不做 Long preesed。

💡

Android 部分頁面長按會出現 Action sheet，未來統一不做。

音質顯示

能夠以「音質」區分的內容會顯示對應的音質圖標（HR/HIFI）。

目前僅 Album（專輯）和歌曲有此性質。

兒童不宜的內容顯示標籤「E」

「E」為英文 EXPLICIT 的縮寫，代表這首歌的歌詞、封面、曲名或內容，有可能因為帶有腥羶、暴力、毒品或種族歧視等因素產生負面情緒。

專輯、歌曲、頻道、單集等內容可顯示標籤「E」。

Behaviors

行為

根據不同類型，點擊後將產生不同回饋

點擊「single content 單一內容」會直接播放，點擊「collection 合輯、Artist 藝人」會進入內頁。

無授權內容點擊後會顯示 Dialog 提示無授權。

Delete (iOS)

套用 iOS 系統內建的刪除 Icon，點擊 Icon 後右側顯示刪除按鈕。

目前 iOS 有提供手勢左滑直接刪除，Android 則不一定，古早未翻新的頁面有提供左滑刪除，但後期新設計的頁面沒有。目前 Android 系統可以做到左滑刪除、長按顯示列表後刪除，建議未來統一規格。

⚠️

在 Edit Mode 的情況下（刪除 + 排序同時出現），系統限制無法手勢左滑刪除，僅提供點擊 icon 刪除

iOS/Android 採用不同的編輯模式（Edit Mode）

編輯模式在 iOS 與 Android 系統中，採用不同流程設計，以貼近原生習慣，參考 Edit Mode。

⚠️

iOS 在 Edit Mode 的情況下（刪除 + 排序同時出現），系統限制無法手勢左滑刪除，僅提供點擊 icon 刪除。

Changelog

Date	Version	Notes	Chapters	Person
March 15, 2023	1.19	・新增 List 草稿	List	Verna Wang
November 23, 2023	1.35	・增加雙平台 UI 說明	List	C Camille Cheng
December 4, 2023	1.36	・雙平台說明 review 後調整	List	C Camille Cheng

On This Page

Audio List Item
Anatomy
Variants（Types）
❶ Single Content 單一內容
❷ Collection 合輯
❸ Artist 藝人
States
Pressed 點擊
Unavailable 無授權
Playing 播放中
Usage Guideline
Behaviors
Changelog