大数据可视化大屏设计经验,教给你!

 前言 

 

大数据产业正在用一个超乎我们想象的速度蓬勃发展,大数据时代的来临,越来越多的公司开始意识到数据资源的管理和运用,大数据可视化大屏展示被更多的企业青睐,身为UI设计师的我们,也要紧跟时代的步伐学习这方面的设计。

今天要跟大家分享我一年多设计大数据可视化大屏的经验和观点,下面从UI设计、交互设计、动效设计三个方面来分享。

 UI设计  

设计大屏一样要谨记要以展示数据为核心,在任何炫酷屌炸天表现都要建立在不影响数据的有效展示上!

 

下图是天猫可视化大屏设计,图中屌炸天的3D地球围绕粒子效果,这篇文章将教你怎么实现,而且是数据可视化的呈现,不是动效或者视频!

天猫双十一可视化大屏

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

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

拼接屏设计尺寸图解

视觉设计:首先了解需求,整合数据,分析出主要数据次要数据、总量数据细分数据、各数据的维度等等,通过了解这些可以先设计出一个布局模版,也可以在纸上画出来,布局可以在设计过程中随时调整。

设计的风格,背景色一般用深色调,深色调紧张感强,让视觉更好的聚焦,大屏暗色调看上去更柔和舒服不刺眼,也会较省电。

大屏设计跟网页不一样,页面不能有滚动条,大屏的长宽都是固定的。

字号跟网页设计一样不小于12号字,可以用于图表的标注,数据信息建议14号字以上,大屏观者远距离才能看全内容,所以字号可以稍大一点。字体不一定只用一种,可以用到一些科技感强的字体,这里要注意,记得把字体给开发一份。

设计完成先去大屏上看一下效果,大屏的品质不一样色调也会有很大的差别,要根据自家的大屏呈现效果做调整。

下面分享一个开源的jquery插件库网站,里面有很多很棒的动态效果!

http://www.jq22.com/

插件库其中的一个效果

大屏设计会给设计师很大的想象设计空间,尽情发挥你的能力吧!

 交互设计  

我把大数据可视化大屏分为两种,一种“纯展示型”另一种“展示+功能型”,具体怎么区分!

纯展示型几乎没有交互,后台录入数据,在大屏上展示就行了。

展示+功能型,例如实时监控数据、采集数据、数据对比功能、云计算数据、分析与预警等等。

这里就着重说一下带有功能型的大屏产品的结构层(信息架构)。一切功能结构都要围绕核心数据主页面来架构,因为大屏展示的核心就是将一些业务的关键指标数据以数据可视化的方式展示出来。

功能型大数据可视化大屏结构层(信息架构)

大屏的交互,区别于网页和app,首先要清楚一点,大屏使用群体可能就是公司内部的几个人,而非面向广大用户群体,从这个维度上考虑,交互就可以弱化一些引导性的元素,例如一个可点击的数据组件,就可以不加“点击进入”按钮。

也可以设计隐藏式的交互方式,例如鼠标左移动、上移动、出来控制面板(Mac电脑就有这样的交互方式),有控制台是触摸屏也可以结合手势来设计交互方式。

为了让用户感知到一直停留在主页面上,交互上跳转页面能用“关闭”按钮就不用“返回”按钮!

 动效设计  

大数据可视化大屏设计少不了动效,动效是可视化重要的组成部分,动效的增加能让大屏看上去是活的,增加观感体验。但过分的动效极其容易喧宾夺主,让观看者的眼球不知道往哪里聚焦,反而弱化了数据的展示。

什么是过度的动效设计?这个度又该怎么把握?

看下图动效设计过度的一个案例,当你试着去看图表的内容,你的眼球一次一次的被闪动的边框抓走,这就是过度的动效设计!

图片来源网络

把握动效设计这个度其实并不难,只要看的舒服不影响数据清晰展示就可以,有数据展示的页面最好动的地方不易过多,如果要多,几个动画就得有节奏的变化,例如一个动画表现的视觉强,另一个就表现稍弱化,有强有弱、有主有次节奏才会舒服,同时动效能结合数据的变化而变化最好,这样就不容易看数据内容被动画抓走眼球。

动效怎么实现?

