header_v1.7.40

超大屏数据可视化设计:阿里巴巴三万亿大屏项目

2年前发布

原创文章 / 多领域 / 观点
阿里大数据UED 原创,如需商业用途或转载请与阿里大数据UED联系,谢谢配合。

2016年3月,阿里巴巴中国零售交易市场2016财年商品交易即时总额即将突破三万亿,这是阿里历史性的一刻,也见证了消费的力量, 为了记录这一历史时刻,三万亿大屏项目应运而生。


项目背景:

2016年3月,阿里巴巴中国零售交易市场2016财年商品交易即时总额即将突破三万亿,这是阿里历史性的一刻,也见证了消费的力量, 为了记录这一历史时刻,三万亿大屏项目应运而生。


我们先看一下最终的上线效果

c4c55733e2f16ac7252631b1de04.jpg

 对于页面风格,主要要求是要带一点喜庆的氛围。那么我们在用色上就不能太过沉闷单调。另一方面由于这是一个数据大屏,那么数字就是当之无愧的主角,从这个角度出发,整个页面的风格还要透着严谨和专业。太过喜庆有可能流于轻浮,太过严谨则可能显得沉闷乏味,无法调动用户的兴趣。如何平衡这两种调性,这是本项目的一个难点。

从以上这个出发点,我们梳理了这样一个思路。


547d5730398e32f8755a5212b9e5.jpg


当然这只是初步的感觉,是浮在空中的调性,想要将理念落地,还必须将这些抽象的调性落实为具体的像素、色值、字体乃至整个版式。

 

以下是团队成员进行的一些初步的尝试



在后期实际投屏调试的过程中发现,绝大多数大屏都会有色彩不饱和、屏幕黯淡发灰的情况。所以在最终稿里我们把内容区域的亮度提高了一个量级。比如将大标题设为白色,数字翻牌器设为正黄色,辅助说明文字也改为白色。之所以选正黄色和白色,是因为这两种色彩属于安全色,能够在绝大多数设备上原样呈现,很少出现色差。同时黄色是整个色相轮中明度最高的颜色,能够与深蓝色的背景形成最大的对比度。



下图中为基础配色方案

a94957303a0632f8755a52185743.jpg


下图中为字体运用方案

f1ad57303a9832f8755a5241d5a2.jpg

在制作的过程中前端同学提议,地平线上的太阳可以随着数值增长冉冉升起,当数据达到三万亿时太阳升到最高点。这一想法得到了大家的一致认可。因此后台数据就和前台的视觉产生了联动性,它除了给观众一种心理上的暗示,也为主持人增加了一个噱头。在此为前端小伙伴点赞。下面就是当数据到达三万亿之后的画中画界面。        



在这三万亿数据的背后,是无数的剁手党。所以三万亿不只是屏幕上的一串串数据,它更是形形色色的消费者。在这里更要为他们点一个大大的赞。值得一说的是,这张屏幕中的地球并不是单纯的静态图片,它是一个调用了实际数据的3D模型,并且可以精确定位到县一级行政坐标。在这里我们生成了一张点阵地图作为球体的贴图。



在我们拥有版权的字体库中并没有一款专门针对大屏显示的数字字体,因此我们重新设计了一款数字字体,使其具有较高的可读性和美观度。

588757303bb232f8755a52b8c988.jpg

到此整个大屏的设计过程已经梳理完毕。由于项目时间仓促,本项目中依然有很多不完美之处,但每一次的历练都是下一次成长的基础。更多经验分享敬请期待。

309
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功