在线吹生日蜡烛工具概要设计

https://birthday-cake.online/ 是一款可以在浏览器中直接使用的，用来模拟生日吹蜡烛场景的互动程序，用户打开应用，配置生日场景后，通过对着麦克风吹气，就能实时吹灭屏幕中的虚拟生日蛋糕上燃烧的蜡烛。还可以将布置好的蛋糕场景生成专属链接分享给好友，让其在线体验这份吹蜡烛的互动惊喜。

本文为该软件的概要设计文档。

应用界面

• 全局布局：顶导航+内容+footer
• 样式风格：部分文案字体使用快乐体

一、开始界面

功能区：由上到下分别是标题、标题下的提示文案、虚拟蛋糕（包含蜡烛）、开始按钮区域（包含两个按钮：“布置蛋糕”和“直接开始”）。底部开始按钮区域并非线性排在虚拟蛋糕下面，而是使用背景遮罩，遮住蛋糕的三分之一左右，这样能够引导用户去点击，以免用户不知道吹蛋糕之前需要先进行配置。功能区的组件，加上 header 占据屏幕高度。

文本区：用户还可向下滚动，查看 FAQ、使用帮助等。

二、蛋糕布置界面

此界面用来个性化配置蛋糕场景。

1. 抽屉组件：布置蛋糕的界面需实现抽屉组件，桌面端从右侧滑入，移动端从底部划入。
2. 步骤项：抽屉中的内容为蛋糕场景配置项，实现为有序步骤条（顶部进度步骤条，可任意切换步骤，中间为表单内容，底部为上下步切换按钮）。

SEO 实现要求：抽屉，及抽屉内所有步骤中的内容， DOM 首屏完整渲染，不用 display，仅视觉隐藏；步骤用 ol 有序列表、规范 h2/h3 标题层级、全表单 label 语义化；保证爬虫抓取全部内容。

用户可以配置的内容包括：选择蛋糕（有默认）、选择蜡烛（有默认）、编辑祝福语（可跳过）、调整麦克风灵敏度。

三、吹蜡烛互动界面

1. 吹蜡烛互动界面：显示布置好的生日蛋糕场景，这是庆祝生日时使用的关键页面，用户在这个界面可以进行吹蛋糕动作，在已完成配置的状态下显示。界面中的元素包括：祝福语、提示、蛋糕（包含蜡烛）。右下脚为操作按钮区域，有锁定、分享等按钮，按钮中的内容为对应的 icon 。按钮纵向排列

应用功能

功能一、布置蛋糕场景功能

通过填写表单，布置蛋糕。布置过程中可实时预览。

1. 蛋糕选择功能：提供多种蛋糕可选
2. 上传自定义蛋糕功能：除了支持预设的蛋糕，如果您对蛋糕的样式不满，还可以上传蛋糕图片。
3. 蜡烛选择功能：可以选择使用经典款和数字款蜡烛。
4. 调整蜡烛数量功能：根据年龄，选择对应的蜡烛数量，最大支持摆放50只蜡烛。更大的年龄可以选择使用数字型蜡烛。
5. 录入祝福语功能：填入寿星(birthday honoree)的名字、留言(note)、祝福发起者(sender)，蛋糕界面会有提示语。

蛋糕界面：祝福语，包含 xxx 署名等

功能二、吹蛋糕功能

1. 吹气进度条功能：吹满进度条，蜡烛才会熄灭。

2. 对麦克风吹气，吹灭蜡烛。蜡烛吹灭时，播放烟花效果，还要有气球🎈

3. 锁定、解锁功能：防止一有风吹草动，蜡烛就被吹灭。完成配置后，可以点击一个解锁/锁定的按钮。锁定情况下，检测到吹气，蜡烛页不会灭

   状态	麦克风	进度条	吹蜡烛
   锁定	❌ 不工作	❌ 不走	❌ 吹不灭
   解锁	✅ 正常工作	✅ 正常走	✅ 可以吹灭

4. 麦克风灵敏度调节功能：由于设备差异，不同用户对麦克风灵敏度的感知不同，有的人反馈太过灵敏，还没开始吹就灭了，有的人反馈蜡烛吹不灭。不同手机，麦克风灵敏度有所区别，在给你的朋友吹之前，可以先通过调节灵敏度，确保处于最适合的状态。

5. 作弊功能：如果发现吹不灭，麦克风失效，怎么办？为了防止还是有问题莫名其妙的故障导致吹不灭，那么，界面上有一个微笑的作弊按钮，长按后也能让蜡烛熄灭。桌面端则可以长按空格键。

6. 全屏显示功能：为了打造更沉浸式的体验，用户在吹蛋糕时，应该全屏显示蛋糕场景界面，全屏应该只针对蛋糕场景，header 、footer 等不应包含在内。配置完蛋糕后，默认是直接进入全屏显示的，如果不慎退出，也应该有全屏按钮让用户再次进入全屏

7. 开启麦克风权限功能：打开后会让用户选择是否允许。查看

