版本首页 / 需求文档
登录页新人福利提示
v2026.10.30-login-welcome · 基线 master@704fd7ff9 · 负责人 示例产品 · 更新于 2026-11-01
demo 不涉及服务端：本需求内的数据全部为本地模拟，研发实现时需对接真实接口。
背景
新用户进入登录页时不了解注册能获得什么，注册转化偏低。希望在登录页直接展示新人福利，提升注册意愿。
目标
- 新用户在登录页能一眼看到新人福利
- 可以查看福利明细，并被引导去注册
- 不打扰老用户：可关闭，关闭后不再出现
界面与功能标注
截图中的序号与下方「需求明细」一一对应，点击截图可放大。
1236- 1新人福利提示条
- 2查看福利入口
- 3关闭提示条
- 6切换到创作者登录时不展示
45- 4福利列表
- 5注册并领取
需求明细
1新人福利提示条
粉丝登录页的登录卡片上方展示一条金色提示条。
做什么
- 文案：New here? Claim your welcome perks（随系统语言多语言展示）
- 位于登录卡片正上方，宽度与卡片一致
- H5 与桌面端都展示
不做什么
- 不做轮播或多条提示
- 不根据用户来源区分文案
验收标准
- 打开 /login，提示条可见且文案正确
- 提示条不遮挡登录卡片的任何内容
2查看福利入口
提示条右侧「View」按钮，点击打开新人福利弹窗。
做什么
- 点击「View」打开福利弹窗
- H5 为底部弹出，桌面端为居中弹窗
不做什么
- 不跳转新页面
验收标准
- 点击「View」后弹窗出现，展示福利列表
3关闭提示条
提示条最右侧「×」关闭按钮。
做什么
- 点击「×」后提示条立即消失
- 关闭状态保存在本机，刷新页面后仍不展示
不做什么
- 不同步到账号（未登录无账号）
- 不提供「重新显示」入口
验收标准
- 点击「×」提示条消失
- 刷新页面后提示条仍不出现
4福利列表
弹窗内展示 3 项新人福利，每项包含序号、名称、说明、有效期。
做什么
- 展示 3 项福利：3 free messages / 7-day VIP trial / 50 bonus coins
- 每项右侧展示有效期（Valid for N days）
- 点击弹窗外的遮罩或右上角「×」关闭弹窗
不做什么
- 福利内容本期为固定模拟数据，不做后台配置
- 不展示福利的领取状态
验收标准
- 弹窗内恰好 3 项福利，名称与有效期正确
- 点击遮罩或「×」弹窗关闭
5注册并领取
弹窗底部主按钮「Sign up to claim」。
做什么
- 点击后关闭弹窗
- 自动聚焦登录卡片的邮箱输入框，引导用户注册
不做什么
- 本期不真正发放福利
- 不跳转独立注册页
验收标准
- 点击后弹窗关闭
- 邮箱输入框处于聚焦状态
6仅粉丝登录展示
创作者登录不展示新人福利。
做什么
- 切换到「Creator Login」时提示条隐藏
- 切回「Fan Login」时重新展示（未关闭过的情况下）
不做什么
- 不为创作者做单独的福利提示
验收标准
- 切到 Creator Login 提示条消失
- 切回 Fan Login 提示条重新出现
没有匹配的条目
本期不做
- 福利的真实发放与到账
- 福利内容的后台配置
- 埋点上报（研发实现时按埋点规范补充）
- 日语、韩语文案（本期回落英文）
模拟数据说明
- 福利列表为前端固定数据：src/demo-mock/login-welcome.ts
- 关闭状态存放在浏览器本地存储 demo_login_welcome_dismissed，清除浏览器数据后恢复展示
待确认问题
- 福利的有效期从注册成功开始计算，还是从首次登录开始？
- 老用户（已注册未登录）看到提示条是否会造成误解，是否需要文案区分？
变更记录
| 日期 | 内容 |
|---|---|
| 2026-10-30 | 创建版本包 |
| 2026-10-30 | 完成需求明细、截图标注（示例需求） |