数据可视化大屏设计尺寸如何定？_ZNDS问答

思念若苦

目前的情况是，客户用的拼接屏，每个屏幕有55寸，一共12块。
做设计图的话是按照12块1920*1080来做(一种是做12张图，一种是做一台7680*9720的一张图)
或是一种就做一张尺寸为1920*1080图就可以了？

本文转录自云智慧前端开发工程师 Martel Sun 的视频课程。
原视频地址：【拖拉拽数据可视化大屏教程】不用代码完成酷炫大屏制作！

FlyFish介绍

FlyFish 是云智慧开源的一款数据可视化编排平台。通过配置数据模型为用户提供上百种可视化图形组件，零编码即可实现符合自己业务需求的炫酷可视化大屏。需注意，本教程仅适用于云智慧开源数据可视化平台FlyFish。如果喜欢我们的项目，请点击 FlyFish 代码仓库地址，在 GitHub / Gitee 仓库上点个 Star。
使用方式一：线上Demo环境体验
使用方式二：Gitee本地下载部署使用
使用方式三：GitHub本地下载部署使用
数据可视化大屏制作

相较于 FlyFish 2.1，FlyFish 2.2.1 的整体大屏编辑页面均作了优化，因此编辑大屏的时候体验会更好。FlyFish 2.2.1 支持在同一应用中添加多张大屏，并可以在多张大屏中来回跳转以及实现大屏轮播数据。除此之外，FlyFish 2.2.1 增加了数据查询以及PostgreSQL、ClickHouse等更多数据源，方便开发者们在使用大屏中组件的时候接入数据。最后，FlyFish 2.2.1 也增加了大屏辅助线，以此方便开发者们更快捷、更准确地拖拽以及调整大屏中组件的位置。
大屏配置

下图为大屏构建页面，“martel专用”为新添加应用。下方标红按钮分别代表编辑应用、删除应用、导出应用、复制应用，以及预览与开发。

点击开发按钮后，可进入到大屏编辑页面。左侧是大屏页面编辑区，通过点击左上方的添加按钮即可新增一个页面，若想删除该新增页面，只需将鼠标移至页面标题位置待显示出删除按钮后，点击删除即可。
左下角为 FlyFish 的组件区，FlyFish 将组件分为基础组件和项目组件。在基础组件中，FlyFish 内置了一批开箱即用的高质量组件，能够应付绝大部分的业务应用场景。包括各类折线图、柱状图、饼图、散点图等图表类组件；自定义中国地图、地图路线图等地图类组件；图片、视频、导航栏、流动箭头等媒体布局组件。项目组件即单独项目开发中所用到的组件。
中间区域为大屏编辑区，正上方按钮为组件相关编辑按钮，包括组件置顶、置底、组合、拆解等操作选项。然后我们可以拖拽一个组件过来，可通过 Ctrl+C/V 可复制粘贴组件。此外，该大屏编辑页面的辅助线可以确保开发者们在拖拽组件的时候可以保证能精确对齐，同时也能可以看到每个组件的区域分布情况。

右上角为大屏保存、预览、导入、导出相关按钮。为防止开发者重新进入界面出现已开发大屏丢失的情况，因此在开发大屏时开发者需实时查看大屏预览效果并进行保存。点击预览时，由于大屏的分辨率基本上为 1920*1080 像素，与部分电脑上的分辨率不相匹配，因此会看到大屏预览界面下方有滚动条。如开发者无需滚动条，可通过在缩放方式选项中选择全屏铺满即可。当开发者选择导出大屏时，此时会导出一个 JSON 文件，若要重新导入，则只需将之前导出的JSON操作导入即可。

右下方为大屏设置、事件、函数、数据集相关按钮。点击设置，开发者可以对大屏的分辨率、缩放方式进行设置。组件请求 Domain 用于设置组件请求前缀，在组件发出请求中会组合接口和前缀发送请求，需注意，请求前缀要求必须包含 http://或 https://。此外，开发者可以设置一些全局变量。通过设置页面和标题以此变更页面名称和浏览器页签 icon。

自定义 CSS 主要是改变组件的样式。设置自定义 CSS 会挂载在可视化预览区域全局，可设置全局 CSS 覆盖组件默认样式。如下图所示，可以通过设置自定义 CSS 将组件背景色改为红色。

