可视化大屏设计

Limoo原创作品/禁止转载-禁止商业用途-禁止个人用途

这几年，接触的数据可视化大屏设计也蛮多的，便于知识的积累和沉淀，整理有关数据可视化大屏的归纳和总结，时代趋势下，大屏可视化以后应该会更加丰富更加为各行业所应用。

一、大屏介绍和基本分类

可视化大屏是以大屏为主要的展示载体，一般情况下是针对位置、大小固定的屏幕进行设计，具有相对确定的使用场景。当然随着各行业需求，web端也可以随处展示。

所以开始设计之前，需要先了解大屏的分辨率与基本的硬件信息，以确定设计稿的尺寸和展示效果。

【常见的大屏设备有LED屏、液晶拼接屏、Web端大屏、触控大屏等。

LED屏幕

按照不同点间距进行分类，P1.25、P2.5、P3、P4、P5、P6、P8、P10、P12、P20（间距越小，图像越清晰，价格也越高，一般政府led屏基本都在P1.25-P6之间)。

液晶拼接屏

拼接屏设计时最主要就是拼缝的处理，设计时非必要情况下，都要跳过拼缝设计。

拼接屏：46寸，55寸  物理分辨率：1920*N 1080*N（n代表屏幕数量），1.7mm、3.5mm 、0.88mm、0.44mm、无缝隙；企业常用（1.7mm 和3.5mm）】

———大屏LED屏、液晶拼接屏

设备参考知乎、36氪等资料

Web端大屏

Web端大屏就是web端方便数据分析展示常用的，尺寸比例通常是16:9，设计尺寸以1080*1920尺寸进行设计，或者也可以用@1x图540*960进行设计。

......

二、需求分析

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

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

包括以下4个分析步骤：

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

2.  提炼出可视化主题需要展示的数据指标

3.  根据数据关系确定图表的选用

4.  进行可视化布局及排版

对于布局有很多种，主要分为以下两种：

1.左中右布局：

（1）布局：左中右。中间为主要指标，占据页面较大面积；左右两边为次要指标，面积较小，展现指标数量等信息

（2）应用场景：多数适用。如教育、建筑、政务等行业的数据分析展示，需要展示多项指标，并突出某些关键指标时适用

（3）优势：清晰展现较多的指标，主次分明

常见样式

超大屏长屏样式

2.左右布局

（1）要点：重点区域扩大，左或右放置少量指标，不益展示大量指标

（2）应用场景：常用于地图展示、三维模型展示，将重点区域扩大。如智慧园区、智慧城市等

（3）优势：能够展现更多的图像区域，三维模型的立体感更强

左右布局样式

在需求梳理完成后，就到了设计环节

三、UI设计分析

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

（1）聚焦

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

（2）平衡

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

（3）简洁

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

现在以常见的左中右常见布局为示例来进行设计：

• 界面布局上采用左中右布局方式，在较长的屏幕上，左中右布局具有良好的平衡感，在保证主视觉占比量的同时，也能够承载主够多的数据图表

• 根据业务场景抽取关键指标，一般情况下，一个指标在大屏上独占一块区域，多余的数据可以切换交互展示，所以通过关键指标定义，就知道大屏上大概会显示哪些内容以及大屏会被分为几块。确定关键指标后，根据业务需求拟定各个指标展示的优先级）（主、次、辅）

设计的风格，背景色一般用深色调，深色调让视觉更好的聚焦，大屏暗色调看上去更柔和舒服不刺眼，哈哈哈哈，应该也会较省电吧。大屏设计跟网页不一样，页面不能有滚动条，大屏的长宽都是固定的。

• 主色调一般采用冷色调为主，科技、智慧、数据的色彩情绪的颜色来进行配色，再结合少量点缀色进行整体视觉的平衡。色值采用饱和度和明度高一点的，整体会更加亮一些。

• 颜色搭配，色彩明度与饱和度差异显著、对比鲜明， 尽量避免使用邻近色配色。

• 字体开发优先使用系统默认字体，需要嵌入字体时考虑字体是否可免费商用。

• 图表的种类肯定不止一种，为了消除不同种类型图表给用户带来的认知负担，设计通过给图表添加相同的设计元素来建立图表的一致性原则。不同的数据有不同的重要程度，通过配色、群组、间距等手法来使图表的视觉层次分开，有助于用户对于数据的轻重缓急有个直观的判断

• 组件是大屏的重要组成部分，实现多样化的大屏功能展示页面，同时也是承载界面功能和交互的重要元素。

• 设计最终原则是保持视觉的一致性、可控性等，方便项目的新增和模块的修改，以及同一类项目的快速复用。
  

• 酷炫的大屏设计肯定少不了三维的视觉冲击，那么对于常见的统计图表的三维效果也很多，很多开源的库也可以参考来实现，UI可以线上调整参数以及查看交互效果。

• 统计图表占据大屏很重要的角色，数据图表的美观影响着整个界面的质量

  
  

饼状图gif动画演示

环形图gif动画演示

其他样式

地图一般是放在大屏的中间部分，由交互进行切换不同而数据实时切换对应起来。

世界地图

浙江省地图

大屏可视化的整理先到此吧！困成狗了，碎觉！