如何设计大屏幕进行数据可视化？

基于实际工作，本文作者分享了大屏幕视觉设计过程中的一些问题和设计思路，以供参考和学习.

主要概述:

什么是大数据可视化屏幕

可视化大屏幕设计之前的准备工作

具体视觉设计思想的实践操作

摘要

一个，什么是大数据可视化屏幕？

每年双十一，天猫都会在Choppet Carnival播出唱片. 除了可怕的数字，我不知道您是否注意到这些同样可怕的数据可视化大屏幕；

顾名思义，所谓的大屏幕就是大屏幕！

可视化应用程序非常广泛，例如ToC，ToB，ToG等将存在. 它通常用于交易大厅，展览中心，控制中心，老板办公室等，并在巨大的LED屏幕上显示一些关键数据. 实际上，它是一个巨大的仪表板，是今天强制使用的最佳方法.

数据可视化的本质是视觉对话. 数据可视化结合了数据分析技术和图形技术，可以清晰有效地解释和传达分析结果.

第二，设计前准备

基本大屏幕制作的准备工作

确认要求: 确认显示的主题，显示的特定内容以及用于内容数据各部分的图表类型.

使用场景: 确认大屏幕的使用场景，大屏幕的设计尺寸和拼接方法（拼接屏幕像素较大，可以按比例缩放）

开发和实施: 具体设计取决于要根据项目实施的工具. 现在有许多应用程序: 通过不同的工具（例如web，u3d，ue4）实现的效果也非常不同. 根据项目的实际需求和开发成本，这种设计需要与开发之前进行充分的沟通.

设计材料: 设计整个背景图像，包​​括布局，颜色匹配等，以及大屏幕中使用的小图标元素.

制作大屏幕仅需四个步骤:

总体: 设置背景颜色，插入背景图像，页面设置等

零件

: 主要标题，每个图形的标题，动态KPI指标，图表制作等.

详细信息: 调整标题和图表的详细信息.

动态: 添加动态效果以增强大屏幕显示效果.

（以上只是一个总体思路，具体操作过程必须根据实际情况进行调整，比较复杂，最重要的是多加沟通和思考）

三，设计思想的实践实践

1. 需求分析

设计要求:

1920 x 1080分辨率，在世界地图上显示一个攻击多个目标的黑客组织，该页面应显示该黑客组织和被攻击目标的信息.

黑客组织信息示例:

名称； Mahagrass位置: 巴基斯坦活动: 80

攻击目标: 韩国，中国，朝鲜和德国（显示的信息仅供参考，可以自由发挥）

样式要求: 技术感FUI

获得要求，确定显示场景，设计大小，并与开发和实现方法进行沟通. 总体设计思路就在那里，直接打开.

2. 布局

根据习惯和数据的个人习惯，可能会安排一个布局，您可以在纸上粗略画图，然后在软件中专门优化布局.

根据梳理的需要: 它是一个大屏幕，显示黑客在世界地图上攻击各个国家的形式. 要求非常广泛数据可视化效果图，而且自我玩耍的空间也很大.

直接附加最终渲染. 这里的布局考虑到了地图上有许多浮动图层这一事实. 将数据整体放在地图的左侧和下方进行显示，以避免海图区域过大，从而影响整体地图的视觉效果.

3. 样式

根据您的需要定义一些设计关键字，以便您可以轻松找到参考并直接打开花瓣站以搜索一段时间（我个人建议转到Pinterest和behavior以获得很多很酷的fui效果以供参考到）

就样式而言，地图是指以下显示形式. 多层叠加的阴影和笔触的使用使地图整体上三维且沉重，而不是那么薄.

图片来自互联网，例如侵权和删除

4. 颜色

与网页设计显示相比，大屏幕更倾向于选择较暗的背景，不仅可以使视觉更好地聚焦，而且长时间观看后眼睛不会感到视觉刺痛. 内容部分采用了明亮的色彩系统，以确保内容和背景之间有一定的对比度，这方便了业务信息的传输. 同时，从远处看，背景暗色和明亮色系将更加直观和清晰.

5. 字体

字体使用浏览器默认的Microsoft Yahei，数字使用特殊字体DS-Digital

6. 数据图

