前言

本次分享来源于平日做大屏设计总结的一些实战经验，旨在希望小伙伴通过以下总结内容，能够在日后涉及到大屏设计时，避免因设计尺寸不正确，字号颜色等问题产生的大屏内容，呈现不全、拉伸、压缩、字号小看不清等产生的一系列问题，频繁返工。

///

• 数字可视化概念

• 
  

首先我们要了解一个基本概念，什么叫数字可视化。它的功能作用是什么？

简单的来讲数字可视化即以某种形式抽提出概要信息，通过把复杂、抽象、专业的数据图表的属性和变量，进行直观、动态或是通俗易懂的视觉化设计展示传递出来。目的旨在为用户进行监控预警，提示风险，下发指令时，做出相关决策所提供依据。

图片来源网络

///

02. 可视化大屏分类

作为最终数据大屏展示的载体，必须要提前了解硬件设备的规格属性，因为往往在最终产出时，常见的屏比拉伸变形，字号看不清，屏显过亮刺眼，都是因为没有了解清楚屏幕属性导致的。另外，了解大屏分类有助于设计师在建画板时候计算设计尺寸，减少比例失错的机率。

常见大屏主要是拼接屏和LED屏 (仅从可视化大屏设计角度)

• 拼接屏又分为：

LED显示屏拼接、液晶LDP拼接、投影DLP拼接、等离子PDP拼接（利用气体放电发光的显示装置）等，当然这些按照适合在各自领域发挥使用进行分类，在这就不过多解释。

拼接屏一般是由43-55寸的液晶显示屏拼接而成。（现在企业常用的有无缝隙、1.7mm缝隙、3.5mm缝隙，缝隙越小越贵。）

拼接方式常见有：常规拼接、竖屏拼接、异形展开拼接、曲面拼接。

                          常规拼接                                                                竖屏拼接

                      异形展开拼接                                                             曲面拼接         

第二种就是LED屏(无缝隙)，是由成千上万个LED灯构成像素点,单位用P值表示，P值越小成像越细腻。

常见的屏比一般是16:9（即显示器/屏的宽高比），这里问大家一个问题，为什么大屏一定要用16:9这个比例,而不是用 1:1  4:3  5:4 这种的呢 ？

因为根据人体工程学研究，发现人的两只眼睛的视野范围是一个长宽比例为16:9的长方形，所以电视显示器行业根据这个的黄金比例尺寸来设计产品。（包括我们在看长视频时，无论竖屏还是横屏，比例都是接近16:9）

///

03.视觉设计原则

1.布局设计

无论做任何需求，了解产品功能是设计的第一步，我们需要做的就是跟产品沟通好，大屏要展示的内容跟类型，确认好各模块之间展示顺序和交互方式。（当然能提前介入原型数据阶段是最好），这主要关系到你在布局内容的动线设计。

那么怎么能让大屏的动线合理呢？首先，我们要了解一个概念：古腾堡原则。（古腾堡原则是由14世纪西方活字印刷术的发明人约翰·古腾堡提出）

古腾堡原则实际是揭示了一个视觉轨迹的规律：人的视扫引力是从上到下，从左至右的。

所以重要的关键信息的尽量放在左上角、中间和右下角，来引导眼睛的运动轨迹，让用户能够快速获取相应的信息。

那我们在知道这个理论后，大屏的布局设计上，就可以根据信息的重要性与模块元素布局的组成方式进行灵活的调和排布，如下图示意。

同样，在了解布局设计的概念后， 我们还要了解大屏尺寸应该如何设计，也就是设计稿应该建多大画布。上文已经提到过，一般常见的大屏都是2K高清屏，也就是1920*1080尺寸，所以我们就可以，以这个分辨率设置画布。

1K分辨率:：960×540  2K分辨率：1920*1080  4K分辨率：3840×2160   8K分辨率：7680×4320  10K分辨率：9600×5400

但是如果，我们以2K屏的设计尺寸，输出投放在4K屏时，就会产生一个问题：界面上文字内容会变小，图表会拉伸变形。如下图示意：

你可能会说1920的2倍图不就是4K屏的尺寸么，为啥还会变形？其实，主要是高分辨率特性导致的，虽然开发同学也会按等比放大适配4K分辨率，但是画质也会降低，所以尽量按照同比分辨尺寸去设计，相反，如果大屏跟电脑不同比尺寸，就一定会拉伸变形，导致模块点击精准度下降，影响整体操作体验。

另外，导致界面拉伸变形另一个原因可能是视频的扩展器参数调整不正确导致的，只要进行校正调整，即可解决。（当显卡输出分辨率=DVI支持分辨率时显示效果最佳）

2.配色设计

在设计之初，可以去找你认为比较合适的参考图，有条件的可以直接投放到大屏的屏幕上，了解大屏偏色的情况，及现场观测点测试最小字号视看效果。这可以帮你快速建立视觉层次的感知，避免因配色、字号过小的问题徒劳返工。

大屏的主色调最好要根据设计的主题、项目、涉及到的行业、场景及用户的喜好等方面入手。目前常见的案例中，深色基调的居多，一方面是互联网科技感多以深色为主，较于浅色来讲，长期观看会减少视觉疲劳，另外也可以解决大屏色差问题，从而忽略拼缝中的跨屏感。

其次，要确保模块的图表及数据的辨识与区分，用醒目的颜色凸显主要数据，淡化背景元素，像标题标签、图例图标最好统一配色来建立整体视觉层次。毕竟层次感的图表更抓眼球。

例如：另外，在常用的颜色编码上,可视化的趋势图最好按照人们固有的认知去搭配。比如红色代表风险，绿色代表健康正常。以及自然仿生用色，像海水深浅渐变(浅蓝到深蓝渐变)，日出日落天空变化等。抑或者，也可以参考631配色法则，即主色60%，辅助色30%，对比色10%，区分重要、普通、次要等倾向性的配色设置。

切记，一定不要用饱和度过高的颜色，本身大屏都是暗色背景，在加上大屏偏色等硬件问题，饱和度过高就会显得格外刺眼。

设计稿上屏投放效果（因数据敏感问题，做了虚化处理。）

3.字形字号选择 

• 中文字体：苹方 微软雅黑，思源黑体
• 数字字体：DIN 

特殊字体可将字体包给到开发嵌入程序中。

字号大小选取，要根据观者位置距离及场景环境光的强弱，虽然大屏本身开发以web端为基础，如果以网页最小字号12PX为例，投放在大屏上就会非常小，所以尽可能使用大字号，毕竟大屏比例过宽时，观者需要站在更远的位置去查看。最好去大屏投放的实地考察一下灵活调整。

///

04.图表分类搭配

• 
  
• 在数据可视化设计中，图表及字段是组成各模块数据最基础的元素单位，所以前提就必要了解各数据的特点及关系从数据角度出发，以功能角度对图表进行分类布局搭配，其次梳理好数据包含的维度，突出关键信息。

常见的图表从功能分类上讲，主要有：分布类、比较类、占比类、区间类、关联类、时间类、趋势类、流程类、地图类等。

常见一般多为对比及占比类图标数据，如下：

其他分类图表也多为同一维度上值的上限和下限之间的差异，或通过图形位置及嵌套方式，显示数据顺序及相关性。此处就不一一展开了。

图表类样式参考及实现

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

///

总结

数字大屏的设计要点：

• 1.同比分辨尺寸定义画板尺寸；
• 2.布局、配色、字形字号的选择；

3.熟悉图表分类搭配。

同时，我也希望能够通过这篇文章给到大家更多的启发。内容如果有不严谨、错误的地方还望大家给与指正。

Powered by Froala Editor