2018双11数据大屏可视化设计揭秘

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
19344 48 437 2018-11-25

(本文为团队作品,个人只是参与了其中的一员)

其中涉及的中国地图:地图审图号:GS(2018)1709号,来自高德地图



文 / 石莹倩(虹贝)

Image title



2011年的数据投屏,让媒体、消费者与阿里巴巴第一次在数据层面实现了信息对称,从那以后,数据大屏就成为双11媒体发布不可或缺的一部分。2018,在双11十周年之际,阿里巴巴大数据团队用最新的可视化与交互手法,来诠释阿里经济体传递的商业与人文的大融合。

Image title



大屏设计核心理念


本次数据大屏选择了以“明日之城”这个概念作为设计的主线,以“全球清明上河图”为本次设计的核心内容。明日之城,一词来自于英国规划学家霍尔,那本被誉为城市规划“圣经”的同名书籍——选择它是因为双11数据大屏设计的特点需要,这里的潜台词即是——“双11数据大屏是阿里对人类未来生活的全新畅想与规划”。

Image title


明日之城的“城”字,也包含城邦(State)和城市(City)两层含义——城邦一词,在历史中指的是全球经济流动的港口,是古老的国家形态(如 United States),也是国家经济体的代名词;城市,则是人们生活居住的栖息之所,是汇聚人类才智与经济的地点,是生活方式的代名词。双十一中的国家通过一个个城邦让经济出航,国与国的连接形成了交易的无国界。城市,生动体现了市井生活和社会面貌,体现出双11当天每一个参与者都在升斗之间获得欢乐。本次数据大屏的设计,正是为了让每一位现场参与者都可以通过它,发现双11在“经济体”与“生活方式”这两个维度中的巨大能量与卓越贡献。


Image title




地球光环:全球屏/经济体


出现在双11当天次数最多的,除了最核心的巨大销售数据之外,就是揭示阿里经济体在全球发挥作用的这部分实时数据可视化,即“全球屏”。这个可视化分为两个层次,一个表现了双11当天全球实时数据,另一个则表现了阿里的每一项业务与品牌在阿里经济体中的组成与贡献。

Image title

2018双11大屏-全球化


双11当天全球实时数据,由地球、光环两个部分组成,延伸并发展了数据大屏“璀璨星球”的概念,用地球上的销售数据点亮整个星球,用光环揭示出国家与国家之间“又合作又竞争”的状态,将双11作为全球经济奥林匹克的精神,用艺术化的形态表现出来,地球的部分,用璀璨的星点取代了传统的热力图,表现了全世界实时销售点与销售量,用国与国、城与城间穿梭的光芒飞线,表现了进出口贸易的数量与方向,人们可以看到财富在这个星球上的变化与汇聚,也可以随着光芒飞线在城邦间的出航,让国家与国家在这一天彼此汇通、交融;地球的光环,内部则是每一个国家的标志在多轨道的光环之中运动,相互竞争、彼此超越。每一个国家当天销售的实时经济数据,则成为一道道指向地球的光柱,如机器般支撑着光环的运动,与国家经济的运转。

Image title

2018双11大屏-全球化-中国


对阿里经济体的每一项业务与品牌的表达,也采用了这种地球+光环的结构,设计出了阿里经济体的一种“众星拱月”的效果,阿里品牌符号作为轨道上的行星,围绕着天猫双11徐徐转动,每一个品牌都从幕后走向台前,为阿里经济体做出卓越的贡献。更外一圈则用水晶的效果,将每个国家的地标表现了出来,让全球化的精神笼罩整个经济体星球。

Image title

2018双11大屏-经济体GMV


这样的艺术想法,是希望人们在看到这一幕之时,能够获得一个略带神圣气息的上帝视角,在准确表达了各项数据、双11与阿里经济体结构的同时,让双11的经济表现成为地球上的每个国家的动力之源、每个家庭的喜悦之光,让阿里经济体成为这个经济全球化时代转动的中枢。

Image title

2018双11现场照片 突破2000亿 彩蛋



因此,当现场实时数据彩蛋(销售记录)每一次的爆炸,从地球视角切换过来的时候,整体视觉便能够在观众的眼中造就一次次数据经济时代的宇宙大爆炸。双11每一次超越历史、突破记录的行为,就是宇宙一次次新的开端。




文化之城——杭州上海北京的数据新零售之城


数据大屏不仅表现了全球、国家,还着重用“清明上河图”的概念,数据景观化的表达了城市。在我们称为“城市屏”的部分中,用不同文脉的艺术风格表现了北京、上海、杭州三所城市的实时经济数据与交易。

Image title

2018双11现场照片 突破2000亿 彩蛋


以杭州屏为例,选取了“青绿山水”的艺术风格作为整体视觉的表现。这是因为杭州本身以“天堂”美誉的山水自然景观、历史沉淀、以及深厚的人文传承,与这种具有南宋典雅风范与传统文人气质的艺术是十分契合的。

Image title

2018双11大屏现场照片 杭州青绿山水-白昼