事件主要用途为监听页面或者组件的行为，触发相应的动作。常用于页面和组件的交互、组件间相互通信。需注意，设置的自定义事件只能提供给当前页面使用。如下图所示，开发者可通过完成设置事件源（趋势图）➡️ 事件类型（鼠标移入）➡️ 操作（调用组件方法（趋势图复制））➡️ 时间动作（hide）➡️ 配置系列动作达到移入鼠标趋势图消失的目的。

函数通常与事件搭配使用，开发者可对函数进行增删改查。需注意，设置的自定义函数只能提供给当前页面使用。如下图所示，开发者可通过编写相关函数以及设置相关事件达成大屏this的日志的打印。

数据集目的是为大屏提供数据支撑。主要解决多组件公用数据情况，支持静态数据、数据查询、数据模型、HTTP数据。
组件配置

在组件配置中，当开发者选中目标组件时便可以操作样式和数据等相关配置。样式配置中，开发者可以对组件的区域、CSS类名、组件显示/隐藏以及其他等内容进行配置更改。

区域：单击选中实时预览区域中的组件，设置区域中设置组件宽高，输入相应的宽高。在实时预览区域拖拽改变组件宽高位置与此处输入框数值一致。
CSS类名：单击选中实时预览区域中的组件，设置区域中设置组件 css 类名。
组件显示/隐藏：单击选中实时预览区域中的组件，设置组件的显示/隐藏状态。
其他：根据组件不同和实际需求，配置个性化组件。

数据方面主要提供组件数据支撑。支持组件绑定数据，支持静态数据、数据查询、http 请求、绑定全局数据集。
完整大屏构建

上述讲解了大屏及组件的基础配置，本小节将讲解如何构建一张完整大屏。
第一步：拖动组件

在拖动组件的同时可完成组件相关样式配置。

第二步：数据配置

通过数据查询配置数据

数据查询是在下拉列表中选择数据查询信息。在飞鱼平台接入数据源后，开发者可以通过数据查询功能筛选目标数据，随后组成新的数据集合。此外，也可以其他多个数据重新组合成一个新的数据集合，这便是数据查询中数据列表的来源。

在通过数据查询配置组件数据时，首先需点击数据查询列表中的相关数据，随后点击新增表格并点击执行查询，此时相关数据表格已显示在结果预览界面。若只需选择部分数据，则只需通过添加自定义字段完成数据抽取。

目标数据抽取完成后，在数据查询中点击新建基础查询选择对应数据源中的数据表，执行查看数据表详情无误后，点击保存即可。随后点击大屏中相对应组件，点击数据，在数据查询中选择目标数据表点击应用即可看到数据已被应用到相对应组件中。

通过全局数据集配置数据

在通过全局数据集配置数据时，首先需新增一个数据集，此时数据类型可选择数据查询，数据选择上述数据查询中的数据表即可。随后选择大屏中相对应组件，点击数据，在全局数据集数据中选择目标数据集，完成X轴与Y轴显示数据设置（如无X轴和Y轴，亦可通过数据结构处理，对返回数据做进一步处理，以适配到对应组件中），点击应用，即可看到数据已被应用到相对应组件中。

大屏应用

在完成大屏组件拖动与数据配置后，若想部署大屏只需点击应用下方的导出按钮，随后将导出的包解压后部署到Apache等任意环境即可。
开源福利

上述便是完成大屏制作流程，如果喜欢我们的项目，请不要忘记点击下方代码仓库地址，在 GitHub / Gitee 仓库上点个 Star，我们需要您的鼓励与支持。此外，即刻参与 FlyFish 项目贡献成为 FlyFish Contributor 的同时更有万元现金等你来拿。
GitHub 地址： https://github.com/CloudWise-OpenSource/FlyFish
Gitee 地址：https://gitee.com/CloudWise/fly-fish
FlyFish贡献指南：http://bbs.aiops.cloudwise.com/d/717-flyfish
FlyFish 模版中心：https://www.cloudwise.ai/flyFishComponents.html

这两张图有什么不同？

图一

图二

这两张图如果你看不出来有什么区别，那么建议这篇文章可以抽空看一下。
适合哪类人群阅读？

任何需要通过图形文字结合说明一件事情的人，例如：设计仪表板、数据大屏、架构图、PPT 等等。
为什么要看？

