建材秒知道
登录
建材号 > 设计 > 正文

什么是大屏设计

阔达的月光
潇洒的蜜蜂
2022-12-28 13:58:04

什么是大屏设计

最佳答案
热心的毛豆
甜蜜的银耳汤
2026-05-11 02:20:42

英文:Datavisualization

把相对复杂抽象的数据通过可视化的方式以大屏为载体展示给用户,使得用户易于理解,例如每年的双十一,阿里都会用大屏直播,数据投屏,让媒体、消费者与阿里巴巴在数据层面实现了信息对称。

大屏真的很大很大所在在视觉感官上很震撼有利于营造氛围

最新回答
背后的鼠标
顺利的鞋子
2026-05-11 02:20:42

目前流行数据可视化大屏设计,为了方便大家,我把各个行业的数据大屏进行了整合设计。

作品包括两部分:数据可视化模板和图表组件

数据可视化模板:医防融合数据大屏、慢病患者数据大屏、公卫体检数据大屏、公卫随访数据大屏、家医签约数据大屏、医院数据大屏、医院运营数据大屏、互联网医院数据大屏、电商数据分析大屏、药店销售数据大屏、餐饮数据分析大屏、在线教育数据大屏、网站流量访问数据分析大屏、酒店数据大屏、店铺交易数据统计、运动健康数据分析、个人健康后台数据分析、创作中心数据分析、电商后台数据分析

图表组件:数据卡片,折线图、柱状图、饼图及其他全图表

支持软件版本:Axure8.1(兼容Axure9、Axure10)

点击此处预览完整设计

部分设计展示:

难过的胡萝卜
开放的灰狼
2026-05-11 02:20:42
一、设计前的需求确认

数据大屏的需求主要来源于以下 4 种情况——商务洽谈、展会、官网、产品自身需要。其中作者在20年做的两个大屏均是来源于商务洽谈、展会需要,更多的是为了展示公司能力,宣传产品。那么我们该怎么设计处符合项目需要的数据大屏呢?

原则1:明确大屏需求来源及场景

设计师在开始设计数据大屏时一定要(尽量)直接与需求的提出方进行沟通,确定他们提出该需求背后的诉求,是为了进行商务的洽谈?投标?还是和政府合作等,这步确认清楚带来的结果就是我们对大屏框架、数据指标的搭建、大屏视觉风格、动效、二级页面就会有个更清晰的认知。所以我们不管在面对任何需求都应该思考背后的:背景、目标用户、用户场景、需解决的问题

背景:提出需求人的立场是什么?基于这个立场我们可以做什么尽量去达成?

目标用户:考虑需求针对的核心用户,包括主要用户、次要用户等,这一步分析在于确认我们目标用户的社会属性及他们的关注点,为我们后续定方案提供设计依据。

用户场景:穷举用户会使用到的场景,提炼设计点。

需解决的问题:明确问题点,围绕这个核心问题点输出解决方案,同时也是作为后续设计验证的核心依据。

在确定以上需求后,我们便可以真正开始基于该需求一步步去实现  。对于数据大屏,首先我们应该根据展示需要确定数据重点。

原则2:业务思维,建立数据指标,提炼业务重点

例如:作者本次做的是关于智慧教室的数据大屏,所以我在确定数据大屏页面主框架前与商务部门人员沟通,确定本次K12-智慧教室数据大屏需要帮助商务部门面向教育部门领导及校长展示从全国到省市区县地区的智慧教室的使用量、累计用户数(老师、学生)、备课情况、授课情况、资源使用情况;并且基于这些指标需体现出丰富度与深度,在重要数据指标上需体现学科分布、学段分布、不同资源使用情况。

数据大屏核心业务诉求>>>

通过Xmind搭建数据指标体系,来确定数据大屏的数据层级及数据展示的优先级,便于后续我们后续确定数据大屏整体框架。

原则3:根据数据传达重点确定最适合的页面布局方案

选择依据:凸显核心数据,吸引视觉焦点

原则4:图表可视化设计

 选择依据:根据展示目的选择正确图表

根据商务需要确定大屏风格

