拖动浏览,滚动或双指缩放。打开帮助查看键盘操作。

Yan
开放
合作
聊聊吧
Yan Fontão Boring view
All work

Case 041个人财务产品

Financias

Financias 是一款个人财务工具,可以记录收入、已付支出、转账和待付账单。设计从一个影响每个页面的区分出发:已经动过的钱,和还没付的钱。

我的职责
产品设计与开发
项目状态
已上线产品 · 个人数据已隐去
一枚硬币正落进 3D 小猪存钱罐的投币口。
为这面项目墙制作的 3D 物件。

01

引向下一步操作的概览页

已上线的概览页把当前余额、需要留意的付款和本月支出节奏分开呈现。收入和支出图表放在这些眼前要做的决定下方,再往下是各类记录的快捷入口。

记录已付支出、计划待付账单和在账户之间转账,各自从不同的操作开始。用户还没开始填写表单,产品的财务模型就已经看得见了。

这里展示的界面截取自运行中的产品。截图前已隐去金额,保留了布局和控件,个人数值不会出现在案例里。

产品操作录屏:概览、图表、待付款项和各类记录入口。录制前已对财务数值和个人信息做模糊处理。

02

不同的操作需要不同的措辞

已付支出会减少余额。待付账单是一笔应付款项,有自己的到期日,直到确认付款为止。转账是在同一个人的账户之间转移资金,不应显示为新的收入或支出。

这些规则同时决定了界面和数据模型。Financias 给每种操作取了不同的名称,并配合新手引导,用简短的例子来解释。首次使用的流程从创建账户开始,接着介绍四种基本记录类型,最后带用户录入一笔真实记录,保存前由用户自己核对。

帮助在引导之后依然可用。再次打开帮助,只会讲解产品,不会创建财务记录,也不会重置进度。

Financias 概览页,所有金额均已隐去。
线上界面截图。截图前已将金额做模糊处理;余额使用产品自带的隐私控件。

03

一次确认,只算一笔付款

付款流程会记录实际付款日期、付款金额和所选账户,再把账单与由此生成的交易关联起来。重复提交同一次确认,也必须保证只有一笔有效付款,对余额只产生一次影响。

这个要求把用户看得见的操作,和软件里必须始终成立的规则连在一起。界面只需呈现一次简单的确认,因为底层操作从设计上就是为了让账单和对应的交易保持一致。

概览页延续了同样的细致。待付款项与已完成的支出分开呈现。不同币种的合计也各自分开,这样合并后的数字就不会让人误以为雷亚尔、美元和欧元可以互换。

04

个人记录只属于本人

每条财务记录只属于一位账户持有人。访问管理和查看他人财务信息的权限是分开的。产品里没有家庭共享账本,也没有用户之间的转账。

这条边界让应用的范围清晰明确,界面也就能专注于用户自己的账户、到期日和下一步操作。

深绿色背景上的 Financias 文字标志和 F 符号。
Financias 品牌形象卡片。

05

这个项目展示了什么

Financias 把日常用语和精确的财务行为对应起来。它最有力的设计决策,体现在产品始终保留的几组区分上:已付与待付、转账与支出、一种币种与另一种币种、个人数据与管理权限。

000

使用说明

Yan Fontão
轻点
打开一个屏幕
点击
打开一个屏幕
拖动
浏览项目墙
滚轮
鼠标缩放,触控板移动,双指缩放
− +
拉远查看整面项目墙,或拉近
方向键
在案例中:↑↓ 切换案例,←→ 切换媒体。在项目墙上:移动
空格
打开或返回
Enter
打开
Esc Backspace
返回
Home
回到中心,再回到开场
PgUp PgDn
上一个或下一个频道
Tab
依次浏览项目和链接
R
随机项目
0–9
输入频道号,1–61
?
本页
快捷键

项目墙背景音乐

文件已为网页压缩并统一音量。

开放
合作
聊聊吧

给 Yan 发消息

告诉我你是谁,我会尽快回复。

000

