数据可视化大屏案例分析

很多UI设计师突然收到了公司数据可视化设计的需求。如果他们不了解数据可视化设计，他们一定会感到困惑，不知道从哪里开始。我试着简要地记录和分享我最近做过的案例。欢迎随时交流。 随着大数据产业的蓬勃发展，许多企业开始应用数据可视化。因此，数据可视化设计绝对是当今流行的设计之一。 很多UI设计师突然收到了公司数据可视化设计的需求。如果他们不了解数据可视化设计，他们一定会感到困惑，不知道从哪里开始。我试着简要地记录和分享我最近做过的案例。欢迎随时交流。 首先是项目改版前的页面: 需求介绍 XX应用云分为云综合调度、数据查询渠道、数据应用处理、数据查询渠道、管理运行维护五个云平台模块。在每个大模块下⾯表面有几个子系统。 可视化⼤屏幕主页需要显示的内容包括： (1)全局数据 云平台的数据总量，以及 4 关注数据项很重要，2 个次关注数据项。 (2)云平台5⼤大模块 综合云调度 数据查询通道 数据应用处理 数据存储管理 管理、运行和维护(只有两个)tab切换链接） (3)搜索功能 搜索类型分为 6 默认选择综合类型进行搜索。 (4)关注数据信息按指标多维显示 原图上的维度包括：指标、地图、区域排名、部分⻔门、类别。 （5）云导航 需求分析 分析大屏幕可视化的一些共性： 大屏幕：大屏幕一般是多屏拼接，整体屏幕面积大。 远程：用户需要站在远处观看屏幕，以确保数据文本清晰可见。 弱交互:大屏幕交互的需求已经不能通过电脑满足，现在有些已经开始使用了ipad、手机、激光笔等。 视觉强：背景色多采用重色，衬托突出数据，更好地向观众传达数据信息。 一屏一内容：一屏内容，说明一件重要的事情，统计其相关数据，避免其它干扰。 结合大屏幕的一些共同特点，分析了存在的问题。 布局混乱，导致视觉失衡，页面层次看不见。 蓝色是主色调 黄色点缀颜色比较单一，没有规则。 图表相对单一，无法有效传达数据信息。 结合这些问题进行视觉修改，首先优化页面布局，通过分析重新布局页面，如下图所示： 格栅对称布局 左右平衡整体视觉。 视觉设计： 了解需求，整合数据，分析主要数据次要数据、总数据细分数据、每个数据的维度等。通过理解这些，您可以首先设计布局模板或在纸上绘制，布局可以在设计过程中随时调整。 说到数据可视化，人们经常会想到一些常见的关键词，如技术、数据、蓝色等。 在与客户沟通后，我了解到客户的需求是：想做一个科技感强、视觉效果酷的人 。这也适用于这些关键词的提炼。 此外，结合大屏幕的使用场景，背景色一般选择深色调，数据变化一般选择亮色调，使视觉更好地关注数据的变化，也更节能。 主题风格构思阶段： 原图：中国地图主图模块缺乏层次感，如图所示： 修改后：地图的主色调改为科技蓝色，在原地图上增加外部发光和多层阴影叠加，增加地图的三维感觉。地图上增加科技线的效果代表了每个城市数据变化的改进。地图背景采用相对较弱的旋转线衬托出地图主体，图片更加丰富。 数据图拆分： 在选择数据图表之前，首先要确定图表之间的关系，可以从以下四个维度进行思考和分析： 联系：数据之间的相关性； 分布：指标中的数据主要集中在什么范围和规则上； 比较:数据之间的差异和差异主要体现在哪些方面； 构成:指标中的数据由哪些部分组成，每个部分的比例如何。 当确定分析维度时，我们可以选择的图表类型基本确定。接下来，我们只需要从少数图表中筛选出最能反映我们设计意图的图表。 例如，传统图表echarts上图可能不是很漂亮，可以根据所选图表进行美化设计。简而言之，选择图表最重要的两点是：易于理解和实现。 易于理解：是考虑最终用户，视觉结果应该一眼就理解，不需要思考和过度理解，所以在选择图表时要理性，避免为视觉效果选择一些不友好的图形和元素。 可实现：主要与开发初期沟通，一般采用开源组件库echarts组件库，我们设计的图形图表，需要开发才能实现。 在实际工作中，用代码编写一些可视化效果很容易实现，效果也很好，但这些效果设计师使用Ps/Ai/Ae很难模拟这些工具。 同样，设计师可以很容易地使用设计工具来实现一些效果，但很难使用代码来实现开发。因此，在大屏幕设计中与开发沟通是非常重要的。我们需要弄清楚设计师可以在哪里玩，在哪里需要仔细设计！ 一个项目总是有周期和预算限制，不会无限期地修改迭代。因此，设计师需要抓住这里的重点，做出选择，不钻牛角尖。 城市排名影响更多的视觉数据，这将影响地图显示。与客户沟通需要优化城市排名的数量，只显示前五名打破传统条形图的显示形式采用电池晶格显示形式。 从页面的整体来看，如果这里还是条形图，已经有三个地方使用了条形图和柱形图。然后页面看起来会很单调，图表也没有表现出多样性。所以现在的设计要体现图表的多样性，也可以直观的呈现排名。 以下图表采用科技圆盘的形式，利用科技线的上升状态代表排名顺序，所有图表都采用数据降序来显示排名更直观。 最后：最终视觉和动态效果图 总结 大屏幕设计的基本步骤： 需求分析 优化布局 定义设计关键词 确立主图显示风格 以上是我对数据可视化大屏幕的案例总结。巴拉巴拉终于写完了，希望对你有所帮助。 此外，还有很多地方没有涉及，包括具体设计的操作模式、选择图形元素的具体方法以及各种大屏幕所需的相应组件。在庞大的可视化大屏幕设计系统中，有很多知识值得学习参考和优化。欢迎您纠正并共同努力。 特别说明：本网站的主要目的是收集与互联网运营相关的干货知识，为运营伙伴提供便利。本网站收集的公共内容来自互联网或用户的贡献，这并不意味着本网站同意其观点，也不对网站内容的真实性负责。如有侵权行为，请联系网站管理员删除，。