本文描述了六个数据可视化应用规范：包括图表分类、图片布局、硬件设施、字体大小、图片颜色匹配、图片饱满度和图片动画。

今天给大家带来数据可视化应用设计规范，谈谈我在设计过程中的一些体会和分享。

00-1010说到图表，想到的通常是柱状图、饼图、趋势图等等。这是根据图形等维度对图表进行分类，往往会导致图表的误用。

图表的作用是帮助我们更好地理解数据。选择图表时，首先要回答的问题是“我有什么数据，需要用图表做什么”，而不是“图表长什么样”。因此，我们从数据的角度和功能的角度对图表进行分类。

一、图表的分类介绍以及应用范围

在画面中，我们经常会遇到各种屏幕分辨率，比如大屏LED屏、平板屏、数字拼接屏等等。那么我们如何在具体的项目中为图片布局定义这些不同尺寸的屏幕呢？

16:9指显示器的长宽比。根据人体工程学研究发现，人眼的视野是长宽比为16，333，609的长方形，所以电视显示行业按照这个黄金比例尺寸设计产品。

如果有其他分辨率的屏幕，按照这个规则的基本布局，最好让组件尽量呈现16:9的比例；超长分辨率下的大屏设计或者多台显示器的大屏拼接，可以通过具体的业务内容进行显示，分模块，功能点明确。

这里的布局只是我个人认为比较合适的一种展示方式。不一定意味着需要这样安排。布局有很多种形式。

可能因为业务不同，布局也会有所调整，但如果掌握了基本要素，在其他分辨率下还是可以有很多布局形式的！

00-1010

二、画面布局在实战中的应用

1)点间距不同。

点3与点4的距离为3毫米，点3与点4的距离为4毫米。

2)定义不同。

p后面的数字越小，两个灯珠之间的距离越小，清晰度越高，相应的价格也越高，因为每平方P3像素比P4多很多，成像效果好。

3)最佳可视距离不同

点间距P3(3毫米)显示屏的最佳可视距离为3.5~10米，点间距P4(4毫米)显示屏的最佳可视距离为5~13.5米。你可以根据自己的实际情况选择最合适的型号。

00-1010拼接每个小屏一般为1633609高清屏，上下高度可设置设计尺寸为1080px，长度的设计尺寸可根据拼接屏的数量比例得出。

比如3乘5的大屏幕，3屏的高度设为1080，每个高度为360，360除以9乘16，其他640，640为一屏的长度，640乘5屏=3200。最后设计稿的尺寸是：1，080 px高，3，200 px宽(在此感谢我的数学老师)。

目前企业常用的拼接大屏幕有三种：无缝隙、1.7mm缝隙、3.5mm缝隙，缝隙越小越贵。

此外，大屏幕设计中的另一个重要问题是注意拼接屏幕之间的间隙。设计时千万不要跨屏设计，否则会影响美观。

三、硬件常用尺寸以及设备

目前企业最常用的控制终端是ipad控制。需要在ipad上制作控制终端页面，一般尺寸为2048*1536，大部分控制终端都是按键操作的，页面要尽量简洁明了。

00-101010

1. Led屏幕

在数据可视化设计中，一般选择以下字体：

中文字体：方平，思源加粗英文字体：DIN，DIN-PRO数字字体：Exo在正常1080P条件下，由于甲方大部分是政府机构，文字要求会比一般要求大一点，一般选择最小16px。字号不是固定的，人是活的，规范是人制定的。不要迷信规范。

00-1010:利用配色规则631，将配色定义为主色60%、辅色30%、对比色10%贯穿整个界面。汉字的颜色通过重要、普通和次要来分布，具有丰富的页面视觉

在数据可视化设计中，因为

大屏是偏暗的，所以需要选择高饱和度的色彩，并且需要选择统一的颜色，保持画面协调。

有时候会遇到客户需要高饱和度的颜色并且多个颜色的时候，在选用时尽量选用饱和度不要太高的颜色，不然画面会很不协调，也就是所说的晃眼。

在设计过程中尽量选用深色背景作为画面主背景，这个可以解决大屏因为色差问题，对整体页面的影响，用户也比较容易忽略拼缝中的存在的跨屏感。同时深色背景时更容易突出主体，画面效果更好，更能体现流光、粒子、发光等酷炫效果。

同时，大屏由于有色差，尽量不要使用渐变色。如若需要使用需要到达现场，根据大屏反馈的色差，现场调整，但还是推荐尽量使用纯色。

五、画面饱满以及页面装饰点线面

1. 画面如何饱满

1）字体的饱满

将字体处理后，空白面积减少，整体更饱满了些。

2）文字的饱满

正常情况下为使阅读更方便，标题间距给-10%~20%为佳。

通常数字会比汉字小，为使基线对齐，数字与汉字需分开设置字号。

主副标题字号比例过大过小会导致界面不平衡，建议主标题是副标题的1.5倍。

3）关系的饱满

当A=B时，图标和文字的关系会混淆，这种情况下要满足B>A，用间距分层次。

采用黄金分割0.618值。也就是横向21个小方块，竖向13个小方块。此时，最优雅的板式是A＞B的间距，1＞2＞3的间距。

4）图标的饱满

2. 页面如何装饰会更丰富

我们在设计的过程中，经常会因为画面不够饱满页面太空，收到客户的吐槽。下面就讲讲如何通过点线面来丰富画面，使画面更丰富更有层次感。

原画面设计完成添加装饰线(点线面构成)调整位置，丰富画面

在画面添加装饰的情况下需要给画面留足位置。数据可视化大屏本身面积就比较大，合理运用画面以及拼接屏缝隙添加装饰线，可以更好的减轻拼缝所带来的影响。

装饰线的添加还可以在后期丰富画面动效，科技感十足。在页面中添加装饰线在我看来，非常的有意义，既可以丰富画面，又可以完善动效，一举两得。

在装饰线添加这一块，推荐大家多去看看国外的可视化设计，那些几乎将点线面构成发挥到了极致。

六、画面动效以及素材灵感收集

1. 动效制作：C4D+AE

在很多设计项目中会用到很多酷炫的科技模型，比如汽车、人物、地球模型等等。我们可以运用C4D来进行主视觉建模，再通过AE进行动效输出。

有的人可能会问在导入数据之后可能由于数据量不大的原因，动态效果不是很明显。在这种情况下，咱们可以把不变的数据量，做成AE动效，可以把动效导成json文件直接发给前端，能很大程度上保障画面动态效果。

2. 素材灵感收集

1）Behance

在Behance上有很多国外的设计师，他们的数据可视化设计做的都非常漂亮，极具代表性风格。

我们可以通过Behance搜索HUD 即可搜出来一大堆精美的高清原尺寸设计图，同时可以把这些作品保存到自己情绪版中，非常的方便。

2）Pinterest

从“书签”这个角度出发，我们可以发现其实Pinterest的本质就是一张张精美绝伦的图片书签。每一个在Pinterest上的图片其实都是一个个网页上所提取浓缩而成的书签。

Pinterest对图片的关注是最用心的，去除了其他的各种干扰，Pinterest只注重图片的呈现。

而且Pinterest有个非常独特的功能，就是他能够自动筛选同类型图片，并且精准度非常高。

本文由 @AYONG_BDR 原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自 Unsplash，基于CC0协议