跳到主要内容
全部作品

产品设计 · 2024

个人记账工具的多端改版

把分散在四个入口的记账动作收进一条时间线,让月度对账不必在页面之间来回确认。

信息架构交互设计设计规范
年份
2024
方向
产品设计
角色
信息架构与交互
工具与标签
信息架构 / 交互设计 / 设计规范
桌面上并排放置的移动端记账界面
桌面上并排放置的移动端记账界面图版 01

背景

旧版把收入、支出、转账、报销拆成四个入口,每个入口都有自己的表单和分类方式。用户月底回看时需要在四个页面之间来回确认,同一笔钱在列表里也长得不一样。

这次没有加功能,只改结构的读法:四类记录合成同一条时间线,账户、分类、来源变成记录上的属性。先看发生了什么,再决定要不要改。

做法

3 个阶段
  1. 01

    跟着做完一次月度对账

    把每一步操作和犹豫点记下来,发现最常见的卡点不是不会记账,而是找不到上个月那笔支出被归到了哪个入口。

    铺在桌面上的交互流程草稿与线框
    铺在桌面上的交互流程草稿与线框
  2. 02

    把入口收成一条时间线

    四类记录用同一种卡片承载,按日分组,月度汇总固定在顶部;分类改为保存后补填,误分类可以直接在列表上修改。

    排列在桌面上的移动端流程草稿
    排列在桌面上的移动端流程草稿
  3. 03

    用一套规范收口

    颜色、字号、间距与空状态写进组件规范,工程按 token 实现;走查时按清单逐条对照,不再逐页临时决定。

图集

成品与过程材料
装订好的规范手册样张
装订好的规范手册样张图 1
打印出来的线框稿与页面结构
打印出来的线框稿与页面结构图 2
工作台上的手绘草稿与记录
工作台上的手绘草稿与记录图 3

结果

交付了什么

以可核对的交付物记录结果,不换算成无法验证的业绩数字。

一条时间线的记录结构
四类记录共用一种卡片,账户、分类与来源成为记录上的属性。
一套可实现的组件规范
颜色、字号、间距与交互状态按 token 整理,工程直接落地。
一份上线走查清单
空列表、加载失败、跨月记录与多账户对账逐条过完。

以上为过程与交付说明;具体业务数据由项目方持有,这里不做换算。

复盘

如果再做一次,我会更早把多账户的口径单独拉出来讨论。跨账户转账在第一版里仍需要人工判断方向,这是调研阶段低估的部分。