收集市场主流竞品发现 90 %以上的数据大屏主要风格均采用:深蓝色的科技风格,因为深色背景风格与数据的基调十分契合,并且在深色背景上适合增加光效、亮眼的颜色吸引用户目光,更能聚焦视觉中心,故本次K12智慧教室数据大屏以深蓝色为主要基调,在此基调上进行风格统一的设计。由于本子项目分布广泛,并顺利出海,所以在大背景蓝色基调基础上增加地图元素,并在用信息传输线条连接的方式表现数据传输与收集。

以下数据并非真实数据

原则5:动效点缀

基于数据重点进行动效的设计,通过动效的方式吸引用户目光,将用户的视觉中心集中到大屏中间区域

最后

本次数据大屏的设计师我所在的部分第一次设计大屏,部门目前没有数据大屏设计经验,但是公司后续很多项目对数据大屏的需求逐渐增多,所以我对本次设计进行复盘,总结设计经验帮助部分后续其他同学在承接类似案子时能有个参考,并在部分内部进行分享。

数据大屏设计SOP

结束~~~~

土豪的小懒虫
愤怒的镜子
2026-05-11 02:20:42
数据可视化大屏设计经验分享,数据可视化大屏设计,是数据可视化的一种体现形式,需要从产品视角出发进行设计,根据不同类型的数据需要进行不同程度的可视化。下面分享一个我自己工作中发生的一个比较有代表性的案例,希望对你有所帮助。说起数据大屏是一种十分流行而且受欢迎的表现形式,几乎每个公司都有自己最重要的数据仓库和业务系统。

通过对这些数据仓库和系统进行分析之后,可以很好的发现公司里存在哪些问题,也可以让我们了解公司存在哪些方面、问题是如何产生的。因此,如何利用好这些数据资源是每个企业都在面临和解决的问题。比如从报表、趋势等一些常见信息入手设计出可视化大屏来帮助我们了解公司过去的业务情况、实时发展趋势等等。

一、业务需求分析

公司需要一套完整、统一的业务系统,这是所有业务人员都需要了解的,但随着业务规模的不断扩大,各个业务部门对于这套系统的需求也越来越大。比如,要帮助我们更好的了解各个部门如何去实现客户服务以及提高客户满意度等。因此,要为未来的客户服务以及提升业务效率提出一个很好的需求。所以在了解业务需求时我们需要把产品和需求都梳理好。但是由于业务系统是比较多的,所以我们要以现有业务系统为基础,先设计出一套完整的业务系统需求,然后再结合客户投诉情况及历史业绩,最后制定出客户服务和提升的方案。另外设计时要结合方案的内容选择合适的可视化大屏来呈现出最终需求。

二、数据可视化展示方案

在我们的企业里面,业务部门通常会有很多个部门,每个部门需要对每个部门的信息进行整理和分析。那么我们就需要通过这样不断地整理信息,让部门内部的信息得到更全面地了解和掌握。当然也要根据实际的需求来进行设计,比如像客户档案、客户画像、在线客服等场景。所以通过对一些常用数据集进行收集整合之后,我们就把这类数据进行整理出来做了一个可视化展示。这次我们选取的是一套有10个指标、总指标630(其中有3个指标体系中的核心指标)的数据可视化展示方案。因为报表的显示范围较大,所以我们选取了一个大尺寸报表来进行展示。

三、数据图表类的设计需求

数据图表类的分析图表包括趋势图、比例表、数量图等。通过图表来展示企业当前现状和未来趋势,是一种较为理想的分析结果呈现方式。从公司业务角度来看,需要用到这个图表;从公司领导角度来看,也可以通过图形设计和数据呈现的形式来了解公司领导意图,因此可以选择两种不同的表达方式。如果企业在发展中遇到一些新情况新问题,也可以根据这些问题进行分析,然后发现数据发展趋势;如果发展中问题比较严重或者时间已经过去很久,这时同样可以选择将数据可视化显示出来帮助我们进行决策。因此以上两种数据表在设计过程中都是非常重要的分析工具,一定要结合产品属性和企业需求来进行设计。如果你不了解的话也可以参考上面分享的几个案例中进行思考和研究。

