Apple Music：編輯之聲與空間音訊的交匯
「我們相信音樂的傳奇人物，相信只有人類才能給出的『你一定要聽這個』推薦。」——Zane Lowe，Apple Music
Apple Music 是一場張力的研究：演算法個人化與人工編輯之聲的角力、資訊密度與情感衝擊的平衡、實用性與藝術性的拉扯。當 Spotify 傾向數據驅動的推薦和 Podcast 整合時，Apple Music 則押注於滿版專輯封面、手寫編輯筆記、即時同步歌詞，以及空間音訊作為差異化優勢。其設計語言首先將音樂視為一種藝術形式，其次才是內容串流。每一個畫面都在問：這樣做是否尊重了專輯作為一件作品的本質？
結果是一個串流服務，其「正在播放」畫面不是附帶進度條的控制面板——而是一塊畫布，專輯封面在上面呼吸、歌詞即時滾動、空間音訊指示器隨著維度聲響脈動。對設計師而言，Apple Music 展示了如何透過層層疊加深度，而非分支為不同介面，來打造一個同時服務休閒聽眾與音響發燒友的產品。
Apple Music 為何重要
Apple Music 是唯一一個聘用全職音樂編輯的主要串流服務，這些編輯撰寫原創內容、以編輯筆記策劃播放清單，並製作廣播節目。這個人工層塑造了整體設計語言。
主要成就： - 超過一億首歌曲支援 Spatial Audio（Dolby Atmos）目錄 - 無損音質最高支援 24-bit/192kHz，無需額外費用 - 即時同步歌詞，逐字即時高亮顯示 - 動態專輯封面（Apple Music Motion），精選發行版本適用 - 最深度的 Apple 生態系整合（HomePod、AirPods、Apple Watch、CarPlay、Siri） - 涵蓋所有曲風的人工策劃編輯內容
關鍵要點
- 滿版封面營造情感場域 - 專輯封面不是縮圖——它填滿整個畫面、為 UI 染色，並為整個「正在播放」體驗設定色彩基調
- 編輯之聲建立演算法無法企及的信任 - 來自具名編輯的「你一定要聽這個」所承載的份量，是「因為你聽過⋯⋯」永遠無法達到的
- 空間音訊需要視覺提示 - 使用者看不見聲音的維度，因此 Apple 設計了徽章系統、波形指示器和明確的「Spatial」標籤，讓無形的聽覺體驗變得可見
- 歌詞是核心功能，不是附加品 - 逐字即時同步高亮的歌詞，將一個卡拉 OK 功能轉變為主要的互動介面
- 生態系整合是設計優勢 - 裝置間的接力、Siri 情境感知，以及自動切換空間音訊，創造了任何單一裝置 App 都無法匹敵的體驗
核心設計原則
1. 專輯封面作為 UI 基礎
Apple Music 的「正在播放」畫面從專輯封面中擷取色彩，並用它們為整個介面染色。封面不是裝飾——它是視覺設計的生成源。
NOW PLAYING SCREEN ANATOMY
┌─────────────────────────────────────────────┐
│ │
│ ┌─────────────────────────────────────┐ │
│ │ │ │
│ │ │ │
│ │ ALBUM ARTWORK │ │
│ │ (full-width, │ │
│ │ rounded corners, │ │
│ │ subtle shadow) │ │
│ │ │ │
│ │ │ │
│ └─────────────────────────────────────┘ │
│ │
│ Song Title │
│ Artist Name (more menu) │
│ │
│ ───────────●────────────── 1:42 / 3:58 │
│ │
│ ◁◁ ▶︎ / ⏸ ▷▷ │
│ │
│ 🔀 Volume ────────●── 📱→🔊 🔁 │
│ │
│ [Lyrics] [Up Next] [Related] │
│ │
│ ── background: gradient from album art ── │
└─────────────────────────────────────────────┘
色彩擷取系統：
/*
Apple Music 從專輯封面擷取主色調，
並將其作為背景漸層套用。這為每首歌
創造了獨一無二的視覺識別。
*/
/* 模擬「正在播放」色彩擷取效果 */
.now-playing {
--art-primary: var(--extracted-color-1);
--art-secondary: var(--extracted-color-2);
--art-text: var(--extracted-text-color);
background: linear-gradient(
180deg,
var(--art-primary) 0%,
color-mix(in srgb, var(--art-primary), var(--art-secondary) 40%) 50%,
var(--art-secondary) 100%
);
color: var(--art-text);
min-height: 100vh;
}
/* 專輯封面呈現 */
.album-art {
width: min(85vw, 360px);
aspect-ratio: 1;
border-radius: 12px;
box-shadow:
0 8px 30px rgba(0, 0, 0, 0.3),
0 2px 8px rgba(0, 0, 0, 0.2);
margin: 0 auto;
transition: transform 0.3s ease;
}
/* 暫停時封面微幅縮小 */
.now-playing.paused .album-art {
transform: scale(0.92);
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.2),
0 1px 4px rgba(0, 0, 0, 0.1);
}
/* 播放時封面恢復原尺寸 */
.now-playing.playing .album-art {
transform: scale(1);
}
為何重要： 播放／暫停時的縮放動畫是一個微互動，無需任何圖示變化即可傳達狀態。封面會「呼吸」——播放時擴展，停止時收縮。這讓整個畫面感覺充滿生命力。
2. 即時歌詞作為主要體驗
Apple Music 的同步歌詞不是卡拉 OK 疊加層。它是一個全螢幕、經過字體排印設計的體驗，具備逐字時間軸、非活動行的景深模糊效果，以及滑動跳轉功能。
LYRICS VIEW
┌─────────────────────────────────────────────┐
│ │
│ (blurred) I've been waiting for │
│ (blurred) a day like this │
│ │
│ But now I see the light ← active line
│ shining through the dark (bold, bright)
│ │
│ (dimmed) And every word you said │
│ (dimmed) was like a spark │
│ (dimmed) that set my heart on fire │
│ │
│ ── background: album art, heavily blurred ─│
│ │
│ Tap any line → seek to that timestamp │
│ Swipe down → return to Now Playing │
└─────────────────────────────────────────────┘
/* 歌詞行狀態 */
.lyrics-line {
font-size: 28px;
font-weight: 700;
line-height: 1.3;
padding: 4px 0;
transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
cursor: pointer;
}
/* 即將出現的行：降低透明度 */
.lyrics-line.upcoming {
opacity: 0.4;
filter: blur(0);
}
/* 已播放的行：降低透明度並輕微模糊 */
.lyrics-line.past {
opacity: 0.25;
filter: blur(1.5px);
}
/* 當前行：完全亮度，輕微放大 */
.lyrics-line.active {
opacity: 1;
filter: blur(0);
transform: scale(1.02);
}
/* 當前行內的逐字高亮 */
.lyrics-word {
transition: color 0.1s ease;
}
.lyrics-word.sung {
color: var(--art-text);
}
.lyrics-word.unsung {
color: color-mix(in srgb, var(--art-text), transparent 50%);
}
/* 背景：高度模糊的專輯封面 */
.lyrics-view {
background-image: var(--album-art-url);
background-size: cover;
background-position: center;
}
.lyrics-view::before {
content: "";
position: absolute;
inset: 0;
backdrop-filter: blur(60px) saturate(1.5);
background: rgba(0, 0, 0, 0.5);
}
3. 空間音訊的視覺語言
Dolby Atmos 空間音訊是無形的——你看不見三維聲音。Apple Music 透過分層的徽章與指示器系統解決了這個問題，讓音訊格式成為可見且令人嚮往的功能。
SPATIAL AUDIO INDICATORS
1. Badge on tracks/albums:
┌──────────────────────┐
│ Dolby Atmos │ ← Small badge in track listing
└──────────────────────┘
2. Now Playing indicator:
┌──────────────────────────────┐
│ 🎵 Song Title │
│ Artist · Dolby Atmos │ ← Below artist name
│ ≋ Spatial Audio active │ ← Dynamic indicator
└──────────────────────────────┘
3. Browse section:
┌─────────────────────────────────────────┐
│ Made for Spatial Audio │
│ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ │
│ │ art │ │ art │ │ art │ │ art │ │
│ │ │ │ │ │ │ │ │ │
│ └──────┘ └──────┘ └──────┘ └──────┘ │
│ Curated playlists showcasing Atmos │
└─────────────────────────────────────────┘
/* Dolby Atmos 徽章 */
.spatial-badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.12);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.8);
}
/* 空間音訊動態指示器 */
.spatial-indicator {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-secondary);
}
.spatial-waves {
display: flex;
align-items: center;
gap: 2px;
height: 14px;
}
.spatial-wave-bar {
width: 2px;
background: var(--accent-pink);
border-radius: 1px;
animation: spatial-pulse 1.2s ease-in-out infinite;
}
.spatial-wave-bar:nth-child(1) { height: 40%; animation-delay: 0ms; }
.spatial-wave-bar:nth-child(2) { height: 70%; animation-delay: 150ms; }
.spatial-wave-bar:nth-child(3) { height: 100%; animation-delay: 300ms; }
.spatial-wave-bar:nth-child(4) { height: 70%; animation-delay: 450ms; }
.spatial-wave-bar:nth-child(5) { height: 40%; animation-delay: 600ms; }
@keyframes spatial-pulse {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(0.5); }
}
值得借鑑的設計模式
編輯內容作為設計元素
Apple Music 的編輯區塊不是藏在某個分頁裡的部落格文章。它們是融入瀏覽體驗的內嵌設計元素，配有拉引語、策展人照片和手寫風格的筆記。
EDITORIAL PLAYLIST HEADER
┌─────────────────────────────────────────────┐
│ ┌─────────────────────────────────────┐ │
│ │ │ │
│ │ [Curated Playlist Art] │ │
│ │ │ │
│ └─────────────────────────────────────┘ │
│ │
│ ALT INDIE │
│ "This week's essential indie tracks, │
│ from bedroom pop to post-punk revival. │
│ Start with Track 5 — it'll change your │
│ whole week." │
│ │
│ Updated Friday · 📝 By Zane Lowe │
│ │
│ [▶ Play] [♡] [⋯] │
└─────────────────────────────────────────────┘
關鍵決策： 每個編輯播放清單都有具名的策展人。「By Zane Lowe」或「By Apple Music Pop」創造了責任歸屬與個人聲音。演算法生成的播放清單（「Made for You」）則刻意不標注策展人名稱，讓兩者的區別一目了然。使用者學會信任編輯播放清單，因為背後有一個真人的聲譽作為擔保。
/* 編輯播放清單標頭 */
.editorial-header {
text-align: center;
padding: 24px 20px;
}
.editorial-note {
font-size: 15px;
line-height: 1.5;
color: var(--text-secondary);
font-style: italic;
max-width: 480px;
margin: 12px auto;
}
.editorial-attribution {
font-size: 13px;
color: var(--text-tertiary);
margin-top: 8px;
}
.editorial-attribution .curator-name {
font-weight: 600;
color: var(--accent-pink);
}
動態專輯封面（Apple Music Motion）
精選專輯具備動態封面——以短迴圈影片取代靜態封面。這將「正在播放」畫面從一個展示區轉變為一塊活生生的畫布。
/* 動態專輯封面容器 */
.album-art-container {
position: relative;
width: min(85vw, 360px);
aspect-ratio: 1;
border-radius: 12px;
overflow: hidden;
}
/* 影片無縫取代靜態圖片 */
.album-art-video {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 靜態封面備援 */
.album-art-static {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Motion 徽章 */
.motion-badge {
position: absolute;
top: 12px;
right: 12px;
padding: 4px 8px;
border-radius: 6px;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: white;
}
無損音質指示器
Apple Music 透過一個持續但不搶眼的指示器來傳達音質資訊。休閒聽眾可以忽略它；發燒友則會關注它。這個設計同時服務兩類使用者，卻不會為任何一方造成介面雜亂。
AUDIO QUALITY STATES (shown in Now Playing)
AAC 256 → Standard (no indicator shown)
Lossless → "Lossless" badge, 16-bit/44.1kHz
Hi-Res → "Hi-Res Lossless" badge, 24-bit/192kHz
Dolby Atmos → "Dolby Atmos" badge + spatial indicator
PLACEMENT:
Below track info, same line as artist name
Small, secondary text weight
Only shown for above-standard quality
總結評價
Apple Music 的設計哲學是：音樂值得比內容動態牆更好的待遇。滿版專輯封面、色彩擷取、即時歌詞、空間音訊徽章，以及編輯之聲，全部服務於一個核心論述：專輯是一件藝術品，而非資料庫中的一行記錄。當競爭對手優化互動指標和 Podcast 交叉推廣時，Apple Music 優化的是聆聽的情感體驗。「正在播放」畫面就是產品的核心宣言——一塊能適應每張專輯視覺識別的畫布，同時維持一致的操控介面。對設計師而言，教訓在於：尊重你所呈現的內容，本身就是一種設計策略。
最適合學習的面向： 從內容擷取色彩、歌詞／文字體驗中的字體層級設計、透過徽章系統讓無形功能（音質、空間音訊）變得可見，以及在編輯之聲與演算法個人化之間取得平衡。
常見問題
Apple Music 的專輯封面色彩擷取如何運作？
Apple Music 分析專輯封面以擷取兩到三個主色調，然後為「正在播放」畫面生成漸層背景。系統同時判斷白色或深色文字是否能在這些色彩上提供足夠的對比度。為避免過度飽和，擷取的色彩會經過壓制處理。這意味著每首歌都能創造獨特的視覺環境，無需為每首曲目進行手動設計。
為什麼 Apple Music 在演算法更便宜的情況下仍投資於人工編輯？
編輯策展提供了演算法無法實現的兩件事：敘事脈絡與品味信號。編輯能寫出「從第五首開始聽——它會改變你整週的心情」這樣能製造期待感的文字。演算法可以說「因為你聽過 X」，但無法創造情感框架。具名策展人系統還能建立信任——使用者會與品味相投的編輯建立關係，創造出僅靠演算法推薦無法實現的忠誠度。
歌詞功能如何驅動使用者參與？
逐字高亮的同步歌詞將一個工具性功能轉變為主要的互動介面。歌詞可見時，使用者在 App 中停留的時間顯著增加。這個設計之所以成功，是因為歌詞不是一個獨立模式——從「正在播放」只需一次滑動即可到達，使用相同的色彩擷取背景，且支援點擊任意行跳轉。這個功能感覺是整合在一起的，而非後來拼接上去的。
什麼是 Apple Music Motion，它如何影響聆聽體驗？
Apple Music Motion 在精選發行版本中，以短迴圈影片取代靜態專輯封面。影片在「正在播放」畫面的封面框架中播放，創造出一塊隨音樂律動的活畫布。對設計師而言，它證明了即使是 1:1 的方形框架，當移除靜態限制後也能成為沉浸式體驗。藝人和唱片公司提供這些素材，使其成為一個協作的設計介面。
Apple Music 如何處理生態系中裝置間的切換？
AirPlay 和 Handoff 讓 iPhone、HomePod、Mac、Apple Watch 和 CarPlay 之間實現無縫銜接。「正在播放」介面會適應每個裝置的限制，同時維持視覺一致性。在 Apple Watch 上，專輯封面填滿小螢幕，搭配簡化的操控。在 CarPlay 上，控制元件放大以便快速瀏覽。色彩擷取系統在所有介面上運作，因此「正在播放」的視覺識別無論在哪個裝置上都保持一致。