从体验原则，推进到可以直接交给设计和工程的 UI 交付稿
这一页把信息架构、状态矩阵、设计系统和 UI 交付稿合并成一个浏览视图。你可以先看体验方向，再看页面结构和组件规格。
体验总原则
这不是一个参数型 App，而是一个在关键时刻帮助用户做出安全判断的产品。
可信优先
如果状态不确定，先诚实表达，再给恢复路径，不允许伪装成正常。
结论优先
先告诉用户是不是安全、是不是要动作，再展示细节和证据。
动作优先
关键提醒必须带唯一主动作，减少用户自己重新判断下一步的成本。
一致优先
Home、Map、Alerts、Widget 对同一状态的表达必须一致，避免语义漂移。
信息架构
MVP 的体验表面被整理成四层，减少“页面很多但用户不知道先去哪”的问题。
桌面层
iOS WidgetKit / Android Home Widget，作为快速判断入口，而不是迷你版 App。
提醒层
Push 与 in-app alert 承担关键时刻的动作入口。
核心 App 层
Home / Map / Alerts / Profile，覆盖日常确认和问题处理。
深度任务层
绑定、围栏、回放、寻找模式、设备信息等任务型页面。
当前已经按你的确认收敛为 Home / Map / Alerts / Profile。后续页面交付与工程拆分都以这条导航轴为准。
高风险原型验证
第二轮之后，体验层已经不只停留在“应该怎么设计”，而是明确了哪些页面必须先做原型验证再冻结。
必须先验证的 5 条链路
- 绑定与失败恢复
- Home 安全判断与延迟表达
- Map 总览、单宠聚焦与围栏
- 告警到行动闭环
- Widget 摘要、回跳与会话失效
通过阈值
- 主任务成功率至少 `80%`。
- 超过 `20%` 用户误解关键状态则不得冻结。
- 5 秒内能做出安全判断，3 步内能进入动作。
- Widget 和 App 状态语义不能互相打架。
UI 交付稿基线
下面这些规格已经能指导视觉设计、组件拆分和前端实现，不再只是原则级描述。
| 项 | 基线 | 说明 |
|---|---|---|
| 画板 | iOS `390 x 844` / Android `412 x 915` | 足够贴近主流移动端实际显示范围。 |
| 栅格 | `4pt` 基础栅格 | 统一卡片、列表、组件和浮层间距。 |
| 字体 | `Manrope` + `Source Sans 3` | 标题有辨识度，正文稳定耐读。 |
| 主色 | 森林绿 + 温暖米色 + 琥珀/陶土状态色 | 更像可靠 outdoor 安全产品，而不是默认科技后台。 |
| 页面态 | 必须覆盖 loading / empty / partial / delayed / error / recovery | 不接受只画成功态的交付。 |
设计 token 摘要
具体 token 在原文里更完整，这里保留最关键的视觉与语义基线。
状态 token 不是纯颜色 token，必须同时能映射到颜色、图标、文案三层。否则无障碍和跨端一致性都会出问题。
组件基线
目前已经具备可拆分为 UI kit 的核心组件规格。
- 宠物状态卡片：`156` 高度，`24` 圆角，四行信息结构。
- 状态 badge：`28` 高度，语义化颜色和图标组合。
- 主按钮：`52` 高度，唯一主动作优先。
- 地图 marker：最新点是宠物图标，历史点只在回放中出现。
- Widget 摘要卡：单宠优先，Small / Medium 分级。
关键页面结构
以下是这套 UI 交付稿里最关键的页面骨架。你可以直接拿去对照 Figma 或工程实现。
Home
首屏必须先给多宠总览与宠物状态卡，不放设备累计统计等二级信息。
Map
总览模式以稳定为主，单宠聚焦时再强调跟随、寻找模式和回放入口。
Alerts
告警列表必须保留唯一主动作，不把高压场景变成信息查阅场景。
Widget
Widget 只做摘要和回跳，不承担复杂逻辑。重点是“值不值得点开 App”。
文案与状态设计
这部分直接决定用户会不会信任这个产品。原则已经在仓库里统一。
推荐表达
- 刚刚更新
- 1 分钟前更新
- 最近没有新的更新
- 你的位置暂时不可用，但我们已经把宠物的位置显示出来了
- 电量偏低，建议尽快充电
禁止直接外露的术语
- stale
- payload
- points
- confidence
- queue
- replayed
所有关键页面都必须定义 loading、empty、partial、delayed、error、recovery 六类适用状态。这个要求已经回织到模板和 Feature Spec 里。
体验层现在多了一道门
以前体验文档更多是在定义规范，现在已经进一步变成 release gate 的一部分。
不只画对
关键页面不再只看视觉是否统一，还要看用户会不会误解 delayed、partial、session invalid 这些灰色状态。
不只讲原则
现在已经明确哪些高风险链路要在 `R1 / R2` 原型轮次中验证，且不过阈值不能冻结。
不只交 Figma
设计交付现在要同时对齐状态矩阵、契约语义和执行计划，而不是单独产出页面稿。
English Copy Deck
MVP 英文文案基线已经单独整理出来，适合给 Product、UX、App 和 QA 一起对齐。
语气方向
- Calm
- Clear
- Action-oriented
- Honest when data is delayed