关于 Yan

你好,我是 Yan

产品设计师/ 设计工程师

大多数产品都会在设计和代码之间丢掉一些东西。我的不会:我研究问题、设计产品,并亲手把界面上线,所以你批准的,正是用户最终拿到的。

  • 2018开始软件开发
  • UI + code设计与实现

合作过 Motorola · Ambev Tech · Rei do Pitaco · OneTool · CESAR

巴西 · 可远程、混合或驻场

Yan Fontão 的坐姿肖像:穿绿色毛衣、戴眼镜,手持麦克风。
开放
合作
聊聊吧
开放
合作
聊聊吧
000

加密频道

受保密协议约束

请输入访问码

向 Yan 索取访问码 ↗
开放
合作
聊聊吧
YAN FONTÃO 完整案例

频道 41 个人财务产品

Financias

Financias 是一款个人财务工具,可以记录收入、已付支出、转账和待付账单。设计从一个影响每个页面的区分出发:已经动过的钱,和还没付的钱。

我的职责
产品设计与开发
项目状态
已上线产品 · 个人数据已隐去
一枚硬币正落进 3D 小猪存钱罐的投币口。
为这面项目墙制作的 3D 物件。

Financias:把余额的含义讲清楚

产品操作录屏。财务数值和个人信息已隐去。

流程概览
  1. 记录待付账单
  2. 确认一笔付款
  3. 更新余额

引向下一步操作的概览页

已上线的概览页把当前余额、需要留意的付款和本月支出节奏分开呈现。收入和支出图表放在这些眼前要做的决定下方,再往下是各类记录的快捷入口。

记录已付支出、计划待付账单和在账户之间转账,各自从不同的操作开始。用户还没开始填写表单,产品的财务模型就已经看得见了。

这里展示的界面截取自运行中的产品。截图前已隐去金额,保留了布局和控件,个人数值不会出现在案例里。

产品操作录屏:概览、图表、待付款项和各类记录入口。录制前已对财务数值和个人信息做模糊处理。

不同的操作需要不同的措辞

已付支出会减少余额。待付账单是一笔应付款项,有自己的到期日,直到确认付款为止。转账是在同一个人的账户之间转移资金,不应显示为新的收入或支出。

这些规则同时决定了界面和数据模型。Financias 给每种操作取了不同的名称,并配合新手引导,用简短的例子来解释。首次使用的流程从创建账户开始,接着介绍四种基本记录类型,最后带用户录入一笔真实记录,保存前由用户自己核对。

帮助在引导之后依然可用。再次打开帮助,只会讲解产品,不会创建财务记录,也不会重置进度。

Financias 概览页,所有金额均已隐去。
线上界面截图。截图前已将金额做模糊处理;余额使用产品自带的隐私控件。

一次确认,只算一笔付款

付款流程会记录实际付款日期、付款金额和所选账户,再把账单与由此生成的交易关联起来。重复提交同一次确认,也必须保证只有一笔有效付款,对余额只产生一次影响。

这个要求把用户看得见的操作,和软件里必须始终成立的规则连在一起。界面只需呈现一次简单的确认,因为底层操作从设计上就是为了让账单和对应的交易保持一致。

概览页延续了同样的细致。待付款项与已完成的支出分开呈现。不同币种的合计也各自分开,这样合并后的数字就不会让人误以为雷亚尔、美元和欧元可以互换。

个人记录只属于本人

每条财务记录只属于一位账户持有人。访问管理和查看他人财务信息的权限是分开的。产品里没有家庭共享账本,也没有用户之间的转账。

这条边界让应用的范围清晰明确,界面也就能专注于用户自己的账户、到期日和下一步操作。

深绿色背景上的 Financias 文字标志和 F 符号。
Financias 品牌形象卡片。

这个项目展示了什么

Financias 把日常用语和精确的财务行为对应起来。它最有力的设计决策,体现在产品始终保留的几组区分上:已付与待付、转账与支出、一种币种与另一种币种、个人数据与管理权限。