下面用数据大屏设计为例来说明一下。
设计数据大屏的间距问题，这个是相对容易被大家忽略的细节问题。在和非专业设计人员的交流过程中，小编发现很多非专业设计人员大多数都没有这个间距的意识和概念。
配色、布局、图表选择这些大家都可以直观的感受到，因此在数据大屏的配色和布局方面，大家无意识的都会动脑筋想如何可以配色更加舒服、布局更加合理。因为脑子里有这个意识，所以也会越做越好。
拿布局来说，互联网有很多文章都在写大屏如何布局以及常见的布局方式。
在大屏的布局本质我们可以通俗理解为如何和用户讲故事，故事需要有故事线，讲故事的人讲故事之前会有大概思路。会提前设计先讲哪部分后讲哪部分，最终形成一个完整的故事线。这个类比到大屏的设计来说就是，每个大屏设计者都是一个讲故事的人，需要用大屏和数据来讲故事。这个故事需要读者自己读，我们需要设计好读者的阅读路径。这就需要了解我们的注意力矩阵和阅读顺序，在大屏上设计读者的视线流动路径，构建时空，让读者自己从大屏上得到有效的信息。
所以我们除了知道常见的布局方式外，大屏设计者需要了解大屏需要讲什么故事，这个一般会和展示的业务有关联性。所以一个优秀的大屏设计者，不仅仅是需要设计能力，其本质是业务梳理能力和数据分析能力，所以这也是为什么现在很多可视化产品的易用性是第一要求。
数据可视化产品的目标用户很大一部分比例是针对业务人员。因为随着企业数字化转型，数据可视化能力在业务人员的工作能力中占的比重讲会越来越大。所以大屏的设计不仅仅是专业设计师的工作，以后也会是更多的没有任何设计基础的业务人员主要增强的能力。
两张图有什么不同？

下面来具体看一下，这两张图到底有什么不同。

图一

可以看到图一中，组件之间的距离是不统一的，有大有小。这些都是一些小细节，但是对视觉感受还是有一定影响的。其实两张图打眼一看差不多，但却经不起细细琢磨。

图二

可以看到图二中，各个组件之间都保持着适当的距离感。整体的视觉感受会很舒服。
间距是什么？

色彩、图表、文字这三个要素是大屏视觉的主要构成元素。上面我们大概说了一下布局，在设计仪表板时视觉感受好不好，除了这几个要素本身之外，其实最重要的就是这三个要素的结合。
图表与文字的排版方式是建立视觉层级（先看谁、后看谁）的重要元素，图表和文字结合的媒介就是间距。
间距是视觉设计中建立信息层级、提升阅读体验、表达元素之间的关系、表现重要信息的重要方式。合理的间距能给用户带来，具有美感且舒适的视觉体验。
因为间距会影响设计的感觉，排版的节奏和可读性。太紧，文字会感到拥挤，变得更难阅读；太大，会显得内容不相关，页面太空。因此，间距的设置是需要遵循一些法则的，恰当的间距调整可以使页面内容更合理，更统一。
距离产生美，这句话在在任何设计中都要记得。
如何理解间距？

内间距

在仪表板的设计里，为了方便非专业设计师的业务人员理解，这里我们把组件之间的组件之间的距离，称为内间距，下图中黄色框所示。

内间距（黄色框示意）

内间距可以细分为横向间距和纵向间距，如下图所示：

横向间距和纵向间距

外边距
组件与仪表板两侧边的距离称为外边距，大屏设计里的外边距如下方橙色框所示。我们根据外边距方向的不同，把外边距分为上边距、下边距、左边距、右边距。

外边距

这个外边距和我们常用的 word 文档的页边距是同理的。word 文档里面页边距是指段落到页面两侧边的距离，在给内容排版时，页边距的设置也经常被大家忽视。其实，只需要在两侧留出适当的边距，有适当的留白，页面的呈现效果会好上不少。这个原理在大屏的设计里也同样受用。并且，外边距的设定在大屏设计里更加容易被忽略。因为 word 文档是默认自带页边距的，而在大屏的设计里需要我们大屏设计者手动留出外边距。
这里的外边距是相对而言的的，以大屏为整体的角度来看是如上图所示的外边距。如若以单个视图组件的角度来看边距就如下图所示了

