delight

找出增添愉悦感、个性和意想不到的精致感的机会，将功能性界面转变为令人愉悦的体验。

必须完成的准备工作

阅读 frontend-design，并遵循其中的上下文收集流程。重用现有上下文，只针对重要的信息缺口提问。此外，还需了解：什么风格适合该领域（活泼、专业、古怪还是优雅）。

---

评估带来愉悦感的机会

找出能提升体验（而非分散注意力）的愉悦时刻：

1. 找到自然的愉悦时刻：

   • 成功状态：操作完成时（保存、发送、发布）
   • 空状态：首次使用体验、引导流程
   • 加载状态：可以增添趣味的等待时刻
   • 成就：里程碑、连续完成记录、任务完成
   • 交互：悬停状态、点击、拖动
   • 错误：缓和令人沮丧的时刻
   • 彩蛋：为好奇的用户准备的隐藏惊喜

2. 了解上下文：

   • 品牌个性是什么？（活泼？专业？古怪？优雅？）
   • 受众是谁？（精通技术？有创造力？企业用户？）
   • 情感背景是什么？（成就感？探索欲？挫败感？）
   • 什么才合适？（银行应用 ≠ 游戏应用）

3. 制定愉悦策略：

   • 含蓄精致：精致的微交互（奢侈品牌）
   • 活泼个性：风趣的插画和文案（消费类应用）
   • 贴心惊喜：在用户提出需求前就预见并满足（效率工具）
   • 丰富感官体验：令人满足的声音、流畅的动画（创意工具）

如果无法从代码库中看出其中任何一点，请直接询问用户，澄清你无法推断的内容。

重要：愉悦感应提升易用性，绝不能遮蔽易用性。如果用户对愉悦设计的注意超过了对完成目标的关注，就做得过头了。

愉悦感不是随意卖萌的许可证。产品类别越低调，愉悦设计就应越含蓄。

请参考 AI 垃圾设计检测，确保愉悦设计独具特色，而不是沦为千篇一律的潮流装饰。 如果希望通过优化默认样式、强调边框、微妙的背景效果或出人意料的组件呈现来营造愉悦感，请参考 收尾润色。

愉悦设计原则

遵循以下指南：

愉悦感锦上添花，绝不阻碍使用

• 愉悦时刻应当短暂（< 1 秒）
• 绝不为了愉悦效果而延迟核心功能
• 让愉悦效果可以跳过，或保持含蓄
• 尊重用户的时间和任务专注度

惊喜与探索

• 隐藏令人愉悦的细节，留待用户发现
• 鼓励探索和好奇心
• 不要为每个愉悦时刻都加以提示
• 让用户可以与他人分享发现

符合上下文

• 让愉悦感契合当下的情绪时刻（为成功喝彩，面对错误时表示理解）
• 尊重用户的状态（遇到严重错误时不要开玩笑）
• 符合品牌个性和受众预期
• 注意文化敏感性（不同文化对愉悦的理解各不相同）

个性，而非噪音

• 用愉悦设计强化选定的个性，不要与之冲突
• 优先以简单的优化改进默认样式，而不是凭空创造全新的 UI 模式
• 空状态通常比核心任务界面更值得增添视觉趣味

随时间累积

• 多次使用后，愉悦感依然应保持新鲜
• 变化反馈方式（不要每次都用同一种动画）
• 随着用户持续使用，逐步展现更深层的内容
• 通过规律营造期待感

愉悦设计技巧

通过以下方式增添个性和乐趣：

强化默认设计

• 在设计全新组件之前，先优化现有的项目符号、链接、复选框、标题和卡片
• 添加细小的强调边框，以低成本、简洁地塑造个性
• 优先使用间距、细微的背景变化或克制的阴影，再考虑添加大量边框
• 装饰性背景应保持低对比度，确保内容仍是视觉焦点

微交互与动画

让按钮更有趣：

/* Satisfying button press */
.button {
  transition: transform 0.1s, box-shadow 0.1s;
}
.button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Ripple effect on click */
/* Smooth lift on hover */
.button:hover {
  transform: translateY(-2px);
  transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1); /* ease-out-quart */
}

让加载过程更有趣：

• 使用俏皮的加载动画（不只是旋转图标）
• 让加载提示语体现个性（撰写符合产品特点的提示语，而非泛泛的 AI 套话）
• 通过鼓励性的提示语展示进度
• 使用带细微动画的骨架屏

成功动画：

• 绘制对勾的动画
• 为重要成就添加彩纸爆发效果
• 使用柔和的缩放和淡入淡出效果进行确认
• 加入令人愉悦的音效（保持轻柔）

悬停惊喜：

• 悬停时触发图标动画
• 颜色变化或发光效果
• 展现有个性的工具提示
• 光标变化（为品牌体验定制光标）

文案个性

俏皮的错误提示：

"Error 404"
"This page is playing hide and seek. (And winning)"

"Connection failed"
"Looks like the internet took a coffee break. Want to retry?"

鼓励性的空状态：

"No projects"
"Your canvas awaits. Create something amazing."

"No messages"
"Inbox zero! You're crushing it today."

俏皮的标签与工具提示：

"Delete"
"Send to void" (for playful brand)

"Help"
"Rescue me" (tooltip)

重要：文案风格应符合品牌个性。银行不该太古灵精怪，但可以亲切温暖。

插画与视觉个性

定制插画：

• 空状态插画（而不是图库图标）
• 错误状态插画（友好的小怪物、古灵精怪的角色）
• 加载状态插画（动画角色）
• 成功状态插画（庆祝场景）