我习惯用AE的插件Bodymovin生成json文件实现,具体怎么操作之前写过一篇教程《UI设计师大杀器来了!程序猿爱上设计师的强技能!》,点击可以去这里了解。

json文件

Bodymovin这个工具在AE中有些预设效果和透视功能是不支持的,所以再教大家另一种方法,就是把动画渲染成视频,把格式转换为ogg或者webm网页视频格式,网页格式视频加载是非常快的,之后把下面的文件给开发就可以了。

html5网页视频格式

 

3D动效怎么实现?

3D动画

先说下用到的软件C4D+AE+PS

步骤1:找个模型也可以用C4D自带的模型,还可以自己建模,有了模型在C4D中把模型变成晶格状,做个旋转360度动画,渲染出png序列帧。

步骤2:把ps设计好的视觉稿和序列帧图片导入AE中,如果要用Bodymovin插件实现,就得把全部序列帧每张分开导入,不然Bodymovin不能识别序列帧,只能用网页视频格式实现!

大概就是这样流程,可能说的不是很详细请见谅,有不明白的地方可以随时问我!

 3D地球可视化 

开篇给大家留个悬念,怎么设计3D地球动画,下面就教你。

天猫双十一阿里的3D地球是有专门人员设计的,阿里也有这方面的组件库。我们可以用开源网站类似组件来实现,大数据页面用到的图表这个网站几乎都有,且免费。

网址:http://echarts.baidu.com/index.html

echarts组件效果

最终的效果是用两个组件拼合在一起实现的,左边就是代码,后台录入信息可以让粒子效果匹配数据,最终实现数据的可视化。

echarts网站

再推荐一个组件网站:https://www.hcharts.cn/

Highcharts网站

同样的很多图表组件,两个网站都可以用,下面介绍一下两个网站的优缺点。

 

Echarts:

优点:免费、开源、效果炫酷、原生全中文。

缺点:兼容性差、经常报错、文档不够详情。

Highcharts:

优点:文档实例很详细、易懂易学、兼容性强可兼容到IE6。

缺点:收费。

 总结  

大屏设计是一个长期跟进的过程,有很多问题会在数据真正进来时,放在大屏上才能发现,所以等产品做到落地时设计方面要积极跟进改进。

好了就这么多感谢阅读,希望这篇文章对你有一点用!

原文地址:https://www.cnblogs.com/telwanggs/p/10975460.html

时间: 2024-10-11 23:23:43

大数据可视化大屏设计经验,教给你!的相关文章

大数据可视化设计在信息安全领域的案例分析

大数据可视化是个热门话题,在信息安全领域,也由于很多企业希望将大数据转化为信息可视化呈现的各种形式,以便获得更深的洞察力.更好的决策力以及更强的自动化处理能力,数据可视化已经成为网络安全技术的一个重要趋势. 一.什么是网络安全可视化 攻击从哪里开始?目的是哪里?哪些地方遭受的攻击最频繁--通过大数据网络安全可视化图,我们可以在几秒钟内回答这些问题,这就是可视化带给我们的效率.大数据网络安全的可视化不仅能让我们更容易地感知网络数据信息,快速识别风险,还能对事件进行分类,甚至对攻击趋势做出预测.可是

用Vue构建一个github“可视化大数据平台”-GitDataV,设计开发分享

