移动仪表盘怎么做?2方面详解设计指南
移动仪表盘可随时随地监控业务绩效、查看业务进展、查询业务数据,但是移动仪表盘的设计与常规仪表盘不同,因为它们需要自适应小屏幕。本文将使用应用程序设计理念来帮助你,为你设计一个有吸引力的移动仪表盘。
1.移动仪表盘中基本元素的设计怎么做?
数字和图形是仪表盘的主要元素。他们占据了报告的大部分。在移动仪表盘中,为了达到更好的显示效果,需要利用不同元素的优势。
(1)数字
数字的表达直观、简洁,占用空间小,是最直接的显示方式。
该数字是在移动仪表盘中显示关键业务指标的最佳选择。将关键数字放在报告的最显著位置,可以帮助你快速全面地了解你的业务。
缺点是无法更深入地了解数字背后的趋势、比例和分布。
例如,在苹果的“健康”中,数字被应用到数字显示器上
来自谷歌
(2)图形
图形使数据的表达更加丰富。
在移动仪表盘中,图形适合于关键指标的销售业绩和趋势的表现,让用户更直观地跟踪业绩和趋势。
但是,图形在应用程序中会占用大量屏幕空间。竖屏中的三个图形已经占据了全屏。因此,有必要从设计开始,探索如何放置更多的数据。
瀑布流
瀑布流布局是指从上到下排列图表。在这种布局中,应该用较大的空间突出关键数据,弱化次要数据。试图使主数据和辅助数据的图表类型不同是另一个关键点。但是,你可以在每个模块中使用相同的图表类型,这使得页面级别清晰,减少了用户对数据显示的疲劳。
轮播
即在同一图形显示区域内轮播图表内容,可以有效节省移动终端的显示空间,避免大量的纵向滑动。
(3)表格
由于手机屏幕的大小,移动终端只适合一些字段较少的表格。在垂直屏幕的情况下,不建议超过六列,但也取决于每列的内容。数据多的话会显得很拥挤,影响视觉效果。
(4)数字与图形的联动
如上所述,图片占用空间但能表达丰富的内容,数字直观但缺乏解释。我们需要将它们结合起来,通过各种函数使数据内容表达相关。
使用数字和图形的联动时,需要考虑使用的方便性。一般用户的想法是,当你看到价值的时候,你也想看到更具体的内容,比如趋势、比例、对比等,这些效果需要使用图表联动的方法。
2.移动仪表盘的设计怎么做?
我们已经有了报告的演示元素,现在我们需要一个合理的仪表盘布局来将它们集成在一起,以便用户可以直观、快速地获得他们需要的数据。并且考虑到层次结构的设计原则,可以对不同的数据对象进行分解和钻取。
基于分层设计和合理布局的元素,我们提供四种主页设计解决方案,让数据在各种排列中体现深度感。
(1)流程布局
原型:
来自FineReport
演示:
来自FineReport
所有关键指标均以平铺方式放置,易于开发,并提供数据内容的快速概览。每个指标中用户关心的内容都需要充分表达。这种模式很简单,但是用户必须不断滑动才能访问所有内容信息,因为没有导航等跳转动作,导致内容不堪重负,体验更差。
应用场景:指标不多,数据内容为高粒度汇总
(2)名片+向下钻取
原型:
来自FineReport
演示:
来自FineReport
这种模式根据业务或场景对“名片”进行分类;每张名片代表一个业务或场景。名片反映了最重要的指标,有助于你了解业务的整体情况和场景。点击超链接后,你可以转到下一页,查看当前业务或场景分类下的指标状态。
与流程布局的区别在于增加了层次化的设计思路。一级指标汇总层不需要很全面,用户可以通过下钻获取更多的指标信息。
应用场景:所有场景
(3)数独
原型:
来自FineReport
演示:
来自FineReport
数独的使用方式类似于名片+下钻的方式。每九个盒子就是一个入口。它可以是模块的索引项,也可以是应用程序的条目。
应用场景:所有场景
(4) Tab
原型:
来自FineReport
演示:
来自FineReport
数据内容可分段为若干部分。分割的逻辑可以是同一层次,也可以是不同层次。
应用场景:多个业务模块,每个模块都有自己的数据分析需求
例1:可以是汇总、细分模式分析(如原型所示)
例2:可以是公司X个不同业务模块的数据分析(如演示所示)
例3:可以是销售、生产、财务等业务类别的数据分析
3.如何为移动仪表盘选择数据?
信息技术部门为经理定制的移动仪表盘。报告的布局和美观是必不可少的,但数据的有效性更是重中之重。如果仪表盘脱离了信息本身的价值,无论设计多么吸引人,都没有意义。
但是需要强调的是,数据的最大时间粒度应该是天;否则用户就不会有关注数据的欲望,也就无法产生app粘性。