美文网首页
揭开可视化数据大屏的面纱

揭开可视化数据大屏的面纱

作者: 花生草 | 来源:发表于2020-06-23 15:13 被阅读0次

    数据大屏为什么火了

    数据大屏越来越火了,逐渐成为了企业对内管理,对外展示,向上汇报的利器。本文要讨论的这个产品,目前已经有多个不同的名头响亮的高大上名字,比如数据管理驾舱,BI,DASHBOARD,可视化数据大屏等。如果往深了讲,ta就是关于企业的商业信息数据分析的一系列策略和技术,都可以单独开一门课程了。不过对于我们这些非专业人士而言,完全可以化繁为简,先建立一个直观认识再做后续深一步的探索。废话不多说,先上一张图,相信在各个行业圈子里的人,或多或少,都看到过若干和这张图类似的结构,佐之以不同的数据和图形。

    对于见惯了列表形数据的人,面对这样一张图形化展示数据信息的图,第一眼肯定都会觉得炫酷极了。除了好看漂亮之外,图形信息比文字信息能够更加让人容易理解,可以传达直观的组织结构信息,给人很强的视觉冲击,使用起来又非常便捷,几乎不需要提前进行多么专业的培训。因此,特别适合用向老板或者其他上层领导进行汇报展示使用。其实见多了,数据大屏也是有套路的,本文总结了一些市面上常见的可视化大屏的设计要素。

    image.png

    数据大屏是如何展示行业数据的

    不同行业都可以利用数据大屏,可视化的呈现各自的行业数据,实时反映公司运营的关键指标,比如:

    地产:可以展示园区项目排行榜,园区运营管控,园区的实时成本预算,视频监控等数据

    零售:可以展示产量/销量/存量,计划销售额/最新销售额/回款,销售排行榜等数据

    智能制造:可以展示年/月/日产量,生产计划完成率,设备健康度,设备各种类型告警等数据。

    上述举例是想说明,数据大屏是一种“术”,对能够展示的数据类型并没有什么限制。如果想要使得自己的数据大屏具有直观化,智能化,多维化的特点,不能够照搬照抄别人的大屏上展示了哪些类型的数据,关键是必须基于对自己行业的深入认识和理解,总结和梳理出行业的关键指标。否则,就是只具有其形,而不具有其神。

    数据大屏的设计要素

    配色

    整体上,市面上常见的数据大屏配色分为两种,一种是白色背景色,一种以深色为背景色。总体来说,为了体现更强的科技感,和更好的实际展示效果,大多数人的选择仍然是深色调,也就是本文第一张图中偏蓝偏黑的基础色作为背景色。

    在选定了背景色之后,标题和图表都可以选用对比感更加强烈的颜色。这是为了在实际场所中进行展示时,视觉能够更加分明。一般标题的字会选择不同深度的白色,图表和数字会采用各种明亮的彩色。

    骨架

    骨架的设计决定了大屏的风格,这一步必须结合前面提到的,设计者自身总结和梳理出行业的关键指标有哪些,才能交出一份漂亮的答卷。

    数据大屏的骨架都是由一块一块的区域拼接而成,具有明显网格形的特点。对于一块特定区域,如果位置越趋近于种心,面积越大,那么这块区域需要放上越重要越核心的数据。第一张图中骨架结构的C位就是主区域,辅之以左右对称的多个子区域。

    不要轻易尝试不规则区域的骨架方案。第一这个会对设计人员有更高的要求,level不够时很容易造成凌乱的感觉。第二,数据大屏面向的对象,一般都是单位中的管理层人员或者集团中更高级别的上层领导。他们的审美眼光仍然是偏传统的居多。第三,实际物理场所中的大屏,一般都是多块屏幕拼接而成,拼接处会有缝隙。当不规则的区域边线,遭遇到拼接缝隙时,容易造成视觉上断层的缺憾。

    图表军团

    有了骨架之后,就可以填充丰富饱满的血肉了,这里的血肉指的就是图表军团。一般可以在C位,放一张具有3D效果的中国地图,并将这张地图上,本行业覆盖到的地域做一个具有动画效果的聚焦,辅之以具体的行业数据。

    其他的区域,目前仍然是以柱状图,饼状图,折线图居多。这些图表对于我们来讲并不陌生,平常写word和做ppt都经常用到。比如横向/纵向,二维/立体的柱状图

    image.png

    比如各种表达趋势的折线图
    再比如不可或缺的饼图
    需要注意的时:应该尽量避免在多个区域中放置同一种类型的图表,这会造成一种冗余的感觉。如果确实有这种需要,那么可以考虑通过变换图表的颜色和风格等方式,营造出不同的视觉感受。可以多从各种设计网页上找找灵感,放置不同类型和动画特效的图表,从而形成丰富的视觉效果

    总结

    本文首先举例介绍通过数据大屏,是如何来展示不同行业的特定数据的。然后总结了设计可视化数据大屏时需要注意的三个维度,分别是1.低调的配色,2.方块型拼接骨架,3.以柱状图/饼图为代表的图表军团。希望通过这些介绍,能够帮助你快速了解这个产品的特点,进而可以设计一个属于自己的数据大屏。

    相关文章

      网友评论

          本文标题:揭开可视化数据大屏的面纱

          本文链接:https://www.haomeiwen.com/subject/ixdhfktx.html