善用工具,教你完整制作出领导驾驶舱

2020-04-14 10:39:10 浏览数 (1)

说到驾舱舱,它通常是给驾驶员提供速度、转速、燃油油位等信息的设备。它可以帮助飞行员或赛车手快速作出决定。

而在企业业务流程管理中,“驾驶舱”可以帮助企业管理者尽可能清楚地查看更多企业活动信息,因此,我们称之为“领导驾驶舱”,国外称之为Dashboard。当领导需要了解业务中发生的事情,同时保持日常运营控制时,领导驾驶舱能够帮助快速做出战术决策提供可靠的信息。

领导驾驶舱用来实现数据的分析展现,直观的数据总览配合层层钻取追根溯源,可以帮助决策人员发现问题调整战略,甚至还可以以监控预警模式,实时刷新监控数据,可快速发现问题并及时响应。

领导驾驶舱设计思路

如上文所述,领导驾驶舱的本质是一个汇总展示了对于决策有重要影响的指标的图表页面。而数据图表的展示,可以根据领导对业务的关注程度来自由定制需要展示的项目。所以在进行设计的时候,我们需要考虑到以下两个部分:

一是,驾驶舱整体主题内容及所需要用到的指标。

二是,还需要考虑驾驶舱整体页面风格及布局等展现方式。

我们需要知道如何以最直观的方式选择正确的图形,以便正确地显示每个指标,保证领导驾驶舱中的信息足够用于决策分析并且没有冗余。领导驾驶舱需要调整各种指标的颜色,保持整体色调一致的同时,对需要醒目的数据用突出的色彩,能帮助管理者快速把握关键信息。总而言之,我们应该在尽量简洁直观的设计下展示出足够进行决策分析的信息。

此外,有些领导驾驶舱包含了战略和机密信息,在制作时应该限制相应的权限进行数据管理。在许多业务场景下,领导驾驶舱还需要支持大屏展示,例如高层会议上的展示需求等,这时候需在制作前考虑屏幕适应的问题。

如何实现领导驾驶舱

在经过上述思路介绍后,相信大家一定对如何设计一个完整的领导驾驶舱有了一定的了解。但是纸上谈兵终觉浅,我们要如何在实际操作中做出既美观又实用的领导驾驶舱呢?下面我们通过亿信ABI举例,给大家带来一份干货满满的领导驾驶舱制作教程。

1、原型设计

在开发之前,我们拿着最终确认的需求,最好是先出个简单的原型图,提前构思好整体布局。一方面我们可以将确定好的指标维度提前规划好整体的排版布局以及最佳展现方式,比如是否需要报表参数?哪个指标用哪种统计图?哪里需要钻取?等等,避免开发的时候各种调试,浪费时间;另一方面报表开发需求量大时可以我们还能通过原型图来评估开发工作量,帮助我们做好项目管控。

画原型图的方法有很多种,我们可通过手绘草图画一些初版,如果需求不是很复杂,也可以用excel来画,当然如果项目或者领导要求严格需要出高保真原型图,可以用axure专业的原型工具来画。

领导驾驶舱的应用场景决定了他对于视觉效果的高要求,设计好了原型图后,条件允许的情况下,可以让UI在基于原型图出酷炫的效果图,然后切图给报表开发人员实施。

2、整体布局开发

接下来就是根据原型图进行区域划分及布局开发。在【数据分析】模块下找到【新建分析】,新建一个图表分析。进入报表编辑器后,我们不难发现在左侧工具栏中有多种布局组件,可以根据需求选择田字型布局、上下型布局等常规布局,也可以选择手动输入行列数进行自定义布局。

只需将所需的布局组件拖拽到空白的编辑区即可。

还可以根据需求,对布局进行合并、拆分以及行高列宽的调整,支持百分比布局。

还可以在大块布局完成的情况下使用容器组件对布局中的区域再加以划分。

至此我们便完成了整个领导驾驶舱的区块划分及布局。此处推荐将大块区域划分使用布局来隔开,小块的版块则使用更为灵活的容器进行分隔,便于后期调整及维护。

3、组件选择

在完成布局之后,需要结合指标性质思考如何选择正确的图表组件进行展示分析,然后只需将选择的组件拖拽到布局或容器中即可。我们可以在右侧的属性栏进行大小等设置的修改,也可以双击组件进行细节的修改。

组件的选择多种多样,但不要为了页面美观炫目而忘了领导驾驶舱的根本目的,是将核心决策指标使用最正确的组件展示出来,尽可能的简明扼要,为决策提供更大的便利。

4、添加指标

在亿信ABI中,所有展示组件的数据来源都可以通过表格来获取,所以需要将业务数据对接到亿信ABI中后,通过表格给统计图等组件提供数据。

在每个统计图组件的右上方,都有一个表格状的小按钮,点击这个按钮后可以将指标表格隐藏在对应统计图的“背面”。这样表格就作为一个数据来源,只提供数据,不进行展示。

在拖入指标表格后,通过双击统计图为统计图赋予数据来源。点击小手图标拾取表元中的指标作为数据来源,对指标进行可视化分析展现。

其余组件都可以此类推,全都设置好后便完成了数据与图形的绑定。

5、整体美化

最后,需要对驾驶舱进行美化和细节调整。例如,给整个驾驶舱添加酷炫美观的背景图片,将重要的预警指标进行颜色设置以达到警示效果等。

此外,还可以在整个报表的整体设置中添加脚本,通过脚本来完成自定义样式的设计等,方便了前端开发人员快速实现一些动态效果。

通过左侧的组件结构树我们可以了解到整个驾驶舱的结构分布层次等,并对此做出调整。

通过以上步骤,便完成了一个领导驾驶舱的制作。具体的细节及设置,都可以根据业务场景来自行定制,十分的便捷及个性化。

案例欣赏

本文还分享了一些优秀的领导驾驶舱案例供大家参考:

以上便是本文的全部内容,这里给大家做一个小结。进行领导驾驶舱的制作步骤可以概括为:

【定主题】- 【选指标】-【拖布局】 -【挑组件】 -【绑数据】-【添细节】-【美化】,一个领导驾驶舱就完成啦!

今天的分享就到这里,有兴趣的朋友大家可以自己去操作一下。

0 人点赞