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

超全面的A PP数据图表展现方式深度总结 之前研究过一段数据图表的最佳表达方式 ，随着手机 应用层出不穷地发展 ，这次将数据图表的表 现延用到手机 。相比 Web 展示数据的空间优势 ，要兼顾手持设备的便捷、简明而重点的特质 ，手机 该如何取舍 ？是否有更加合适的表现方式 ？下面是翻阅或试用了各种有数据的 A pp 后 ，将 手机 应用中值得借鉴的部分做了小小的总结 ，也让我自己对不同数据图表的特性有更深的理解。 搜罗了 A pp 分类的过程中 ，发现较能体现数据应用表达的 ，多数分布在:财务、 健康、医疗、商务 、工具、效率这几类;其中以财务、健康、商务类的应用为最 广泛 ，今天就枚举这三大类的图表应用 来和大家一起看看。 通常我们所使用的数据图表大多是能在 Highchart 中找到 ，今天先以其中图表为基础参照 ，来看看 图表在手机 app 里都是如何恰当应用表达的。 一、财务类 使用财务类 （理财 ）用户的目的 ，通常是掌握收支、收益的趋势 ，从而省或赚钱。 这类应用通常会 请用户事先做好收支、账单和预算设定 ，之后再开启 app 时主 要的任务就是查看应用反馈了。 Mint Bills Mo ney 上图的是个记账应用 ，左图用了仪表盘 （so lidgauge ）表示账单到期的情况 ，右图则是用类似条形 图的方式 ，表示信用卡的已用额和余额 ，及最小 还款数。这样在既定范围内 ，扫一下便可知道总体 开销的情况。相比两者都有进度、进程的表达 ， 但描述倒计时 ，左图的表达就更合适一些;而描述最 小还款刻度 ，右图会更清晰。 Mint 和上一个的 app 有相近的应用。这仅有一条的“堆叠条形图”后来觉得更像是基础热力图 ，并表示了 当前所示的分值 ，方便查看当前信用值 ，所在坐标 ，视觉 上加了箭头既有了进程感 ，也有指示作用 。 Saver 还是一款记账 app ，左图以各开销分类代表的不同色块 ，来切分的甜圈图 （Do nut chart ），是在原 始占比饼图上做了更有效的应用。 挖空饼心 ，放开销的汇总金额 ， 这个做法在 app、和现代 Web 图表数据总览里逐渐成为主流 ，让 占比和总额都 轻松收入眼底。右图是根据左图的色块细化具体分类项 ，查看单项的预算和开销占比 情况。 Mo neyW iz 左图是以日历管理的方式 ，便利查看对应账单分类 ，能明现哪些日子是有开销或 账单提醒的。右图 则用常规的柱图来对比月的收支。 TapToT rack 还是记账 app ，左图是用 t imeline 的形式 ，记录每日收支数据细则 ，并用常识 色彩 （红绿 ）来表示 收入\支出。右图上半部分的折线图 ，继承了左图中红绿收 支用色标示 ，让用户查看逐月收支情况 ， 下半部分是把细项收支做了排行 （示意色不尽准确 ），占比表示出某个 highlight 出的子项支出和占 比数据。 EnergyMo nit o rUI 在 Dribbble 上一张相关的能源监控图设计稿 ：用极地风向图 （w ind rose ）来 表示 013 年里的月度 能耗 ，相比同样示意的柱图 ，极地风向图更有一些新意。虽然设计稿其他细节还有待再一步交代 ， 却也直观表明能耗大月 ，为用户后续采 取相应的节流措施提供了帮助。 Yahoo Finance 这次不是记账类应用了。不用多说这是 yahoo 的一款股票跟踪 app。左图是股 民们最熟悉不过的 ，不同用色的折线图表明当日走势 ，还可以通过地域、时间的选择\切换来查看不同纬度的数据表现 ，下部的红绿涨跌也清晰可见。右图用面积图 表示单支股票在不同时间趋势变化 ，在设计看来有填 色的是面积图 ，反之就是折线\曲线图了 ，但有填色以后坐标上还可以设置细节时段的表现 （右图 ） 。股票相关 的数据图表都应用得非常专业和固定 ，也算是一项复杂业务为用户建立起 的常识和 习惯 ，只要看到固定的图表组合就无需多说了。 A RBIT RA GE T RA DER 股票 app。一格格的数据类似热力图的形式 ，通常在空间富足的 web ，在数据明细表格里更为 常见 ，是一种非常好用的呈现方式 ：以不同色块表示用户预设的一些区间 ，看似密麻的数字 ，利用 这种色块可以很快了解数据的范围共性。 回顾 常规的基础图表应用在手机 ，都会考虑空间因素 ，也会在视觉上做更清晰的调整;下面来看看财 务类 app 的图表应用回顾: 此外 ， 账单结合日历提醒也是个很好的方