可视化大屏效果设计（可视化大屏效果设计方案）

大家好！今天让创意岭的小编来大家介绍下关于可视化大屏效果设计的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。

ChatGPT国内免费在线使用，一键生成原创文章、方案、文案、工作计划、工作报告、论文、代码、作文、做题和对话答疑等等

只需要输入关键词，就能返回你想要的内容，越精准，写出的就越详细，有微信小程序端、在线网页版、PC客户端

官网：https://ai.de1919.com

本文目录:

• 1、那些令人拍案叫绝的可视化大屏，不用代码要如何实现？

• 2、企业数据可视化大屏用什么工具去实现？

• 3、如何利用可视化组件制作一个智慧园区大屏？

• 4、大屏可视化设计尺寸-高级指南

一、那些令人拍案叫绝的可视化大屏，不用代码要如何实现？

大屏的制作，可以用代码开发或现成的可视化工具来实现。用的比较多的就是JS+Ecahrts，但数据量支撑、后台响应、实时更新、平台运维等应该还要调用更多的技术，这个不是非常懂就不赘述了。另一种是用现成的可视化工具，能相对简单高效的搭建一个数据大屏，比如帆软FineReport，阿里dataV。

大屏硬件：大屏的展示工具几乎都是LED拼接屏，如果是boss办公室这种也有用大屏幕显示器的。用LED拼接屏，UI设计时不用考虑屏幕缝隙影响内容的呈现，内容不会丢失，但有可能影响视觉的表现。设计时需要建立缝隙位置的参考线避，免类重要信息被分割。现在企业常用的有无缝隙、1.7mm缝隙、3.5mm缝隙、三种拼接大屏，缝隙越小越贵。拼接的每块小屏一般是16:9的高清屏，设计尺寸可以把上下高度设定为1080px，长度按照拼接屏的数量比例得出长度的设计尺寸。例如3乘5的一块大屏幕，高度3块屏设为1080，每块高就是360，360除9乘16等640，640就是一块屏幕的长度，640乘5块屏＝3200最后得出设计稿尺寸就是：高1080px乘宽3200px。

接下来就来讲讲制作可视化大屏的重头戏，指标、布局、设计、动效。以FineReport制作大屏为例，这篇文章将教你怎么实现可视化。

指标设计：设计大屏，大家可能会被酷炫的可视化所感动，但一定要谨记，大屏一定是以展示数据为核心，任何炫酷吊炸天的表现都要建立在不影响数据的有效展示上！所以，大屏首要考虑的是放哪些数据，那么多指标应该放那些？一般而言，一个大屏一定会有明确的主题，比如销售数据大屏，集团营业数据大屏。针对这种主题明确的可视化，推荐一个非常好用的套路——多维度拆解北极星指标法。

第一步：确定一个北极星指标。如销售大屏，你的销售总额一定是最重要的吧，这就是主题。第二步：多维度拆解北极星指标，把你的销售额情况分解。

从时间的维度。每个季度每个月的销售额情况是如何，销售额特别高的时间段，原因是什么，做了哪些措施？从地理维度。各大区域销售额情况如何？可以做个排名情况。从计划维度。和年初定的计划相比，差了多少？从占比维度。各个产品占的销售额多少，哪些是带来贡献最多的明星产品。

二、企业数据可视化大屏用什么工具去实现？

思迈特软件Smartbi的的分析工具就可以实现，全面的需求满足能力

。

大数据分析平台拥有全面的需求满足能力，无论你是哪种用户，在BI的哪个阶段流程，有什么需求场景都能得到满足。

1、全阶段：融合传统BI、自助BI、智能BI，满足BI定义所有阶段的需求。

2、全流程：提供数据连接、数据准备、数据分析、数据应用等全流程功能

3、全场景：提供复杂报表、数据可视化、自助探索分析、机器学习建模、预测分析、自然语言分析等全需求场景。

4、全用户：为数据角色提供数据处理、数据准备等功能，为分析角色提供数据分析相关功能，为管理决策人员提供资源发布、管理协同、社交协同、系统监控、权限管理等功能，实现“人尽其才”！

数据可视化大屏展示有没有用，来试试Smartbi就知道了,Smartbi产品功能设计全面，涵盖数据提取、数据管理、数据分析、数据共享四个环节，帮助客户从数据的角度描述业务现状，分析业务原因，预测业务趋势，推动业务变革。

思迈特软件Smartbi个人用户全功能模块长期免费试用

马上免费体验:Smartbi一站式大数据分析平台

三、如何利用可视化组件制作一个智慧园区大屏？

各地产业园区、工业园区、创意园区、科技园区等园区的投入建设日益增多，对于园区开发商或是运营商而言，将园区每天产生的数据实现实时管控，能够更加高效地管理园区。在当前数字化技术迅速发展的背景下，数据可视化是一个对于园区的建设和管理至关重要的概念，仅通过一张图或是一个大屏，就可以将园区的各种数据进行高度整合，实现园区数据综合监测，这就是可视化大屏的魅力所在。

接下来本文将详细介绍如何利用 山海鲸可视化 软件制作一个 智慧园区智能系统管理大屏 的全过程。

一、新建大屏

在山海鲸可视化软件中，新建大屏主要有两种方式：

①新建空白项目自行完成设计和制作：

②通过软件内资源中心进行关键词检索，载入模板后将模板数据替换成个人数据进行制作：

