侧边栏壁纸
博主头像
前端江太公博主等级

不知江月待何人

  • 累计撰写 178 篇文章
  • 累计创建 3 个标签
  • 累计收到 127 条评论
标签搜索

目 录CONTENT

文章目录

数据可视化7种大屏设计与布局思路

前端江太公
2023-03-22 / 0 评论 / 2 点赞 / 1,194 阅读 / 1,561 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-03-22,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告 广告

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

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

包括以下4个步骤:

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

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

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

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

前面三步做得再好,布局做不好,功亏一篑!(划重点!!)
image.png

由此可见可视化布局及设计的重要性。

如何做好可视化设计的页面布局呢?

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

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

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

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

基于这三点精髓,再去着手设计与布局,方能收获好的结果。

在这里已经整理出了7种大屏的设计与布局思路,同大家一起分享。

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

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

标准大屏:常规布局、左右布局

超大屏:均等布局、故事布局、君臣布局

异性屏:纵向布局、繁星布局

一、标准大屏

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

1、常规布局

image.png

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

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

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

2、左右布局

image.pngimage.png

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

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

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

二、超大屏

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

1、均等布局

image.png

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

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

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

2、故事布局

image.png

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

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

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

3、君臣布局

image.png

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

(2)应用场景:需要展示多项指标,并突出某些关键指标或三维图像时适用

(3)优势:图像更大更清晰立体,指标主次分明

三、异形屏

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

1、纵向布局

image.png

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

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

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

2、繁星布局

image.pngimage.png

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

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

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

总结: 其实,大屏的设计是一个新兴的设计学科,它同于APP页面的设计,都需要考虑使用场景,再去确定布局方式,却不同于网页设计,需要结合它独有的特征,定义布局设计流程及规范。

2
广告 广告

评论区