英勇的小刺猬
听话的鸭子
2026-05-11 02:20:42
信息时代,数据是一种可贵的资源,我们可能经常听到的一句话就是:用数据说话。但是,在没有进行系统化整理之前,数据不过只是一串串冰冷的数字,我们很难从大量的数据中获取到有价值的信息。只有通过合适的可视化工具,才能更加直观的感受到数据所带来的变化,为接下来的工作提供支持,这就是可视化大屏(BI)所带来的价值。

可视化大屏是为了在大量核心数据中选择最优展现方式,它可以将业务的关键指标以可视化的方式展示到一块或多块LED大屏上,不仅可以让业务人员快速、直接地从繁杂的业务数据中找到重要数据,还可以对决策人员起到辅助作用。

今天我们以learun商业智能插件来介绍一下可视化大屏的应用及设计规则。

一.何为数据可视化

数据可视化其实就是借助于图形化手段,将数据清晰有效的传达出来。这样一来,既可以让数据的呈现效果更加直观,便于查看,还可以更加快速的挖掘到数据中隐藏的价值,其本质是可视、可交流、可互动。

可视化为什么需要大屏支持呢?因为通过大尺寸屏幕来展示数据,容易给人留下震撼的感觉,具有浓郁的科技感,便于打造某些独特的氛围或者说仪式感。同时利用其面积大、可展示信息多的特点,便于多人同时查看,数据可以以共享的方式展现在观看者面前,便于团队讨论和决策。

二.可视化大屏主要应用场景

随着大数据的发展,可视化大屏在各行业的应用也越来越广泛,变得更加普及化,尤其以政府、商业、金融、制造等行业的业务场景中,大数据的价值体现的淋漓尽致。比如,数据大屏作为一种有效传递信息的手段,正在城市智能运营中心、应急指挥中心、公安监控中心、电力调度中心、金融交易大厅等部门和机构中承担起重要的角色,具备日常监测、分析研判、应急指挥、展示汇报等多种功能,在提高科学管理工作等方面发挥了重要的作用。这里提供一些行业模板,以作参考。

三.可视化大屏设计原则

很多人对可视化大屏的第一印象就是炫酷,但是炫酷为其表,数据传达的清晰有效,才是大屏的重点。

大屏中通常有多种资源类型及数据需要展示出来,但是需要进行页面布局来将主要信息和次要信息展示出来,明确层级关系和流向,使观看者能快速获得信息的同时,也能获得视觉平衡感。

一般情况下,如果企业要开发出一款大屏,需要经历:需求沟通——大屏UI设计——大屏数据开发——大屏前端开发,这一系列步骤流程。总的来说需要遵循以下原则:总览优先,细节辅助。

1.是要服务于业务,让业务指标和数据合理的展现

由于往往展现的是一个企业全局的业务,一般分为主要指标和次要指标两个层次,主要指标反映核心业务,次要指标用于进一步阐述分析,所以在制作时给予不一样的侧重。

2.合理的布局能让业务内容更富有层次,合理的配色能让观看者更舒适

配色的学问主要是背景色,背景色又分为整体背景以及单个元素的背景,无论是哪一个,都遵从两点基本原则:深色调和一致性。深色调是为了避免视觉刺激。

3.在大屏展现上,细节也会极大的影响整体效果

通过适当给元素、标题、数字等添加一些诸如边框、图画等在内的点缀效果,能帮助提升整体美观度。

4.动效的增加能让大屏看上去是活的,增加观感体验

但过分的动效极其容易喧宾夺主,反而丧失了业务展现价值,我们需要把握一个度,既要平衡酷炫效果,又要突出内容。

目前市面上有众多可视化工具,有的为了实现其功能效果而令人感到枯燥乏味,有的为了看上去绚丽多彩而做得极端复杂,企业决策者难以从中理解数据的真正价值。

LeaRun商业智能插件是基于浏览器的、用于配置数据可视化大屏的工具平台。它提供了丰富的可视化设计组件,通过简单的点击、拖拽等操作,即可进行图表布局的调整,只要几分钟就可以配置出一页实用且炫酷的可视化大屏。

