编辑导语：如今随着科技的发展，数据可视化大屏逐渐深入我们的工作中去，数据本身就是一个比较直观的方法，数据可视化更是直观地体现出信息的复杂化以及多样性；本文作者分享了关于数据可视化大屏的相关规范总结，我们一起来看一下。

一、大屏数据可视化概念

大屏数据可视化在百度百科上是这样的：数据可视化，是关于数据视觉表现形式的科学技术研究；其中，这种数据的视觉表现形式被定义为，一种以某种概要形式抽提出来的信息，包括相应信息单位的各种属性和变量，这是一个比较官方和专业的概念。

在实际的工作中，我们一般根据大屏的功能将其分为三个类型：

• 信息展示；
• 数据分析；
• 监控预警；

充分的利用大屏篇幅大、单屏可展示信息多、展示信息多样的特点，将复杂、抽象、专业的数据内容，通过直观、动态、通俗多样更加直观的方式展现出来，用更加易于理解的方式为用户做出更好的决策提供依据。

二、大屏设计需求采集

明确的产品功能需求是做任何产品设计的第一步，作为产品经理需要想清楚大屏展示的内容动线，需要给观者讲述什么故事；由于视觉展示往往也起着决定性作用，所以在需求分析排布时设计师需要提前加入项目中了解项目需求，以展示问题解决问题为目标将业务模块理出顺序。

据此，首先分析大屏展示的类型，之后确认大屏需要展示的内容。根据大屏展示类型和内容确认各个数据展示的方式和图形图案及动态。

三、视觉设计原则

使用Eagle图形收藏软件，进行相关的内容存储，以便在确定需求之后快速查找灵感，综合下边的原则：

• 关键词：FUI \ HUD \  SCI-FI。
• 设计网站：behance、dribbble、站酷、Tob.design、UI中国、花瓣、pinterest。
• 业务场景：智慧园区、智慧安防、智慧交通、智慧城市、智慧监狱、智慧水利、智能客服、智慧仓储、智慧医药、智慧零售、智慧工业、数字港口、智慧工程。

四、大屏硬件的分析和确认

硬件是数据大屏展示的最终载体，明确的硬件规格是设计展示方式的必要前提；在目前LED市场上，数据可视化最终落地平台一般有：大屏、拼接屏、LED大屏、DLP大屏（无缝隙拼接市场占有率较高）、LCD、PDP（3mm拼接缝隙）需要清除了解大屏物理尺寸及视频输出分辨率，确定设计稿尺寸。

根据需求和硬件规格指标确定页面展示的方式，一般展示方式由上中下、左中右、中间地图四周包围等方式。

作为B端产品展示大屏，在实际工作中很可能会遇到相同的需求内容要求展示在不同比例的大屏；这时将设计稿的设计尺寸高度固定，宽度设置为自适应，用一个设计稿一次开发解决不同尺寸适配问题（当然不可能是全部）。

五、各种细节内容选择

确定好整体布局之后，要对各个数据展示的细节做出选择：

1. 图标类型的选择

将抽象的需求用图表的形式展示，一般图表分：比较类、占比类、区间类、关联类、趋势类、时间类、地图类。

不同展示内容选用不同形式的图表，但有时候为了视觉效果丰富，不会在一个大屏里显示相同的图表展示方式，这时需要了解图表特性与需求内容将图表差异化展示。并在项目积累到一定程度时整合图表库以便于下次项目快速设计避免重复工作。

2. 字形字号的选择

一般大屏设计与开发尽量选择自带字体微软雅黑，数字字体选用din，特殊字体可将字体包给到开发嵌入程序中。

根据用户的需求，字体的大小要根据实际情况规范灵活应用。

3. 整体色系颜色等选择

颜色选用应以信息展示清晰为最基本要素，在主次清晰的情况下选择视觉效果较舒适的颜色搭配，在此之前需要了解大屏的显色模式，在不支持渐变色的情况下尽量避免渐变色的使用。

4. 基础组件选择

在前端调用一些现成图表组件时候，添加一些背景组件能够丰富画面，增强页面层次。

结合前端工程师的图标库，进行进一步优化。

一般有：原型、方形、点位、弹出，格线等组件，在整体设计中，根据数据的不同进行选择，也可以根据实际的场景形象话绘制图表、地图等。

六、大屏产品设计把控注意事项

在大屏实际展示中会出现以下情况，产品对下一步的设计和UI展示效果及开发过程进行跟踪控制：

1）屏幕投射效果不佳

如果条件允许的情况下应当设计前先用已经完成的不同风格的大屏设计在屏幕上投放，了解颜色差距，对比色临近色渐变色在大屏上是否存在色差，如若效果不好应适当避免效果差的设计方式。

2）等比例放大投射会发虚问题

首先需要明白几个概念：

• 大屏逻辑分辨率（设计分辨率）；
• 显卡输出分辨率；
• 视频矩阵切换器（DVI）支持分辨率；
• 大屏实际物理分辨率 。

当显卡输出分辨率=DVI支持分辨率时显示效果最佳，另外多个信号源投射优于单个信号源投射 。

3）大屏显示被拉伸或压缩

一般情况下，前端只需要对设计稿还原就好，可能由于视频扩展器显示不正确导致压缩或拉伸，现在需要了解被压缩的比例，对其进行校正，再者可以通过视频自定义分辨率解决问题。

4）图表类样式参考及实现

• 图表工具：echarts、hichcharts。
• 第三方开发工具：datav数据可视化、腾讯云图、百度智能云。
• 原生开发：HTML5、JS、CSS、WebGL、unity。

5）跟踪开发过程中数据展示刷新频率及其用户个性化自主设定，程序的轮询机制等进行跟踪把控。

本文由 @顽固不化小冰块 原创发布于人人都是产品经理，未经许可，禁止转载

题图来自 unsplash，基于 CC0 协议