但城市的艺术表现与经济数据可视化是两个不同的任务,我们通过昼夜交替完成了这二者之间的转换——当整个城市屏在白昼的时候,是一副由当代经济所描绘的一座座“绿水青山”,而当城市转入黑夜时,就是双11经济所造就的一片片“金山银山”。

Image title

2018双11大屏城市-杭州青绿山水-昼夜交替


尤其在黑夜时,当镜头逐渐放大到每个城市区域,还可以看到数据大屏不仅表现了每一栋建筑中在当天所发生的实时交易,还同时用阿里经济体中的品牌符号,如支付宝、饿了么等,细微的表现了这个实时交易所采用的交易方式——就好比清明上河图中的每一个小人物、小细节,都表现了宋代经济与市井生活的一幕幕。

Image title

2018双11大屏-杭州城市-亲橙里银泰全息效果


而再将镜头细化,我们还打造了如“武林银泰”、“西溪园区&亲橙里”等等双11线下新零售场景的数据可视化,每一层楼、每一个区域的双11线下行为,都体现在整张城市屏中——就好比清明上河图中安宁的“西域驼队”、喧闹的“木桥上河”等一幕幕细节,展现着熙熙攘攘的众生喧哗与时代繁盛。


总的来说,清明上河图所包含的山水意象、市井生活,都通过这些艺术设计而成为当代数据经济尤其是双11,表现其经济魅力与文化底蕴的核心方法论。






新零售之城:城市品牌霓虹之光


双11数据大屏要表达的,不光是国家与城市的总体经济数据与实时发生的个人买卖,它还承载着表现经济与产业结构,在数据经济作用下发生变化的重要任务。因此,通过各种如“全球热卖榜”等方式对新零售进行表现,也是数据大屏所表达的核心。

Image title

2018双11大屏-全球热卖榜-大家电



在这一“新零售屏”的艺术设计中,我们选择了用一种“城市经济景观的实时切片”来进行表达。双11新零售,尤其是今年所开展的各地线下协同部署、双11商家实时“数据作战室”等方式的参与,让数据经济不仅成为全球视觉,还成为一段段炫彩的商业景观,恰如上海南京路或香港尖沙咀的霓虹街景,成为城市经济发展的“视觉切片”。


因此,“新零售屏”的设计,突出了一种商业的空间感与空间营造。用霓虹灯的视觉勾勒出各种视觉要素,中央的大字所选择的字体风格也取材于上海南京路的霓虹广告字样。用来呈现不同数据的各个版面,则如同商业街区中的一个个空间,每一个热销榜、品类榜、数据榜都在不同空间维度上诉说着数据商业的几尽繁华,营造出今年双11会址——“老上海”的典雅风情。




设计总结


2018双11的数据大屏,自呈现在众多媒体之后,便受到了强烈的关注与追捧。而今年屏幕尺寸也做到了极致,51.5米*8.5米为历年最大。精心设计的艺术效果、震撼的视觉呈现,配合双11的消费节奏、现场互动,以及背景音乐的韵律,都成为数据大屏的艺术整体效果。

Image title


全国经济云图、地球之声、新零售之城、致敬十年等数据可视化场景组成了本次数据大屏的全部内容。数据大屏以空间为载体、时间为轨迹,以数据和飞线等形式,实时展示11月11日的24小时里,消费、物流、支付、技术和商业合作伙伴等阿里巴巴数字经济体内的交易场景,将商业、人文和消费者的市井生活用一整个故事链路展现出来,让人文精神与经济消费在大数据艺术设计中拓展为宇宙精神与全球视野。



而这,就是我们要展现给世界的一幅数据经济时代的全球清明上河图。



致敬双11十周年。

Image title

2018双11数据大屏-致敬十周年


Image title

2018双11数据大屏-天空之城-线上线下数据


Image title

2018双11数据大屏-北京城市全景





Image title





阿里巴巴大数据设计中心,负责阿里集团数据中台、云上企业数据中台、友盟+等多条业务线体验架构、可视化分析、可视化互动设计、品牌创意设计,为阿里系商家/小二、政府、媒体/公众、大型企业/开发者提供系统的大数据可视化分析、工具和互动体验设计解决方案。

Connecting Data Power & Beautiful World.

Image title

数据大屏设计项目组


从左到右:韩乔、李栋、石莹倩、王圆林、朱杰、陈强、朱炳全、吴慧贞、刘奕



特别感谢我们最爱的阿里巴巴数据技术及产品部~





大数据设计中心期待你的加入:

阿里巴巴大数据设计中心招聘体验设计专家、品牌创意设计专家、图形设计专家(3D引擎、动效、互动方向等)


