共计 2228 个字符，预计需要花费 6 分钟才能阅读完成。
以下文章来源于 Design with CloudAI，作者 Joann idesign
Design with CloudAI 京东智联云用户体验设计团队服务于 Cloud&AI 波及 UE Design、Brand Design、UE Research、ID Design 等相干畛域。保持以客户（用户）为核心的产品设计理念，致力成为京东云与 AI 最好的合作伙伴。
万众期待的京东 11.11 寰球酷爱季落下帷幕，巅峰狂欢中，多少人的购物车在这一天成为了 GDP 野马，发明的商业价值年年翻新，节节拔高，这背地的数据和流量，让消费者和企业更加直观、明确地捕捉到最新的生产风向，而每年同期公开展现的系列数据大屏正是这其中重要的一环。
（11.11 机房数据图谱大屏 图中显示非实在数据）
本次与大家分享的 11.11 机房数据图谱大屏，作为这系列之一，以最新的视觉体验和可视化状态为观者传递了机房、网络的实时情况。
本篇文章咱们将以设计者的身份为大家带来相干见解与剖析。
| 什么是数据大屏？
要理解 11.11 可视化大屏，咱们先来认知数据大屏这一概念。
感兴趣的小伙伴能够点击以下链接回顾：
《如何决策快人一步？用一块大屏轻松实现数据可视化 》
数据大屏的基本是数据可视化，而数据可视化就是借助图形伎俩把绝对简单、形象的数据，清晰无效地传播、沟通进来。把枯燥无味的数据通过图形化设计体现达到一种更加精准和高效的数据分析和表白。
数据大屏作为数据可视化的表现形式之一，往往承载了大量变量的数据集，设计者须要使数据容易产生比照，并用它来讲故事，以此来帮忙用户做出决策。
（图片来源于网络）
| 设计理念
下面提到了设计者须要用数据来讲故事，小说的三大因素是人物、情节和环境，套用在数据大屏上，这三大因素便是图表、交互流程和环境场景。
为了确保这三大因素的准确性，设计者要在后期对本人提出人生三大问号：故事受众是什么？为什么要讲这一故事？故事要怎么讲？
本次 11.11 大屏须要表述各大机房的流量详情及年度数据比照，其中的数据包含公网进口，内网专线，内网实时流量、流量趋势，内网峰值、带宽，公网进口流量、带宽等。
依据以上内容咱们确立了数据工厂这一概念，以数据流水线的模式将各类信息进行可视化解决。
在 618 流动中所展现的机房数据图谱大屏，选用了 2.5D 插画的视觉格调，思考到近两年利用 3D 成果展现智慧城市、工厂的可视化案例越来越多，本次大屏的视觉设计也偏向于基于 3D 成果，全方位展示云主机运维的各个细节，直观传播实时数据信息。
| 着手可视化
（1）精密筛选数据信息
在设计可视化大屏产品时，依据故事受众及目标，抉择适合数据内容。将用户最关怀的数据展示进去，筛选分类后摘取适合的图表，让数据和最无效的图表类型配对。
在此向大家举荐一款开源的数据可视化 JavaScript 图表库：ECharts，蕴含了极其丰富的图表资源可供选用，如惯例的折线图、柱状图、散点图、饼图、水位图、雷达图、K 线图、箱线图、日历热力求、关系图、漏斗图、桑基图、仪表盘等，满足用户进行多维数据分析和展现。
（图片来源于网络：EChart）
（2）数据展现与 3D 模型相结合
这一展示形式须要数据与设计者所形容的故事相适应，将数据正当适当地搁置于 3D 场景中，利用匹配透视视角、环境光效、动态效果等手法缩小违和感。
（上：纯模型图 下：数据联合模型展现）
本次大屏设计次要应用数据与 3D 模型相结合的模式来展现具体内容，散布在不同机房处的数据利用各自的视角差和色调状态体现归属关系，各种数据实时更新，流量趋势动静展现，体现数据的即时性与实时性。
| Step By Step
三维模型通过程序开发，是可反对用户交互操作的，但思考到本次 11.11 大屏的理论需要与研发周期，只采纳了一个固定视角对外展现。
11.11 大屏三维建模到最终数据工厂成果出现的过程大抵如下：
1、建模： 依据拓扑图构造构建机房模型，搁置于工厂环境的模型中适当对工厂模型进行减面，拉开重点模型的精密度。
2、渲染： 依据大屏的科技感、科幻感定位，大量应用金属、玻璃、发光材质，还能够依据机房的不同状态设置不同的发光成果，如正常绿、故障黄等。
3、数据搭建： 海量数据信息根据奥卡姆剃刀准则正当摆放，并适当用图例疏导观者了解。
（左：纯模型图 右：数据联合模型展现）
4、动效： 依据实时流量状态减少动静流量成果，让动效也能传播理论信息，而不是影响扰乱浏览。
5、音效： 残缺的可视化大屏体验应该是带有音效的，采纳适合的音乐加强代入感，同时适量应用机械音作为点击、音讯的音效，加强大屏应用的反馈成果和科幻感。
（现场成果）
| 结语
大屏设计越来越广泛地采纳 3D 成果，这得益于它震撼的视觉效果，但同时，3D 模型过于抓人眼球就会失去了制作数据大屏的初衷——展现数据，传播信息。设计者要善用 3D、动效这些设计手法，让它们成为数据的传播形式，从中体现数据的真正价值，而非炫技。
前路且长，道阻且跂，可视化大屏设计这条路，让咱们一起摸索上来。
（可视化大屏中所用数据皆非实在数据 文中局部图片来源于网络，侵删）
举荐浏览：
- 11.11 TECK TALK | 媲美物理机 裸金属云主机极致性能轻松应答 11.11 大促
- 11.11 TECK TALK | 11.11 应答海量拜访的网络基石 京东智联云自研交换机倒退之路
- 11.11 TECK TALK | 撑持 2715 亿元海量订单 揭秘京东大促背地的数据库基石
欢送点击 【京东智联云】，理解开发者社区
更多精彩技术实际与独家干货解析
欢送关注【京东智联云开发者】公众号