新建空白大屏可选择“添加新数据”，载入模板大屏可选择“替换数据源”，而以上两种新建大屏的方式均可以连接山海鲸数据管家进行数据接入。数据导入过程可以在新建大屏后导入作为备用，也可以在所有组件设置完成后再导入。

二、设置组件

设计制作一张完整的可视化大屏离不开丰富的可视化组件，在智慧园区智能系统管理大屏内运用了多个图表组件和多媒体组件进行数据搭载：

1. 2D地图组件

2D地图组件可以用来展示和地理位置相关的数据信息。

在本大屏中，以园区所在区域为例用二维地图进行展示，加入数据支撑后将数据落实在具体的地理位置，将大屏展现的数据信息与现实位置结合起来，使数据更可信易懂。

2. 环形图组件

在环形图组件中，通过将一个环形区域划分为多个子区域，从而可以反映出不同子类数据之间的对比关系以及子类数据在大类中的百分比。

在本大屏中，园区“总人数”用环形图组件展示，能直观地体现各类人才在园区总人数中的占比。

3. 雷达图组件

雷达图适用于多维数据，能直观地体现某一个对象多维度的数据。

在本大屏中，“园区分类”用雷达图组件展示，直观地体现园区中多个设备的数据，从而帮助我们了解其分布情况。

4. 数据表格组件

数据表格组件，即通过表格的形式来展示数据。

在本大屏中，园区中的行业类型和具体的公司名称的多列数据用一个数据表格同时呈现，更直观地统计了园区内各类型公司的数据。

5. 百分比图组件

百分比图组件用来显示某一指标值在整体中的占比，多个百分比图并列展示以突出各个指标在不同整体内的构成情况。

在本大屏中，园区的设备运行管理用百分比图来呈现，采用条形的表现形式进行了多组件的横向对比。

6. 分组柱状图组件

柱状图利用柱子的高度，反映数据的差异。

在本大屏中，园区人数用分组柱状图来展示，直观地体现了园区中不同区域的人员数量和差异。

7. 面积图组件

面积图组件是在折线图的基础上，对折线以下区域进行颜色填充，用于在连续间隔或时间跨度上展示数值，常用来显示趋势和对比关系（多个面积块之间的对比）。

在本大屏中，选择面积图组件来呈现园区各个区域拥堵指数，折线图体现不同区域的拥堵峰值，而面积图的对比表现出不同区域的拥堵差异。

在完成以上的组件设置后，一张智慧园区智能系统管理大屏就制作完成了。

三、导出分享大屏

大屏制作完成并保存之后，就可以进行导出和分享。

1. 导出大屏

保存后的大屏可以导出到本地，根据不同的保存需求可以导出为：

①本地可编辑项目文件：

②服务器部署工程文件：

如果想将大屏项目发给他人，而对方想要继续编辑该大屏项目，可以采用方式①；

如果想将大屏项目发给他人，而对方仅有查看大屏的需求，可以采用方式②。

2. 分享大屏

创建好的大屏可以分享为Web链接，公开分享有以下两种方式：

①在“我的项目”页面中的“全部项目”界面，点击项目卡片上的“公开分享”按钮可以打开公开分享设置窗口。

②在大屏编辑界面中点击工具栏右侧的“公开分享”按钮可以打开公开分享的设置窗口。

同时，山海鲸可视化软件提供了两种分享方式：

①软件中打开：分享之后的大屏只能用山海鲸可视化软件或山海鲸浏览器打开。

②Web 页面打开：分享之后的大屏可以使用任何浏览器打开。

以上就是利用 山海鲸可视化 软件制作智慧园区智能系统管理大屏的全过程。

四、大屏可视化设计尺寸-高级指南

前言 大屏可视化的设计尺寸定义，一直是很多设计师苦恼的一件事，很多时候大屏出现的问题，都是因为对设计尺寸没有一个正确的认识导致。比如大屏内容呈现不全、拉伸、压缩、字号小的看不见等等，出现这样的问题就会浪费时间调整返工，本期我们就来认认真真的讨论一下大屏的设计尺寸。 大屏的类别及成像

我们设计的可视化大屏通常可以分为两类：一类是拼接屏，由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、之间同比例数值，当小于电脑分辨率时开发方式要适应屏幕大小。

大屏和电脑不同比例设计

反面案例原因是设计师的设计尺寸按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）

其实根据我们上面的结论，大分辨率的电脑显示器扩展性更强，所以首先考虑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分辨率电脑，优先使用大分辨率作为设计稿

图片来源 https://www.finereport.com/

总结：每个信号源对应一张设计稿，n个信号源就是n张设计稿。 后语 大屏的设计是一个新兴的设计学科，它同于APP设计，都需要考虑使用场景，不同于网页设计，需要结合它独有的特征，定义设计流程及规范。最后，相信认真看完以上文章的你，对大屏的设计尺寸会有一个更深刻的认识，并且当遇到类似问题，也能够迎刃而解。

转自: https://tob.design/#/experience/detail/218

以上就是关于可视化大屏效果设计相关问题的回答。希望能帮到你，如有更多相关问题，您也可以联系我们的客服进行咨询，客服也会为您讲解更多精彩的知识和内容。

推荐阅读：

数据分析及可视化（数据可视化更容易挖掘隐藏的信息）

可视化大屏软件（可视化大屏软件有哪些）

怎么做可视化数据大屏（怎么做可视化数据大屏显示）

别墅院墙围墙（别墅院墙围墙及大门效果图）

山顶戏台景观设计手绘（山顶戏台景观设计手绘图片）