全部评论:48

  • LHLSH

    2021-12-09 11:42

    @sumail_: 可是这种现状根本解决不了,但是如果设计师和开发都是高手那这种问题就不会出现,一起都来源于是否尊重和认可。

  • LHLSH

    2021-12-09 11:41

    看了即震惊又恐慌,我们现在做的设计和你们比好像是上个时代的东西,我们一直追赶的就是你们的现状

  • 秉蕳

    2020-07-31 14:18

    @cq-engineer: 为什么在设计网站上看见骂人的话了呢?技术和艺术上的讨论和争执没什么不好,但是但凡话里带一个脏字的,请哪里来的回到哪里去,这里真的不欢迎你

  • cq-engineer

    2019-12-26 19:12

    @琢磨先生lyz: mdzz 放你mmp

  • 影子的影子

    2019-11-26 18:00

    @whebest: 一句话概括了所有

  • sumail_

    2019-11-10 16:42

    看到楼下撕逼什么程序和设计孰轻孰重我觉得真的没必要,初级全栈表示深挖下去真的里面的内涵都太多了 普通程序员看到一张设计图:不就是用PS AI这样那样吗(实际包含很多视觉和为什么这么做,背后反复设计改稿相关经验和时间成本并不比你写的程序少,或许没有预期很炫酷,但是商业设计中背后的设计理念顾全每一个用户看得舒服是每个设计至生追求的事) 普通设计师看到一个APP:不就是Python JAVA C++吗 这样那样 echo/studio几个数就好了(实际程序员背后付出的试错成本,修改成本学习成本也不会比设计少,看起来很简单的一个算法,背后也是融入无数个程序员在并发量高了如何优化代码质量减轻机器压力之间的抉择) 一个在追求如何让更多的人简单清楚的明白需求的表达。 一个在实现表达的同时减轻设备压力,让更多人都能看到 其实付出都是对等的,分孰轻孰重真的没必要

  • 鱼卷没有鱼

    2019-05-09 11:31

    这种光线运动效果怎么做到的,一直没找到教程

  • 月老本老

    2019-04-26 11:06

    漂亮的小姐姐。

  • 琢磨先生lyz

    2019-02-16 11:49

    @cq-engineer: 嘴巴放干净点

  • whebest

    2019-01-27 17:12

    @cq-engineer: 两个牛逼的做出牛逼的东西;一个牛逼一个不牛逼啥都做不出来

  • cq-engineer

    2019-01-10 10:27

    @琢磨先生lyz: 设计师再牛逼,设计出来没人实现有毛用,还没有贬低,你tm说出这句话就表明了你的意思,,智障儿童,我没有骂你的意思

  • pilotor

    2019-01-04 02:17

    @三鱼先生: 感觉是用游戏引擎做出来的。。像Unity那种引擎除了做游戏还可以做景观设计,地图地信之类的,以前游戏引擎都是做游戏,看样子在大数据时代还能发挥其他作用,不错不错

  • 爱情出远门

    2018-12-17 14:59

    @傻不拉几的杰先森: 看到的只是视觉一部分,后面的数据的获取/处理才是实力

  • 一片柠檬m

    2018-12-12 13:53

    膜拜

  • BruceXLS

    2018-12-10 18:02

    @琢磨先生lyz: 要是钻牛角尖就没聊的必要了,好的设计稿在小公司得不到好的还原,这个问题又不是特例

  • 虫大虫

    2018-12-10 15:31

    牛叉啊

  • 琢磨先生lyz

    2018-12-07 17:01

    @BruceXLS: 程序员再牛逼,没有设计师的图,有个毛用,用26个字母和1到10吗?没有贬低程序员的意思

  • 砖砖肖

    2018-12-07 11:43

    真的厉害,数据的时代真的很震撼

  • 巴泥的漂泊

    2018-12-05 14:03

    真他妈牛B

  • 愛YI

    2018-11-30 16:16

    太美了

  • 深蓝B3ue

    2018-11-29 19:06

    可视化领域是个不错的方向,希望以后能成为同事。

  • 准时睡觉准时翻工

    2018-11-29 15:13

    这种数据可视化的设计可谓是数据欣赏的最好方式。 向阿里致敬!

  • 火坑守护神

    2018-11-29 10:31

    程序猿确实牛逼,但是设计师也不差,都是配合,没有设计师的创意哪里有程序猿的执行。

  • BruceXLS

    2018-11-28 19:40

    @小迷妮么么: 这种效果主要是程序员牛逼,设计师非核心

  • 小迷妮么么

    2018-11-28 17:50

    视觉效果好棒,不过小公司开发都实现不了,每次都只能做的很常规,很炫酷的只能做练习,怎么破

  • 阿畏呀啊喂

    2018-11-28 17:23

    牛逼,程序猿更牛逼

  • luobo11111110

    2018-11-28 14:42

    @三鱼先生: 是在高德开发者那里获取模型吗

  • luobo11111110

    2018-11-28 14:37

    @傻不拉几的杰先森: 3D引擎怎么操作

  • 肉桑大魔王Roshan

    2018-11-28 09:28

    在抖音mark了好多,原来是大佬做的

  • 三鱼先生

    2018-11-27 17:11

    @睡到天亮: 高德获取地图模型,开发为其写出各种效果

  • 更多

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票