致力于通过设计提高产品与项目的核心竞争力

下拉
7种大屏设计与布局思路,你不知道就亏了
  • 大屏
  • 可视化
  • 数据化

在现今数据驱动的时代,可视化已逐渐成为数据分析的主要途径,可视化大屏的广泛使用便应运而生。很多公司及政务机构,常利用大屏的手段展现其实力或演示业务,可视化的效果能让观者更快速的理解结果并直观看到数据展现。 因此,可视化大屏的优势显而易见。

那么一个完整的数据的可视化,是如何完成的呢?

包括以下4个步骤:

1. 确定数据可视化的主题

2. 提炼可视化主题的数据

3. 根据数据关系确定图表

4. 进行可视化布局及设计


前面三步做再好,布局做不好,功亏一篑!(划重点!!)由此可见可视化布局及设计的重要性。如何做好可视化设计的页面布局呢?

我们要遵循以下三个原则:

(1)聚焦:设计者应该通过适当的排版布局,将用户的注意力集中到可视化结果中最重要的区域,从而将重要的数据信息凸显出来,抓住用户的注意力,提升用户信息解读的效率。

(2)平衡:要合理的利用可视化的设计空间,在确保重要信息位于可视化空间视觉中心的情况下,保证整个页面的不同元素在空间位置上处于平衡,提升设计美感。

(3)简洁:在可视化整体布局中,要突出重点,避免过于复杂或影响数据呈现效果的冗余元素。

   基于这三点精髓,再去着手设计与布局,方能收获好的结果。在这里已经整理出了7种大屏的设计与布局思路,同大家一起分享。

   我们先按尺寸将大屏的类型归结为三大类:标准大屏、超大屏、异性屏,再对每类大屏的几种布局方式进行分类展示:

l 标准大屏

常规布局

左右布局

l 超大屏

均等布局

故事布局

君臣布局

l 异性屏

纵向布局

繁星布局

一、标准大屏

类型定义:分辨率1920*1080,比例16:9

布局思路×2:


1. 常规布局


(1)布局要点:左中右。中间为主要指标,占据页面较大面积;左右两边为次要指标,面积较小,较集中,展现指标数量较多


(2)应用场景:多数适用。如教育、房地产、政务等行业的数据分析展示,需要展示多项指标,并突出某些关键指标时适用

(3)优势:清晰展现较多的指标,主次分明


2. 左右布局



(1)布局要点:重点区域扩大,左或右放置少量指标,不易展示大量指标

(2)应用场景:常用于地图展示、三维模型展示,将重点区域扩大。如智慧园区、智慧工厂、智慧城市等

(3)优势:能够展现更多的图像区域,三维模型的立体感更强


二、超大屏

类型定义:比例16:9 ,面积更大,标准屏拼接或延展而来

布局思路×3:

1. 均等布局

     1、布局要点:按照1:1:1平均分配每一块的展示区域

     2、应用场景:常用于展示平级指标

     3、优势:无明显主次区分的指标需要展现时,划分区域,在视觉上不会过多干扰,平级展现时适用


2. 故事布局

(1)布局要点:没有明显的分割区域

(2)应用场景:常用于讲述一个完成的故事线

(3)优势:数据连贯性强,当指标间有关联关系时,可以有逻辑地递进去展现


3. 君臣布局

(1)布局要点:中间大,两边小。中间为主要指标,占据页面较大面积,通常放置三维大图;左右两边为次要指标,面积较小,较集中,展现指标较多

(2)应用场景:需要展示多项指标,并突出某些关键指标或三维图像时适用(3)优势:图像更大更清晰立体,指标主次分明

三、异形屏

类型定义:比例不是16:9

布局思路×2:

1. 纵向布局

(1)布局要点:由于屏幕的原因,将页面分割为上中下部分,中间区域较大,上下较小,重点突出中间区域


(2)应用场景:在一些特殊的展会上使用

(3)优势:很好的适配特殊场景下的屏幕,主次分明,突出重点

2. 繁星布局

(1)布局要点:布局较为随意,满屏都是各种各样的指标,尽可能多地展现

(2)应用场景:常用于日常运维、监管人员使用

(3)优势:展现指标多而全面

以上,就是创优设为大家带来的七种大屏设计与布局的思路。其实,大屏的设计是一个新兴的设计学科,它同于APP页面的设计,都需要考虑使用场景,再去确定布局方式,却不同于网页设计,需要结合它独有的特征,定义布局设计流程及规范。大家学到了吗?