唐山APP开发,唐山APP制作,唐山APP定制-唐山盛秋网络
盛秋网络微信公众号 扫一扫关注
tel-icon全国服务热线: 400-690-1984  13831639196
扫一扫关注盛秋网络微信公众号

联系我们

盛秋网络科技(唐山)有限公司

  • 电话:400-690-1984
  •  400-158-3389
  • 地址:唐山市路北区体育馆道25号硅谷大厦
  • 网址:www.tangshanapp.cn

公司动态

您现在的位置: 首页 > 新闻资讯 > 公司动态

移动端 H5 报表设计准则

发布日期:2018年09月11日    浏览次数:56

如今随着移动端的普及,移动办公也越来越流行,应运而生的移动端报表查看也成为迫切需求,只要涉及报表开发和设计,总要被问及能否支持移动端浏览报表。这个需求可能就像是手机能否连接 wifi 一样非常基础必要的功能。


移动端报表的目标人群


决策人员,移动办公,在移动环境下中方便查看,审阅,并根据展示的数据进行决策分析

数据分析人员,需要再查看当前实时数据状态与趋势,及时发现一场并反馈

业务人员,业务人员需要在客户现场或外部环境了解当前最新的业务数据


移动端环境限制


屏幕尺寸及分辨率在不同机型不一致

移动环境,客户所处的外在环境可能更为复杂,如明亮度不一致

活跃时间不一致,用户查看报表的时间段可能不一致,有可能是碎片时间,有可能是整段时间进行数据预览分析


移动端报表特点


文字少,图表多

1_看图王.web


数据趋势及比率划分

2_看图王.web


可触摸交互

3_看图王.web


响应式报表

能够适应移动设备的多样性,无论是主流移动设备还是少量偏门的手机,都能够正常展示报表数据,不需要进行缩放从而影响用户体验。


设计移动端报表准则


基本元素设计简单明了

数字和图形是主要组成元素,占据了报绝大多数版面;数字的表达,直观、简洁,且占用空间少,是最直接展示方式。


图形在数据内容的表达上表现的更丰富,在视觉上也能达到更好的效果。所以图形设计一定要简单明了,色彩对比明显,避免占具屏幕控件过大,而现实的数据不全。

4_看图王.web


避免冗余文字

避免出现大量文字出现,文字在移动端大量展示的话会影响阅读并且无法让用户锁定重点。

5_看图王.web


避免滚屏查看数据

尽量在一屏内展示完整数据,或者减少横向和竖向滚屏同时出现。


汇总表格展示

表格在移动端不适用展示过多复杂的表格结构和数据,因此在移动端展示的表格一般只有几行几列,而且都是以汇总数据为主,所以在移动端使用表格时,一定要减少表格的行列。

6_看图王.web


增加层级钻取关系

移动端因为设备的限制,展示的数据是很有限的,但很多客户在了解汇总数据之后,还是要想要去了解更详细的数据,因此这个时候可以将数据分层展示,可避免在同一界面中展示大量的数据,所以在移动端报表设计中,应适当增加层级钻取关系。



运行0.19533秒,内存使用3.66 MB,数据库执行54次,用时0.04683秒,缓存执行19次,用时0.01589秒
收缩