一本账 · UI 规范与页面流程

1. 设计原则

1. 记账要快：核心路径「金额 → 分类 → 完成」≤ 3 次点击、≤ 5 秒（PRD 体验红线）
2. 多人感：让用户在每个关键页面感知「这是我们一起的账」—— 成员头像、记账人标记贯穿全流程
3. 数字优先：金额永远是一行内视觉权重最高的元素；配色为数据让路
4. 克制：无广告位、无运营位、无社交氛围组件；MVP 不做深色模式（P2）

2. 设计 Token（约束性规范）

2.1 色彩

金额配色铁律：支出红、收入绿，全 App 一致，不允许混用。

2.2 字体与字号

2.3 间距与圆角

• 间距梯度（rpx）：8 / 16 / 24 / 32 / 48；页面左右安全边距 32rpx
• 卡片圆角 24rpx；按钮圆角 48rpx（胶囊）；弹窗 32rpx
• 阴影仅一级：0 4rpx 16rpx rgba(31,36,48,0.06)（列表页少用阴影，用分隔线）

2.4 布局基准

• 设计稿 375×667（iPhone SE 基准，以小屏为基准向下兼容）；单位 rpx
• 安全面积：底部 tabbar 适配 iPhone 刘海屏 safe-area-inset-bottom

3. 页面清单（开发排期依据）

3.1 Tab 页（4 个）

3.2 记账核心页（模态全屏）

3.3 二级页

页面总数：4 tab + 1 核心 + 8 二级 ≈ 13 屏（低于原估 15-20，利于 8 周客户端工期）。

4. 「记一笔」页面交互定义（核心中的核心）

1
┌──────────────────────────────┐
2
│  支出 | 收入 | 转账    (顶部类型切换) │
3
│                              │
4
│        ¥ 35.00               │ ← 大字号金额区（点击无光标，全键盘驱动）
5
│   [餐饮 ▾]  今天 ▾   为谁花 ▾   │ ← 三个快捷选择 chip
6
│   备注：________________       │
7
│                              │
8
│  ┌────────────────────────┐  │
9
│  │   自定义数字键盘          │  │ ← 数字/退格/再记一笔/完成
10
│  └────────────────────────┘  │
11
└──────────────────────────────┘

交互细则（逐条验收）：

1. 键盘默认弹起无需点击输入框；数字实时上屏，无输入延迟感知（帧率验证项）
2. 分类 chip 点击展开底部半屏面板：一级分类宫格（4 列）→ 点进二级；默认选中上次使用的分类
3. 日期 chip：默认今天，可选近 7 天（超出引导「去完整选择」日历面板）
4. 「为谁花」chip：成员多选（头像 + 对勾）；默认=记账人自己
5. 键盘右下「完成」提交；「再记一笔」提交后留在本页清空金额（连续买菜场景）
6. 提交后乐观更新：列表立即可见（同步状态角标），失败不回滚 UI、进重试队列
7. 转账类型：金额下方出现「付款人 → 收款人」两个成员选择器
8. 金额上限 100 万（元），超限键盘输入无效 + toast 提示
9. 编辑已有账目：同页面复用，标题变「编辑账目」，含删除入口（二次确认）；离线时编辑/删除置灰并提示「需联网」（MVP 离线仅支持记新账）

5. 关键流程图

5.1 冷启动决策流

1
启动 → [已登录?]
2
  ├─ 否 → 登录页（60s 内完成）→ 引导页 → ┐
3
  └─ 是 → 首页（流水）                    │
4
                                         ▼
5
                          [有账本?] ─ 否 → 创建账本（命名+封面色）
6
                                │            │ 邀请引导浮层
7
                                │ 是         ▼
8
                                └──────► 首页（流水）

5.2 邀请-加入闭环

1
邀请方：账本设置 → 邀请成员 → 生成 6 位邀请码（24h）
2
   → 复制口令「【一本账】XXX 邀请你加入「我们的家」，邀请码 482913」→ 微信/短信分享
3
加入方：收到口令 → 打开 App → 登录 → 输入邀请码 → 进入账本 → 双方收到 member_joined 通知

5.3 离线记账同步流（UI 表现）

1
记账（离线）→ 列表显示「待同步」灰色角标 → 网络恢复 → 角标转圈 → 消失（已同步）
2
                 └─ 失败：红色角标，点击看原因/重试；数据本地永不丢失

6. 组件规范要点

7. 可用性验收红线（上线门槛）

• 记一笔常用路径（金额→分类→完成）≤ 3 次点击、≤ 5 秒（真机实测，低端安卓）
• 数字键盘连续输入 20 位无卡顿感知（60fps 抽查）
• 流水列表 500+ 条滚动无白屏、无跳变
• 所有金额展示千分位正确、收支颜色正确（自动化 UI 巡检覆盖）
• iPhone SE（375 宽）无布局破版
• 弱网（3G 模拟）下记账不报错，恢复联网后 30s 内完成同步