ux-sound-design

UX 音效设计

使用 Audio UX 方法论，为数字产品创作实用且能引发情感共鸣的音频——从通知音到完整的声音系统。

何时使用此技能

• 为应用设计通知音
• 为数字产品创建完整的音频系统
• 为 UI 交互添加音频反馈
• 构建无障碍音频提示
• 为产品团队制定音频指南
• 评估和改进现有产品音效

方法论基础

来源：Audio UX + 设计思维原则

核心原则：“Audio UX 是对声音的策略性、有意识运用，旨在提升用户体验。”与音乐或娱乐音频不同，UX 音效设计首先服务于功能。最好的产品音效在正常工作时不会引人注意，只有在需要关注时才会被察觉。

为何重要：声音是数字产品设计中最未被充分利用的工具。研究表明，音频反馈能提升任务完成率、减少错误，并加强品牌联想。然而，大多数产品要么完全忽视声音，要么使用千篇一律、令人难忘的音效。

Claude 的工作与由你决定的事项

Claude 的工作	由你决定
规划制作工作流	最终创意方向
提出技术方案	设备和工具选择
创建模板和检查清单	质量标准
识别最佳实践	品牌/声音风格决策
生成脚本大纲	最终脚本审批

此技能的功能

1. 设计实用的音频提示 - 传达状态、确认和错误的声音
2. 建立情感联系 - 强化品牌个性的音频
3. 构建音频系统 - 由相关音效组成的连贯音效系列
4. 确保无障碍 - 为视障用户提供音频
5. 编写音频指南 - 确保实施一致性的规范

使用方法

设计产品音效

Help me design audio for [product/feature].
Interaction: [what the user does]
Feedback needed: [what the sound should communicate]
Brand personality: [tone/feeling]

创建音频系统

Create an audio system for [app/product].
Key interactions: [list]
Brand: [personality traits]
Constraints: [technical limitations]

审查现有音频

