在数据可视化的一系列产品当中,有一种兼具数据读取、展示,UI设计及视觉设计于一体的酷炫产品——可视化大屏,这种可视化产品的设计对视觉传达具有较高的要求。然而多数人在面对这一产品的需求时往往会因多种因素感到无力下手,那么今天小亿就贡献出一部独门秘籍,也就是可视化大屏的布局理念,相信大家在看过之后一定能设计出自己满意的样式啦。
一、需求梳理
首先在设计的初始我们需要先对到手的需求进行梳理,将即将展示的繁杂数据进行类别及层级的结构划分。这一环是相当重要的,在这个时候的梳理过程就是在搭建初级的布局框架了,我们将最重要的数据和次级数据逐一排列开来,然后各类数据大概的表达方式也有一个初步的理解就即将进入下一步。
二、数据图表展示规划
在初步的框架梳理之后,接下来的工作是对各组数据量身安排一类表达方式,这就好比有很多的玩偶在等着咱们给他们逐一地搭配好服装一样,合理地设计数据组的表达方式可以大大提高整体的美观程度,也有利于布局的划分排列,对于整体视觉呈现加分不少。但是一定要记得,不同的数据有各自不同的表达方式,千万不要张冠李戴哦。
三、页面布局
将所有的图表模块都进行初步的整理过之后,就可以开始进入页面布局的阶段了。在进行页面布局时需要注意的是,依靠前面的层级划分来进行布局,整体视觉最为重要的部分一般拿来展示核心数据,下面我们来看一个布局的例子:
在整体数据有大约三个层级的情况下,可以优先使用延中间轴对称的布局方式来进行,将核心数据设置在中心位置,然后二级和三级数据依次往两边排列开来,这种布局手法比较适合聚焦观看者的视觉,在第一时间就接触到你想要展示的最重要的数据,然后随着数据的延伸进而观察下一层级的模块。
但如果遇到数据展示的模块不是很多,而且大的层级关系很简单,比如只有两个数据级别的时候又应该怎么办呢,不要怕,我将用下面的例子来讲解:
而数据较少的情况下,可以增加中心区域核心数据的范围,扩大视觉聚焦的空间,然后再将二级模块分列两边,这样的布局简单明了、结构清晰很适合展示优先级很高的核心数据的排版布局。
还有一类区别于以上两种,那就是上下分割的布局样式,这种适合于核心数据的成组展示,或者涉及有大块数据地图的展示需求,将大块的数据组填充整个画面的上大部分,而后再将二级小模块列在画布下方。
最后就是相对特别一点的左右布局的方式了,在进行系统数据展示或有3D展示需求的时候,一般会用到这一类,将核心内容占据画布左侧大部分区域,而后根据数据模块的关联性和重要层级来依次向右排列,这样的做法相对符合观察者的查看习惯,有很好的人机工程学理念基础。
以上给大家分享了一些可视化大屏布局的基本思路,但是在设计过程中还是要依据实际的展示需求来灵活发挥,只要保证数据展示的层级不会太杂太乱,画面的布局符合视觉规律,相信是一定能够设计出很棒的可视化大屏的。
领取专属 10元无门槛券
私享最新 技术干货