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

原创文章 分类: 经验/观点 版权:
11986 208 333 37
2018-11-25
95.4
首页推荐

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

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


https://v.qq.com/x/page/z08015o4rgr.html

视频链接


文 / 石莹倩(虹贝)


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引擎、动效、互动方向等)
联系方式:tianyu.zbq@alibaba-inc.com(天渝),微信号:zhubingquan


三鱼先生

交流请加群:767891116

5261粉丝/34关注

原创小生
杭州城市数据可视化:数据时代的商业与人文B端产品-QuickiBI体验设计

扫描二维码
去手机端查看海报

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN