数据可视化大屏设计经验分享 【进阶篇】
说起数据可视化设计，如今绝对是热门的设计之一，而真正懂数据可视化设计的设计师却不多，随着大数据产业的蓬勃发展，很多企业都开始应用数据可视化。很多UI设计师突然会接到公司数据可视化设计的需求，如果不了解数据可视化的设计，那么肯定是一头雾水，不知从何入手。
什么是数据可视化？数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。简而言之就是把枯燥无味的数据，通过图形化设计表现，达到一种更加精准和高效的数据分析和表达。下面要跟大家分享的是，我经手的一个真实数据可视化大屏项目改版，接下来会分享给大家一套全面的数据可视化技法，包括科学的运用图表、运用色彩、把控数据层级以及视觉层级，达到美学形式与功能需要齐头并进。案例解析
首先看下线上旧版的设计，分析存在的问题。（长屏需要横屏观看）
问题
1、左侧大面积文字导致视觉不平衡，且密集
2、整体用色暗淡，图表用色没有规则
3、图表运用不恰当，不能有效传达数据信息
4、缺标题，数据信息优先级排列不恰当
结合这些问题作出了改版，（长屏需要横屏观看）
因为是改版所以能够看到线上真实的数据信息，这样旧版的数据呈现就能给到重要的设计参考价值，例如能够知道TOP10热门关键字大概是几个字，在设计图表时就会依据字数的长短来参考设计，也可以知道是否有极端数据，从而运用更适合的图表呈现等等。
下面依次对照新改的版本，解决旧版出现的问题。
问题一：
1、左侧大面积文字导致视觉不平衡，且密集
注解：
由于左半部分有大篇幅的文字，视觉上会显得密集，容易视觉疲劳，右半部分大面积的色块图表使得整个界面视觉上不平衡。
解决方案就是在把文字用排行榜图形分开，放到文字中间部分，这样就丰富了只有文字的单调设计，整体视觉较为平衡和谐，并且这样还能够突出强调重要数据信息。
问题二：
2、整体用色暗淡，图表用色没有规则
注解：
提取旧版的颜色，色彩很暗淡，对于深色背景来说，这样的配色方式并不会有好的视觉表现。
暗色背景通常用高饱和高明度的颜色，对比暗色背景更能聚焦视觉，突出数据可视化的表现，亮丽的色彩能够让数据可视化设计的更加绚丽。
数据可视化大屏设计慎用大面积的渐变色，小面积可尝试，一般大屏都是拼接屏，品牌不一样色差会表现不一，所以初稿出来后可以先去大屏上看下效果。
注解：
图表用色没有规则，上图三个图表都表现 “正面” “中立” “负面” 三个维度数据信息，但在用色上没有一个统一的规则，例如三个图表中黄色分别代表不同的维度信息，这样就无法建立观者的认知。
“负面”有警示的作用，运用红色调较为合理，“中立”色彩情绪上适合黄色调，黄色会给人中性的感受，例如马路上的等待的黄灯，例如一片树叶从绿色到黄色再到枯萎灰色，给人一种过程中的中立情绪感受等，“正面”就是给人积极的一面，所以绿色或者主题色蓝色都是很恰当的。
问题三：
3、图表运用不恰当，不能有效传达数据信息
注解：
同一个界面中左侧文字TOP10属性类似的“核心媒体TOP10”展示形式最好能有共性。旧版运用了柱状图并不恰当，尤其是标题字数过多时候并不推荐使用柱状图文字倾斜的展示方式，改版后加上相同的排行榜图标，数据直接展示出来，TOP10的效果会更好。
注解：
数据需要对比分析，显然这个玫瑰图表并不能很好的说明对比，每个维度大小排列没有规律，实际数据分布不均匀，导致没有对比的效果，改版后突出总的数据，用条形图从大到小依次排列各维度数据，数据上有对比，视觉上更有主次。
注解：
首先是旧版用色不恰当，最严重的问题是图表上没有任何数据，因为展示型的大屏，很少有交互行为，这样的设计是不可取的，不能让观者去猜百分比数据，数据可视化就要用图表数据的形式展示出来最直接的信息，除非是展示趋势并不是准确的数据。
注解：
旧版用的条形堆积图，其实更适合百分比数据的对比呈现，一个维度下面有若干个子项，比较适合分组柱状图（新改版为分组柱状图）或者分组条形图更为恰当。
注解：
旧版色彩搭配不和谐，趋势图需要突出趋势线，而不是体现数据的面积，红框注释不够直接尤其在颜色过多时，更不好分辨各个颜色指向的维度，新版的设计则能够准确指出各个维度的趋势线。
问题四：
4、缺标题，数据信息优先级排列不恰当
注解：
新闻的标题跟转发数才是观者的，而来源和时间就是次要信息，所以视觉上要为观者分出层级，这样不仅能够使观者看着更舒适，视觉上也很有层次，不杂乱。
旧版标题、来源、时间、转发数、都是相对于内容居中的状态，这种排版是不符合表格排版规则的，简单的做法就是文字左对齐，数字右对齐，数字右对齐能够更快速识别数据量大小，跟其他数据的对比，文字左对齐则是根据人从左到右的阅读习惯。
之前专门总结过一篇数据表格如何排版的文章，想了解的朋友，文章下面有数据可视化系列文章链接。
注解：
设计数据可视化大屏时一定要考虑用户浏览数据的优先级的构架，例如要遵循先总后分，先具体后抽象的逻辑，上图旧版把趋势放到了页面的第一视觉位置，就有点宣兵夺主了，根据先具体后抽象，改版后具体数据放到第一视觉位置，趋势信息排后。
旧版大屏没有标题，我是谁？我在干什么？我要去哪里？所以标题务必得有。
总结：说了这么多设计要点，新手可能还是不知道设计的切入点在哪里，所以总结一个数据可视化设计分三步走法。
第一步：了解数据要表达的本质。
拿到一组数据，先分析主次，这组数据要表达什么？是展示数据，还是对比数据，或是实时监控数据，从而确定展示的优先级。
第二步：确定使用图表。
通过了解数据要表达的本质后，选择适合他的图表，这时候就需要打开几个开源的图表网站找图表，记住你的图表用的是网站的哪一个，开发如果找不到就丢给他网址。
网站有：Fusion Design、蚂蚁数据可视化-AntV、ECharts Examples、Highcharts
第三步：整体效果调整
功能性的数据展示都没问题，还要看下整体效果，例如用了过于多的柱状图，可能就会影响了整体的美感，图表尽可能多样性，数据表达信息就要用不同的图表展示。
最后数据可视化设计核心就是，通过美学设计形式把数据精准和高效的分析和表达。
数据可视化设计是目前较为热门的设计工种，通过本文分享的项目迭代案例，希望能够让你对数据可视化有些许了解。
互联网设计帮（公众号）
作者：吴星辰
数据可视化大屏的前景如何
DCV作为新一代数据中心可视化管理平台，让管理人员可以清晰直观地掌握IT运营中的有效信息，实现透明化与可视化管理，进而有效提升资产管理与监控管理的效率，实现立体式、可视化的新一代数据中心运行管理。(模模搭)提供了一个完整的、 网络化、可视化的三维虚拟环境设计编辑平台，操作简便，高效易用，用户可...
数据可视化大屏的前景如何?
而 HT 拥有一套完整丰富的 2D 组态可供用户快速上手搭建，展示上拥有独特的主题风格设计，在各种比例下不失真，加上布局机制，解决了不同屏幕比例下的展示问题。通过数据对接的载入，可以搭建出一套完整的数据可视化系统的解决方案，应多各种行业上数据展示的需求。对于需要大屏展示数据并且追求数据展示精准...
Datav:从零开始的数据可视化大屏搭建系统
Datav：数据可视化大屏搭建的革新之旅 在Shopee的业务场景中，数据可视化的需求曾面临巨大挑战：每个季度3-4个Dashboard项目，平均耗时40天，需要50多位员工的辛勤付出。然而，我们希望建立一个高效且低成本的数据可视化平台——Datav，以重塑业务流程，实现目标：周期缩短至20天，人力成本显著降低。Datav的...
如何利用可视化组件制作一个智慧园区大屏?
新建空白大屏可选择“添加新数据”，载入模板大屏可选择“替换数据源”，而以上两种新建大屏的方式均可以连接山海鲸数据管家进行数据接入。数据导入过程可以在新建大屏后导入作为备用，也可以在所有组件设置完成后再导入。二、设置组件 设计制作一张完整的可视化大屏离不开丰富的可视化组件，在智慧园区智能...
精选!数字大屏模板,看这一篇就够了
数字大屏模板是数据可视化的重要工具，它在兼顾视觉冲击力的同时，关键是要清晰、有效地传递信息。许多人在设计时往往过于追求炫酷的外观，却忽视了数据的准确呈现，这就背离了大屏设计的核心目标。大屏应用广泛，主要包括监控预警、实时指挥、信息公示和公开汇报四大场景。例如，监控预警类大屏如生产车间，...
可视化大屏设计
一般情况下设计稿的分辨率多为1920 x 1080，同时需要要理解四个概念：最佳展示效果 数据墨水比例原则表达的核心思想使简洁，图表要简洁，数据要简洁。大屏可视化是针对客户场景，理解数据复杂性的基础上，通过可视化手段，形成高度提炼的故事。数据可视化通俗说就是用图表讲故事，人们关心的从来不是数据，数据...
问下做三维可视化大屏展示需要多少费用?
3D可视化集成管理系统制作价格一般在30-80万之间，除了大屏硬件费用外，比较烧钱的属于系统开发，不同需求及功能对价格影响较大。【欢迎点击了解更多相关信息】 首先，我们普遍接受技术高于实物，物体可以复制，仿造，但技术达不到就无法实现，尤其是聚合了数种高新技术，像AI、大数据、数字孪生等技术，都...
商业智能(BI)可视化大屏的设计及使用原则
这里提供一些行业模板，以作参考。三.可视化大屏设计原则 很多人对可视化大屏的第一印象就是炫酷，但是炫酷为其表，数据传达的清晰有效，才是大屏的重点。大屏中通常有多种资源类型及数据需要展示出来，但是需要进行页面布局来将主要信息和次要信息展示出来，明确层级关系和流向，使观看者能快速获得信息的...
大数据可视化设计到底是啥,该怎么用
最后还需要检查测试,从头到尾过一遍是否满足需求;实地投放大屏幕后,用户是否方便阅读;动效能否达到预期,色差是否能接受;最后我们用一句话描述大屏,用户能否理解。 三、案例二:白环境虫图可视化设计如果手上只有单纯的电子表格(左),要想找到其中IP、应用和端口的访问模式就会很花时间,而用虫图(右)呈现之后,虽然增加...
大屏数据可视化展示
小编之前也曾经在一个团队里为公司做过可视化大屏，经历了与需求方的不断交涉、优化，最终做出了几张比较满意的大屏：这样的大屏不仅拥有着高端的科技感，而且都是经过了多次的版面设计和修改，这次大屏效果在同行业内部交流过程中反响不错。下面我就给大家介绍一下用FineReport这款个人免费软件，是如何...
超袁银丹： UI设计创新技能层出不穷,UI设计满足着形形色色各种垂直化的需求, 数据展示方面的设计,相信大家也会经常用到,今天小编就针对数据可视化设计的技巧进行简单的说明.为什么数据可视化设计非常重要?数据可视化的目的是以一种用户更...
福海县15241682060： 如何将维度和数据更加直观的表现出来 - ？
超袁银丹： 数据可视化的设计,初步有些成果,借此总结下自己设计时的步骤与方法.设计中经过多次反复,但总体可以归为以下3步. 1.分析数据 想要清楚地展现数据,就要先了解所要绘制的数据,包括元数据维度、元数据间关系、数据规模.元数据在...
福海县15241682060： 数据可视化大屏展示的效果怎么样?用哪个系统呢 - ？
超袁银丹： 大数据时代,越来越多企业不甘落后,开始重视数据运营,开启了一系列数据储存搜集工作,一步步组建起一个具有潜在价值的大数据库.当然,众所周知,数据库里的数据要得到合理应用,辅助业务发展,才能是真正的发挥了价值.此外,随着数据分析技术的发展,其复杂性也越来越高,BI数据可视化工具的展示和读者使用习惯的要求也越来越高,数据可视化大屏展示的功能得到更加广泛的重视与应用.大屏可视化展示系统让更多背后隐藏的数据被发现,被阅读,发挥数据的价值.我个人喜欢OurwayBI
福海县15241682060： 国内的数据可视化应用发展怎样 ？
超袁银丹： 数据可视化在当下信息时代已经成为炙手可热的话题,而 B/S 化趋势,也使得许多大屏应用上在网页端出现,今天给大家分享一套不一样风格的大屏页面,与传统深蓝色不...
福海县15241682060： 数据可视化如何让大数据更加人性化 - ？
超袁银丹： 每天都有海量的数据出现,依靠传统的人工方式去呈现数据价值,可能一辈子都处理不完.我们需要新的软件和技术,去更深入的理解和利用大数据集合.最佳的方法是提高数据可视化的水平.康拓普数据洞察平台,专注于大数据可视化技术,...
福海县15241682060： 让数据可视化充分体现的注意事项有哪些 - ？
超袁银丹： 不同的数据可视化系统会有不同的功能哦,不过例如科睿数据可视化系统之类的专业系统基本都会有交互功能、实时数据或者监控画面接入、内容更新、场景演示等等
福海县15241682060： 抖音上的大数据可视化怎么做的呢 - ？
超袁银丹： 推荐你使用观想报表,可以快速的制作多终端显示的数据可视化,尤其是大屏显示,观向报表系统里面有非常的多图表样式,除了大屏显示,还可以移动端、pc端、大屏等多终端显示,制作图表就像在线ps一样,根据需求对接多种数据库或者本地数据(Excel),快速选择图表样式,调节出自己喜欢的风格(例如蓝色科技感).注:完全不需要敲代码.而且可以本地部署,可以去试用一下.
福海县15241682060： 有哪些好用的数据可视化工具 - ？
超袁银丹： 数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息.但是,这并不就意味着数据可视化就一定因为要实现其功能用途而令人感到枯燥乏味,或者是为了看上去绚丽多彩而显得极端复杂.为了有效地传达思想概念,美学形式与功...
福海县15241682060： 大数据可视化工具哪个做出来最漂亮 - ？
超袁银丹： 非编程篇/可直接上手的工具1. Excel Excel是最容易上手的图表工具,善于处理快速少量的数据.结合数据透视表,VBA语言,可制作高大上的可视化分析和dashboard仪表盘.单表或单图用Excel制作是不二法则,它能快速地展现结果.但是越...
福海县15241682060： 大数据可视化需要哪些类型的呈现形式 - ？
超袁银丹： 1.可视化是连接用户和数据的桥梁,是我们向用户展示我们的成果的一种手段,因此可视化并不是非常特化的研究领域,它可以有非常广泛的应用和创建途径.作为非计算机专业的人员,你可以借助现有的程序和软件,根据自己数据的特点,绘...