间距遵循的原则

较大外边距

内间距要小于外边距，小到可以直观分辨。这里说的外边距是以最小外边距为基准，一般左右边距小于上下边距。通常来说是内间距要小于左右边距。
一般来说，视觉上的内间距大概是外边距的一半，就会表现的不错。

较大外边距

常规边距

内间距要适当小于（视觉基本看不出来）或等于外边距。如下图所示：

常规外边距

上边距大于下边距
其中上边距在印刷里面常被称作“天”。下边距被称作“地”。喜欢拍照的都知道，拍照的时候要天大于地，否则会有一种压迫感。这个原理在大屏的设计里也同样受用。
在大屏的设计里我们把大屏的标题归为上边距的一部分。整体来看是上边距大于下边距。

上边距大于下边距

统一性原则

在内间距和外边距的统一性原则主要体现在以下几点：
· 内间距要统一，横向间距统一，纵向间距统一。横向间距和纵向间距可以统一也可以不统一，如若横向间距和纵向间距不统一，那么两者差距不可过大。内间距统一我们可以在用 DataEase 设计大屏式使用矩阵模式，这样组件的间距是自动识别统一的，就不存在间距不统一的情况了。
· 左边距和右边距要统一。

内间距要统一、左边距和右边距要统一

亲密关系原则
根据亲密关系原则，同类内容的间距应该更近，这样有利于建立信息层级关系，提升用户的可读性。
标题与图表属于同类项，它们之间的间距（黄色框示意）一定要小于，组件模块之间（绿色框示意）的间距。

亲密关系原则

写在最后

看完这篇文章希望可以逐步建立起自己的间距意识，有意识的培养自己在做大屏等设计时的统一性原则、亲密关系等原则。这个只是你设计意识觉醒的开始。
设计前需要理解理解需求目标，这些原则不是一成不变的，设计原则固然重要，但设计的核心是为需求目标服务。所以，有些时候设计原则的优先级是次于需求目标的。
注：文章所引用数据大屏基于：国内开源的数据可视化分析工具 DataEase 设计（https://github.com/dataease/dataease）。

@越努力越幸运答主已经解释的很清楚了，我就补充一点。大屏的设计要基于最终显示的分辨率要求去做，分辨率受大屏模板分辨率、显卡输出分辨率和大屏幕硬件支持的分辨率三方面影响。

显卡输出分辨率和大屏幕硬件支持的分辨率，需要高性能显卡和大屏硬件厂家来保障，而大屏开发人员必须在了解这两种分辨率的基础上，保障所做模板的分辨率是正确的。
模板分辨率的“正确”包括宽高比和高清度两个要素，一般的大屏在宽高比上有16:9和32:9两种，用错比例会导致最终的投屏效果变形或填不满屏幕；

根据客户展示设备的分辨率，32:9的一般做3840*1080的模板，而16:9的模板则可以做960*540的普通屏、1280*960的高清屏、1920*1080的超清屏。

　　大屏可视化的设计尺寸定义，一直是很多设计师苦恼的一件事，很多时候大屏出现的问题，都是因为对设计尺寸没有一个正确的认识导致。

　　比如大屏内容呈现不全、拉伸、压缩、字号小的看不见等等，出现这样的问题就会浪费时间调整返工，今天我就带大家来认认真真的讨论一下大屏的设计尺寸。

　　大屏的类别及成像

　　我们设计的可视化大屏通常可以分为两类：一类是拼接屏，由46-55寸的液晶显示屏拼接而成，有一定的缝隙;

　　一类是LED屏无缝隙，是由成千上万个LED灯构成像素点，发光像素点之间的距离是LED显示屏的规格，用P值表示，P值越小成像越优秀细腻，对大屏类别的了解，有助于计算设计尺寸及比例。

　　大屏成像原理几乎都是投屏，也就是把电脑屏幕通过有线信号投放到大屏上，电脑上呈现什么内容，大屏上就会呈现什么内容。

　　在电脑上的交互操作大屏会同步进行，这就是投屏，看下图所示，电脑上风景图投放到大屏上显示。

　　虽然投屏的原理没问题，但这样的展示换成可视化页面就会有问题，不知道你会不会发现，后面我们揭晓。

　　总结：