专业的数据分析软件旨在帮助企业提供从内外部数据源整合、数据治理到探索式分析,以及最终实现智能化决策的大数据分析能力,助力企业构建数据生态系统,帮助企业降本增收和实现数据资产的变现。

Windy.

帅气的飞机
聪明的月亮
2026-05-11 02:20:42
自从跟大家分享第一篇 《大数据可视化大屏设计经验,教给你!》 ,很多小伙伴都会问我一些相关的问题,看了小伙伴给我发的视觉稿,整体都还不错,但是发现图表的设计都有一些问题,大家可能对数据可视化的图表设计经验少一些,所以这篇文章就挖掘一下图表的细节表现,分享我曾经遇到过的坑和对图表设计的理解。

图表设计 

图表设计概念

图表设计是数据可视化的一个分支领域,是对数据进行二次加工,用统计图表的方式进行呈现,也是数据可视化的核心表现,图表设计既要保证图表本身数据清晰准确、直观易懂,又要在找准用户关注的核心内容进行适当的突显,帮助用户通过数据进行决策。

下面分析三种常用的可视化图表设计:

折线图

折线图常用于表示数据的变化和趋势,坐标轴的不同对折线的变化幅度有很大的影响。

左图坐标轴设定的太低,折线变化过于陡峭,图中数值区间为(10-34)数据可视化的表现过于夸大了折线变化的趋势。

右图坐标轴的数值设定的太高,则折线变化过于平缓,无法清晰的表现折线的变化。

合理的折线图应当占据图表的三分之二的位置,图表的X轴数值范围应根据折线的数值增减变化而变化,这需要跟前端小哥哥小姐姐说明,做成动态计算。

折线图的折线粗细要合理,过细的折线会降低数据表现,过粗的折线会损失折线中的数据波动细节,视觉上较难精准找到折线点的相应数值!我通常用两个像素的线,看起来比较合适!

右图刻度线颜色过重,影响图表数据的表现,零基线跟图表内的刻度线对比不够明显,整体很乱。零基线是强调起始位置的,一般要比图表内的线颜色凸出一些。

条形图/柱状图

理想很丰满,现实很骨感。这个案例是我之前在工作中遇到的问题,数据进来后,被吓到了,问题的原因是没有跟前端小哥姐沟通好,他们把X轴写死,导致出现这种问题,其实应该情况要把这些图表的取值范围写成动态计算的。

例如,以现在数值范围为例,数据的最高值为18,X轴最高数值应该为25,当数据又上升一定的高度后,X轴再上升到相应的数值高度,这样避免了如右图的问题。

坐标轴的标签文字最好能水平排列, 当X轴标签文字过多时,不建议倾斜排列、上下排列、换行排列 文字多了这样的展示大大降低了阅读性!下图给出两个解决方案,大大提高标签文字的阅读性!

解决方案

柱子之间过于分散就会失去数据之间的关联性,过密就会变得数据之间没有独立性更不利于舒适阅读。

当柱子为n时,柱子直接的距离建议与n相差不要太大,柱子靠边的距离,最好是柱子之间的一半的距离,这样视觉上最为舒适。

饼图

左1图,不建议在饼图内与百分比数值一起显示,饼图本身的形状和大小,文字过多时容易溢出,如果出现一个2%一个1%,就很难辨别图形指向,这样也就失去了数据可视化的意义,PPT通常有这样的设计样式,因为是个死图。

左3图,人的阅读习惯是从左到右,从上到下,所以数据从大到小排列,更有助于阅读,图形也更具美感!

当饼图为检出率,或者一些重要信息检测的重点关注数据,就不建议大小数据顺时针排列,左1图这种情况一般很少出现,因为关注的是检出数值,展示未检出数据实为鸡肋,可能是极少情况的需要吧!

右图对于类似检出率的数据最为合适,直观清晰,没有无用数据干扰!

当饼图的标签维度过多时,就不适合把数据围绕饼图一周展示,会很乱,不易阅读,解决方案如右图!

图表分类图

分享一张图表分类大全,保存起来,设计数据可视化产品,会有重要参考价值!

这张图由设计师Abela对图表的各种特征进行了大致的概括总结。

兴奋的抽屉
强健的宝贝
2026-05-11 02:20:42
如何做出好看大屏,首先要弄清楚这几个问题:

一.如何选择有效的图表,数据的呈现,什么才是最佳展示方式?

二.大屏设计需聚视线忌杂乱,如何设计思考,建立有策略的图形化层级?

三.你的大屏主体是谁,谁是你的用户群体?

具体内容太多,可以搜索“迪赛智慧数”为您详细解答。 可以去上百度看看。

高贵的衬衫
整齐的诺言
2026-05-11 02:20:42

对于0基础入门的小白而言,从空白画布开始制作一张数据大屏十分困难,希望我接下来的案例流程分享,能带给你一些帮助。

步入大数据时代,各行各业对数据价值的重视程度与日俱增,近年来,大屏广泛被运用在各种领域,把关键数据集中展示在一块屏幕上,用一种绚丽酷炫的方式呈现。

但判断一个数据可视化大屏好坏的依据,绝不仅仅只是华丽酷炫的外表,而是需要兼备内容与形式,还要帮助人们去发现问题解决问题!

那么设计一个数据可视化大屏,要经历哪几个步骤?我将通过之前与煤矿安监局合作的真实案例,来详细阐述这个问题。

一、可视化数据需要基于用户业务场景

本项目的核心工作是煤矿风险统计界面的交互及视觉定义,系统展示载体为大屏。大屏展示系统的核心是对数据信息的处理及描述,最终以可视化的方式呈现给用户,又称为数据可视化。

然而,若脱离真实用户需求及使用场景,没有依据的盲目设计,数据最终的呈现也无法满足真实业务需求。

我们以用户需求为设计核心,帮助客户重新梳理出业务目标用户,围绕用户分析数据需求以及数据之间的展示层级关系,最终将需求落地到页面, 合理地将风险统计数据在大屏上实现可视化,把相对复杂、抽象的数据以目标用户更易懂的方式呈现出来。

01、目标用户分析

用户角色不同,对同一产品的需求也会有差异,通过需求沟通以及访谈,我们最终确定产品核心用户分为各级领导、监控作业人员两类,并对两类用户的需求进行了差异化分析。

02、功能需求点分析

从原版界面信息以及与客户的沟通中我们得出,在大量冗杂数据中查看需求,容易造成互相干扰以及认知的困惑,我们根据用户需求以及场景关联分析对页面信息进行了重新的归类以及分级。

03、原版问题点分析

通过需求调研并配合快速走查,我们归纳出原版界面的问题点,有效指导后续设计,在后续设计过程中针对性地进行优化、规避以及反复验证,有效的指导整个设计流程。

原版大屏界面设计问题点如下:

二、重新定义数据呈现方式

结合大屏使用环境,我们对页面配色进行了重新定义,保留用户对风险等级的颜色认知习惯,对原始等级配色进行微调,以保证色相之间的和谐度。

界面展示空间为室内,日常灯光采光均匀,界面以暗色白字为主色调可以在突出数据的展示的同时增加科技感,各风险数据图表也更醒目。

数据的展示应该服务于内容、服务于需求,我们在设计中弱化了形式化的设计,以内容优先。

同时好的设计也需要考虑技术的可实施性,设计中我们要应该更多地考虑降低实现成本,抓住重点,最终我们采用了扁平化的图表处理,兼顾了实现成本与加载效率。

原版的数据图表把所有信息同时堆叠在界面中,大而全的做法看似能让观者看到更多信息,其实无形中加大了观者的阅读成本,需要用户自行比对不同图表中相关信息的关联。

同时除了一级风险,其他风险等级的城市排行是没有办法查看的,进而丧失了排行数据查看的意义。

根据展示的数据类型和客户数据查看需求,我们进行了重新的数据图选型,将原来图表用型错误、数据混乱的信息也重新整合,最终选定饼图、条形图以分别查看查看“构成型”数据和“比较型”数据(排行)。

三、总结一下

在其他领域,大屏数据可视化技术同样也扮演着举足轻重的角色,在大屏的设计思维上也必然需要更有前瞻性的扩展,设计者需要从不同场景出发,满足用户多元的需求。

以上,望有帮助。

