Preface: what data visualization is? What are the main features of visual data have? Why use large-screen display of visual data? Data visualization is the integrated use of computer graphics, images, human-computer interaction, will be collected, cleaned, conversion, data mapping and treated standard specifications recognizable graphics, images, animation and even video, data and allow a user to interactive visualization and analysis. Using data visualization can be rich, interesting, mobilizing people's emotions, arouse sympathy, and transmission of cultural values. The main purpose of data visualization three features: novel and interesting, full and efficient, aesthetic and Wyatt. The big screen as the main carrier of visual data, the reason that a large area, and more information can be displayed to facilitate discussion and shared decision-critical information, on the perception of the impression left people shocked, easy to create an atmosphere, to create a sense of ritual, at present common scenarios include: data display, alarm monitoring, data analysis.
First, how to choose the category shown?
Data visualization process is: [data collection] - [Data cleansing] - [Data Analysis] - [] data visualization.
1. Data collection needs based on business needs to show, that is, "What do you want to show?" Such as: real-time data indicators, the type of comparative data indicators, the type of statistical data and other indicators related to extract important data from the operational level, for large-screen data It shows.
2. Data clean-up will have to deal with classified data, a clear relationship between the data, there is "more type", "constitutive", "contact type", "profile."
3. Data Analysis The data categorization process, combined with the division dimension: "one-dimensional data", "two-dimensional data," "three-dimensional data", "cube", "temporal data," "data hierarchy "and the like, the strong correlation of data reconstruction may be combined to obtain new data relationships;
4. visualization data, according to information about the relationship of the reconstructed data, selection information applicable number table corresponding to FIG., Such as: bar charts, bar charts, radar charts, line charts, normal, scatter, real 3d rendering maps; FIG selected table number corresponding to the information is available.
Note: The following figure from the article "Visual Business Intelligence", author Stephen Few
Second, what precautions have screen resolutions?
为了最优化展示效果，首先需要了解物理大屏长款比，确定设计稿的尺寸；其次我们需要清楚大屏系统的内在原理：【信号源】--->【大屏拼接器】--->【播放控制设备】,一般情况下设计稿的分辨率多为1920px*1080px（即电脑的分辨率）。同时，我们还需要理解以下四个概念：“大屏逻辑分辨率（设计稿尺寸）”、“显卡输出分辨率”、“视频矩阵切换器（ DVI ）支持分辨率”、“大屏实际物理分辨率”。
最佳展示效果：
大屏逻辑分辨率（设计稿尺寸）长宽比 = 大屏实际物理分辨率长宽比
大屏逻辑分辨率（设计稿尺寸）长宽比 = 显卡输出分辨率长宽比
显卡输出分辨率 = 视频矩阵切换器（ DVI ）支持分辨率 = 大屏实际物理分辨率
目前作为监控大屏，由于监控数量的庞大，常常被划分为总屏和分屏。总屏多用于展示事件状态趋势、风险预警、风险处理进展；分屏则多用于展示详细的数据分析和风险事件的处理。如何排布数据都需要紧密结合业务需求和用户体验。
三、 数据的排版布局有哪些规律？
在确定了设计稿的尺寸后，需要对页面布局和划分，对于数据的排布划分我们的重要原则：主次分明、条理清晰、注意留白。根据业务需求抽取关键性的指标，按照重要程度可分为【主】、【次】、【辅】。
1. 主：主要指标多位于屏幕正中央，可添加适当的动效增强视觉效果；
2. 次：次要指标多位于屏幕的两次，较多表现为各类图表；
3. 辅：辅助信息多为主要指标的补充信息，常伴随交互效果或动效下呈现，可展现亦可不展现；
在大屏的排版布局上，需要遵循四大原则（CRAP）：
1. 对比(Contrast)：完全不同的数据类型，选择截然不同信息图示。
2. 重复(Repetition)：相同类型或相似数据，选用尽可能相同的展示。
3. 对齐(Alignment)：利用对齐方式保证信息图示之间的视觉联系。
4. 亲密性(Proximity)：相关的数据项组织在一起，视觉上呈现出一体化。
四、 如何选择配色方案？
可视化大屏的配色是视觉呈现的重要组成要素，配色常常与行业类型、业务形态、应用场景、设计理念、营造氛围等紧密相关。配色方案的选择有以下几点建议：
1. 色彩明度与饱和度差异显著、对比鲜明， 尽量避免使用邻近色配色；
2. 仿造自然的配色；
3. 使用深色暗色作为背景可减少拼缝带来的不适感。由于背景面积大，使用暗色背景还能够减少屏幕色差对整体表现的影响；同时暗色背景更能聚焦视觉，也方便突出内容；
4. 适当使用渐变色，由于大屏普遍存在色域偏差，更建议多使用纯色；
五、 可视化数据的字体有哪些考虑？
可视化大屏的设计过程中，优先使用系统默认字体，如有特殊需要嵌入字体时，需考虑字体的可识别性、设计风格融合度、是否可免费商用（※※※）。
一般来讲一套字体文件包含了阿拉伯文、符号、拉丁文、日文、西里尔文、希腊文、拼音、注音符号等多种字符，对于大屏这个明确的场景，我们可以删掉其它使用不到的字符，仅保留中文、拼音和数字。减小字体包的大小，可以优化页面加载体验，避免在替换默认字体的过程中出现页面文字跳动等现象。
推荐字体包括：AVENIR NEXT、HELVETICA NEUE、SEGOE UI、ACENS、DIN、DIGITAL-7等。
六、 动效添加的作用？
由于可视化数据允许用户与数据可视化进行交互，在数据展示过程中，可以适当添加动效、插入视频，提升整体的视觉效果。由于大屏展示的许多数据都是实时变化的，为了减少数据变化刷新时的突然性，动效设计必不可少。在整个动效设计的过程中，除过场动画、数据的变化外，动效还肩负起增添空间感、平衡画面和整合信息的作用。
但是在增加动效的同时，需考虑服务器的承载量。避免在增加动效后喧宾夺主，因此对动效要做适当的取舍。
七、 可视化辅助工具有哪些？
在设计的过程中，我们可以大量参考相关平台的可视化数据图表样式，大多数平台的图表样式都是基于代码实现的。在设计的阶段详细参考，有利于降低开发成本，有利于提升可视化数据大屏的可拓展性，便于后期的迭代管理。
可视化辅助工具可分为：【可视化工具库】、【原生开发】、【第三方服务】
八、 如何保证展示的品质？
可视化数据的视觉设计是一个不断迭代的过程，同时大屏的设计与常规的设计有较大的区别。与大屏【沟通】是比较重要也是个特殊的环节。大屏有它自己独特的分辨率、屏幕组成、色彩显示以及运行、展示环境，很多问题只有设计稿投到大屏上才能够被发现，因此在样图沟通确认、开发出 demo，都需要反复测试多次，不断的迭代与精进。
在完成视觉稿的设计之后，【如何提升整体视觉的还原度】成为我们设计与前端沟通的重要内容。大屏的本质实际是一个web页面，切图与标注，成为还原度的重要组成因素。
作者：慕斯小姐姐
原文链接：https://www.zcool.com.cn/article/ZOTM1NDA4.html