大屏ui设计系列之十三:阿里巴巴三万亿大屏项目
如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里
蓝蓝设计经常会接到大屏设计的项目，比如中国移动互联网监控大屏可视化设计及开发、太极集团承接的中央台应急指挥中心大屏可视化设计、交大思源承接的北京地铁轨道批挥中心大屏可视化设计、数码视讯展厅大屏可视化设计，在积累了一定经验的同时，也在不断的学习和丰富关于大屏设计的特点及数据可视化的表达方式。
前一段参加ixdc大屏数据可视化设计的工作坊，听阿里的交互设计师和视觉设计师讲淘宝大屏设计的理念和过程，回来继续收集一些资料做为学习和理解，分享如下：
，
原文链接：http://www.zcool.com.cn/article/ZNDA1MDM2.html
项目背景：
2016年3月，阿里巴巴中国零售交易市场2016财年商品交易即时总额即将突破三万亿，这是阿里历史性的一刻，也见证了消费的力量， 为了记录这一历史时刻，三万亿大屏项目应运而生。
我们先看一下最终的上线效果
对于页面风格，主要要求是要带一点喜庆的氛围。那么我们在用色上就不能太过沉闷单调。另一方面由于这是一个数据大屏，那么数字就是当之无愧的主角，从这个角度出发，整个页面的风格还要透着严谨和专业。太过喜庆有可能流于轻浮，太过严谨则可能显得沉闷乏味，无法调动用户的兴趣。如何平衡这两种调性，这是本项目的一个难点。
从以上这个出发点，我们梳理了这样一个思路。
当然这只是初步的感觉，是浮在空中的调性，想要将理念落地，还必须将这些抽象的调性落实为具体的像素、色值、字体乃至整个版式。
以下是团队成员进行的一些初步的尝试
在后期实际投屏调试的过程中发现，绝大多数大屏都会有色彩不饱和、屏幕黯淡发灰的情况。所以在最终稿里我们把内容区域的亮度提高了一个量级。比如将大标题设为白色，数字翻牌器设为正黄色，辅助说明文字也改为白色。之所以选正黄色和白色，是因为这两种色彩属于安全色，能够在绝大多数设备上原样呈现，很少出现色差。同时黄色是整个色相轮中明度最高的颜色，能够与深蓝色的背景形成最大的对比度。
下图中为基础配色方案
下图中为字体运用方案
在制作的过程中前端同学提议，地平线上的太阳可以随着数值增长冉冉升起，当数据达到三万亿时太阳升到最高点。这一想法得到了大家的一致认可。因此后台数据就和前台的视觉产生了联动性，它除了给观众一种心理上的暗示，也为主持人增加了一个噱头。在此为前端小伙伴点赞。下面就是当数据到达三万亿之后的画中画界面。