8. 调整蛋糕功能：点重新配置是打开布置蛋糕模态框让用户进行调整，而不是要回到主页，现在是回到主页去了。分享和调整放在一个 dropdown 或者别的什么东西里面。锁定其实也是。加锁后才显示锁的 icon 正常状态下不显示。

9. 重新开始功能：结束后可以再次点亮，或者返回主页（非 primary），点击返回主页按钮这清除配置好的蛋糕。

功能三、分享蛋糕场景功能

分享的是当前布置好的蛋糕场景。

1. 复制分享链接功能
2. 打开分享功能

SEO

落地页 heading 树状结构

H1: 网页在线吹蜡烛模拟器 (Electronic Birthday Cake) —— 许下心愿，即刻吹灭虚拟生日蛋糕
├── H2: 简单三步，定制并体验吹蜡烛惊喜 (How It Works) [网页可见：使用步骤说明]
│   ├── H3: 第一步：布置您的专属生日蛋糕 (1. Customize Your Cake)
│   ├── H3: 第二步：对着麦克风吹气许愿 (2. Blow Out the Candles)
│   └── H3: 第三步：一键分享惊喜给好友 (3. Share the Sweet Surprise)
├── H2: 为什么选择我们的虚拟吹蜡烛应用？(Why Choose Us) [网页可见：核心优势/卖点]
│   ├── H3: 真实物理吹气感应，仪式感满满
│   ├── H3: 丰富的个性化定制，打造独特心意
│   └── H3: 免下载即开即玩，跨平台无缝分享
├── H2: 布置您的生日蛋糕 (Configure Your Birthday Cake) [抽屉内：实际表单语义区]
│   ├── H3: 1. 挑选与定制生日蛋糕样式 (Select Cake Style)
│   ├── H3: 2. 自由搭配生日蜡烛 (Choose Birthday Candles)
│   ├── H3: 3. 撰写个性化生日祝福语 (Add Custom Wishes)
│   └── H3: 4. 调整麦克风灵敏度 (Adjust Mic Sensitivity)
├── H2: 吹蜡烛互动常见问题解答 (Frequently Asked Questions - FAQ) [网页可见]
└── H2: 今天就为 TA 送上一份特别的生日惊喜吧！(Call to Action) [底部 CTA]

todo

7. 过生日忘了买蜡烛怎么办？电子蛋糕有哪些优势。安全、环保、便利不用担心有人把蛋糕pia在脸上
8. 想起了过生日姐姐插上蜡烛 别吹别吹的视频。
9. 拍视频。
10. 小红书上说支付宝可以吹蜡烛。
11. 你可能了解过很多方案

• 优化关于和使用指南页面内容。
• 重新点亮出现得太快了，这样会影响用户欣赏蛋糕熄灭动画。
• from 要在 message 下面
• 拆分页面 welcome 页面和 scene 页面，直接用参数导航，scene 页面根据 URL 参数加载配置
• 个性化配置应有其文字说明
• layout 是所有页面都有的，只不过在 scene 页面默认的全屏对象为 scene 本身，以这种方式来沉浸式展示。
• 要能够亮起灯光，烟花要落在地上。最终的界面也要炫酷，方便别人分享。
• 各个配置项要能单独进入配置。配置之后要能预览？预览界面要有扳手按钮。点进去继续配置。
• 配置本质上是可选的。有配置之后不展示开始按钮？吹蛋糕界面就可以再进行配置的。所以不需要预览了。
• 填写的过程中如何退出来预览的问题？关闭按钮不合适，那就不要最后确认了才保存数据，任意一步都可以退出？但那就无法区分开始前和开始后的状态，要提供一个清除配置的功能， start over 放在哪里？
• 吹灭蜡烛后新增两大特效：①页面全局暖粉橙氛围灯光缓缓亮起，蛋糕带柔光呼吸发光；②全屏彩色烟花炸开，粒子碎屑下坠落地并在底部堆积留存；点击reset 按钮重置场景时，立刻关闭灯光、清空落地烟花，恢复初始暗背景；烟花粒子轻量化不卡顿，配色沿用页面粉橙紫风格，特效仅在全部蜡烛吹灭后触发
• 添加越南语
• 测评对比几款吹蛋糕工具。
• 灵敏度改成麦克风灵敏度
• 蛋糕场景页面增加配置按钮。返回实际上是返回主页，应该清空数据。
• 撰写文章：使用电子生日蛋糕吹蜡烛的好处
• 写作：为什么我决定自己打造一款电子生日蛋糕应用？
• 多语言用了客户端状态，需要干掉。
• footer 和 about 添加联系作者 ，邮箱 dev@huayemao.fun
• 博客界面未使用 pagelayout ，UI 设计风格未参照关于页面来设计。
• 支持播放生日歌

宣传角度

• 在浏览器里吹蜡烛
• 设计了一款在线吹生日蜡烛工具。
• 讲一讲我的在线吹生日蜡烛工具。
• 救急用

ps 教会用户确定需求的技巧：如果你不知道怎么描述你想要的软件是什么样的。那就写一、 XXX 功能 二、XXX 功能