11.11数据可视化大屏设计揭秘

Wesley13
• 阅读 401

以下文章来源于Design with CloudAI ,作者Joann idesign

Design with CloudAI京东智联云用户体验设计团队服务于Cloud&AI 涉及UE Design、Brand Design、UE Research、ID Design 等相关领域。坚持以客户(用户)为中心的产品设计理念,努力成为京东云与AI最好的合作伙伴。

11.11数据可视化大屏设计揭秘

万众期待的京东11.11全球热爱季落下帷幕,巅峰狂欢中,多少人的购物车在这一天成为了GDP野马,创造的商业价值年年翻新,节节拔高,这背后的数据和流量,让消费者和企业更加直观、明确地捕捉到最新的消费风向,而每年同期公开展示的系列数据大屏正是这其中重要的一环。

11.11数据可视化大屏设计揭秘

(11.11机房数据图谱大屏 图中显示非真实数据)

本次与大家分享的11.11机房数据图谱大屏,作为这系列之一,以最新的视觉体验和可视化形态为观者传递了机房、网络的实时状况。

本篇文章我们将以设计者的身份为大家带来相关见解与分析。

|  什么是数据大屏?

要了解11.11可视化大屏,我们先来认知数据大屏这一概念。

感兴趣的小伙伴可以点击以下链接回顾:

《如何决策快人一步?用一块大屏轻松实现数据可视化

数据大屏的根本是数据可视化,而数据可视化就是借助图形手段把相对复杂、抽象的数据,清晰有效地传达、沟通出去。把枯燥无味的数据通过图形化设计表现达到一种更加精准和高效的数据分析和表达。

11.11数据可视化大屏设计揭秘

数据大屏作为数据可视化的表现形式之一,往往承载了大量变量的数据集,设计者需要使数据容易产生对比,并用它来讲故事,以此来帮助用户做出决策。

11.11数据可视化大屏设计揭秘

(图片来源于网络)

|  设计理念

上面提到了设计者需要用数据来讲故事,小说的三大要素是人物、情节和环境,套用在数据大屏上,这三大要素便是图表、交互流程和环境场景。

11.11数据可视化大屏设计揭秘

为了确保这三大要素的准确性,设计者要在前期对自己提出人生三大问号:故事受众是什么?为什么要讲这一故事?故事要怎么讲?

11.11数据可视化大屏设计揭秘

本次11.11大屏需要表述各大机房的流量详情及年度数据对比,其中的数据包括公网出口,内网专线,内网实时流量、流量趋势,内网峰值、带宽,公网出口流量、带宽等。

根据以上内容我们确立了数据工厂这一概念,以数据流水线的形式将各类信息进行可视化处理。

在618活动中所展示的机房数据图谱大屏,选用了2.5D插画的视觉风格,考虑到近两年利用3D效果展示智慧城市、工厂的可视化案例越来越多,本次大屏的视觉设计也倾向于基于3D效果,全方位展现云主机运维的各个细节,直观传达实时数据信息。

11.11数据可视化大屏设计揭秘

|  着手可视化

(1)精细筛选数据信息

在设计可视化大屏产品时,根据故事受众及目的,选择合适数据内容。将用户最关心的数据展现出来,筛选分类后摘取合适的图表,让数据和最有效的图表类型配对。

在此向大家推荐一款开源的数据可视化JavaScript图表库:ECharts,包含了极其丰富的图表资源可供选用,如常规的折线图、柱状图、散点图、饼图、水位图、雷达图、K线图、箱线图、日历热力图、关系图、漏斗图、桑基图、仪表盘等,满足用户进行多维数据分析和展示。

11.11数据可视化大屏设计揭秘

(图片来源于网络:EChart)

(2)数据展示与3D模型相结合

这一展现方式需要数据与设计者所描述的故事相适应,将数据合理适当地放置于3D场景中,利用匹配透视视角、环境光效、动态效果等手法减少违和感。

11.11数据可视化大屏设计揭秘

(上:纯模型图  下:数据结合模型展示)

本次大屏设计主要使用数据与3D模型相结合的形式来展示具体内容,分布在不同机房处的数据利用各自的视角差和色彩状态体现归属关系,各种数据实时更新,流量趋势动态展示,体现数据的即时性与实时性。

|  Step By Step

三维模型经过程序开发,是可支持用户交互操作的,但考虑到本次11.11大屏的实际需求与研发周期,只采用了一个固定视角对外展示。

11.11大屏三维建模到最终数据工厂效果呈现的过程大致如下:

**1、建模:**根据拓扑图结构构建机房模型,放置于工厂环境的模型中适当对工厂模型进行减面,拉开重点模型的精细度。

11.11数据可视化大屏设计揭秘

11.11数据可视化大屏设计揭秘

**2、渲染:**根据大屏的科技感、科幻感定位,大量使用金属、玻璃、发光材质,还可以根据机房的不同状态设置不同的发光效果,如正常绿、故障黄等。

11.11数据可视化大屏设计揭秘

**3、数据搭建:**海量数据信息依据奥卡姆剃刀原则合理摆放,并适当用图例引导观者理解。

11.11数据可视化大屏设计揭秘

(左:纯模型图  右:数据结合模型展示)

**4、动效:**根据实时流量状态增加动态流量效果,让动效也能传达实际信息,而不是影响扰乱阅读。

11.11数据可视化大屏设计揭秘

