教给你！大数据可视化大屏设计分享

说到大屏，双十一的大屏肯定不陌生吧！

接下来，我们来讨论讨论，数据可视化大屏如何设计吧！

拼接大屏：大屏几乎都是拼接屏，UI设计时不用考虑屏幕缝隙影响内容的呈现，内容不会丢失，但有可能影响视觉的表现，例如一个很大的人物图像被缝隙正中“劈成”两半，或者“劈中”了眼睛，看起来很不舒服，所以设计时可以建立缝隙位置的参考线避免类似情况发生。（现在企业常用的有无缝隙、1.7mm缝隙、3.5mm缝隙、三种拼接大屏，缝隙越小越贵）

设计尺寸：拼接的每块小屏一般是16:9的高清屏，设计尺寸可以把上下高度设定为1080px，长度按照拼接屏的数量比例得出长度的设计尺寸。例如3乘5的一块大屏幕，高度3块屏设为1080，每块高就是360，360除9乘16等640，640就是一块屏幕的长度，640乘5块屏＝3200最后得出设计稿尺寸就是：高1080px乘宽3200px（在这里感谢我的数学老师）

拼接屏设计尺寸图解
视觉设计：首先了解需求，整合数据，分析出主要数据次要数据、总量数据细分数据、各数据的维度等等，通过了解这些可以先设计出一个布局模版，也可以在纸上画出来，布局可以在设计过程中随时调整。

设计的风格，背景色一般用深色调，深色调紧张感强，让视觉更好的聚焦，大屏暗色调看上去更柔和舒服不刺眼，也会较省电。

大屏设计跟网页不一样，页面不能有滚动条，大屏的长宽都是固定的。

字号跟网页设计一样不小于12号字，可以用于图表的标注，数据信息建议14号字以上，大屏观者远距离才能看全内容，所以字号可以稍大一点。字体不一定只用一种，可以用到一些科技感强的字体，这里要注意，记得把字体给开发一份。

设计完成先去大屏上看一下效果，大屏的品质不一样色调也会有很大的差别，要根据自家的大屏呈现效果做调整。
交互设计

我把大数据可视化大屏分为两种，一种“纯展示型”另一种“展示＋功能型”，具体怎么区分！

纯展示型几乎没有交互，后台录入数据，在大屏上展示就行了。

展示＋功能型，例如实时监控数据、采集数据、数据对比功能、云计算数据、分析与预警等等。

这里就着重说一下带有功能型的大屏产品的结构层（信息架构）。一切功能结构都要围绕核心数据主页面来架构，因为大屏展示的核心就是将一些业务的关键指标数据以数据可视化的方式展示出来。

1. 设计稿投到大屏上显示效果不佳怎么办？
大屏的分辨率、比例、使用环境、投射方式等均会对设计造成影响。理想情况下，我们应该在设计开始前，就能打开大屏系统做一些简单测试。我们可以从网上收集不同设计师不同风格的大屏设计作品，然后投上去查看实际效果。

因为大多数时候大屏都会存在色彩偏差，这时通过测试我们就能发现渐变色、邻近色等不同类型的色彩搭配是否可以在目标大屏上良好呈现。如果不可以，那我们设计进行时就不要使用显示效果不佳的色彩搭配。另一方面，样图沟通环节及时测试也很重要。

2. 大屏设计定稿后，切图切几倍图？
由于是将我们电脑屏幕投射到了大屏，大屏上的内容是运行在我们电脑浏览器上的页面。所以切图根据我们电脑的分辨率，正常切1倍图就可以。

3. 1920*1080的设计稿，投到9000*4320的屏幕上，文字图片会发虚么？
看情况，视大屏系统硬件规格与观看距离来定。这块有四个概念需要跟大家交流下：大屏逻辑分辨率（设计稿尺寸）——显卡输出分辨率——视频矩阵切换器（DVI）支持分辨率——大屏实际物理分辨率。

一般后两个是没问题的，大屏跟矩阵切换器是由大屏厂商提供，一般刚好配套大屏。容易问题的是显卡输出分辨率，我们电脑屏幕分辨率并不是最终显卡传递到DVI接口的分辨率，传递到DVI接口的分辨率是电脑显卡所能输出的最大分辨率（部分电脑可设置或自定义输出分辨率）。

输出分辨率等于DVI支持分辨率时显示效果最佳；输出分辨率低于DVI支持分辨率，DVI会将信号放大后传递到大屏，放大的过程中就有图像信息丢失，虽然此过程中有各种算法支持去保证图像尽可能清晰，但算法再好，跟真实图形还是有差距的。

此外，多信号源投射效果优于单个信号源投射。对于现场直播数据大屏，一般至少有两个信号源，一个投屏，另一个也投屏但是处于备用状态。

离大屏的距离也影响观感，一般离得近，颗粒感明显，距离稍远，会显的较为清晰。

4. 设计稿完成开发后，发现在大屏上页面有被拉伸或者压缩的情况，怎么补救？
一般来讲，开发只需要对设计图做还原即可。但特殊情况下，比如显示器扩展不正确导致页面被拉伸或压缩，这时就需做处理：我们可以先得到被拉伸/压缩的比例，然后对整体视图做压缩/拉伸处理，再由其拉伸/压缩，这样被拉伸/压缩的瑕疵就可以得到一定程度上的矫正。

另外，了解被投电脑硬件特点，有的电脑可以通过自定义分辨率解决这部分问题。

5. 除自行开发可视化大屏外，还可以通过哪些第三方服务来快速实现？
比如亿信华辰数据可视化平台的酷屏。

6. 数据可视化的图表样式可以在那些地方找到参考？
所有的图表样式都是基于代码实现的，可以作为我们设计图表的参考，也可以让开发拿代码去用，或者在这些图表的基础修改

工具类的需要有一定的代码基础，里面同样有丰富的图表，所以跟开发的沟通也很重要，因为他们可能会了解多一些更新的前沿的图表形式是我们设计师不知道的，所以彼此多沟通交流是在太重要了。
所以，大屏应该怎么做，你知道了吗！