8.2 KiB
8.2 KiB
喵记账 · AI 记账 APP 设计文档
状态：设计规范已落地，持续跟随实现迭代 · 更新于 2026-08-21
实现进度、已完成模块和当前风险见 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. 待定 / 待办
- AI 记账入账策略 → 直接入账 + 可撤销（07-18 定）
- App 名称 → 管理员后台可配置（07-18 定）
- 口癖跟随形象 → 需要（07-18 定）
- 离线边界 → 手动可用/AI 置灰（07-18 定）
- 用户确认 v0.5 UI 稿（24 屏）
- UX 原型确认（含直接入账+撤销的新交互）
- AI 形象是否需要正式插画（当前为线性图标风格）
- Flutter + .NET 项目骨架搭建
- AI 对话后端方案（LLM 选型、表情包触发策略、记账意图识别）
- 管理后台范围 → 见第 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 |
本文档 |