辛勤的菠萝
愤怒的季节
2026-05-11 02:20:42
最近在实际项目中积累了一些经验,以及看到很多大神们的分享,不断学习和丰富关于大屏设计的特点及数据可视化的表达方式。以下经验来自于多处资源,希望对有这方面需求的同学有所帮助。

大屏显示的一些特点:

1.面积巨大——用户站远才能看全内容(所以字也不能设计很小)

2.深色背景——紧张感强,让视觉更好的聚焦,省电

3.不可操作——大屏主要用来给来用户看的。用户一般不会直接操作大屏

4.空间局限——大屏不像网页有滚动条,它的长宽都是固定的

5.单独主题——每块大屏都有具体想给用户表达某个主题

第一步、调查研究

需要调研的点:

1.大屏的主题——这个屏用户要看什么信息(要规避哪些信息)

2.数据的权威和准确性——对具体要展示的信息进行数据的核对正常数据是多少,历史上极限数据是多少?

3.用户的其他需求点——用户说要用TOP10,但有时候只是用户只知道TOP能表达,还有很多形式也能表示TOP的信息

第二步、视觉效果定位(脑暴穷举、分类去重、投票确定)

紧张:数据的实时,动效的变化

科技:新颖的图表,新颖的动效

丰富:数据丰富,丰富层次感,图表类型多,强烈的空间感

权威:安全元素

第四步、数据表现元素

常规数据表现元素:地图,top10,饼图,列表,数字,趋势等。

如果在多个屏上都只放这些元素,展现上会缺乏很多心意,业务差别性也不好体现。所以需要对每个需求再剖析。

第五步、需求分析,数据挖掘

1.拆分维度——将需求拆分到最小维度

2.确定优先——选择最佳数据来说明观点

3.合并维度——对维度元素进行归类,化繁为简

4.最佳表现——确定用哪种表现形式来体现数据

举个栗子:

在做这一系列的具体某一个屏时,某业务需要大屏展示的内容:我们的业务针对特定区域的保护,正在实时防御着世界各地多类型的攻击。能看到每个攻击类型的当天累加值和趋势。

对于这个内容,我们先进行拆分维度。你们能看到多少维度呢?(一定要拆到最小维度)

接着,确定这些维度的主次优先级。

对这些信息进行相似度归类,化繁为简。关联性最多的维度用同一种颜色表示,画出所有的关系。

上图表示,所有的维度互相关系。我们可以发现时间维度和所有的内容都有联系。

但是时间又是个隐形的内容,大屏上的数据为了表示紧张性,时间如果是实时展现的。那么这个维度在设计的时候不必要用某个具体的视觉元素来表现,是通过在时间节点上的动效变化来表现的。所以我们把这时间线去掉,并对交错关系的维度进行位置的调整。

理清逻辑关系,我们最常用的一个方法就是借助于思维导图,这样我们能更加清晰知道业务需求以及数据关联性。

关系理清楚后,我们接下来可以就行规划设计了。

第六步、规划设计

在这块主要是细节和感受的设计。

1.模块设计——考虑的模块纵横栅格布局设计

2.维度表现——具体维度用什么表现的确定

3.动效设计——时间的把握和情感的控制

4.数量控制——对实施数据的不可控性进行展现上的控制。考虑数据极端情况效果太密或太疏,如何规避

大屏和其他显示屏一样,本身都是有固定分辨率的。

拼接大屏 :大屏几乎都是拼接屏,UI设计时不用考虑屏幕缝隙影响 内容 的呈现,内容不会丢失,但有可能影响 视觉 的表现,例如一个很大的人物图像被缝隙正中“劈成”两半,或者“劈中”了眼睛,看起来很不舒服,所以设计时可以建立缝隙位置的参考线避免类似情况发生。(现在企业常用的有无缝隙、1.7mm缝隙、3.5mm缝隙、三种拼接大屏,缝隙越小越贵)

设计尺寸: 拼接的每块小屏一般是16:9的高清屏,设计尺寸可以把上下高度设定为1080px,长度按照拼接屏的数量比例得出长度的设计尺寸。例如3乘5的一块大屏幕,高度3块屏设为1080,每块高就是360,360除9乘16等640,640就是一块屏幕的长度,640乘5块屏=3200最后得出设计稿尺寸就是:高1080px乘宽3200px。

