移动端 H5 报表设计准则

[powertoolsteam]

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

本文借助 ActiveReports 报表工具，实现移动端报表设计 https://www.grapecity.com.cn/developer/activereports

移动端报表的目标人群

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

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

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

移动端环境限制

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

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

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

移动端报表特点

1、 移动端本身因为移动设备的限制，所以文字少，图表多

2、 数据趋势及比率划分

3、 可触摸交互

4、 响应式报表

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

设计移动端报表准则

• 基本元素设计简单明了

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

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

基本元素设计简单明了

• 避免冗余文字

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

• 避免滚屏查看数据

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

• 汇总表格展示

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

• 增加层级钻取关系

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

ActiveReports 报表控件

ActiveReports 是一款专注于 .NET 平台的报表控件，全面满足 HTML5 / WinForm / ASP.NET / ASP.NET MVC / WPF 等平台下报表设计和开发工作需求，作为专业的报表工具为全球超过 300,000 开发人员提供了全面的报表开发服务。 https://www.grapecity.com.cn/developer/activereports