之前研究过数据图表的最佳表达方式。随着手机端应用层出不穷，数据图表也不断沿用到手机端：健康、天气、股市、商务、办公。相比web端展示数据的空间优势，App端要兼顾手持设备的便捷，要考虑移动端屏幕的大小和属性，还要考虑可视化图表能否提升APP的气质。而在工作中，这一类的移动端图表则更多地反应在报表上，可能叫移动端报表，移动驾驶舱，抑或是移动数据分析，简单来讲就是把常见的报表、数据分析报告投到移动端，用于业绩指标监控和业务数据查询。主要的受用者是经理人和管理者。那么到底如设计出实用简洁的移动端报表呢？本文试着借助FineReport软件，运用设计APP的思路，设计一个能随时随地查看数据、分析数据的移动端报表。就使用者而言，移动端报表讲究随时获取，所以在设计上，需要避繁就简，直击重点。可以从基本元素设计、驾驶舱主页布局设计、数据选择、报表层级设计这4个维度来展开阐述。1、基本元素设计数字和图形是主要组成元素，占据了报绝大多数版面，要达到更好的展现效果就需要发挥不同元素的特长。（1）数字数字的表达，直观、简洁，且占用空间少，是最直接展示方式。例如股票中的大盘数据，一眼就能看到市场的当前指数。在移动驾驶舱场景中适合应用于重点业务指标的展示，在报表的最显眼位置放入诸多重点数字可以快速地一览业务的全貌。其缺点在于无法更深入的了解数字的背后的趋势，占比，分布等更深层次的含义。举例一：应用于产品“健康”中的数字展示（左侧：APP图片来源iphone自带“健康”。右侧：报表图片来源于“移动端驾驶舱驾驶舱素材数字”）举例二：应用于股票产品中的数字展示（左侧：APP图片来源于“雪球”。右侧：报表图片来源于“移动驾驶舱日/月报体系银行运营日/月报”）（2）图形图形在数据内容的表达上表现的更丰富，在视觉上也能达到更好的效果。在移动驾驶舱场景中适合应用于业绩达成率、重点指标走势等，以便用户对业绩现状与趋势有更加直观的把控。但是，图在APP中占用的屏幕空间相比而言较多，竖屏3个图形已经占据全屏，如何放置更多的数据，必须要从设计上入手。①瀑布流从上至下排列图表，此时要注意以稍大的篇幅突出重点数据，弱化次要数据，尽量让主次数据的图表类型不一致，建议每个模块单独采用一种图表类型，这样使得整个页面层次清晰，内容丰富，减轻用户对数据展示的疲劳度。②轮播展示功能即在同一块图形展示区域内轮换展示图表内容，有效节省移动端的展示空间，避免大量的纵向滑动。（3）表格由于手机屏幕大小的问题，移动端只适合一些字段较少的表格，竖屏情况下，不宜超过6列，还要看每列的内容情况，如果数据内容很多，会显得很拥簇，视觉效果会大打折扣。在移动驾驶舱场景中，纯表格并不适宜，原则是：善用，少用。（4）数字与图形的联动上文所述，图占用空间但内容表达丰富，数字直观但缺乏解释度，我们需要把它们结合到一起，通过各种功能让数据内容表达具有关联性，操作简单，数据更易解读。数字和图形的联动，需要考虑使用的便利性。一般用户的思路是，看到一个数值，还要想看更详细的内容，例如趋势、占比、对比等，就需要图表联动的方式。数字与图形联动方式：①上下联动图置于屏幕最下方，保持常态，上方是各种不同的业务、场景指标，点击后，图形会随点击的业务数据内容变化而变化。（左1：APP图片来源于IPHONE“股票”。右2右3：报表图片来源于“移动端驾驶舱驾驶舱素材数字and图形联动”）②左右对照左图右数或者右图左数的排列方式，一般适用于仪表盘，对业绩达成进度进行可视化展现（图片来源于“移动端驾驶舱驾驶舱主页名片”）②上下对照最常见的上数下图的排列方式，常见于利用柱形图、折线图、饼图对业务数据的趋势、占比进行可视化分析，这里不再举例。2、移动驾驶舱主页布局设计有了报表的展现元素，现在需要一个合理的布局方式将其融合到一起，让用户能直观、迅速地获取自己所需的数据。并且考虑层次的设计原则，能对不同的数据对象进行分解与钻取。这里本着分层设计、合理布局的要素，提供了4种主页的设计方案，让数据在各种布局中体现层次感。（1）流式布局所有关键指标均以平铺的方式展开，开发简单，能够快速一览数据内容。每一项指标中用户

转载请注明:http://www.aideyishus.com/lktp/8697.html