第七步、检查测试

1.重视需求——过一遍需求是不是能够满足。

2.实地测试——将效果放上大屏,看是否方便阅读,动效是否达到预期,色差是否能接受。

3.可信性测试——当自己的讲解员,给用户讲解大屏。能否一句话描述大屏,同时用户能够理解。

设计大屏一定是一个长期跟进的过程。有很多问题会在真正数据进来了,放在大屏上显示才能发现。

整个项目的流程

那让大屏怎么看起来更炫酷,简单的总结几个方法:

1)布局排版

大屏首先是要服务于业务,让业务指标和数据合理的展现。由于往往展现的是一个企业全局的业务,一般分为主要指标和次要指标两个层次,主要指标反映核心业务,次要指标用于进一步阐述。所以在制作时给予不一样的侧重。

2)色彩

背景色又分为整体背景以及单个元素的背景,无论是哪一个,都遵从两点基本原则:深色调&一致性。

整体背景深色系,可选的余地还是很多的,但是配起来能让多数人都觉得好看的还是以深蓝色系为主,如下所示是几个推荐的配色方案。根据实际项目经验,这里极其推荐大家为单个的组件元素搭配一些透明色,透明度设置在10%上下为宜,具体以实际效果微调。

3)点缀效果

细节影响感官体验,在大屏展现上,细节也会极大的影响整体效果。通过适当给元素、标题、数字等添加一些诸如边框、图画等在内的点缀效果,能帮助提升整体美观度。顶部的标题通过左右两个对称线条进行点缀,各个组件的细分标题通过不规则渐变色图片进行点缀,另外每个组件都搭配使用了简洁的边框以提升层次感。

4)动效

动效的增加能让大屏看上去是活的,增加观感体验。

以下举几个案例:

阿里在数据可视化方面已经做的相当超前了,早在2015年的双11销售数据就使用DataV数据可视化引擎搭建数据大屏。

以上大屏利用了DataV数据可视化引擎,以日常图表组件库d.chart以及地理相关组件库d.map为基础,专业数据可视化模板设计为视觉框架,依托cube前端框架搭建起来的web服务。通过该引擎可以利用已有组件低成本还原设计师产出的原型图,快速完成多种数据源的绑定,并通过最终的可视化配置调整系统完成所见即所得的视觉调试,最终产出数据大屏。

工作模式:由之前的“设计->开发”变为“设计->开发->设计->开发”,做到高度还原设计效果。

市场上很多可视化的工具,像帆软和Tableau都是都是数据处理分析软件,两个各有特点。

可以根据业务需求,选择工具,来展示自己的大屏。

以下打开finereport设计器中,按照布局样式,从组件栏拖入对应的图表元素到指定区域并绑定数据。

点击预览按钮,浏览器端的效果如下图所示。

接下来就是配色、点缀和动效了,可根据需求调整界面效果。

还有很多值得推荐的可视化工具,以下列出几个,供大家学习:

Raw 、 Infogram 、 ChartBlocks 、 Visualize Free 、 Visual.ly 、 iCharts

Chart.js 、 D3.js 、 FusionCharts 、 JavaScript InfoVis Toolkit 、 jQuery Visualize 、 ZingChart 、 Flot 、 Gephi

地图数据可视化工具

CartoDB 、 InstantAtlas 、 Polymaps 、 OpenLayers 、 Leaflet

纯可视化图表生成/图表插件——适合开发,工程师

Echarts( echarts.baidu.com )、AntV ( antv.alipay.com )、HighCharts ( www.hcharts.cn )

可视化报表类——适合报表开发、BI工程师

FineReport ( www.finereport.com )

商业智能分析——适合BI工程师、数据分析师

Tableau ( www.tableau.com )

FineBI ( www.finebi.com )

Power BI ( powerbi.microsoft.com/zh-cn/ )

可视化大屏类

阿里DataV ( data.aliyun.com/visual/datav )

数字冰雹 ( www.digihail.com )

这是最近几天对数据大屏的一些学习,在这里进行分享。

如果感觉有帮助,请点赞啦,谢谢~~