# 钱包App界面设计：先分清钱在哪儿

原网页：https://www.jvds.cn/share/ui-design/mosca-wallet-transfer-review-u012
语言：zh-CN
发布：2026-10-10
作者：界达设计工作室（JVDS）

这套钱包App界面设计采用很轻的白灰底色，余额、快捷动作和共同钱包分成一张张圆角卡。它的重点并非把金融页面画得更热闹，而是让不同的钱与动作有各自的位置。分析页和转账确认页继续沿用这种分区，读者可以从图里看到一条清楚的视觉线索。

## 核心结论

- 首页通过位置和卡片颜色分开个人余额、共同钱包与快捷动作。
- 分析页保留分类颜色和文字对应，确认页重新集中关键转账信息。

## 首页把余额与共同钱包分开

个人总余额位于首页上部，数字字号较大，旁边还有眼睛图标。下面一排Send、Receive、Scan、Swap，每个动作都用浅色小卡加图标表示。读者先看到概况，再找到直接操作，层次比较自然。

共同钱包出现在更下方，用棕色和深色卡片区分，其中一排头像很直观地提示多人参与。与上方白色余额区相比，这里的身份线索更丰富。头像、钱包名称和数额在同一块卡片里，讨论的是一组具体资金，而不是一个孤立的汇总数字。

旁边放大的目标卡带进度圈，快捷操作另有蓝色展示块。这种拆开呈现的设计稿方便观察每一类组件，但不能据此推断首页有全部放大块。界达设计更在意实际手机里的信息次序：先余额，再动作，再交易摘要与共同钱包。

![Mosca首页的总余额、四个快捷动作、共同钱包卡片与目标进度](https://www.jvds.cn/upload/2026/1008/d187-tp/u012-i1.webp)

首页上下分区｜总余额与快捷动作在上方，共同钱包另设标题和成员头像。

## 图表换了形式，分类没有跟着换

分析页上部把Category、Period、Type排成一行筛选，下方是圆环与柱形两种图表。两张屏幕中，分类标签使用相同的颜色，蓝、橙、绿、粉等色彩同时出现在图和金额标签里。切换表现形式时，这种对应关系能够帮助人继续比较。

圆环适合先看整体组成，柱形更容易沿同一基线比较高低。画面没有只靠颜色让人猜，图下还写着分类与金额。对于账单分析界面，文字标签很关键；相近颜色在小屏上可能难以区分，[名称与数值](https://www.jvds.cn/share/ui-design/data-visualization-color-accessibility)可以提供另一条线索。

这些金额是设计图里的示例，不能作为产品使用数据。实际评审时可换一组极端样例：一个类别特别大，几个类别特别小，再观察标签、柱高和圆环细线是否还能读懂。静态稿里的整齐分布，不能覆盖所有账单情况。

![Mosca分析页的圆环与柱形图、筛选项和相同分类金额标签](https://www.jvds.cn/upload/2026/1008/d187-tp/u012-i2.webp)

Analytics中段｜图形切换，顶部筛选和下方分类金额继续提供核对依据。

## 转账确认把对象与金额聚到一起

填写页采用纵向卡片，To、From、Amount和Message从上往下排列，Continue为蓝色主按钮。右边确认抽屉把头像、对象、来源卡、金额与日期集中展示，最下面出现Swipe to confirm。确认区域比填写页更紧凑，关注点从编辑转为核对。

这种支付确认界面值得借鉴的，是在动作之前把关键对象重新摆出来。金额不能只是一个醒目的数字，还要和[收款对象、资金来源](https://www.jvds.cn/share/ui-design/financial-app-trust-design)一起读。图中填写页的To和From与确认抽屉里的对象关系存在不够直观之处，进一步完善时应先统一这些标签。

界达设计建议把卡片末尾号码、对象名称与金额做成稳定的核对顺序，再检查滑动操作的提示与替代方式。截图没有展示滑动过程、失败或取消反馈，所以这里只能评价可见信息组织，无法判断转账安全性或实际完成体验。

![Mosca转账填写页的To与From标记及右侧包含Elizabeth和From card的确认抽屉](https://www.jvds.cn/upload/2026/1008/d187-tp/u012-i3.webp)

填写页与确认抽屉｜两个阶段的账户角色值得重新对照，金额与身份必须同向解释。

## 常见问题

### 账单图表能只靠颜色区分吗？

最好同时显示分类名称与数值。颜色方便快速识别，文字让相近色和小图也有核对依据。

### 转账确认页应优先展示什么？

收款对象、资金来源和金额应紧邻，并与填写页使用一致标签。确认操作是否易用还需要实际检查。

## 设计检查清单

- 逐项对齐填写页与确认页的对象名称。
- 用极端金额样例检查圆环和柱形标签。

## 正在整理金融App的操作层次？

如果你的钱包、记账或资金管理产品需要重整首页、分析图表和确认流程，可带着现有界面讨论信息如何更好辨认。

界达设计工作室（JVDS）提供UI/UX设计与网站设计、开发服务，可一起梳理页面内容、界面结构与实现需求。

[联系界达设计，聊聊你的项目](https://www.jvds.cn/contact)