delight

识别加入愉悦感、个性与意外精致感的机会，将功能性界面转变为令人愉悦的体验。

必须完成的准备工作

调用 /impeccable — 其中包含设计原则、反模式和上下文收集协议。继续之前，请遵循该协议——如果尚无设计上下文，必须先运行 /impeccable teach。此外，还要了解：什么风格适合该领域（活泼、专业、古怪还是优雅）。

---

评估增添愉悦感的机会

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

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

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

2. 了解上下文：

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

3. 确定愉悦策略：

   • 低调精致：精致的微交互（奢侈品牌）
   • 活泼个性：诙谐的插画与文案（消费类应用）
   • 贴心惊喜：在用户开口前预见需求（效率工具）
   • 丰富感官体验：令人舒心的声音、流畅的动画（创意工具）

如果无法从代码库中明确判断这些信息，请直接询问用户，弄清无法推断的内容。

关键：愉悦感应提升可用性，绝不能掩盖可用性。如果用户注意到愉悦元素的程度超过了完成目标的程度，那就做得过头了。

愉悦原则

遵循以下准则：

愉悦感应锦上添花，绝不阻碍操作

• 愉悦时刻应短暂（< 1 秒）
• 绝不要为了增添愉悦感而延迟核心功能
• 让愉悦元素可以跳过，或保持低调
• 尊重用户的时间与任务专注度

惊喜与探索

• 隐藏愉悦细节，让用户自行发现
• 鼓励探索与好奇心
• 不要为每个愉悦时刻都加以说明
• 让用户可以与他人分享自己的发现

符合上下文

• 让愉悦感契合当下情绪（庆祝成功，体谅错误）
• 尊重用户当下的状态（发生严重错误时不要开玩笑）
• 契合品牌个性与受众预期
• 注意文化差异（不同文化对愉悦的感受各不相同）

随时间积累

• 多次使用后，愉悦感仍应保持新鲜
• 灵活变化反馈方式（不要每次都用相同动画）
• 随着持续使用逐步展现更深层的内容
• 通过规律建立期待

愉悦技巧

通过以下方法增添个性与乐趣：

微交互与动画

按钮的愉悦效果：

/* 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 次时依然舒适吗？
• 不会造成阻碍：用户可以选择关闭或跳过吗？
• 性能良好：没有卡顿，也不会变慢
• 恰到好处：符合品牌和场景
• 无障碍：支持减少动态效果设置和屏幕阅读器

请记住：惊喜体验是工具与体验之间的区别。赋予产品个性，以积极的方式带给用户惊喜，并创造值得分享的时刻。但始终要尊重易用性——惊喜体验应当锦上添花，绝不应成为阻碍。