图标个性：

• 定制与品牌个性相符的图标集
• 动画图标（悬停或点击时轻微动效）
• 插画风格的图标（比通用图标更精细）
• 所有图标保持风格统一

背景效果：

• 细微的粒子效果
• 渐变网格背景
• 几何图案
• 视差纵深效果
• 分时段主题（早晨与夜晚）
• 背景装饰应保持低对比度；如果它与内容争抢注意力，就不再是令人愉悦的点缀

令人愉悦的交互

让拖放更有趣：

• 拖动时产生浮起效果（阴影、缩放）
• 放下时播放吸附动画
• 放置时播放令人愉悦的音效
• 显示撤销提示（“放错地方了？[撤销]”）

切换开关：

• 使用弹簧物理效果实现平滑滑动
• 颜色过渡
• 提供细微的视觉反馈、声音或适当情况下可选的浏览器支持振动
• 可选音效

进度与成就：

• 连胜计数器与里程碑庆祝效果
• 进度条在达到 100% 时“庆祝”
• 带动画的徽章解锁效果
• 俏皮的统计提示（“状态正旺！已连续 5 天”）

表单交互：

• 输入框聚焦时播放动画
• 勾选复选框时播放令人愉悦的缩放脉冲动画
• 输入有效内容后展示庆祝式成功状态
• 自动扩展的文本区域

音效设计

细微的音频提示（适当时使用）：

• 通知音效（有辨识度但不恼人）
• 成功音效（令人愉悦的“叮”声）
• 错误音效（体贴而非刺耳）
• 聊天/消息输入音效
• 环境背景音频（非常轻柔）

重要：

• 遵循系统声音设置
• 提供静音选项
• 音量保持轻柔（细微提示，而非警报）
• 不要每次交互都播放音效（听觉疲劳确实存在）

彩蛋与隐藏惊喜

探索奖励：

• 输入 Konami 代码解锁特别主题
• 隐藏键盘快捷键（Cmd+K 可使用特别功能）
• 将鼠标悬停在标志或插画上时显示惊喜
• 在图片的替代文本中加入笑话（屏幕阅读器用户也能听到！）
• 面向开发者的控制台消息（“喜欢你看到的吗？我们正在招聘！”）

季节性点缀：

• 节日主题（细致而得体）
• 季节性颜色变化
• 基于天气的变化
• 随时间变化（夜晚调暗，白天调亮）

贴合情境的个性：

• 根据一天中的时段显示不同提示语
• 针对特定用户操作作出回应
• 随机变换提示语（每次不要都相同）
• 随着持续使用逐步展现更多内容

加载与等待状态

让等待过程更有趣：

• 轮换显示有趣的加载消息
• 设计有个性的进度条
• 长时间加载时提供小游戏
• 等待时展示趣味知识或提示
• 倒计时并附上鼓励的话语

Loading messages — write ones specific to your product, not generic AI filler:
- "Crunching your latest numbers..."
- "Syncing with your team's changes..."
- "Preparing your dashboard..."
- "Checking for updates since yesterday..."

警告：避免使用“驱赶像素”“教机器人跳舞”“求助魔法 8 号球”“从无穷大开始倒数”这类陈词滥调的加载消息。这些文案是 AI 垃圾内容，一眼就能看出是机器生成的。请根据产品的实际功能编写具体的消息。

庆祝时刻

庆祝成功：

• 重大里程碑时放礼花
• 完成任务时显示动画对勾
• 进度达到 100% 时庆祝
• 显示“成就解锁”风格的通知
• 发送个性化消息（“你已发布第 10 篇文章！”）

认可里程碑：

• 首次执行操作时给予特别反馈
• 追踪并庆祝连续完成记录
• 展示目标的完成进度
• 庆祝周年纪念

实现模式

动画库：

• Framer Motion（React）
• GSAP（通用）
• Lottie（After Effects 动画）
• Canvas confetti（派对效果）

声音库：

• Howler.js（音频管理）
• Use-sound（React hook）

物理效果库：

• React Spring（弹簧物理效果）
• Popmotion（动画基础组件）

重要：文件大小很重要。请压缩图片、优化动画，并延迟加载提升愉悦感的功能。

切勿：

• 为了提升愉悦感而延迟核心功能
• 强迫用户体验趣味时刻（应允许跳过）
• 用趣味效果掩盖糟糕的用户体验
• 过度设计（少即是多）
• 忽视无障碍性（谨慎使用动画，并提供替代方案）
• 让每次交互都充满趣味（特殊时刻应当特别）
• 为了提升愉悦感而牺牲性能
• 忽视场景是否合适（注意分寸）
• 把提升愉悦感当成随意添加奇思妙想或偏离品牌风格装饰的许可
• 在间距、强调色或细微的表面变化更合适时，额外添加边框

验证愉悦体验的质量

测试这些设计是否真的能带来愉悦体验：

• 用户反应：用户会微笑吗？会分享截图吗？
• 不会惹人厌：重复 100 次后依然令人愉快吗？
• 不会造成阻碍：用户可以选择退出或跳过吗？
• 性能良好：没有卡顿，也不会变慢
• 恰当：符合品牌和场景
• 无障碍：支持减少动态效果设置和屏幕阅读器

请记住：愉悦体验能让工具与体验有所区别。为产品增添个性，带给用户惊喜，并创造值得分享的时刻。但始终要尊重易用性——愉悦体验应当锦上添花，而非妨碍使用。