老李不止一次看到大家的私信，问我：“我知道我可以自己设置一个模板或者设计一个大视觉屏幕，但是我一直不清楚大视觉屏幕的具体制作流程，主要是指如何与业务需求沟通，如何修改自适应页面等。”

所以今天，我要写一个教程，向你展示如何从0到1(从请求到直播)创建一个大的可视屏幕。

更多的内容，为了让大家清楚地了解每一步，我分为(上)(下)两部分来写，请大家耐心阅读，一定会有所收获的!

在这里告诉大家，企业发展大屏可视化的主要过程，可以分为7个步骤

一般来说，我们做大可视屏幕都是出于业务部门/领导的需求，所以第一步自然是做需求调研。对于一个完整的大屏项目的实施，我们需要在需求调研阶段准备以下三个文件，以确保我们进行完整的需求调研：

文档1:业务需求研究报告

根据业务场景提取关键指标

我们需要与需求方就大屏业务场景进行沟通，明确大屏上要关注的内容或要呈现的“故事”，并根据需求提取关键业务数据指标。例如，某制造业的监控指挥中心位于大型指挥控制中心。监控的数据包括销售运营、生产运营、物流管理、客户质量、园区安全能耗五个模块，属于“业务关键数据”。

(2)制定一手、二手和二手数据

如上所述，大屏幕将集中显示一些数据。我们需要制定上述“业务关键数据”的主要、次要和次要方面。

主要信息展示了业务的主要逻辑，通常在一个突出的地方，由关键元素标识；次要信息围绕主要信息进行说明；次要信息是对主要信息的补充，放在角落的位置，或鼠标悬停显示。在下图中，主要信息用红旗标记，次要信息用黄色标记，次要信息用绿色标记。大屏幕视觉设计遵循这一优先级。

确定各指标的视觉要素

大屏可视化元素可分为指标卡、表格和图表。在选择数据展示中使用的视觉元素阶段，可以列出1-3种适用的类型，以便在视觉设计中根据需要进行调整。

文件2:大屏采购硬件清单

后两者需要高性能显卡和大屏硬件厂商来保证，而大屏开发人员必须在保证模板分辨率正确的基础上了解这两种分辨率。模板的“正确”分辨率包括两个要素：纵横比和高清。一般大屏的纵横比有16:9和32:9。使用错误的比例会导致最终投影效果失真或屏幕填充不足。

根据公司显示设备分辨率，3840*1080模板可采用32:9模板，960*540普通屏、1280*960高清屏、1920*1080超高清屏可采用16:9模板。

文件3:数据质量调查报告

在确定需要显示的业务数据和大屏硬件之后，还需要确定大屏的数据源、数据更新周期、数据单位等，这些都会影响后续的大屏设计、开发和显示效果。

初步的视觉设计准备主要集中在四个方面：布局、配色、字体和组件样式。

第一步：业务需求调研

大屏首先要为业务服务，这样才能正常显示业务指标和数据。此外，由于它通常反映企业的整体业务，一般分为两个层次：主要指标反映核心业务，次要指标用于进一步阐述和分析。所以在制作上要有不同的侧重点。

以下是三种常见的大屏布局。

布局不是唯一的，但通常建议作为主要和次要布局，使信息一目了然。在实际项目中，您不必使用主要分布或次要分布，您可以使用均匀分布，或者您可以使用两者的组合来进行适当的调整。如果有许多或多个级别的指标，例如，如下图所示，基于上述基本原则的一些调整将会很好地发挥作用。

附上几张典型的主次分布的大屏效果给大家看，是不是更清晰，不会让人找不到点的感觉。

FineReport生产，入侵删除

第二步：大屏前期视觉设计准备

主要配色

大屏的整体配色方案确立了大屏场景的色调，一般是画布的背景和构件的背景。实际用料可能与主配色不完全匹配，但应保持视觉上的一致性。

下图显示了两个大屏幕页面的深色和浅色的对比。在PC端可能差别不大，所以需要放到实际的LED屏幕上进行对比。

如果你选择深色的背景，有很大的选择空间，但根据经验，深蓝色对大多数人来说是最有吸引力的配色方案。这里有一些推荐的配色方案。这些深色是我最常用的背景设置。如果你上网搜索好的屏幕或驾驶舱页面效果，很多都是这几种颜色。

当然，你不必使用背景颜色。你也可以使用图片。我建议使用带有星星、条纹、渐变、装饰等的图片。

报警颜色

一些需要特别突出的指标，或者指标值达到警示值时的颜色，一般都比较鲜艳，与大屏主色调有明显对比。

如果结合图表闪烁动画、警示线等常用设置，效果更好。

机箱中的报警颜色突出显示“异常情况”:

告警值与正常值的对比使得“处理状态”的对比更加明显：

图表系列颜色

具有不同表示逻辑的不同图表可能需要不同的配色方案，因此通常至少有两种图表系列颜色：

对比系列颜色常用于多系列条形图、条形图和饼图中，以强调数据系列之间的差异。

例如下图中两种对比色直接对比了总目录与实际目标的情况：

采用多种对比色来展示不同的“客户问题比例”，达到一定的系列对比效果：

连续系列颜色常用于单系列柱状图、柱状图、面积图等，在大屏的整体视图中只有“一种颜色”，但渐变的效果既表达了数据之间的连续性，又有炫酷的视觉效果。

“连续”的效果可以通过一系列渐变的颜色或渐变来实现。

相关数据“客户评级”系列以循序渐进的颜色表示：

通过渐变来创造一种科技感，普通的仪表盘变得“不寻常”:

1、布局方案

字体类型

说明大屏幕最多可配置两种字体。同一级别的标题和文本的字体类型必须相同。字体以无衬线字体为主，如黑体、微软雅黑等(也要注意字体的商业可用性);少使用衬线字体，如歌曲字体，斜体。

字体大小

规划从标题到图表和表格的文本大小。字体大小应该与大屏幕画布的像素相对应。例如，对于960*540px的画布，最小字体大小应该是6px，对于3840*1080的画布，最小字体大小应该提高到10px-12px。

字体粗细

也就是说，字体是否需要加粗。一般级别较高的标题可以加粗，表标题、重要的未完成指标数据可以加粗。

字体颜色匹配

大屏幕上的文字字体一般为白色，透明度和灰度可根据文字内容的需要进行调整。根据配色方案中的主色和报警色，规划需要突出显示的文字内容。

2、配色方案

标题和组件标题

大标题是大屏幕一般的标题，常见的位置是画布上方，左上角，字体最大；组件标题可分为层次结构：一级标题是一个大模块的标题，模块标题下辖若干个小模块和组件；次要标题是一个小模块或组件的标题；如果大屏幕上的内容非常多样化，则可以设置更多级别的标题。

背景图片，组件框架

大屏幕画布的背景，通常是深蓝色的天空、宇宙、极光等图片，也可以设置为纯色背景；组件盒用于分离模块。

在这篇文章中，我们主要讲了大屏制作的第一步和第二步，最后我们来回顾一下。

第一步：与业务人员进行需求调研，确认准备3份文档，确保设计开发初期方向明确

第二步：大屏视觉设计准备，主要确定大屏的布局方案、配色方案、字体和组件样式

在(下)，我们将继续讲第三到第七步，从大屏模板制作特效补充细节调整大屏视觉和硬件调试上线操作，原创不容易，如果有帮助，请点赞支持~