　　本章节只需要记住一句话“电脑上呈现什么内容，大屏上就会呈现什么内容”，所以电脑上出现滚条是绝对不可以的。

　　大屏和电脑同比例设计

　　首先要强调一点，不可以以大屏的分辨率定义设计稿尺寸，当大屏的比例和电脑屏幕的比例一样时，要结合电脑屏幕的分辨率来定设计稿尺寸。

　　比如电脑屏幕分辨率为1920*1080，那设计稿就可以是这个尺寸，当电脑屏幕是3840*2160(4K)屏时，可以用1920～3840*1080～2160同等比例任意数值。

　　当电脑是4k分辨率时，虽然设计稿用1920*1080的设计尺寸也可以实现，但最终在大屏的呈现画面清晰度不够高。

　　原因是开发人员用1920*1080适配了4k分辨率，这本身就是同比放大关系，再加上投放中的画质损失就会更明显，不过基本上也是可以接受的范围内。

　　虽然画质影响不大，但优先级上更推荐电脑本身的分辨率3840*2160作为设计稿尺寸，这样1比1的呈现最能保证画面质量。

　　前端开发上只需要按尺寸固定写即可，下图为4k设计稿，中间的图像能相对更清晰。

　　4k设计稿(图片来源51WORLD)

　　大分辨率的设计尺寸还有个优势就是可以呈现更多的内容，同时在设计上的字号也要相对更大，比如1920上面16px字号，3840最好也能做到两倍左右的放大。

　　当然也完全可以用1920*1080设计尺寸设计，最后导出4k尺寸，也就是2倍图，包括切图也是导出2倍图。

　　总结：

　　当大屏电脑比例一致，电脑屏幕分辨率为1920*1080时，设计稿为电脑分辨率尺寸大小;

　　分辨率为3840*2160时设计稿优先级是3840*2160、1920*1080、之间同比例数值，当小于电脑分辨率时开发方式要适应屏幕大小。

　　大屏和电脑不同比例设计

　　说完同比例的大屏电脑设计，接下来说不同比例的情况，一般的问题都出在了不同比例的设计上。

　　当大屏和电脑屏幕是不同比例时，牢记一点，一定要保证大屏的展示是正常的，这是必须的。

　　分享一个反例，看下图，投屏电脑是由两块16:9的屏幕组成的32:9比例的显示屏，大屏大概是20:9的比例。

　　现在大屏的内容呈现是压瘪状，尤其饼图已经成椭圆形，问题不再开发，而是设计。

　　反面案例

　　原因是设计师的设计尺寸按32:9设计，在电脑上呈现1:1没有任何问题，投放到大屏上比例压到20:9，因为投放关系页面上所有的元素都会呈现压瘪状态。

　　所以开篇图片投放案例，问题也出在不同比例的投放上，大屏上的图片被拉伸变形，视觉上不会太明显，但是可视化图表的呈现就会很难受，比如饼图被压瘪或拉伸。

　　改正的方法就是按大屏的比例设计，保证大屏的正常呈现，电脑上差点无关紧要。

　　本案例中两台显示器组成32:9的屏幕投放并非是最优的方案，接下来用一个案例来详细解析。

　　案例解析

　　一个4*7的拼接大屏，分比率13440*4320，比例为28:9，如何给配置最合适的电脑比例屏幕投屏?

　　其实能找到28:9的最佳，但据我了解比较困难，我也咨询很多这方面的公司，没有定制显示器比例的服务。

　　所以就要找最接近的这个比例的显示器，在某电商平台查了个遍，最常见的有以下比例显示器：

　　1、16:9(1920*1080)

　　2、16:9(3840*2160)3、16:10(1920*1200)4、21:9(3440*1440)

　　其实根据我们上面的结论，UI设计中大屏可视化设计尺寸指南大分辨率的电脑显示器扩展性更强，所以首先考虑4k大分辨率显示器，但16:9与28:9相差过大，如下图所示：

　　这样的一个压缩程度在操作会存在一些问题，例如有交互的大屏，很小的按钮就会被压的很瘪，导致点击的精准度下降，影响操作体验。

　　下图所示，用两个屏幕组合成一个屏幕称为32:9的比例，这样是较为接近28:9，所以最为合适。

　　虽然两个16:10的显示器比例为29:9最为接近，但分辨率过低，没有很强的扩展性。

