150 lines
8.2 KiB
Markdown
150 lines
8.2 KiB
Markdown
# 喵记账 · AI 记账 APP 设计文档
|
||
|
||
> 状态：设计规范已落地，持续跟随实现迭代 · 更新于 2026-08-21
|
||
|
||
实现进度、已完成模块和当前风险见 [`STATUS.md`](STATUS.md)。本文保留产品决策、视觉规范和后台边界。
|
||
|
||
## 1. 产品概述
|
||
|
||
会聊天的 AI 记账本。基础功能对齐市面主流记账 App（随手记/鲨鱼记账等），差异化是 **AI 聊天记账助手**：可设置性格、会发/回表情包、能从聊天内容自动记账。
|
||
|
||
**技术栈**：Flutter（客户端） + .NET（后端）
|
||
|
||
## 2. 双模式设计（核心产品决策）
|
||
|
||
| | 普通记账模式 | 全 AI 模式 |
|
||
|---|---|---|
|
||
| 定位 | 经典账本界面，AI 是辅助 | 对话即 App，AI 是主界面 |
|
||
| 主界面 | 明细/统计/记一笔/聊天/我的 五 tab | 聊天流 + 顶部迷你数据条 |
|
||
| 记账方式 | 手动键盘记账 + AI 聊天记账 | 以 AI 聊天/语音/拍小票为主 |
|
||
| 视觉 | 白底卡片 | 浅色渐变 + 玻璃拟态 |
|
||
| 切换入口 | 「我的」页模式卡片；首次启动引导中二选一 | 顶栏「切换模式」按钮 |
|
||
|
||
## 3. AI 助手设定
|
||
|
||
- **形象**：三选一 —— 小账喵（猫，默认）/ 阿福汪（狗）/ 账小智（机器人），可改昵称
|
||
- **性格**（4 预设）：毒舌猫娘 / 温柔小暖 / 严格管家 / 沙雕损友
|
||
- **微调滑杆**：吐槽力度、表情包频率、主动提醒频率
|
||
- **能力**：
|
||
- 聊天内容 → 自动记账（生成账单卡片，可修改/确认）
|
||
- 发表情包 + 回复用户表情包（专属表情包体系，见 P14）
|
||
- 消费分析、预算提醒、AI 月报、AI 一键定预算
|
||
- 语音记账、拍小票 OCR（识别后进确认页）
|
||
|
||
## 4. 设计规范（v0.4）
|
||
|
||
### 4.1 颜色
|
||
| 用途 | 色值 |
|
||
|---|---|
|
||
| 主色（记账/金额收入/成功） | `#00B386` 薄荷绿，深色 `#009973`，浅底 `#E6F7F1` |
|
||
| AI 专属色（一切 AI 元素） | `#5B6BF5` 靛蓝，浅底 `#EEF0FE` |
|
||
| 警示/超支 | `#F0642D`，过渡橙 `#F5A623` |
|
||
| 文字 | 主 `#191F26` / 次 `#5E6772` / 弱 `#9AA3AD` |
|
||
| 背景/卡片/分割线 | `#F6F7F9` / `#FFFFFF` / `#EEF0F3` |
|
||
|
||
**规则**：凡是 AI 产生的内容（AI 记账标记、AI 卡片、AI 分析、性格设置）一律用靛蓝，与功能主色薄荷绿严格区分，让用户一眼识别「这是 AI 做的」。
|
||
|
||
### 4.2 其他
|
||
- 图标：全套自绘 SVG 线性图标，stroke 1.7px，圆头
|
||
- 圆角：卡片 14px，大卡 18px，按钮 13-14px
|
||
- 卡片：白底 + 0.5px 细边框（#EEF0F3），不用重阴影
|
||
- 数字：`font-variant-numeric: tabular-nums`
|
||
- AI 记的账在列表中带「✦AI」徽标；账单详情页可追溯用户原话
|
||
|
||
## 5. 页面清单（design/ui-mockup.html，24 屏）
|
||
|
||
| # | 页面 | 要点 |
|
||
|---|---|---|
|
||
| P1 | 首页（明细） | 渐变余额卡、预算进度、AI 入口条、账单流水 |
|
||
| P2 | 手动记账 | 分类宫格 + 键盘 + 备注/时间/支付方式 |
|
||
| P3 | 统计 | 环形图/趋势柱状/分类排行 + AI 分析卡 |
|
||
| P4 | AI 聊天记账 | 账单卡片（修改/确认）、表情包互动 |
|
||
| P5 | AI 性格设置 | 4 性格卡 + 3 滑杆微调 |
|
||
| P6 | 我的 | 模式切换卡、各管理入口 |
|
||
| P7 | 全 AI 模式主界面 | 玻璃拟态、迷你数据条、对话即 App |
|
||
| P8 | 启动/登录 | 微信/手机号/游客 |
|
||
| P9 | 引导·选模式 | 双模式二选一 + 迷你预览 |
|
||
| P10 | 引导·选 AI 伙伴 | 形象三选一 + 起名 + 性格四选一 |
|
||
| P11 | 账单详情 | AI 来源追溯（用户原话 + 识别结果） |
|
||
| P12 | 预算管理 | 总预算环 + 分类预算 + AI 一键定预算 |
|
||
| P13 | AI 月报 | 数据总览 + 亮点条目 + 性格化点评 + 分享 |
|
||
| P14 | 表情包面板 | 用户侧发送，「小账喵专属」分组 |
|
||
| P15 | 语音记账 | 按住说话、实时转写、波形动画 |
|
||
| P16 | 拍小票 OCR | 扫描动画、字段置信度、AI 拆分建议 |
|
||
| P17 | 多账本切换 | 底部弹层、共享账本 |
|
||
| P18 | 分类管理 | 拖动排序、删除归入「其他」 |
|
||
| P19 | 搜索 | 关键词高亮、时间/分类/金额/仅AI筛选、AI 引导语 |
|
||
| P20 | 空状态首页 | 新用户零账单，AI 引导记第一笔（双按钮） |
|
||
| P21 | 收入/转账记账 | 收入分类宫格、账户间转账示例 |
|
||
| P22 | 通知样式 | 锁屏推送 ×3（日结/预算告急/月报）+ 应用内横幅 |
|
||
| P23 | 全 AI 模式欢迎页 | 首次进入的教学卡（3 个可点示例）+ AI 开场白 |
|
||
| P24 | 离线状态 | 顶部离线条、AI 入口/tab 置灰、账单「待同步」标记 |
|
||
|
||
## 6. 决策记录
|
||
|
||
| 日期 | 决策 | 原因 |
|
||
|---|---|---|
|
||
| 07-17 | 风格从紫色系改为清新简约（薄荷绿） | 用户反馈 v0.1 不好看；选定清新简约方向 |
|
||
| 07-17 | 图标从 emoji 全部改为自绘 SVG 线性 | emoji 观感廉价、跨平台不一致 |
|
||
| 07-17 | AI 用独立靛蓝色 | AI 内容与普通功能需要视觉区分 |
|
||
| 07-17 | 全 AI 模式从暗色改为浅色玻璃拟态 | 与整体清新风统一 |
|
||
| 07-17 | 首次启动即引导选模式+选性格 | 双模式是核心卖点，前置建立 AI 人设 |
|
||
| 07-17 | 账单详情保留 AI 来源追溯 | AI 记账的信任基础：可核对、可修改 |
|
||
| 07-18 | **AI 记账采用「直接入账 + 可撤销」** | 减少确认摩擦；卡片带撤销按钮，撤销后账目回滚。后端按此设计：写入即生效，保留撤销窗口/软删除 |
|
||
| 07-18 | **App 名称由管理员后台配置** | 不硬编码「喵记账」；后端出配置接口，客户端启动时拉取（名称/Logo 等品牌位） |
|
||
| 07-18 | **口癖跟随 AI 形象** | 猫=喵 / 狗=汪 / 机器人=无口癖；性格决定语气内容，形象决定口癖后缀，两者正交组合 |
|
||
| 07-18 | **离线策略：手动记账可用，AI 需联网** | 离线时 AI 入口/tab 置灰、顶部提示条、本地账单标「待同步」，联网后自动同步（见 P24） |
|
||
|
||
## 7. 待定 / 待办
|
||
|
||
- [x] AI 记账入账策略 → 直接入账 + 可撤销（07-18 定）
|
||
- [x] App 名称 → 管理员后台可配置（07-18 定）
|
||
- [x] 口癖跟随形象 → 需要（07-18 定）
|
||
- [x] 离线边界 → 手动可用/AI 置灰（07-18 定）
|
||
- [ ] 用户确认 v0.5 UI 稿（24 屏）
|
||
- [ ] UX 原型确认（含直接入账+撤销的新交互）
|
||
- [ ] AI 形象是否需要正式插画（当前为线性图标风格）
|
||
- [ ] Flutter + .NET 项目骨架搭建
|
||
- [ ] AI 对话后端方案（LLM 选型、表情包触发策略、记账意图识别）
|
||
- [x] 管理后台范围 → 见第 8 节（07-18 定）
|
||
|
||
## 8. 管理后台范围（07-18 方案）
|
||
|
||
原则：**内容运营进后台（改文案不发版），核心逻辑进代码，用户数据只读聚合**。
|
||
|
||
### P0 · MVP 必须
|
||
| 模块 | 内容 |
|
||
|---|---|
|
||
| 品牌配置 | App 名称、Logo、Slogan、主题色（决策 19；客户端启动拉取+缓存兜底） |
|
||
| AI 人设管理 | 形象库（含口癖规则）、性格库（名称/描述/示例台词）、性格 Prompt 模板 |
|
||
| 表情包库 | 分组、素材、触发场景标签（超支/发工资/求原谅…） |
|
||
| 用户管理 | 列表、封禁、注销申请（合规） |
|
||
| 系统配置 | LLM 模型参数、API Key、限流阈值（AI 成本阀门） |
|
||
|
||
### P1 · 上线后 1 个月
|
||
- 文案库：推送模板/空状态引导/快捷短语，按性格×形象配置
|
||
- 默认分类管理（新用户初始分类）
|
||
- 数据看板：DAU、记账笔数、AI 记账占比、撤销率/修改率（=AI 准确率）、token 成本
|
||
- 意图识别失败样本池（脱敏），用于调 Prompt
|
||
|
||
### P2 · 增长期
|
||
- 运营位（公告/Banner）、A/B 实验、月报亮点规则配置、UGC 审核队列
|
||
|
||
### 不进后台（红线）
|
||
- 用户账单明细查看/修改（只有聚合统计）
|
||
- 记账核心逻辑（分类匹配、金额解析在代码，后台只喂 Prompt）
|
||
- 单用户 AI 对话记录检索（只进脱敏样本池）
|
||
|
||
### 技术形态
|
||
- .NET 同一解决方案内加 Admin Web 项目（ASP.NET Core / Blazor），不另起技术栈
|
||
- 配置数据统一 `AppConfig`/`ContentResource` 表 + 版本号，客户端 ETag/版本增量拉取
|
||
- Prompt/表情包/文案改动需保留历史版本，支持回滚
|
||
|
||
## 9. 文件说明
|
||
|
||
| 文件 | 用途 |
|
||
|---|---|
|
||
| `design/ui-mockup.html` | 静态高保真 UI 稿（18 屏平铺展示） |
|
||
| `design/ux-prototype.html` | 可交互 UX 原型（单手机框、可点击流转） |
|
||
| `docs/DESIGN.md` | 本文档 |
|