23 KiB
23 KiB
CyberGril 完整产品设计 · 可施工规范（HEL-746 / R2）
延续 HEL-744 R1 已认可的方向「夜色里一扇亮着的窗」。本轮没有改首页的比例、字号和人物窗位置，也没有改交流时放大人物窗的方式。在这个基础上补齐了生活与共同回忆、首建、管理、交流的完整状态、离开后返回、主动消息，以及手机上的完整路径。
依据：需求记录 v1.6（CG-001～031、T-01～09），HEL-738 总工方案（F1～F9 流程、组件边界、需要视觉总监覆盖的状态清单）。本稿只是设计原型，不是正式产品。
1. 交付物与打开方式
| 文件 | 说明 |
|---|---|
index.html |
完整原型，包含两套主题和电脑/手机两种布局。不需要联网，也不需要服务 |
phone.html |
在 390×844 的手机框里打开同一份 index.html |
assets/ |
沿用 R1 的两张参考静帧（房间、近景） |
shots/ |
55 张实际截图（42 张电脑 1440×900，13 张手机 390×844@2x） |
| 本文件 | 可施工规范 |
- 演示控制：电脑在左下角，手机在顶部中间。可以切换数据（正常/空/很长），以及「未讲述的事」的两种呈现方式，还能模拟两天后回来、她主动说话、断线（恢复/失败）、发送失败、麦克风被拒、语音识别出错、视觉服务失败、重新演示首建、创建失败和保存失败。这个面板只属于原型，不是产品界面。
- 截图参数：
?shot=<场景名>&theme=moon|fog，场景名见第 14 节。自检参数：?selftest=1，结果写在 body 的data-selftest属性里。
2. 已认可、本轮不改动的部分
- 靛蓝月光和蓝紫雾光两套主题整体切换，DOM 和布局完全相同。用户没有指定默认主题，原型以月光打开只是临时设定，不代表用户已经决定。
- 首页：左侧一句话（30px/300）、心情与关系、她的留言、「你不在时」入口和两个按钮；右侧拱形人物窗（
clamp(300px,27vw,430px)，比例 1:1.3，距右边缘 14vw）。 - 交流：人物窗展开为宽幅圆角窗，画面只留当前一两句；输入框常驻，麦克风是唯一实心的强调按钮，完整记录从右侧滑入。
- 底部导航保持小巧、透光：此刻 / 交谈 / 日子 / 设置。
- 人物和卧室仍用静帧占位，标注「示意画面 · 参考静帧」。没有新做嘴型实验。
3. 信息架构与导航、返回关系
title 区域与返回关系
flowchart LR
NOW[此刻 首页] -->|和她说话/麦克风/导航交谈| TALK[交谈]
NOW -->|你不在时/导航日子| DAYS[日子: 她的日子 / 我们的回忆]
NOW -->|导航设置| MANAGE[设置: 她/关系/城市/外观/备份/外接服务/显示]
NOW -->|她留给你的| TALK
DAYS -->|事件详情→看那段聊天| TALK
TALK -->|返回日子 原滚动位置与选中项| DAYS
TALK -->|回到此刻/Esc| NOW
DAYS -->|回忆↔事件 互链| DAYS
DAYS -->|× / Esc / 回到她身边| NOW
MANAGE -->|× / Esc| NOW
FIRST[首建 仅无伴侣时] -->|完成→去看看她| NOW
BACK[离开后返回] -->|你不在的这两天| NOW
REACH[主动消息] -->|回她: 记录定位到该条| TALK
- 离开日子以后还能回到原来的位置：从事件详情打开聊天时，关闭按钮会改成「返回日子」。日子列表的 DOM 不重建，所以滚动位置和选中的条目都保留。自检里有专门的验证项。
- Esc 逐层退出：弹层 → 演示面板 → 返回欢迎层 → 聊天记录 → 交谈 → 手机详情 → 区域。首建过程中按 Esc 不会退出。
- 手机：列表和详情、设置分区列表和分区内容都改成「推入」。左上角的「‹ 她的日子」「‹ 设置」负责返回。
- 设置里有没保存的修改时，关闭网页会触发浏览器离开提示（
beforeunload）；对应分区导航上会显示一个暖色小点。
4. 需求 → 页面 / 状态映射
| 需求 | 落点（原型中可以操作） |
|---|---|
| CG-007 单伴侣 | 首建只出现一次；设置→她，注明「首版只有一位，不提供新建、切换或清空」；恢复别人的备份会被阻止 |
| CG-008 后台生活 | 日子时间线；「你不在的这两天」；文案注明「网页关着她照常生活（服务器停机期间除外）」 |
| CG-009 备份恢复 | 设置→备份：每日自动备份列表、完整导出（进度→完成）、恢复（三项检查→要求输入「恢复」两个字的双重确认→恢复前先自动导出） |
| CG-010 连续语音 | 语音条：计时、状态（倾听/思考/她在说/停下来了/没听清），「打断她」和常驻的「结束语音」；输入框不会消失 |
| CG-011 主动联系 | 首页上从人物窗里浮出的轻提醒，注明「由她今天 15:30 的生活经历引起」；交谈导航上的未读点；聊天记录里标「她主动说的」；语音开着时她会直接开口 |
| CG-012/013/014 生辰与底色 | 首建 4 步：出生（随机生成/手动修改，未满 18 岁会被拦下）→ 底色（四柱、倾向词和白话说明，说明是「倾向不是台词」）→ 关系 → 确认（必须勾选「我明白」）。设置→她：底色只读，带锁标识 |
| CG-015 成长分层 | 回忆→她的成长；设置→她：「最初就有的」和「后来慢慢有的」分两栏 |
| CG-016 关系可调 | 设置→关系：关系、称呼、相处边界；改关系类型需要二次确认，确认框说明「记忆和信任都保留，底色不变」 |
| CG-005/006 换外观 | 设置→外观素材：选择素材包→五项检查（通过/不合格）→新旧对比→确认「她还是她」 |
| CG-022 视觉观察 | 交谈里的「窗」按钮：首次开启要说明并确认；状态分为正在看、刚刚看到 N 秒前、已过期（不再当作眼前）、失败；设置→外接服务里有总开关 |
| CG-023 城市 | 设置→城市：搜索、选择、保存（成功或失败），顶栏城市同步变化 |
| CG-018 电脑优先、兼顾手机 | 全部区域在手机上都能走完关键路径，见第 8 节 |
| CG-031 设计依据 | 布局以使用流程组织；人物窗只是一个区域，不铺满全屏 |
| HEL-738 F6 断线 | 顶部横幅「信号不太好，正在重新连上…」，人物窗变灰，发送暂停但草稿保留，语音安全结束；重连成功会提示补了几条；重连失败显示「再试一次」 |
| HEL-738 §5.5 φ 文案 | 所有错误都用她的话或生活化的话表达（「我没听清」「看不清」），不出现技术报错 |
| SPEC §8.5 不画仪表盘 | 关系、心情都用一句话描述，不出现数值、进度条或雷达图 |
5. 各区域规范
5.1 日子（她的生活与共同回忆）
- 空间关系：打开后，首页内容向左后退并模糊；人物窗缩小到右侧（
--mini-pw: clamp(170px,14vw,230px)），留在原来的空间里；窗下写「她此刻 · …」，并注明「来自她的生活记录 · 画面为示意静帧」，把生活状态和素材播放区分开；背景推近到 1.03 倍并压暗。 - 面板：
left 5vw / top 84px / bottom 104px / width min(1000px,66vw)，圆角 28，使用阅读底--glass-read。电脑上分两栏：列表 400px，详情占剩余宽度。 - 三种事件：已发生（实心点，
--text-2）、正在（强调色点，带呼吸光）、打算（虚线空心点），分组为「之后的打算」和按天分组。打算类注明「计划可能会变」。 - 标签：「还没跟你说过」（强调色）、「和你有关」（有关联回忆）。已经说过的事标题会弱化成
--text-2。 - 详情：类型、时间、地点、是否说过、她的话（引用块）、和这件事有关的回忆（可以点）、那时候的聊天（可以点，看完返回）。底部固定说明「这是模拟生活里的一条记录，不是真实发生的事；画面只按记录选片，不会反过来改写生活」。
- 回忆分为四组：我们一起的 / 你们的小习惯 / 她知道的你 / 她的成长。每条显示时间与来源（如「你 10 月 8 日说的」）、她怎么记得，以及来自哪些日子（反向链接）。
- 空记录：「她今晚刚住进来，还没有发生什么」；回忆为「聊着聊着就会有了」。
- 长记录：先显示前 18 条，再按「看更早的日子」每次加载 12 条，加载时保持滚动位置。施工时按天分页。
- 不做：情绪或信任的数值仪表盘；任何「你好久没来」之类带负罪感的叙述。
5.2 首建
- 全屏，人物窗和导航隐藏，左侧是叙事一句话（跟随步骤变化），右侧是向导卡
minmax(460px,560px)。 - 步骤条只覆盖 4 个步骤；进行中和完成不计入步骤数。
- 校验：名字必填；出生日期必须满 18 年；关系必须选（原型不预选，T-02）；确认页没勾选时「创建」按钮不可用。
- 创建过程分三段：排好底色 → 形成最初的小习惯 → 布置房间。失败时停在失败的那一段，并提示「资料都还在」，可以选「返回修改」（回到第 1 步，数据保留）或「再试一次」。
- 完成页写「她住进来了」，按「去看看她」进入首页的「刚搬进来」状态：生活为空，首页一句话换成首晚的文案。
- 创建之后，界面上任何地方都没有重建、清空或切换伴侣的入口。
5.3 设置（创建与管理）
- 面板几何与日子相同；左侧是 220px 的分区导航，右侧是内容。
- 表单通用规则：没有修改时「保存」不可用，状态写「尚未修改」；有修改后，文字变成暖色「有未保存的修改」，导航上出现暖色点；「取消」把内容恢复到上次保存的值。保存时显示进行中（转圈和说明，按钮锁定）→ 成功（
--ok，一句话说明影响）或失败（--danger，「你的修改还在」，可以重试）。操作栏吸附在底部。 - 重要确认：改关系类型、应用新外观用普通确认；从备份恢复用危险样式，并要求输入「恢复」两个字。
- 外接服务：对话模型、ASR、TTS、视觉观察服务四项，各有地址输入框和「测试连接」。原型不会发出任何请求；测试结果明确写「界面演示 / 未真实检测」。地址为空或测试失败时显示「相关功能会显示为不可用，其余照常」。
5.4 交流的完整状态
| 状态 | 人物窗左上标签 | 语音条 | 台词区 / 提示 |
|---|---|---|---|
| 文字待机 | 在你面前 | — | 上一句和她当前这一句 |
| 她在想 | 在想 | 她在想 | 三点跳动 |
| 她在打字或说话 | 在说话（声波） | 她在说 · 可以打断，并出现「打断她」 | 逐字显示加光标 |
| 发送失败 | — | — | 「没发出去 · 重试」，记录里虚线边框；重试不会重复发送 |
| 麦克风授权 | — | — | 说明弹层：允许 / 不允许（模拟） |
| 倾听 | 在听你说 | 红点计时、在听你说、结束语音 | 你说的话实时显示（灰色） |
| 被打断 | 停下来了 | 她停下来了，在等你 | 她的那句话半透明，后面加省略号 |
| 识别出错 | 没听清 | 刚才没听清 | 「刚才没听清，你再说一遍？」，然后自动继续听 |
| 麦克风被拒 | — | —（会话不开始） | 麦克风变灰并加斜线；φ 文案；再点一次会给出处理指引 |
| 断线 | 画面变灰 | 语音自动结束 | 顶部横幅；发送暂停，草稿保留 |
| 视觉观察 | 绿点：刚刚看到… N 秒前 | — | 过期后变黄并标「已过期，不再当作眼前」；失败为红点 |
- 语音会话期间，「结束语音」一直显示在语音条上，麦克风按钮也同时变成停止键，两处都能结束。
- 语音开着时，人物窗高度从
100vh-360降到100vh-412，给语音条留出位置，三者不会重叠。
5.5 返回与主动消息
- 离开后返回：首页左侧换成欢迎层「你不在的这两天」，列出时间范围、3 件小事和留言提示，用中性语气，按钮是「看她留的话 / 看她的日子 / 先待一会儿」。
- 主动消息：在首页时，她的话从人物窗下部浮出（
width = 窗宽-32）；在日子或设置里时，提示出现在右下角，不打断当前操作。提示上注明这句话来自哪段生活经历。点「回她」会打开聊天记录并定位、高亮这一条，关闭后回到原处。点「稍后再看」会留在「交谈」的未读里。
6. 设计 Token（R1 的值照旧，以下只列 R2 新增）
| Token | 月光 | 雾光 | 用途 |
|---|---|---|---|
--glass-read |
rgba(10,18,46,.62) | rgba(34,20,66,.60) | 日子和设置这类长内容的阅读底 |
--surface |
#0b1330 | #24154a | 手机上推入的详情层和吸底操作栏（不透明，避免下层透字） |
--field / --field-line |
rgba(255,255,255,.05) / rgba(205,222,255,.16) | rgba(255,240,255,.06) / rgba(236,218,255,.16) | 输入框 |
--ok |
#9fe8cf | #a8f0d8 | 成功、视觉观察「新鲜」 |
--warn |
#ffd79c | #ffdcae | 未保存、待定、观察已过期 |
--danger |
#ff9fb3 | #ffa8c8 | 失败、危险操作、录音红点 |
--radius-field |
14px | 输入框、链接卡片 | |
--pane-l / -w / -t / -b |
5vw / min(1000px,66vw) / 84px / 104px | 区域面板几何 | |
--mini-pw |
clamp(170px,14vw,230px) | 区域页里缩小后的人物窗 |
- 字体、字号层级（30/20/15/13/11.5）、间距（4/8/12/16/24/32/48）、圆角（999/20/28）、曲线、时长与 R1 一致。新增：详情标题 24px/300，分区标题 22px/300，表单标签 13px，分组标题 12px，字间距 .14em。
- 状态色只用在小点、细边框和短文字上，不做大面积色块，以免破坏夜色的整体气氛。
7. 组件与状态
| 组件 | 状态 |
|---|---|
.btn-primary |
默认（微光）/ hover（光晕变大）/ 按下（缩到 .97）/ 不可用（.42 透明，去掉光） |
.btn-ghost / .btn-danger / .btn-text |
同上；危险按钮只用描边加文字色 |
.input/.select/.textarea |
默认 / 获得焦点（强调色描边并加 4px 柔光圈）/ 错误（--danger 描边加下方说明）/ 只读（虚线描边） |
.seg |
选中项为强调色实底 |
.status |
busy / ok / fail |
.checklist |
待检查 / 检查中（转圈）/ 通过 ✓ / 失败 ! |
.ev 事件行 |
默认 / hover / 当前选中（强调色浅底）/ 已讲述（弱化）/ 打算 |
.tag |
中性 / accent / ok / warn / danger；.tag-demo 用虚线表示「演示/模拟」 |
.modal |
普通 / 危险；需要输入确认字时，主按钮会先锁住，输入正确后才能点 |
.netbar |
重连中（转圈）/ 失败（红点，加「再试一次」） |
.observe |
asking / fresh / stale / fail |
.nav-item |
默认 / 当前项 / 未读（小点） |
8. 响应式
| 断点 | 布局 |
|---|---|
| ≥1101px | 如上；区域页右侧显示缩小的人物窗和说明 |
| 721–1100px | 区域面板宽 90vw，隐藏缩小的人物窗，在面板标题上改用「她此刻在…」一行字；日子列表 340px，设置导航 200px |
| ≤720px | 首页和交流沿用 R1 已认可的手机布局。区域面板改为全屏层（top 54 / bottom 84），底部导航始终可见，不被遮挡。列表和详情、设置分区都改为推入方式，详情层和吸底操作栏使用不透明的 --surface。首建为纵向可滚动布局，「上一步 / 下一步」吸在底部。语音时人物窗高 min(42vh, 1.1w)，自上而下依次是台词、语音条（底部 162px 处）、输入框（98px 处）、导航（16px 处），互不重叠。弹层宽度为 100vw-32px |
9. 动效
| 动效 | 触发 | 时长 / 曲线 | 能否打断 |
|---|---|---|---|
| 进入日子或设置：首页后退并模糊，人物窗缩小移到右侧，面板上升 24px 并淡入，背景缩放到 1.03 | 导航、入口 | 人物窗 720ms、面板 420ms（延迟 80ms），ease-out (.22,1,.36,1) |
可以，全部用 transition，中途反向会从当前位置回去 |
| 列表 → 详情（手机推入） | 点条目 | 420ms ease-out | 可以 |
| 首建换步 | 下一步 / 上一步 | 420ms，前进时从右侧淡入 16px，后退时从左侧 | — |
| 弹层 | 确认、授权 | 280ms，缩放 .97→1 并淡入 | Esc 或点遮罩取消 |
| 主动消息浮出 | 推送 | 420ms，上移 10px 并淡入 | 可以 |
| 断线横幅 | 断开 | 280ms | — |
| 语音条 | 开始语音 | 280ms | — |
| 「正在」事件的点、录音红点、倾听外圈、声波 | 常驻或状态 | 1–2.4s 循环 | — |
| 主题切换 | 开关 | 1100ms (.65,0,.35,1) |
可以 |
- 减少动效（系统设置或设置→显示）：所有循环停止；空间不再推近；过渡统一为 200ms、无延迟；粒子只画一帧。
- 页面隐藏时：粒子停止绘制，CSS 动画暂停（
html.paused）。 - 施工建议（与 R1 相同）：人物窗缩放改用 FLIP（transform），雾层模糊预先烘焙。本轮没有做性能实测，所以不给帧率数字。
10. 模拟与真实能力的边界
- 原型里所有数据、回复、语音、摄像头、生活、备份、导出、导入、服务测试都是模拟，没有连接任何服务，也不会写入或下载文件。界面上用「演示数据 / 模拟生活 / 模拟 / 原型 · 不连接服务、不写数据」等标签逐处标明。
- 施工时按 HEL-738 §7 的能力标签处理：
mock打「演示数据」角标；unavailable用 φ 占位文案；不能为了显示「在线」而伪装。 - 人物画面始终标注「示意画面 · 参考静帧」。正式版通过 Presenter 替换成视频，无论有没有口型驱动，页面结构都不变。
- 文案不暗示「关网页会停机」，也不承诺「服务器停机时她还在生活」。
11. 施工验收清单（与 S1 切片对齐）
- 两套主题下，每个区域的 DOM 和布局完全一致；切换主题不改变滚动位置，也不改变当前视图。
- 首页比例、字号、人物窗位置和 R1 一致（拿 D01 与 R1 截图对照）。
- 从日子打开聊天再返回，列表的滚动位置和选中项都不变。
- 事件和回忆可以互相跳转；空记录和长记录（分页）都正常。
- 首建：未成年、未选关系、未勾选确认三种情况都会被拦下；创建失败时资料保留并能返回修改；完成后进入首页的空生活状态；之后任何地方都没有重建入口。
- 设置：有修改才能保存，取消能恢复，保存过程中按钮锁定，失败时修改保留，改关系要确认，恢复要输入两个字确认，并且会拦下别人的备份。
- 交流：发送失败能重试且不重复；语音的倾听、思考、她在说、打断、出错、结束都能走通；语音中「结束语音」一直可见；麦克风被拒后文字照常可用；断线时草稿保留、语音安全结束，重连后补齐消息。
- 视觉观察：标注时效；30 秒后显示为过期（演示用的阈值，真实值以小视觉服务的实测为准）；失败时不影响交谈。
- 主动消息注明依据；点开后定位到那条，关闭后回到原处；不展示负罪叙事。
- 手机 390×844：输入框、语音条、导航、吸底操作栏和弹层互不遮挡；手机上的详情层不透出下面的文字。
- 减少动效、隐藏页面暂停都生效；Esc 能逐层退出。
- 所有模拟能力都带标签。
12. 待定项（不阻塞其他设计，都已做成可替换的呈现）
| 编号 | 事项 | 本稿处理 |
|---|---|---|
| A | 她没亲口分享过的事对你是否可见（用户未拍板） | 默认显示并标注「还没跟你说过」；演示控制里可以切到「讲之前不显示」。详情页用黄色虚线框标为待定 |
| B | 默认主题 | 两套都保留，原型以月光打开只是临时设定 |
| C | 关系的默认值和编辑形式（T-02） | 首建时不预选；设置里用表单呈现，可以换成引导式对话 |
| D | 单伴侣下的重新创建或清空（T-06） | 不设入口 |
| E | 城市清单和天气来源（T-07） | 搜索列表为演示 |
| F | 素材包规范（T-03） | 五项检查只是示意 |
| G | 自动备份的保留份数（T-06） | 列表只显示 3 份并注明待定 |
| H | 内网 HTTPS（T-07） | 麦克风授权弹层里注明；不可用时按「麦克风被拒或不可用」的状态显示 |
| I | 观察过期的阈值、刷新间隔（CG-022） | 原型用 30 秒演示，真实值以实测为准 |
| J | 她的名字是否在首建时由用户填写 | 原型放了名字输入框；如果要改成别的方式，只影响第 1 步 |
13. 原型检查记录
- 自动自检（
?selftest=1，用真实点击走关键流程，共 43 项）：在 Edge 无头模式下，1440×900、1280×800、窄窗（手机布局生效）三种尺寸全部通过。覆盖：主题、日子的打开/详情/互链/看聊天后返回原位、空记录与长记录、未讲述切换、设置的修改/取消/确认/保存成功/保存失败、恢复拦截、素材检查、文字失败重试、麦克风拒绝与授权、语音的思考/说话/打断/结束、视觉观察开关、断线与重连、Esc、欢迎层、主动消息定位、首建的三项拦截/失败返回/成功进入首页。 - 截图检查：电脑截图是 1440×900 下实际 DOM 的截图；手机截图在 390×844 的 iframe 里按 2 倍像素密度截取并裁切（无头窗口有最小宽度，所以不直接截窗口）。
- 本轮发现并已修正的问题：手机详情层半透明，下面的列表文字透出来（改为不透明的
--surface）；手机语音时人物窗没有铺满宽度；语音条文字换行（手机上隐藏声波图标，文字过长时截断）；静帧截图里声波条高度为 0；吸底操作栏的偏移。 - 限制：
- 没有录屏工具，动效请直接打开原型查看。
- 没有做性能实测。
- 没有在真实手机或 Safari 上测试，只用了 Edge（Chromium）。
- 截图时关闭了过渡，所以截图里看不到「你不在的这两天」卡片的闪亮反馈。
- 本运行环境里没有可用的设计或动效类技能（只有平台类技能），动效由本规范和自检把关，没有使用其他技能。
14. 截图索引
D01 首页 · D02/D03 事件详情（两套主题）· D04 你不在时摘要 · D05 打算中的事 · D06 还没跟你说过（待定呈现）· D07 长记录 · D08 空记录 · D09 回忆详情与关联日子 · D10 成长 · D11 返回欢迎层 · D12 主动消息（首页）· D13 主动消息定位 · D14～D21 首建（出生、校验错误、底色、关系、确认、失败、完成、首建后首页）· D22～D30 设置（她、关系确认、城市成功/失败、外观通过/失败、备份、恢复双重确认、外接服务）· D31～D41 交流（发送失败、授权、倾听、她在说、打断、麦克风被拒、断线、重连失败、观察新鲜/过期/失败）· D42 演示控制台 · P01～P13 手机（日子列表、详情、回忆、首建出生/确认/失败、设置列表、关系表单、恢复确认、语音、断线、返回、主动消息）。