案例丨数据图表在手机端的可视化表达.docx
- 文档编号:28760228
- 上传时间:2023-07-19
- 格式:DOCX
- 页数:11
- 大小:1.76MB
案例丨数据图表在手机端的可视化表达.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里也少不了过滤器,比如切换地域、时间等维度的控件,可以有效调整视图的颗粒度
把控基础元素在有限空间针对性应用,凸显重点,也是为用户下一步的节流、投资等行为做指引。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 案例 数据 图表 手机 可视化 表达
![提示](https://static.bdocx.com/images/bang_tan.gif)