H5 邀请函：一个发布会页面的从 0 到 1

背景：要给新产品做一份朋友圈可传播的 H5 邀请函。要求是：打开就能看到发布会信息，往下滑有日程，底部能报名——还要「看起来不像 AI 做的」。

为什么 H5 最难「不像 AI 做的」？

因为 H5 是 AI slop 的重灾区。打开任何一个 AI 工具说「做个活动邀请页」，产出物大概率是：

• 深色渐变背景 + 金色大字
• 到处都是粒子/飘落动画
• 信息挤在一起，分不清主次

这些设计的问题不是「丑」，而是「所有的活动页都长这样」，品牌识别度为零。

第一步：锚定叙事角色

开工前，AI 先用 Junior Designer 工作流的四问框架确认叙事：

四问答完再说设计系统。

第二步：设计系统——暖灰 + 荧光绿

针对「兴奋但有克制」的视觉温度，AI 推荐了以下系统：

• 底色：暖灰（#F8F6F3），不是纯白也不是纯黑
• accent：荧光绿（#00E676），只在关键信息上出现（<3% 面积）
• 字体：Inter（数字/英文）+ Noto Serif SC（中文标题）
• 动效：滚动驱动的渐入，不是自动播放的粒子

第三步：5 个信息块的节奏设计

Block 1: Hero

全屏 hero，标题 + 日期 + 一个浮动产品轮廓。背景是暖灰到深灰的极渐变。

关键细节： 标题字号 28px，日期字号 14px（灰色），3 秒后标题下方有一个荧光绿下划线从 0→100% 展开——这是唯一的「进场动效」。

Block 2: 时间地点

两行信息，极简。icon 用 Lucide 的 clock/map-pin，不用 emoji。

▸ 2026.06.15 · 14:00 - 17:00
▸ 深圳 · 南山 · 设计公社

Block 3: 三大亮点

三个数字（01/02/03）带标题 + 一行描述。不用卡片，不用 icon，纯靠字重和间距区分层级。

设计原则：克制到只剩文字还能读——去掉所有装饰元素，信息本身是否完整？

Block 4: 日程表

时间线格式：时间（左对齐，等宽字体）+ 事件（右对齐）。中间一条极淡竖线连接。

这个日程表是整页信息密度最高的区块，用竖线引导视线纵向流动。

Block 5: CTA

底部 CTA：荧光绿按钮 +「仅剩 50 席」的社会证明。按钮两侧留白 40px，不与任何元素抢视觉焦点。

第四步：滚动动效原则

H5 的动效不是为了炫，是为了引导用户继续往下看。

滚动驱动（Scroll-driven）的三个动效：

1. Block 进入时：opacity 0 → 1，translateY 20px → 0（持续 600ms）
2. 数字变化：亮点数字在进入视口时从 0 计数到目标值
3. CTA 脉冲：进入视口后荧光绿按钮每 3 秒一次呼吸

所有这些动效用 CSS @keyframes + Intersection Observer 实现，不需要第三方库。

为什么这个 H5 看起来「不像 AI 做的」？

因为它避开了 AI H5 的 3 个默认模式：

核心原则：动效服务于叙事，不服务于「看起来很酷」。

耗时复盘

核心心得

H5 邀请函设计的本质：用户滑动的每一步，你都在告诉他「继续往下看是值得的」。

滚动动效就是在说这句话。而信息节奏就是在规划这句话怎么说——先说是什么（Hero），再说为什么来（亮点），最后说怎么来（CTA）。

下次你做活动推广页的时候，克制住加粒子动画的冲动，先把 5 个信息块写出来。内容对了，设计才有根基。

截图清单

1. ✅ H5 邀请函（手机滚动式 + 5 信息块 + 荧光绿 accent）— 已插入上文