写在前面 GitDataV,是一个github“大数据可视化平台”,通过它你可以更直观的看到你在github里的一些数据,(之所以打双引号,是因为我觉得这个还没到大数据可视化的程度).其实我在 上篇文章 分享的时候已经提到了这个想法,通过github提供的接口,做一个自己的“大数据分析页面”,所以我就花了几天晚上的时间,把这想法从设计到开发构建出来了,那么下面我就我个人的账号测试看看效果如下gif图 如果您感兴趣可以点击这里访问简单的:GitDataV网站(目前打包后有些小bug,但不影响正常使

2019主流的数据可视化大屏工具有哪些

数据可视化大屏已经是公认的最直观,最有效的信息传递方式,以前用Echarts等第三方组件做大屏开发的,会发现:尽管它们提供了许多的图表元件和JS代码,但是由于每个用户的需求都不一样,大屏开发仍然需要改很多代码,耗费不少时间.如今,更加主流的,是一些实用又好看的数据可视化大屏工具,本文就来详细介绍. 1.FineBI 目前是国内市场占有率第一的自助式BI工具,也是一款成熟的数据分析产品.内置丰富图表,不需要代码调用,可直接拖拽生成.可用于业务数据的快速分析,制作dashboard,也可构建可视化大

Qt编写数据可视化大屏界面电子看板3-新建布局

一.前言 能够新建布局,也是数据可视化大屏界面电子看板系统中的必备功能之一,新建布局这样的功能一般做到右键菜单中,单击新建布局菜单,弹出输入框要求输入新的布局的名称,为了更符合国情,直接支持中文名称,保存成配置文件直接中文名称命名,这样方便用户理解,Qt5以来对乱码的问题解决的就比较好了,不像Qt4时代稍不留神就乱码了,Qt5只要保证源码文件utf-8编码基本上就很少遇到乱码问题了.新建布局必须要有个默认的窗体排列,Qt中的dock窗体,默认布局会以窗体的sizehint作为大小参照标准,也不一

Qt编写数据可视化大屏界面电子看板4-布局另存

一.前言 布局另存是数据可视化大屏界面电子看板系统中的额外功能之一,主要用于有时候用户需要在现有布局上做个微调,然后直接将该布局另存为一个布局配置文件使用,可以省略重新新建布局重新来一次大的调整的工作,此功能主要是用到了配置文件的保存,另存为一个不同名字的配置文件即可,属于非常简单的功能,在代码上来讲,其实Qt的配置文件类QSettings使用起来不要太方便,不仅支持WIN的注册表的读取写入,还支持跨平台的INI文件,说白了其实就是个文本文件,个人比较喜欢用INI文件作为配置文件,这样一方面跨平

基于echarts组件制作数据可视化大屏

什么是数据可视化:数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息.在实际工作中,数据分析能够帮助管理者进行判断和决策,以便采取适当策略与行动. 数据可视化分析有什么作用:1.现状分析告诉你过去发生了什么,告诉你企业现阶段的整体运营情况,通过各个经营指标的完成情况来衡量企业的运营状态,以说明企业整体运营是更好了还是坏了,好的程度是如何,坏的程度又到哪里. 2.原因分析告诉你某一现状为什么发生,经过第一阶段的现状分析,我们对企业的运营情况有了一个基本的了解,但是不知道运营情况具体好在哪

遇见大数据可视化:基础研究

近日星巴克与微信推出的社交礼品功能"用星说",可以说刷遍了朋友圈.无论你爱不爱喝咖啡,星巴克似乎都成为了一种文化象征.上班族青睐,小清新喜欢,基本上大家看到绿色的人鱼标志就能马上认出它来. 虽然一直也有喝咖啡的习惯,但至今不知道星巴克菜单版上列的[摩卡].[拿铁].[美式].[卡布奇诺]等等有什么区别.直到看到下列图,才很直观的了解到每个咖啡类别的区别是什么. 类似上图示,针对内容复制,难以形象表达的信息,通过图形简单清晰地向受众呈现出来,这种图称之为信息图. 信息图 信息图本身是一个

跟风舞烟学大数据可视化-Echarts从入门到上手实战

跟风舞烟学大数据可视化-Echarts从入门到上手实战 课程观看地址:http://www.xuetuwuyou.com/course/180 课程出自学途无忧网:http://www.xuetuwuyou.com 课程讲师:风舞烟 课时数:三个模块,共70课时   一.课程特色: 1.最全的Echarts课程讲解     70学时课时量,360度全方位,无死角的课程设计,让你通透Echarts可视化技术 2.最适合小白学员学习的课程,没有之一     只要你了解一点基本的Html,CSS,Ja

四种典型大数据可视化交互模式及实例

大数据可视化交互设计中,有四种比较典型的交互模式,解决数据的复杂性问题.分别是动态改变视图.多视图关联.视图内容约减.焦点+上下文. 动态改变视图 动态改变视图:导航 动态改变视图:多属性排序 多视图关联 多视图是指将显示区域划分为多个视图或图层,是降低数据复杂性的一种方式.它包括采用同一编码方式编码多个数据子集的小多组图,以及采用不同的编码方式编码同一数据集的多样式图(多视图). 并列放置:便于对比,但需要更大的显示空间 图层叠加:图层数量有较大的限制 概览图和细节图采用相同的编码方式,解决数