1 需求调研

1.1 根据业务场景提炼关键数据

较为正式的大屏实施项目一般有需求文档，在拿到需求文档后，还需要与需求方沟通大屏业务场景，明确需要侧重展示的内容或大屏要呈现的“故事”，从而提炼关键数据指标。

举例子：

某制造行业的监控指挥中心大屏，位于一个大型指挥管控中心，需要监控到的数据一般包括销售运营、生产运行、物流管理、客户质量和园区的安保能耗这5个模块，这些业务关键数据。

1.2 确定数据指标的优先级

从需求文档或和业务交流获取到关键数据后，再确定提炼出的数据指标的优先级：

主要信息呈现业务的主要逻辑，一般放在显眼位置、用重点元素标识；次要信息围绕主要信息进一步阐述；辅助信息是主要信息的补充，放在角落位置，或者鼠标悬浮显示。

1.3 确定数据指标的展示形式

大屏可视化元素可分为指标卡、表格、图表（仪表盘）三类。

常见的展示图表包括柱状图，饼图，折线图，轮播图，雷达图等等。不同数据适用于不同的图表类型。

1.4 确定大屏分辨率

大屏的设计要基于最终显示的分辨率要求去做，分辨率受大屏模板分辨率、显卡输出分辨率和大屏幕硬件支持的分辨率三方面影响。

有时候，还需要注意大屏的拼接方法（9块屏幕拼接成1块，还是16块屏幕拼接成1块），是LCD屏还是LED屏幕

模板分辨率的“正确”包括宽高比和高清度两个要素，一般的大屏在宽高比上有16:9和32:9两种，用错比例会导致最终的投屏效果变形或填不满屏幕。

根据展示设备的分辨率，32:9的一般做38401080的模板，而16:9的模板则可以做960540的普通屏、1280960的高清屏、19201080的超清屏。

2 视觉设计

视觉设计需要关注布局、配色、字体和组件样式4个方面。

2.1 布局方案

根据数据需求阶段规划提炼的数据指标，一个大屏一般划分出3-5个大模块。

主模块布局根据业务关键数据划分为3到5个部分。再将每个大模块再拆分为更多小模块，每个小模块里有一个或多个组件，用来容纳需求调研中确定的主、次、辅信息。最后，根据需求规划中确定的可视化元素依次填充子模块，让大屏的整体布局更具象。

2.2 布局结构

2.2 配色方案

2.2.1 主配色

大屏的整体配色，奠定了大屏的场景基调，一般是画布的背景、组件的背景。

一般来说，科技类的大屏的配色方案主要是蓝色和绿色，以下是以蓝色调为主色调的配色方案：

2.2.2 预警色

一些需要特别突出的指标，或指标值达到预警值时的颜色，一般比较明亮，且与大屏主配色有较为显著的对比。如果结合图表闪烁动画、警戒线等共同设置，效果更佳。

2.2.3 图表系列色

不同展示逻辑的图表可能需要不同的配色方案，比如柱状图需要有明显的对比色，以便于用户区分。

2.2.3.1 对比系列色

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

2.2.3.2 连续系列色

常用于单系列的柱形图、条形图、面积图等，在大屏整体看来只有“一个颜色”，但渐变的效果不仅表达了数据之间的连续性，还有酷炫的视觉效果。“连续”的效果可以通过渐进的一系列颜色或渐变色体现。

2.2.4 配色获取方法

1

ColorDrop

zhongguose － 传统颜色

2.3 字体方案

字体方案包括字体类型、字号、字重和配色4个方面：

• 字体类型不宜超过两种，大屏上尽量用有衬线字体，并注意字体可商用问题；
• 字号在不同等级的标题、正文、图表字体之间要有区分；
• 高级别的标题、突出的指标、表格表头等一般需要加重字体；
• 大屏字体基本为浅色、亮色，结合整体配色方案做规划。

一般来说，各种组件设置如下：

组件标题：字号：28 字体：默认字体、居左、上下居中对齐

组件图例：字号：16

组件坐标：字号：18

组件数据：字号：20（不要加粗）

2.4 组件方案

组件方案是指大屏使用什么样式的组件素材，主要考虑大标题、组件标题、大屏背景图、组件背景框和指标卡样式。这些视觉素材对大屏的整体效果有很大的影响，需要做好合理的规划。

2.5 整体风格

2.7 动态

动效应优先满足核心内容、故事线。常见的大屏动效 - 展示类，用于突出产品核心功能和特点。界面信息按照一定的规律呈现，引导用户的视觉流向。

3 技术选型和开发调试

用的比较多的就是JS+Ecahrts，还可以直接用可视化工具制作，比如FineReport、dataV等等。

3.1

3.2

3.3 制作大屏3D地图

3.3.1 制作3D国家地图

下载矢量地图的网站：

阿里云DataV:

DataV.GeoAtlas地理小工具系列 (aliyun.com)

国家地理信息公共服务平台-标准地图服务：

标准地图服务系统 (mnr.gov.cn)

下载好SVG图片之后，导入到axure中，鼠标右键-变化图片-转换SVG图片为形状-对齐进行编辑和修改。

3.3.2 制作三D地球模型

地球：粒子地球、地图贴图、地球模型。

4 大屏调试

在完成设计之后，要再次校验信息层级、文字大小、图表等各层级间的对比关系是否传达准确，与技术同步沟通下技术的实现性。最后开发完成后，要拿演示demo去现场测试，看下整体展示效果，测试输出是否有问题，有无拉伸问题，拼接缝与内容有无穿插，及时与开发进行页面的校验工作，最终才算是设计完成。

参考链接

「大屏开发指南」手把手教你做大屏，附素材！ (qq.com)