图形是表达数据的一种常用方法，因为图形可以描述不同类型的数据，并同时使数据具有可比性. 最主要的是考虑最终用户. 图表结果应一目了然，无需思考和理解. 因此，请合理选择图表，并避免选择一些对视觉效果不友好的图形和元素.

常用的图表具有以下主要类别:

在不同时间比较一个或多个类别. 典型的图表包括折线图，条形图，堆积的条形图，蜡烛图，面积图，时间线等.

比较不同类型数据的典型图表包括直方图，分组条形图，气泡图，平行坐标图，折线图，项目符号图等.

排名主要显示项目数据的排名. 典型的图表包括有序条形图，有序直方图，平行坐标图等.

不同数据在总体比例中的典型图表为堆积条形图，饼图，环形图，堆积面积图，树形图，玫瑰图等.

以上是一些较常见的类别. 当然，还有许多未统计的未使用图表，例如散点图，气泡图，热图，网络图等，我不会一一列出（建议每个人都可以看一下开源） Internet图表，Antv等上的组件库. ）

在这里，我建议您使用一个可快速生成图表的ps插件-ps下拉框助手如图所示. 该插件集成了折线图，条形图，水平条形图，饼图，雷达图和地图）和系统UI等. 非常方便，使用选择工具拉动选择框并单击生成它的参数.

在实践中，如何通过一个键快速生成地图，消除了来回可视化地图的麻烦，让我们开始练习:

创建一个新画布，打开下拉框助手并选择地图，如图所示:

选择后，许多参数标签将被清楚地写出. 第一个块是块，可以在此处设置边框宽度颜色和文本颜色，第二个块是地图. 插件中有全国多个省市. 世界和美国的地图基本上就足够了. 您可以根据需要自定义选择. 选择完成后，单击以下载相应的数据. 网页上将弹出一个新页面，如下所示:

这是我为整个国家选择的地图. 您可以按照屏幕截图上红色框中的说明进行操作. 这很简单. 向下并直接单击以将json数据复制到剪贴板. 单击后，将在网页上提示复制成功，证明您已复制成功，然后我们将返回ps并将其粘贴.

粘贴在这里. 切记不要多次粘贴，否则将导致卡错误，并且插件中将包含提示. 粘贴后，请记住使用选择工具绘制选区，然后单击以自动绘制，如下所示:

单击“自动绘图”后，您可能需要等待一段时间. 插件需要花费时间来计算地图. 等待一会儿之后，是时候见证奇迹了，如图所示:

将生成一张中国地图，只问您是否香，并且生成的文件都是分层的矢量形状图层，您可以继续编辑. 该功能是否非常强大，其他模块的功能不会一一显示. 官方插件担心不会使用童鞋. 在插件的最后一个模块中，已仔细准备了学习手册. 单击以查看相关的视频教程. 非常详细，有兴趣的童鞋可以尝试.

摘要

1）设计之前: 您必须对用户需求有完整的分析和了解，然后您必须了解大屏幕的显示场景和设计分辨率，并且必须对拼接大屏幕的方法有一定的了解，最后与开发人员实现沟通.

2）在设计: 布局布局中，您可以简单地在纸上绘图. 根据需求定义设计关键字以优化和分析设计，以便您可以找到自己的参考. 颜色主要是深色背景. 为了更好的聚焦，数据可以是明亮的，并具有一定的对比度关系，方便商务信息的传输. 字体可以采用系统默认字体编号和特殊字体包的形式（不应根据实际需要复制此部分）. 图表分析数据，选择合适的显示形式，同时保证视觉统一性（区分页面的主要和次要关系，图表的显示不应过度设计，并且容易造成抓主体）

3）设计后: 再次检查信息层，文本大小，图表等层之间的对比度关系是否准确传达数据可视化效果图，并在与该技术同步通信的情况下实现该技术. 最后，完成开发后，将演示演示进行现场测试，以查看整体显示效果，测试输出是否存在问题，是否存在拉伸问题，缝合线是否穿插内容，并及时检查页面的开发情况. 最后，设计完成.

作者: 六；公众号: 六个视觉设计

本文最初是由@小六作为产品经理向所有人发布的，未经许可，严禁转载

标题图片来自Unsplash，基于CC0协议

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-185756-1.html