可视化大屏设计思路-大屏可视化方案

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

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

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

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

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

本项目的核心工作是煤矿风险统计界面的交互及视觉定义,系统展示载体为大屏。

大屏展示系统的核心是对数据信息的处理及描述,最终以可视化的方式呈现给用户,又称为数据可视化。

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

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

01、目标用户分析

用户角色不同,对同一产品的需求也会有差异,通过需求沟通以及访谈,我们最终确定产品核心用户分为

各级领导、监控作业人员

两类,并对两类用户的需求进行了差异化分析。

02、功能需求点分析

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

03、原版问题点分析

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

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

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

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

和谐度

。

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

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

以内容优先。

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

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

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

根据展示的数据类型和客户数据查看需求,我们进行了重新的数据图选型,将原来图表用型错误、数据混乱的信息也重新整合,最终选定

饼图、条形图

以分别查看查看“构成型”数据和“比较型”数据(排行)。

三、总结一下

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

以上,望有帮助。

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

大屏显示的一些特点:

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 、 、 iCharts

、 、 FusionCharts 、 JavaScript InfoVis Toolkit 、 jQuery Visualize 、 ZingChart 、 Flot 、 Gephi

地图数据可视化工具

CartoDB 、 InstantAtlas 、 Polymaps 、 OpenLayers 、 Leaflet

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

Echarts( )、AntV ( )、HighCharts (

)

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

FineReport (

)

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

Tableau (

)

FineBI (

)

Power BI ( )

可视化大屏类

阿里DataV ( )

数字冰雹 (

)

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

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

大屏设计 UI尺寸:

一 :场景&例子:

二、前端技术

1、布局,如何去使页面达到最佳效果(不被压扁、文字不会重合、充满整个屏幕等等)、下面推荐的方案三、也会具体讲讲方案三的实现方案;

2、对于为什么使用方案三: 通过调研 如上面的两个案例 、网易有数、百度suger(

)都是通过scale 实现,有点如下:

3、实现方案:

参考方案: 百度suger:

4、对于大屏里面元素【图表、动画等】 ---- echarts(复杂图表格) + DataV(简单大屏结构、动画)

1、: (

)百度团队、拥有诸多不一样的数据图表类;

2、DataV: (

/

)阿里团队、提供一系列模版、可以直接使用;

3、antV: (

) 阿里团队、 antV有底层绘图引擎 G、关系可视化类库 G6、移动端图表类库 F2、可视化语法类库 G2; 学语 法成本较高(

)

4、移动端f2:

5、注意事项

* window的resize事件最好几个防抖截流函数 debounce

* 当页面关闭 或者切到另外一个页面 都必须清楚resize事件

* 清楚resize必须保证是同一个函数 不然不会起效果

6、浏览器 变小后效果