應用程式音效設計
負責做出關於應用程式中何時、使用何種聲音以及如何呈現的設計決策。這不是關於音訊工程（那是 sound-engineer）或復古音效（那是 win31-audio-design）。此技能回答 UI 音效中最困難的問題：這個互動到底該不該有聲音？ 如果該有，那要用什麼樣的聲音？
使用時機
適合使用於：
- 決定網頁或行動應用程式中哪些互動需要聲音回饋
- 為通知、確認、錯誤等選擇合適的聲音特性
- 使用 ElevenLabs、AudioCraft 或 Stable Audio 建立 AI 生成的 UI 音效
- 使用 Web Audio API 實作程式化音效
- 在 iOS/Android 上配對觸覺回饋與音訊
- 為產品建立聲音品牌識別
- 審查應用程式現有音效設計，判斷其是令人惱火還是有所幫助
請勿使用於：
- 專業音訊混音/母帶處理 -> 請使用 sound-engineer
- Windows 3.1 主題系統音效 -> 請使用 win31-audio-design
- 音樂創作或配樂 -> 請使用 sound-engineer
- 無障礙螢幕閱讀器音訊 -> 請使用 accessibility-expert
- 遊戲音訊系統（3D 定位、動態音樂） -> 請使用 sound-engineer
基本問題：該不該有聲音？
這個互動是否需要「回饋」？
|
+-- 使用者發起的動作（點按、點擊、提交）？
| +-- 結果是否在螢幕上可見？
| | +-- 是且很明顯 --> 聲音是「可選的」（通常略過）
| | +-- 是但很細微 --> 聲音「有幫助」（溫和確認音）
| | +-- 否（背景處理） --> 「建議」使用聲音
| +-- 動作是否具有破壞性？
| +-- 是 --> 「建議」使用聲音（明顯的警告音）
| +-- 否 --> 聲音是「可選的」
|
+-- 系統發起的事件（通知、警示）？
| +-- 使用者是否在應用程式內？
| | +-- 是 --> 微弱的應用程式內部音效
| | +-- 否 --> 通知音效（遵循作業系統慣例）
| +-- 事件是否具有時效性？
| +-- 是 --> 更緊急/引人注意的聲音
| +-- 否 --> 可以靜音或使用環境音
|
+-- 環境/氛圍（背景狀態）？
+-- 應用程式是否需要存在感？ --> 微弱的環境音
+-- 使用者是否正在工作/專注？ --> 靜音
UI 音效詞彙
每個應用程式都需要來自這些類別的聲音。並非所有類別都是必要的 – 大多數應用程式需要 3-5 種。
第一層：必備（大多數應用程式需要）
| 聲音類型 | 用途 | 特性 | 持續時間 | 範例 |
|---|---|---|---|---|
| 確認音 | 動作成功 | 明亮、上升的音高 | 100-300 毫秒 | Slack 訊息已傳送 |
| 錯誤音 | 動作失敗 | 低沉、平直或下降 | 200-400 毫秒 | 表單驗證失敗 |
| 通知音 | 新資訊送達 | 明確、中等能量 | 300-600 毫秒 | Slack 新進訊息 |
第二層：精緻化（重視細節的應用程式）
| 聲音類型 | 用途 | 特性 | 持續時間 | 範例 |
|---|---|---|---|---|
| 轉場音 | 檢視之間導航 | 微弱的咻聲或輕點聲 | 50-150 毫秒 | iOS 翻頁效果 |
| 切換音 | 二進位狀態變更 | 清脆的點擊聲或喀嚓聲 | 50-100 毫秒 | 開關切換 |
| 懸浮音 | 滑鼠懸停回饋 | 幾乎聽不見的滴答聲 | 20-50 毫秒 | 選單項目懸停 |
| 選擇音 | 從列表中選擇項目 | 輕柔的波普聲或撥弦聲 | 50-150 毫秒 | 下拉選單選擇 |
| 刪除音 | 破壞性移除 | 空洞的重擊聲或颼颼聲 | 150-300 毫秒 | 垃圾桶動作 |
第三層：愉悅感（有個性的應用程式）
| 聲音類型 | 用途 | 特性 | 持續時間 | 範例 |
|---|---|---|---|---|
| 成就音 | 達到里程碑 | 音樂性、慶祝感 | 500 毫秒-2 秒 | Duolingo 課程完成 |
| 環境音 | 背景存在感 | 循環、氛圍感 | 連續 | Noisli、Forest 應用程式 |
| 品牌音 | 應用程式開啟/關閉 | 標誌性、令人難忘 | 500 毫秒-1.5 秒 | Netflix 噠噠聲 |
| 彩蛋音 | 隱藏樂趣 | 俏皮、出乎意料 | 可變 | Konami 密碼獎勵 |
平台慣例
Apple（iOS / macOS）
Apple HIG 規範了特定的音訊行為：
- 系統聲音是神聖的：切勿覆寫或取代系統警示音
- 尊重靜音開關：如果實體靜音開關開啟，您的應用程式聲音就會停止（媒體播放除外）
- 音訊工作階段類別很重要：
ambient— 與其他音訊混合，尊重靜音開關soloAmbient— 使其他音訊靜音，尊重靜音開關playback— 忽略靜音開關（僅適用於媒體應用程式）
- 觸覺回饋與聲音配對：使用
UIImpactFeedbackGenerator搭配音訊
Apple 的聲音特性：
- 乾淨的正弦波和濾波音調
- 最少的泛音（純淨、不刺耳）
- 短衰減（聲音不會持續）
- 相對於系統聲音的一致音量
// iOS：播放系統聲音
import AudioToolbox
AudioServicesPlaySystemSound(1057) // 標準鍵盤點擊聲
// iOS：觸覺回饋 + 自訂聲音
let generator = UIImpactFeedbackGenerator(style: .light)
generator.impactOccurred()
// 同時播放您的自訂聲音
Material Design（Android）
Google 的聲音設計原則：
- 功能性優先：聲音應告知，而非裝飾
- 預設為細微：UI 聲音應比媒體聲音小聲
- Android 上觸覺優先：偏好觸覺回饋；僅在觸覺不足時才添加聲音
- 僅在有意義時才開啟聲音：大多數互動的預設狀態應為靜音
Material 聲音特性：
- 短促、清脆的打擊樂聲
- 微妙的泛音內容（非純正弦波）
- 比 Apple 聲音稍溫暖（更多中頻）
- 設計用於在低品質手機喇叭上正常運作
網頁應用程式
網頁的聲音慣例最弱，這意味著有更多自由，但也更容易令人惱火。
- 絕不自動播放聲音 — 瀏覽器會封鎖，使用者會討厭
- 需要使用者手勢先行：Web Audio API 需要使用者互動才能播放
- 提供音量控制：務必讓使用者可以靜音或調整
- 考慮耳機使用者：在筆電喇叭上聽起來不錯的聲音，在耳機上可能很刺耳
使用 AI 建立音效
ElevenLabs 音效
最適合：具有特定特性描述的真實、高品質 UI 音效。
# 產生確認鈴聲
curl -X POST "https://api.elevenlabs.io/v1/sound-generation" \
-H "xi-api-key: YOUR_KEY" \
-H "Content-Type: application/json" \
-d '{
"text": "Sh 短促明亮的上行鈴聲、數位音、乾淨的正弦波、200 毫秒、UI 確認音效",
"duration_seconds": 0.5
}'
ElevenLabs 的有效提示：
- 確認音："Short bright ascending two-note chime, clean digital, warm, 200ms"
- 錯誤音："Low hollow thud with slight buzz, digital, 300ms, not harsh"
- 通知音："Gentle three-note xylophone melody, friendly, 400ms"
- 切換音："Crisp mechanical click, plastic switch, 50ms"
- 刪除音："Soft hollow swoosh moving downward, 200ms"
- 成就音："Bright ascending arpeggio, sparkly, celebratory, 1 second"
Meta AudioCraft（開源）
最適合：想要完全控制且無 API 費用的開發者。
from audiocraft.models import AudioGen
from audiocraft.data.audio import audio_write
model = AudioGen.get_pretrained('facebook/audiogen-medium')
model.set_generation_params(duration=0.5)
# 生成 UI 音效
descriptions = [
"short digital confirmation beep, ascending pitch, clean",
"low error buzz, brief, not harsh, digital",
"gentle notification chime, two notes, pleasant",
]
wav = model.generate(descriptions)
for i, w in enumerate(wav):
audio_write(f'ui_sound_{i}', w.cpu(), model.sample_rate)
Stable Audio Open
最適合：較長的環境音、背景紋理、品牌音。
import torch
from stable_audio_tools import get_pretrained_model
from stable_audio_tools.inference.generation import generate_diffusion_cond
model, model_config = get_pretrained_model("stabilityai/stable-audio-open-1.0")
# 生成環境背景音
conditioning = [{
"prompt": "calm ambient digital texture, warm low hum, suitable for productivity app background, loopable",
"seconds_total": 10
}]
後製檢查清單
AI 生成的音效在上線前需要清理：
- 修剪靜音 — 移除開頭/結尾的空白音訊
- 歸一化音量 — 所有 UI 音效應具有一致的感知響度
- 淡入/淡出 — 5-10 毫秒的淡化可防止爆音
- 壓縮動態範圍 — UI 音效應具有一致的音量
- 匯出為 WAV（適用於原生應用）或 OGG/MP3（適用於網頁，每個音效低於 50KB）
- 在目標喇叭上測試 — 手機喇叭會衰減低於 200Hz 的頻率
Web Audio API：程式化音效
對於網頁應用程式，以程式化方式產生音效完全消除了對音訊檔案的需求。更小的套件、即時可用性。
class UISound {
private ctx: AudioContext | null = null;
private getContext(): AudioContext {
if (!this.ctx) {
this.ctx = new AudioContext();
}
return this.ctx;
}
/** 明亮的上升確認音 */
confirm(): void {
const ctx = this.getContext();
const osc = ctx.createOscillator();
const gain = ctx.createGain();
osc.connect(gain);
gain.connect(ctx.destination);
osc.type = 'sine';
osc.frequency.setValueAtTime(600, ctx.currentTime);
osc.frequency.linearRampToValueAtTime(900, ctx.currentTime + 0.15);
gain.gain.setValueAtTime(0.15, ctx.currentTime);
gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.2);
osc.start(ctx.currentTime);
osc.stop(ctx.currentTime + 0.2);
}
/** 低沉下降的錯誤音 */
error(): void {
const ctx = this.getContext();
const osc = ctx.createOscillator();
const gain = ctx.createGain();
osc.connect(gain);
gain.connect(ctx.destination);
osc.type = 'triangle';
osc.frequency.setValueAtTime(400, ctx.currentTime);
osc.frequency.linearRampToValueAtTime(200, ctx.currentTime + 0.3);
gain.gain.setValueAtTime(0.12, ctx.currentTime);
gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.35);
osc.start(ctx.currentTime);
osc.stop(ctx.currentTime + 0.35);
}
/** 用於切換和選擇的微弱點擊聲 */
click(): void {
const ctx = this.getContext();
const osc = ctx.createOscillator();
const gain = ctx.createGain();
osc.connect(gain);
gain.connect(ctx.destination);
osc.type = 'square';
osc.frequency.setValueAtTime(800, ctx.currentTime);
gain.gain.setValueAtTime(0.08, ctx.currentTime);
gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.05);
osc.start(ctx.currentTime);
osc.stop(ctx.currentTime + 0.05);
}
/** 三音通知旋律 */
notify(): void {
const ctx = this.getContext();
const notes = [523, 659, 784]; // C5, E5, G5
notes.forEach((freq, i) => {
const osc = ctx.createOscillator();
const gain = ctx.createGain();
osc.connect(gain);
gain.connect(ctx.destination);
osc.type = 'sine';
osc.frequency.setValueAtTime(freq, ctx.currentTime);
const start = ctx.currentTime + i * 0.12;
gain.gain.setValueAtTime(0, start);
gain.gain.linearRampToValueAtTime(0.12, start + 0.02);
gain.gain.exponentialRampToValueAtTime(0.001, start + 0.15);
osc.start(start);
osc.stop(start + 0.15);
});
}
}
// 使用方式
const sound = new UISound();
document.querySelector('#submit')?.addEventListener('click', () => sound.confirm());
觸覺-音訊配對（行動裝置）
在行動裝置上，觸覺和音訊應作為一個整體來設計。觸覺先到達（即時的物理回饋），然後聲音到達（確認和特性）。
配對指南
| 互動 | 觸覺 | 聲音 | 時序 |
|---|---|---|---|
| 點按按鈕 | 輕微撞擊 | 短促點擊 | 同時 |
| 切換開關 | 中度撞擊 | 清脆喀嚓 | 觸覺超前聲音 10 毫秒 |
| 下拉重新整理 | 拖曳時選擇滴答聲；完成時通知 | 微弱的拉伸聲；確認鈴聲 | 觸覺領先 20 毫秒 |
| 滑動刪除 | 臨界點重擊 | 空洞颼颼聲 | 觸覺在提交點 |
| 長按 | 剛性連續振動 | 低沉上升嗡嗡聲 | 觸覺與聲音同時開始 |
| 成功 | 成功模式（三重敲擊） | 上升琶音 | 對齊節拍 |
iOS 實作
import UIKit
import AVFoundation
class FeedbackManager {
static let shared = FeedbackManager()
private let lightImpact = UIImpactFeedbackGenerator(style: .light)
private let mediumImpact = UIImpactFeedbackGenerator(style: .medium)
private let heavyImpact = UIImpactFeedbackGenerator(style: .heavy)
private let notificationFeedback = UINotificationFeedbackGenerator()
func tapConfirm() {
lightImpact.impactOccurred()
SoundPlayer.play(.confirm)
}
func errorShake() {
notificationFeedback.notificationOccurred(.error)
SoundPlayer.play(.error)
}
func deleteCommit() {
heavyImpact.impactOccurred()
SoundPlayer.play(.delete)
}
}
令人滿意聲音的心理學
為什麼有些 UI 聲音感覺「對」，而其他的感覺「廉價」：
令人滿意的聲音特性
| 特性 | 為什麼有效 | 範例 |
|---|---|---|
| 音高上升 | 表示進展、樂觀、完成 | 確認音向上走 |
| 短衰減 | 感覺反應靈敏且可控 | 任天堂選單音效 |
| 和聲豐富度 | 感覺有機且溫暖 | Slack 的「敲門」聲 |
| 一致音量 | 感覺專業且可預測 | Apple 系統音效 |
| 節奏對齊 | 感覺有目的且經過設計 | Duolingo 的連續記錄計數器 |
惱人的聲音特性
| 特性 | 為什麼令人煩躁 | 避免 |
|---|---|---|
| 無變化的重複 | 人類會習慣，然後感到煩躁 | 每天 100 次完全相同的聲音 |
| 相對於情境太大聲 | 打斷專注力 |