案例丨数据图表在手机端的可视化表达.docx

案例丨数据图表在手机端的可视化表达.docx

《案例丨数据图表在手机端的可视化表达.docx》由会员分享，可在线阅读，更多相关《案例丨数据图表在手机端的可视化表达.docx（11页珍藏版）》请在冰豆网上搜索。

案例丨数据图表在手机端的可视化表达

案例丨数据图表在手机端的可视化表达

有数据的apps——手机端的数据表达式

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

相比web端展示数据的空间优势,要兼顾手持设备的便捷、简明而重点的特质,手机端该如何取舍?

是否有更加合适的表现方式?

下面是翻阅或试用了各种有数据的app后,将手机端应用中值得借鉴的部分做了小小的总结,也让我自己对不同数据图表的特性有更深的理解。

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

财务、健康、医疗、商务、工具、效率这几类;其中以财务、健康、商务类的应用为最广泛,今天就枚举这三大类的图表应用来和大家一起看看。

通常我们所使用的数据图表大多是能在highchart中找到,今天先以其中图表为基础参照,来看看图表在手机app里都是如何恰当应用表达的。

一.财务类

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

这类应用通常会请用户事先做好收支、账单和预算设定,之后再开启app时主要的任务就是查看应用反馈了。

MintBills&Money

上图的是个记账应用;左图用了仪表盘（solidgauge）表示账单到期的情况;左图则是用类似条形图的方式,表示信用卡的已用额和余额,及最小还款数。

这样在既定范围内,扫一下便可知道总体开销的情况;相比两者都有进度、进程的表达,但描述倒计时,左图的表达就更合适一些;而描述最小还款刻度,右图会更清晰。

Mint

和上一个的app有相近的应用;这仅有一条的“堆叠条形图”后来觉得更像是基础热力图,并表示了当前所示的分值,方便查看当前信用值,所在坐标;视觉上加了箭头既有了进程感,也有指示作用。

Saver2

还是一款记账app,左图以各开销分类代表的不同色块,来切分的甜圈图（Donutchart）,是在原始占比饼图上做了更有效的应用;挖空饼心,放开销的汇总金额,这个做法在app、和现代web图表数据总览里逐渐成为主流;让占比和总额都轻松收入眼底。

右图是根据左图的色块细化具体分类项,查看单项的预算和开销占比情况。

MoneyWiz

左图是以日历管理的方式,便利查看对应账单分类,能明现哪些日子是有开销或账单提醒的;右图则用常规的柱图来对比月的收支。

TapToTrack

还是记账app,左图是用timeline的形式,记录每日收支数据细则,并用常识色彩（红绿）来表示收入\支出;右图上半部分的折线图,继承了左图中红绿收支用色标示,让用户查看逐月收支情况,下半部分是把细项收支做了排行（示意色不尽准确）,占比表示出某个highlight出的子项支出和占比数据。

EnergyMonitorUI

在Dribbble上一张相关的能源监控图设计稿;用极地风向图（windrose）来表示2013年里的月度能耗,相比同样示意的柱图,极地风向图更有一些新意;虽然设计稿其他细节还有待再一步交代,却也直观表明能耗大月,为用户后续采取相应的节流措施提供了帮助。

YahooFinance

这次不是记账类应用了；不用多说这是yahoo的一款股票跟踪app。

左图是股民们最熟悉不过的,不同用色的折线图表明当日走势,还可以通过地域、时间的选择\切换来查看不同纬度的数据表现;下部的红绿涨跌也清晰可见;右图用面积图表示单支股票在不同时间趋势变化,在设计看来有填色的是面积图,反之就是折线\曲线图了,但有填色以后坐标上还可以设置细节时段的表现（右图）。

股票相关的数据图表都应用得非常专业和固定,也算是一项复杂业务为用户建立起的常识和习惯,只要看到固定的图表组合就无需多说了。

ARBITRAGETRADER

股票app。

一格格的数据类似热力图的形式,通常在空间富足的web端,在数据明细表格里更为常见;是一种非常好用的呈现方式:

以不同色块表示用户预设的一些区间,看似密麻的数字,利用这种色块可以很快了解数据的范围共性。

回顾

常规的基础图表应用在手机端,都会考虑空间因素,也会在视觉上做更清晰的调整;下面来看看财务类app的图表应用回顾：

此外,

–账单结合日历提醒也是个很好的方式

–用色本来就很重要,在有限空间的app里,用好色彩,会大幅提升效率

–app里也少不了过滤器,比如切换地域、时间等维度的控件,可以有效调整视图的颗粒度

把控基础元素在有限空间针对性应用,凸显重点,也是为用户下一步的节流、投资等行为做指引。