分工只登记在仓库顶层的 BOUNDARIES.md,本页不另写。
读图:眼睛先落在满座的照片(1)→ 标题(2)→ 黄色主按钮(3);唯一的主操作是「Tell us your date」,点了直接打开订场表。第二屏专门摆我们自己拍的真实场面。砍掉了日历、顶部状态条、§ 编号、照片角标、底部重复的入口。接近成品的样子看第二版草稿(对比说明在这一页)。
子 PRD:订场「批准之后才付款」PRD v0.1 | 专页:计划 /reserve 订场页改版 · 提高转化的计划 · 计划 订场「批准之后才付款」· 工作流文档 | 边界:仓库顶层 BOUNDARIES.md
读图:这一摊现在有四份文件:这份需求文档说「/reserve 这一页做成什么样」;新长出来的子 PRD 单管「店长批准之后客人怎么付款」,它自己配一份工作流文档放状态机和信的正文;计划页说「先做哪一步」。分析页放数字和理由,不参与这张图。
问题:想在 Palo Alto 或 Champaign 的店里办活动的人进来,第一屏的主按钮 See the stores ↓ 只会往下滚;四屏里三屏比屏幕高;近 30 天 33 次访问,30 次什么都没做,没有一条真订场请求(见分析页)。
做法:页面分五屏(从上往下五段),每屏装进一个屏幕;不放日历——第一屏的黄色主按钮 Tell us your date → 直接打开订场表(选店、说日期、说人数);第二屏用我们自己拍的真实场面当主角;文案只说站上说过的事实;砍掉装饰。空档由我们人工回,所以页面明写「我们查那天空不空」。
从进来到订上:选店、说日期和人数 → 登录、提交 → 我们查那天这间屋子空不空 → 审核通过发付款链接 → 付完款才算订上。只改这一页。
什么算好:下面八条检查全绿。
配色、字体、每屏的基本排法照 /catering 的 PRD(分支 claude/catering-redesign-plan-2026-09-15,docs/prd/catering.html「两页共用的视觉方向」一节)。
小标签是标题上方的小字,强调词是标题里标黄的词(表里加粗),描边按钮只有边框。每屏最多一个强调词、一个黄色主按钮。页面上的英文照表里原样印。
| 屏 | 小标签 · 标题 | 其余的字 | 按钮 | 照片 site/assets-reserve/ |
|---|---|---|---|---|
| 第一屏 | Private events Your night, in a full room. | 标题下一句 Birthdays, offsites, club nights, launches. You get the room in Palo Alto or Champaign, and the robot pours for every guest. 按钮下小字 We confirm every request before anything is booked. | 主按钮 Tell us your date → 打开订场表;描边 Have a look around first ↓ 滚到下一屏 | event-paloalto-fullhouse.jpg,电脑放右边、手机放上面;有可识别的客人正脸(Jack 2026-09-16 同意用) |
| 三家店 | Three cafés Pick a room. | 店卡 ×3(城市 · 店名 · 地址): Palo Alto, CA · Yummy Future Bay · 170 University Ave Champaign, IL · Yummy Future Matcha House · 401 E Green St, Suite B Champaign, IL · Yummy Future Original · 609 E Green St | 描边 Book this room → 打开订场表并预选这家店;链接 Directions ↗ | venue-paloalto.jpg、venue-matcha-house.jpg、venue-original.jpg,无可识别人脸 |
| 真实活动 (第 2 屏) | Real photos What a night here looks like. | 标题下一句 Every one of these is our own room on a normal day. Book it and the room is yours: same tables, same robot, drinks for everyone you bring. 图说 Palo Alto, full house / Champaign, study night / A toast out front / The robot, mid-pour / The crew, before opening 活动类型 Birthdays · Team offsites · Club meetups · Launch nights · Study nights · Podcast tapings | — | 五张:event-paloalto-fullhouse.jpg、event-champaign-study.jpg(两张有可识别的客人正脸)、event-cheers.jpg 脸虚化、event-robot-bar.jpg 无人、event-team.jpg 是我们自己的店员 |
| 怎么订 | Three steps How it works. | 01 You tell us the date — Pick one of our cafés, say which day and roughly how many people. Two minutes. 02 You send it over — Tell us your headcount and sign in. That’s the part that lets you change it or cancel later. 03 We check the room — One of us checks that day is free, then emails you a payment link. It’s a busy stretch, so please bear with us. 底下两行 Tell us the hours you want and we’ll say what’s free · The robot does the pouring | — | — |
| 最后一屏 | Book Let’s find you a date. | 小字 Not sure yet? Write to us: business@yummy-future.com 小字 Rather have us cater it? Catering → | 主按钮 Tell us your date → 打开订场表 | — |
装下=一屏高度 ≤ 窗口高度减去顶上停着的导航条:电脑 1280×720 可用 647 像素,手机 375×812 可用 743 像素;日光、夜间两种配色都要装下,不许左右超出。
新加两个埋点(页面往统计库发的记录):每屏第一次被看到、每点一次按钮,各报一条;名字跟 /catering 改版用同一套,见附录。
按重要度排,命令在附录。
| 编号 | 功能 | 怎么验 |
|---|---|---|
| F01 | 每屏装进一个屏幕 | 真浏览器量每屏高度,超高 0 处 |
| F02 | 五屏顺序对(第一屏 · 真实活动 · 三家店 · 怎么订 · 最后一屏)、第一屏主按钮打开订场表、三家店都有入口 | 真浏览器查一遍,不合格 0 处 |
| F03 | 页面上一点日历都不剩 | 同 F02 的检查:日历脚本、日历标记都查不到 |
| F04 | 点按钮进表单,流程照旧 | 现有测试:第 1 步问店、日期、人数,第 2 步要登录 |
| F05 | 付完款跳回来,结果面板照常打开 | 现有测试 |
| F06 | 文案守规矩 | 同 F02 的检查:无中文、营收融资数字、假倒计时、旧承诺 |
| F07 | 新埋点真的发出 | 测试里模拟滚动和点击,每屏、每次点击各报一条 |
| F08 | 第一次打开,整页 10 秒内加载完 | 用测加载时间的脚本量,不超过 10 秒 |