跟着手机端利用层出不穷地发展,这次将数据图表的表示延用得手机端。
比拟 web 端展现数据的空间优势,要统筹手持设备的便捷、扼要而重点的特质,手机端该如何取舍?是否有更加适合的表示方法?下面是翻阅或试用了各种有数据的 app 后,将手机端利用中值得鉴戒的局部做了小小的总结,也让我本人对不同数据图表的特征有更深的理解。
收罗了 App 分类的进程中,发明较能体现数据利用表白的,多数散布在:财务、 健康、医疗、商务、工具、效力这多少类;其中以财务、健康、商务类的利用为最 普遍,今天就枚举这三大类的图表利用来跟 大家一起看看。
通常咱们所应用的数据图表大多是能在highchart中找到,今天先以其中图表为基本参照,来看看图表在手机 app 里都是如何适当利用表白的。
应用财务类(理财)用户的目标,通常是控制收支、收益的趋势,从而省或赚钱。 这类利用通常会请用户当时做好收支、账单跟 估算设定,之后再开启 app 时主 要的义务就是查看利用反馈了。Mint Bills & Money
上图的是个记账利用;左图用了仪表盘(solidgauge)表现账单到期的情况;左图 则是用相似条形图的方法,表现信誉卡的已用额跟 余额,及最小还款数。这样在 既定范畴内,扫一下便可晓得总体开销的情况;比拟两者都有进度、过程的表白, 但描写倒计时,左图的表白就更适合一些;而描写最小还款刻度,右图会更清楚。
Mint
跟 上一个的 app 有相近的利用;这仅有一条的“重叠条形图”后来感到更像是基本热力求,并表现了当前所示的分值,便利查看当前信誉值,所在坐标;视觉 上加了箭头既有了过程感,也有唆使作用。
Saver 2
仍是一款记账 app,左图以各开销分类代表的不同色块,来切分的甜圈图(Donut chart),是在原始占比饼图上做了更有效的利用;挖空饼心,放开销的汇总金额, 这个做法在 app、跟 古代 web 图表数据总览里逐步成为主流;让占比跟 总额都 轻松收入眼底。右图是依据左图的色块细化详细分类项,查看单项的估算跟 开销占比情况。
MoneyWiz
左图是以日历治理的方法,方便查看对应账单分类,能明现哪些日子是有开销或 账单提示的;右图则用惯例的柱图来对照月的收支。
TapToTrack
仍是记账 app,左图是用timeline的情势,记载逐日收支数据细则,并用常识 颜色(红绿)来表现收入\支出;右图上半局部的折线图,继续了左图中红绿收 支用色标示,让用户查看逐月收支情况,下半局部是把细项收支做了排行(示意色不尽正确),占比表现出某个 highlight 出的子项支出跟 占比数据。
EnergyMonitorUI
在 Dribbble 上一张相干的能源监控图设计稿;用极地风向图(wind rose)来 表现 2013 年里的月度能耗,比拟同样示意的柱图,极地风向图更有一些新意; 固然设计稿其余细节还有待再一步交代,却也直观表明能耗大月,为用户后续采 取相应的节流办法供给了辅助。
Yahoo Finance
这次不是记账类利用了；不必多说这是 yahoo 的一款股票跟踪 app。左图是股 民们最熟习不外的,不同用色的折线图表明当日走势,还能够通过地区、时间的抉择\切换来查看不同纬度的数据表示;下部的红绿涨跌也清楚可见;右图用面积图表现单支股票在不同时间趋势变更,在设计看来有填色的是面积图,反之就是折线\曲线图了,但有填色当前坐标上还能够设置细节时段的表示(右图)。股票相干的数据图表都利用得十分专业跟 固定,也算是一项庞杂业务为用户树立起 的常识跟 习惯,只有看到固定的图表组合就无需多说了。
ARBITRAGE TRADER
股票 app。一格格的数据相似热力求的情势,通常在空间充裕的 web 端,在数据明细表格里更为常见;是一种十分好用的浮现方法:以不同色块表现用户预设的一些区间,看似密麻的数字,应用这种色块能够很快了解数据的范畴共性。
回想惯例的基本图表利用在手机端,都会斟酌空间因素,也会在视觉上做更清楚的调剂;下面来看看财务类 app 的图表利用回想:
此外,
– 账单联合日历提示也是个很好的方法
– 用色原来就很主要,在有限空间的 app 里,用好颜色,会大幅晋升效力
– app 里也少不了过滤器,比方切换地区、时间等维度的控件,能够有效调剂视图的颗粒度
把控基本元素在有限空间针对性利用,凸显重点,也是为用户下一步的节流、投资等行动做指引。
健康大类里一种是活动健身,另一种是健康指标监控。健康类 app 的用户重要关注本人的活动指标、实现度跟 变更等因素,通常也是在用户依据领导设定好一 些监控尺度后,通过活动在 app 中记入新的数据,便利随时查看跟 跟踪。
FitPort
这是一款体重、计步的 app。左图仍是用甜圈图(也可看做圈形的条图)表现今天练习的结果:步调数、锤炼公里数\实现度,及体重变更,前两个是细甜圈图，清晰表白了实现进度跟 差距，后一个是为坚持作风而做的一种视觉丑化来表现体重变更；右图的底部在时间维度为天天的情况下，以柱图跟 基准线来浮现一天里不同时段步调数变更，便利用户找到一些本身的法则。 健康的另一类是健康指标的监控,有一局部医疗也暂罗在此列,共性是这类 app 都通过一定的外接设备随身、随时检测、丈量身材数据,同步记载在 app 里； 而后用户就能在 app 里查看指标变更,进而调剂饮食、生涯等习惯，改良现状。
iHealth MyVitals 2.0
这是一款血压监控 app。左图的折线图描写最近,大概一天内某个时段的血压范 围、体重的变更趋势,右图是表现当前血压数据的坐标,跟 参考范畴的变异热力求,跟 前面理财 app 里的信誉值坐标很像,不同的是多一个维度，也是合乎血 压(伸缩压跟 舒张压坐标)实际基础数据请求;所以坐标热力求也能够机动利用。
iHealth Gluco-Smart
这是一款血糖监控 app。左图是通过外接血糖监控设备在app里查看丈量数据；加了视觉后果的甜圈图有仪器刻度感，提醒 7 日的饭前或夜间的血糖均值，下面的散点图作为帮助具体图表来标注高中低分辨产生的时段。在右图中查看血糖变更趋势里，折线图表现饭前\夜间的血糖变更，不同用色线细节表白早餐、午餐、 晚餐跟 夜间的血糖变更。两张图都有绿色区域——平安范畴，也十分便于查看跟 对比本人的数据变更。
SnoreLab
这是一款鼾声监控 app。左图是对打鼾水平的监测表示,左侧有从舒缓到重大的用色筛选，严密柱状图中色块遵守了筛选器的三个维度,能够直观看到最厉害的打鼾情况散布在什么时段；下方还能回听当时的鼾声的轻重度；右图用有色热力折线图表现每个时段鼾声产生的水平；并将其转换成详细部位发声的测评值，供用户就医时做有效医治的参考。
SleepCycle
跟 上一个 app 的右图相似,是做睡眠监控的数据图表。Dribbble的设计稿。 Dribbble里的绚美设计稿,许多爱好曲线加用色渐变,但也表白犯错的也许多，而这张设计稿中的渐变用色是刚好地与曲线做了联合，清楚地表白出配合时段察看睡眠深浅水平；甜圈实现度表现不同类型占比,对整体睡眠情况做了直观总结。
回想
这类 app 里利用的经典图表,除了监控指标、查看变更\趋势外，着重提醒问题点，以便用户调剂作息、饮食及练习计划。
贸易类重要用于监控业务数据：流量、拜访、触达等，其中糅合了一则效力工具，也是对时间应用的监控跟 治理。
Mandrill
这是款跟踪邮件发送数据的 app。上半局部是在可选的时间范畴内，汇总数据提醒了邮件的翻开率、点击率、去重翻开、点击数、投诉、退订数等关键指标；下半局部用有透明度的面积图表现翻开率跟 点击率。
MailChimp
这款也是邮件监测 app,大家都熟习的 MailChimp。用条形图表现翻开率、点 击率；关键数据局部，摆设出邮件投递、翻开、点击数\率，条形图也能够是拗成圈的细甜圈图,通常做百分比的示意，实现度也是雷同的概念。
TODAY Calendar
这是一款时间\义务治理 app。仍然应用了日历、用色块辨别不同的义务(左图)，接着在右图里的表盘上，就可见之前的义务部署、时间是否有矛盾或重叠，高深莫测；比线性地统计单项义务耗时要直观许多。
Statistics
不记得 Dribbble仍是 Pinterest 里发明的，一张拜访起源数据图。上部的舆图 有点相似舆图(Map bubble)，直观表白起源地区；底部将 PV、访客数、回访数以半透明的面积图浮现出来，也能够依据这三个数据的先后逻辑，将其看做简略的漏斗视图。
回想贸易效力类更关注监控后果、指标数据等以便找到晋升点。
在收拾例子的进程中，想到很早之前 app 之初,如何迁徙 web 端或客户端业务得手机时的思路：把业务最中心的骨干局部拿过来。而今回想如是：跟着手机 利用的比例大幅升高后，除了斟酌中心骨干，还要尽力把要用户做的重要义务或 给用户的有效领导，都昭示出来。就数据类的 app 而言，在有限空间内，汇总 数据或者叫关键指标，不可缺乏，而数据表会绝对少一点登场，元素构造就会大 致变成如下的样子：
有多个元素\组合，就一定会斟酌优先级，就像火箭的中心跟 可弃局部,假如只 能在 apple watch 上或更小的空间上展现内容,咱们该留那一块呢?
综上是在工作探索中，对数据图表在手机端利用的一点收拾跟 提炼；每个基本图表都有本身的特色，控制它的特质，并能应用好它做更多的翻新，是可视化数据的价值所在。数据并不单调，有趣的数据图表是它最好的翻译官。以上观点、案例及思考未免浅显、片面，更多更好的利用有待大家连续发掘。