　　所以前一章节分享的反例，20:9的大屏用16:9的显示器更为合适，因为16:9更接近大屏的比例。

　　虽然理论上了我们可以找到最优的方案，但现实工作中不一样，例如某个事业单位一直都是16:9电脑屏投放28:9的大屏，你非说人家这样不行，得加个显示器，没必要!

　　我们身为设计师出于对产品的负责，可以提出建议，但不要去争论，因为影响不是很大，我们把大屏的完美呈现保证好才是最终目的。

　　总结：

　　1、要以大屏的比例去定义设计稿，保证大屏完美呈现

　　2、4k分辨率电脑，优先使用大分辨率作为设计稿

　　3、使用最接近大屏分辨率的电脑屏幕比例投放

　　大屏设计稿分辨率的计算

　　拼接的每块小屏一般是16:9的高清屏，设计尺寸可以把上下高度设定为1080px或更大的高度，我们以1080px为例，宽高按照拼接屏的数量比例算出设计尺寸。

　　例如3乘5的一块大屏幕，高度3块屏设为1080，每块高就是360，360除9乘16等640，640就是一块屏幕的长度，640乘5块屏=3200最后得出设计稿尺寸就是：高1080px乘宽3200px

　　重要知识点解析

　　下面要讲的非常重要，就是大屏的字号使用问题，因为字号返工是一件非常恐怖的事(经验之谈)，可能需要改样式，甚至重新设计都不为过。

　　我们都知道大屏的开发本身就是基于web端，网页中最小字号为12px，但这个字号在大屏中会显的很小。

　　因为大屏本身很大，观者需要站在较远地方才能看全貌，所以在字号上最好能相对大一点。

　　当然也是针对重要信息的文字，一些图表刻度尺的数值，装饰性的文字，小一些没有关系。

　　当大屏的比例较大时，字号也应该相应加大，看下图：

　　当大屏比例更宽时，观者就需要站在更靠后的位置，近大远小，字号和有些小元素需要相应加大，当然这需要根据实际场景而定。

　　我一直认为大屏设计，设计师需要去现场查看使用场景，考察观看位置，定义字号大小的运用;

　　考察室内环境，当室内的光线较强或较弱，需要用不同的颜色明度饱和度去尝试;

　　清楚了解大屏偏色情况，不同的品牌呈现的色调往往也是不一样的，这样最终才能营造一个相对舒适的大屏使用环境。

　　总结：

　　1、大屏设计字号要相对使用大字号

　　2、当大屏比例更大时，要相应的调整字号

　　3、设计师对大屏的本身和使用环境考察

　　大屏的分屏设计

　　分屏是大屏很常见的展示方式，分屏方式一般有两种，一种是通过平板电脑软件控制分屏，在可视化的呈现领域中很少用到。

　　平板电脑软件控制大屏分屏

　　另一种方式与我们设计相关，是通过多个信号源控制大屏分屏，一个信号源连接一台电脑，所以在设计时，一台电脑的显示器就是一个设计稿。

　　这种情况通常出现在非常宽的大屏上，太宽的大屏就不太适用于多个电脑屏幕组成投屏，如下图由6个信号源组成的大屏。

　　总结：

　　每个信号源对应一张设计稿，n个信号源就是n张设计稿。

　　大屏的设计是一个新兴的设计学科，它同于APP设计，都需要考虑使用场景，不同于网页设计，需要结合它独有的特征，定义设计流程及规范。

　　最后，相信认真看完以上文章的你，对大屏的设计尺寸会有一个更深刻的认识，并且当遇到类似问题，也能够迎刃而解。因此，您现在已经了解了与UI设计师的工作相关的主要技能。如果您想了解更多信息，请给我点个关注，我之后还会发包含有关在该领域工作的更多相关文章。

我原来也被这种拼接屏折腾过，效果图做出1万多像素的分辨率，实际根本不需要。浏览器会自动减少实际分辨率，不会直接用物理分辨率。这是检测浏览器中分辨率的小工具，谷歌浏览器打开就可能看到分辨率大小。
链接: https://pan.baidu.com/s/1onuE5VzQW0upr4s747LDyg 提取码: 43uz

		自动登录	找回密码
密码			立即注册

数据可视化大屏设计尺寸如何定？

相关问题更多>

最新回答