Review these product sounds for UX effectiveness:
[describe current sounds]
Issues: [problems you've noticed]

说明

设计 UX 音效时，请遵循以下方法论：

第 1 步：了解功能类别

每种产品音效都服务于以下某种目的。

## UX Sound Categories

### 1. FEEDBACK SOUNDS
Confirm that an action was registered.

| Type | Purpose | Example |
|------|---------|---------|
| Confirmation | Action completed | Send button click |
| Progress | Something is happening | Upload progress |
| Success | Task finished successfully | Payment confirmed |
| Error | Something went wrong | Form validation error |
| Warning | Attention needed | Low battery |

### 2. NOTIFICATION SOUNDS
Alert user to external events.

| Type | Purpose | Example |
|------|---------|---------|
| Alert | Immediate attention | New message |
| Reminder | Scheduled prompt | Calendar event |
| Update | Information available | Download complete |
| Social | Human interaction | Someone liked your post |

### 3. NAVIGATION SOUNDS
Spatial orientation and movement.

| Type | Purpose | Example |
|------|---------|---------|
| Transition | Moving between views | Screen change |
| Selection | Choosing an option | Menu item hover |
| Boundary | End of scrollable content | List bottom reached |

### 4. AMBIENT/BACKGROUND
Context and mood.

| Type | Purpose | Example |
|------|---------|---------|
| Presence | App is running | Subtle background tone |
| Mode | Current state | Focus mode active |
| Celebration | Achievement | Goal reached |

---

第 2 步：应用设计原则

有效 UX 音频的核心原则。

## UX Sound Design Principles

### 1. FUNCTION FIRST
- Sound must communicate something useful
- Ask: "What information does this convey?"
- If no clear function, consider no sound

### 2. DISTINCT BUT RELATED
- Each sound should be recognizably different
- All sounds should feel like a family
- Use consistent:
  - Tonal palette (key/scale)
  - Timbral characteristics
  - Duration ranges
  - Dynamic levels

### 3. APPROPRIATE URGENCY
- Match sound urgency to message urgency
- Error ≠ always alarming
- Success ≠ always celebratory
- Scale:
  1. Subtle acknowledgment
  2. Gentle notification
  3. Attention-getting alert
  4. Urgent alarm

### 4. CONTEXT AWARE
- Consider when/where users hear this
- Public spaces: shorter, more subtle
- Private: can be more expressive
- Frequency: often-heard sounds must be less intrusive

### 5. ACCESSIBLE
- Don't rely solely on sound
- Always pair with visual feedback
- Consider frequency range (avoid only high frequencies)
- Ensure distinctiveness for users who can't see visual cues

### 6. CONTROLLABLE
- Users must be able to mute/adjust
- Provide volume controls
- Respect system settings
- Never surprise with unexpected sound

---

第 3 步：创建声音调色板

定义音频系统的原始素材。

## Sound Palette Development

### Step 3.1: Define Brand Sound Attributes

Translate brand personality into audio terms:

| Brand Attribute | Sound Translation |
|-----------------|-------------------|
| Playful | Bouncy, melodic, varied pitch |
| Professional | Clean, precise, consonant |
| Innovative | Modern synthesis, unique timbres |
| Warm | Rounded, organic, mid-range |
| Energetic | Fast attack, bright, rhythmic |
| Calm | Soft attack, slow decay, filtered |

### Step 3.2: Choose Your Palette Elements

**Tonal Center**
- Pick a key (e.g., C major, F major)
- All sounds should relate to this key
- Create harmonic cohesion

**Timbre Family**
- Acoustic (piano, bells, wood)
- Synthetic (sine, FM, wavetable)
- Hybrid (processed acoustic)
- Choose based on brand

**Duration Range**
- Micro: 50-150ms (feedback)
- Short: 150-500ms (notifications)
- Medium: 500-1500ms (transitions)
- Long: 1500ms+ (celebrations)

**Dynamic Range**
- Define min/max volume levels
- Relative loudness between sound types
- Error > Notification > Feedback (typically)

### Step 3.3: Document the Palette

```markdown
## [Product] Sound Palette

**Tonal Center**: F major
**Character**: Warm, professional, approachable

**Primary Timbre**: Rounded sine with subtle harmonics
**Secondary Timbre**: Soft mallet (marimba-like)
**Accent Timbre**: Clean bell tone

**Durations**:
- Feedback: 80-120ms
- Notification: 200-400ms
- Transition: 300-600ms
- Celebration: 800-1500ms

**Loudness Hierarchy** (relative to baseline):
1. Alerts: +3dB
2. Notifications: 0dB (baseline)
3. Feedback: -6dB
4. Ambient: -12dB

---

### Step 4: Design Individual Sounds

Process for creating each sound.

音效设计流程

针对每种音效：

1. 定义功能

• 这具体传达什么信息？
• 是什么操作触发了它？
• 用户应该理解什么？

2. 确定紧急程度

• 1（轻微）→ 5（紧急）
• 这会影响：响度、时长、音高、复杂度

3. 考虑情境

• 用户会多频繁地听到它？
• 用户听到它时身处何处？
• 用户当时处于什么情绪状态？

4. 设计参数

参数	低紧急程度	高紧急程度
时长	更短	更长
起音	柔和	干脆
音高	中性	更高或不协和
复杂度	简单	更多层次
音量	更低	更高

5. 创建变体

• 设计 3-5 个选项
• 在实际情境中测试
• 收集用户反馈
• 反复迭代

常见模式

确认/成功：

• 音高上行（积极）
• 和谐干净、收束明确
• 快速、令人满足
• 示例：两个音符上行三度

错误/警告：

• 音高下行或不协和
• 更复杂/刺耳
• 能引起注意，但不会让人惊慌
• 示例：小二度音程，时长更长

通知：

• 独特的旋律动机
• 紧急程度适中
• 易于记忆，但不会令人厌烦
• 示例：3-4 个音符的序列

---

### Step 5: Build the System

Create a coherent family of related sounds.

音频系统架构

核心音效集（最低可行版本）

1. 通用反馈 - 中性确认
2. 成功 - 积极确认
3. 错误 - 操作出错
4. 通知 - 有新信息
5. 警报 - 需要关注

扩展音效集

反馈系列：

• 轻触／点击（最轻）
• 选择
• 确认
• 成功（最饱满）

通知系列：

• 轻微更新
• 标准通知
• 收到消息
• 紧急提醒

导航系列：

• 转场进入
• 转场退出
• 到达边界
• 模式切换

音效关系

         QUIET ←───────────────────→ LOUD

    Feedback    Notification    Alert    Alarm
      ○            ●             ◉        ◎

         SUBTLE ←────────────────→ URGENT

变化策略

为每种核心音效创建：

• 标准版本
• 轻柔版本（-6dB，更短）
• 强调版本（+3dB，更饱满）
• 这样可以灵活适应不同情境

---

### Step 6: Document and Deliver

Specifications for implementation.

音频指南文档

概述

[Product] 通过清晰的反馈、柔和的通知和品牌呈现， 利用声音提升用户体验。

音效文件

音效名称	文件	时长	用途
feedback_tap	tap.wav	80ms	按钮按下
feedback_success	success.wav	250ms	操作完成
feedback_error	error.wav	350ms	验证错误
notif_message	message.wav	400ms	收到新消息
notif_alert	alert.wav	600ms	重要更新

实施指南

播放时机：

• 在视觉反馈之后播放音效，而不是之前
• 页面加载时绝不播放音效
• 遵循系统静音设置
• 限制快速连续触发（最多每 100ms 一次）

音量控制：

• 所有音效均遵循主音量设置
• 用户可以在设置中关闭声音
• 移动设备上应配合触觉反馈

无障碍功能：

• 每种音效都有对应的视觉反馈
• 屏幕阅读器播报应与音频配合
• 关键资讯不能只依赖声音传达

文件规格

• 格式：WAV（开发期间），MP3/AAC（生产环境）
• 采样率：44.1kHz
• 位深：至少 16-bit
• 声道：单声道（减小文件大小，确保播放一致）
• 峰值电平：-1dB（避免削波）

## Examples

### Example 1: Mobile App Notification System

**Context**: Designing sounds for a productivity app.

**Input**:
> Help me design an audio system for a task management app. Key moments: task created, task completed, reminder, all tasks done for the day. Brand is calm, focused, professional.

**Output**:

## Task App Audio System

### Brand Sound Translation

**Brand attributes**: Calm, focused, professional
**Sound translation**:
- Calm → Soft attacks, rounded tones, major/neutral harmony
- Focused → Clean, uncluttered, single-element sounds
- Professional → Refined, not playful, no novelty sounds

### Sound Palette

**Tonal Center**: C major (neutral, universal)
**Primary Timbre**: Soft mallet/vibraphone character
**Duration Range**: 100ms - 800ms
**Character**: Clear, wood-like resonance with gentle decay

### Sound Designs

**1. Task Created** (feedback_subtle)
- Function: Confirm task was added
- Urgency: 1/5 (subtle)
- Design: Single mallet note (G4), soft attack, 120ms
- Feeling: Gentle acknowledgment, like a soft "got it"

**2. Task Completed** (feedback_success)
- Function: Celebrate completion, reward action
- Urgency: 2/5 (satisfying but not disruptive)
- Design: Two notes ascending (C4 → E4), 250ms total
- Feeling: Positive, forward momentum, clean resolution

**3. Reminder** (notification_standard)
- Function: Alert user to scheduled reminder
- Urgency: 3/5 (needs attention but not alarming)
- Design: Three-note melodic pattern (G4 → C5 → E5), 400ms
- Feeling: Friendly tap on shoulder, "hey, don't forget"

**4. All Tasks Complete** (celebration)
- Function: Reward daily completion
- Urgency: 2/5 (celebratory but not over the top)
- Design: Ascending arpeggio (C4 → E4 → G4 → C5), 800ms
- With subtle reverb tail for satisfaction
- Feeling: Achievement unlocked, day well done

### Audio Guidelines

```yaml
Sound System: TaskFlow v1.0

Palette:
  tonal_center: C_major
  timbre: mallet_vibraphone
  character: calm_professional

Sounds:
  - name: task_created
    file: sounds/task_created.wav
    duration_ms: 120
    trigger: task.create
    volume: -9dB (relative)

  - name: task_completed
    file: sounds/task_completed.wav
    duration_ms: 250
    trigger: task.complete
    volume: -6dB (relative)

  - name: reminder
    file: sounds/reminder.wav
    duration_ms: 400
    trigger: reminder.fire
    volume: 0dB (baseline)

  - name: daily_complete
    file: sounds/daily_complete.wav
    duration_ms: 800
    trigger: tasks.all_complete
    volume: 0dB (baseline)

Rules:
  - Respect system mute
  - Pair all sounds with haptic (mobile)
  - Throttle: max 1 sound per 200ms
  - No sound on app open

---

示例 2：电商结账音效

背景：为结账流程添加音频反馈。

输入：

为电商结账设计音效：加入购物车、从购物车移除、使用优惠券、支付处理中、购买完成。品牌风格现代、值得信赖，并略带俏皮。

输出：

电商结账音频

品牌声音转化

现代：简洁合成音，而非原声 值得信赖：和谐、收束、稳定 略带俏皮：稍有旋律趣味，但不显刻板

音效调色板

调性中心：F 大调（温暖、友好） 音色：圆润的数字音调，略带闪烁感 特质：友好而专业，像一位出色的销售人员

音效设计

加入购物车 ✚

• 功能：确认商品已加入
• 频率：高（每次会话中会多次出现）
• 设计：快速上扬的音高滑音 + 柔和的“噗”声（100ms）
• 非常轻柔、令人愉悦，不引人注意
• 像把东西放进柔软的袋子里

从购物车移除 ✕

• 功能：确认已移除
• 设计：加入购物车音效的反向版本——短促的下滑音（80ms）
• 中性，不带负面意味（移除商品并非坏事）
• 比加入购物车的音效更轻（-3dB）

已使用优惠券 🎟️

• 功能：奖励，确认已节省金额
• 设计：简短的庆祝旋律（C5 → A5 → F5），200ms
• 加入闪光元素——像意外之财
• 区别于常规反馈音效

支付处理中 ⏳

• 功能：表示正在处理，缓解焦虑
• 设计：柔和的脉动音调，可循环播放
• 平静、自信，传达“正在处理”
• 音量非常低，作为背景提示

购买完成 🎉

• 功能：重要的成功时刻，情绪高潮
• 设计：胜利感的琶音搭配持续和弦（1000ms）
• 系统中最响亮的音效
• 带来由衷的满足感
• 与视觉庆祝效果搭配

实施备注

// Sound trigger logic

// Add to cart - play immediately on success
cartAPI.add(item).then(() => {
  playSound('cart_add', { volume: 0.4 });
  // Throttle: won't play again within 150ms
});

// Purchase complete - play after visual confirmation
if (purchaseSuccess) {
  // Short delay so visual leads
  setTimeout(() => {
    playSound('purchase_complete', { volume: 0.8 });
  }, 200);
}

// Processing - loop while waiting
const processingSound = playSound('processing', {
  loop: true,
  volume: 0.2
});
// Stop when complete
paymentAPI.process().finally(() => {
  processingSound.stop();
});

检查清单与模板

UX 音效审核清单

## Current State Assessment

□ What sounds exist currently?
□ Are they consistent (family feel)?
□ Do users complain about any sounds?
□ Are sounds controllable (mute option)?
□ Are visual alternatives provided?

## Function Check

□ Every sound serves a clear purpose
□ Users understand what each sound means
□ Urgency matches message importance
□ Frequency considered (annoying over time?)

## Brand Check

□ Sounds match brand personality
□ Sounds distinct from competitors
□ Consistent with visual design language
□ Appropriate for target audience

## Technical Check

□ Files optimized for platform
□ Plays reliably across devices
□ Respects system audio settings
□ No clipping or distortion

---

音效设计规格模板

## Sound: [Name]

### Function
- Purpose:
- Trigger:
- User action that causes this:

### Context
- How often heard:
- User emotional state:
- Environment:

### Design
- Urgency level: _/5
- Duration: _ms
- Tonal content:
- Timbre description:

### Technical
- File: [filename.wav]
- Sample rate: 44.1kHz
- Channels: Mono
- Peak level: -1dB
- Relative volume:

### Relationships
- Replaces: [if replacing existing sound]
- Similar to: [related sounds in system]
- Distinct from: [sounds it must differ from]

技能边界

此技能擅长的方面

• 组织音频制作工作流
• 提供技术指导
• 创建质量检查清单
• 提出创意方法

此技能无法做到的事

• 取代音频工程专业知识
• 做出主观的创意决策
• 直接访问或编辑音频文件
• 保证商业成功

参考资料

• Audio UX：《The Future of Sonic Branding》（与 Lippincott 合作）
• LANDR：《Audio UX Sound Design》——实用方法
• UX Collective：《How Sound Design Can Make Wonders with Your Brand》
• Apple 人机界面指南——声音设计章节
• Material Design——UI 中的声音

相关技能

• sonic-branding - 品牌层面的音频识别
• audio-logo-design - 创建声音标识
• sound-design-murch - 电影声音设计原则
• voice-design - 语音界面

---

技能元数据（内部使用）

name: ux-sound-design
category: audio
subcategory: sound-design
version: 1.0
author: MKTG Skills
source_expert: Audio UX
source_work: Audio UX Methodology
difficulty: intermediate
estimated_value: $2,000-10,000 per audio system (equivalent design work)
tags: [ux, sound-design, product, notifications, audio-feedback]
created: 2026-01-26
updated: 2026-01-26