**5、音效:**完整的可视化大屏体验应该是带有音效的,采用合适的音乐增强代入感,同时适量使用机械音作为点击、消息的音效,增强大屏使用的反馈效果和科幻感。

11.11数据可视化大屏设计揭秘

(现场效果)

|  结语

大屏设计越来越普遍地采用3D效果,这得益于它震撼的视觉效果,但同时,3D模型过于抓人眼球就会失去了制作数据大屏的初衷——展示数据,传达信息。设计者要善用3D、动效这些设计手法,让它们成为数据的传达方式,从中体现数据的真正价值,而非炫技。

前路且长,道阻且跂,可视化大屏设计这条路,让我们一起探索下去。

(可视化大屏中所用数据皆非真实数据 文中部分图片来源于网络,侵删)

推荐阅读:

欢迎点击京东智联云,了解开发者社区

更多精彩技术实践与独家干货解析

欢迎关注【京东智联云开发者】公众号

11.11数据可视化大屏设计揭秘

点赞
收藏
评论区
推荐文章
秃头王路飞 秃头王路飞
4个月前
webpack5手撸vue2脚手架
webpack5手撸vue相信工作个12年的小伙伴们在面试的时候多多少少怕被问到关于webpack方面的知识,本菜鸟最近闲来无事,就尝试了手撸了下vue2的脚手架,第一次发帖实在是没有经验,望海涵。languageJavaScript"name":"vuecliversion2","version":"1.0.0","desc
浅梦一笑 浅梦一笑
4个月前
初学 Python 需要安装哪些软件?超级实用,小白必看!
编程这个东西是真的奇妙。对于懂得的人来说,会觉得这个工具是多么的好用、有趣,而对于小白来说,就如同大山一样。其实这个都可以理解,大家都是这样过来的。那么接下来就说一下python相关的东西吧,并说一下我对编程的理解。本人也是小白一名,如有不对的地方,还请各位大神指出01名词解释:如果在编程方面接触的比较少,那么对于软件这一块,有几个名词一定要了解,比如开发环
光头强的博客 光头强的博客
4个月前
Java面向对象试题
1、请创建一个Animal动物类,要求有方法eat()方法,方法输出一条语句“吃东西”。创建一个接口A,接口里有一个抽象方法fly()。创建一个Bird类继承Animal类并实现接口A里的方法输出一条有语句“鸟儿飞翔”,重写eat()方法输出一条语句“鸟儿吃虫”。在Test类中向上转型创建b对象,调用eat方法。然后向下转型调用eat()方
刚刚好 刚刚好
4个月前
css问题
1、在IOS中图片不显示(给图片加了圆角或者img没有父级)<div<imgsrc""/</divdiv{width:20px;height:20px;borderradius:20px;overflow:h
blmius blmius
1年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
小森森 小森森
4个月前
校园表白墙微信小程序V1.0 SayLove -基于微信云开发-一键快速搭建,开箱即用
后续会继续更新,敬请期待2.0全新版本欢迎添加左边的微信一起探讨!项目地址:(https://www.aliyun.com/activity/daily/bestoffer?userCodesskuuw5n)\2.Bug修复更新日历2.情侣脸功能大家不要使用了,现在阿里云的接口已经要收费了(土豪请随意),\\和注意
晴空闲云 晴空闲云
4个月前
css中box-sizing解放盒子实际宽高计算
我们知道传统的盒子模型,如果增加内边距padding和边框border,那么会撑大整个盒子,造成盒子的宽度不好计算,在实务中特别不方便。boxsizing可以设置盒模型的方式,可以很好的设置固定宽高的盒模型。盒子宽高计算假如我们设置如下盒子:宽度和高度均为200px,那么这会这个盒子实际的宽高就都是200px。但是当我们设置这个盒子的边框和内间距的时候,那
艾木酱 艾木酱
3个月前
快速入门|使用MemFire Cloud构建React Native应用程序
MemFireCloud是一款提供云数据库,用户可以创建云数据库,并对数据库进行管理,还可以对数据库进行备份操作。它还提供后端即服务,用户可以在1分钟内新建一个应用,使用自动生成的API和SDK,访问云数据库、对象存储、用户认证与授权等功能,可专
NVIDIA安培架构下MIG技术分析
关键词:NVIDIA、MIG、安培一什么是MIG2020年5月,NVIDIA发布了最新的GPU架构:安培,以及基于安培架构的最新的GPU:A100。安培提供了许多新的特性,MIG是其中一项非常重要的新特性。MIG的全名是MultiInstanceGPU。NVIDIA安培架构中的MIG模式可以在A100GPU上并行运行七个作业。多实
helloworld_28799839 helloworld_28799839
4个月前
常用知识整理
Javascript判断对象是否为空jsObject.keys(myObject).length0经常使用的三元运算我们经常遇到处理表格列状态字段如status的时候可以用到vue
密钥管理系统-为你的天翼云资产上把“锁
本文关键词:数据安全,密码机,密钥管理一、你的云上资产真的安全么?1.2021年1月,巴西的一个数据库30TB数据被破坏,泄露的数据包含有1.04亿辆汽车和约4000万家公司的详细信息,受影响的人员数量可能有2.2亿;2.2021年2月,广受欢迎的音频聊天室应用Clubhouse的用户数据被恶意黑客或间谍窃取。据悉,一位身份不明的用户能够将Clubho