admin 管理员组

文章数量: 1086019


2024年5月9日发(作者：thread factory库的chm帮助文档)

超全面的APP数据图表展现方式深度总结

之前研究过一段数据图表的最佳表达方式，随着手机端应用层出不穷地发展，这次将

数据图表的表现延用到手机端。相比 Web 端展示数据的空间优势，要兼顾手持设备的便

捷、简明而重点的特质，手机端该如何取舍？是否有更加合适的表现方式？下面是翻阅或

试用了各种有数据的 App 后，将手机端应用中值得借鉴的部分做了小小的总结，也让我

自己对不同数据图表的特性有更深的理解。

搜罗了 App 分类的过程中，发现较能体现数据应用表达的，多数分布在:财务、 健

康、医疗、商务、工具、效率这几类;其中以财务、健康、商务类的应用为最 广泛，今天

就枚举这三大类的图表应用来和大家一起看看。

通常我们所使用的数据图表大多是能在 Highchart 中找到，今天先以其中图表为基

础参照，来看看图表在手机 app 里都是如何恰当应用表达的。

一、财务类

使用财务类（理财）用户的目的，通常是掌握收支、收益的趋势，从而省或赚钱。 这

类应用通常会请用户事先做好收支、账单和预算设定，之后再开启 app 时主 要的任务就

是查看应用反馈了。

Mint Bills Money

上图的是个记账应用，左图用了仪表盘（solidgauge）表示账单到期的情况，右图则

是用类似条形图的方式，表示信用卡的已用额和余额，及最小 还款数。这样在既定范围内，

1 / 8

扫一下便可知道总体开销的情况。相比两者都有进度、进程的表达， 但描述倒计时，左图

的表达就更合适一些;而描述最小还款刻度，右图会更清晰。

和上一个的 app 有相近的应用。这仅有一条的“堆叠条形图”后来觉得更像是基础

热力图，并表示了当前所示的分值，方便查看当前信用值，所在坐标，视觉 上加了箭头既

有了进程感，也有指示作用。

Saver 2

还是一款记账 app，左图以各开销分类代表的不同色块，来切分的甜圈图（Donut

chart），是在原始占比饼图上做了更有效的应用。

挖空饼心，放开销的汇总金额， 这个做法在 app、和现代 Web 图表数据总览里逐

渐成为主流，让占比和总额都 轻松收入眼底。右图是根据左图的色块细化具体分类项，查

看单项的预算和开销占比情况。

MoneyWiz

左图是以日历管理的方式，便利查看对应账单分类，能明现哪些日子是有开销或 账单

提醒的。右图则用常规的柱图来对比月的收支。

TapToTrack

还是记账 app，左图是用 timeline 的形式，记录每日收支数据细则，并用常识 色

彩（红绿）来表示收入支出。右图上半部分的折线图，继承了左图中红绿收 支用色标示，

让用户查看逐月收支情况，下半部分是把细项收支做了排行（示意色不尽准确），占比表示

2 / 8


本文标签： 数据 图表 收支 应用 开销

版权声明：本文标题：超全面的APP数据图表展现方式深度总结 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1715265332a686796.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。