添加愉悦 (delight)

添加愉悦（delight）

概述

delight 是为界面添加愉悦元素的技能。它的核心是：让界面不只是能用，而是让人喜欢用、记得住。

作为设计师/开发者，你可能遇到过：

“界面能用但没感觉”
“太严肃/太无聊”
“想给用户惊喜”

delight 就是解决这些的。

为什么要添加愉悦

1. 情感连接

用户 vs 产品：

❌ 之前：
- 用完就走
- 没有印象
- 没有感情

✅ 之后：
- 喜欢用
- 推荐给朋友
- 有好印象

2. 差异化

产品同质化：

❌ 之前：
- 功能差不多
- 体验差不多
- 没什么区别

✅ 之后：
- 有个性
- 有记忆点
- 不一样

3. 用户留存

愉悦体验：

✅ 之后：
- 愿意继续用
- 愿意付钱
- 愿意推荐

愉悦元素类型

1. 视觉愉悦

微插画：

场景：
- 空状态插画
- 成功/失败插画
- 加载动画

风格：
- 可爱
- 有趣
- 符合品牌

表情符号：

使用场景：
- 成功提示：🎉
- 错误提示：😅
- 警告提示：⚠️
- 提示：💡

动画：

场景：
- 成功反馈
- 加载等待
- 页面过渡

效果：
- 流畅
- 有趣
- 不过度

2. 交互愉悦

意想不到的反馈：

场景：
- 点击按钮的反馈
- 悬停效果
- 输入验证

效果：
- 有趣
- 及时
- 不会干扰

彩蛋：

场景：
- 特定操作触发
- 隐藏功能
- 节日主题

效果：
- 惊喜
- 有趣
- 可发现

3. 文案愉悦

友好的文案：

❌ 之前：
- "错误"
- "失败"
- "不支持"

✅ 之后：
- "哎呀，出错了"
- "这个还没准备好"
- "换个试试？"

有趣的提示：

场景：
- 空状态
- 加载中
- 错误提示

风格：
- 友好
- 有趣
- 符合品牌

4. 声音愉悦（可选）

反馈音效：

使用场景：
- 操作成功
- 收到通知
- 完成某个动作

注意：
- 可关闭
- 不打扰
- 适度使用

添加愉悦的原则

1. 克制

不是越多越好：

✅ 正确：
- 关键节点添加
- 适度使用
- 不影响效率

❌ 错误：
- 到处都加
- 太花哨
- 干扰使用

2. 相关

与场景相关：

✅ 正确：
- 成功时庆祝
- 错误时安慰
- 空状态时引导

❌ 错误：
- 不相关的地方加
- 无关的动画

3. 品牌

符合品牌调性：

✅ 正确：
- 年轻品牌：活泼
- 专业品牌：克制
- 儿童产品：可爱

❌ 错误：
- 不符合品牌
- 太突兀

4. 可选

用户可控：

✅ 正确：
- 可关闭
- 可设置
- 尊重选择

❌ 错误：
- 强制显示
- 无法关闭

实践场景

1. 成功反馈

普通反馈：

✓ 操作成功

愉悦反馈：

🎉 太棒了！
你已经完成了第 1 步

2. 空状态

普通空状态：

暂无数据

愉悦空状态：

🎨 这里还没有内容
成为第一个创作者吧！
[创建内容]

3. 加载状态

普通加载：

加载中...

愉悦加载：

✨ 正在准备中...
（小提示：快捷键 Cmd+S 可以保存）

4. 错误状态

普通错误：

网络错误

愉悦错误：

😅 网络开小差了
试试刷新页面，或者稍后再来

5. 引导

普通引导：

请输入邮箱

愉悦引导：

📧 输入邮箱
我们会发送一封神奇的邮件给你

愉悦设计模式

1. 庆祝时刻

完成某个里程碑时：
- 注册成功
- 首次购买
- 完成目标

设计：
- 动画庆祝
- 徽章奖励
- 分享鼓励

2. 进度反馈

长时间操作时：
- 文件上传
- 数据处理
- 批量操作

设计：
- 进度条
- 百分比
- 鼓励文案

3. 惊喜时刻

特定触发时：
- 首次登录
- 达成成就
- 节日活动

设计：
- 彩蛋
- 动画
- 特殊效果

4. 情感安慰

出错时：
- 网络错误
- 操作失败
- 意外情况

设计：
- 友好文案
- 安慰图标
- 解决建议

注意事项

不要过度

❌ 过度：
- 每个点击都动画
- 到处是彩蛋
- 太花哨

✅ 适度：
- 关键节点
- 重要时刻
- 有意义

不要干扰

❌ 干扰：
- 弹窗太多
- 动画太慢
- 影响操作

✅ 友好：
- 不打断流程
- 可以跳过
- 不强制

考虑性能

❌ 问题：
- 大视频
- 复杂动画
- 影响加载

✅ 正确：
- 轻量动画
- 性能优先
- 优雅降级

速查卡片

愉悦类型

视觉愉悦
交互愉悦
文案愉悦
声音愉悦

添加原则

克制
相关
品牌
可选

场景

成功反馈
空状态
加载状态
错误状态

注意

不要过度
不要干扰
性能优先

与其他技能

polish - 打磨
animate - 动画
clarify - 文案

查看源文件: GitHub原始文件