大屏ui设计系列之十三-阿里巴巴三万亿大屏项目

汇率搜索 · 发表于 2024-12-11 13:08:10

如果您想订阅本博客内容，每天自动发到您的邮箱中，请点这里

蓝蓝设计经常会接到大屏设计的项目，比如中国移动互联监控大屏可视化设计及开发、太极集团承接的中央台应急指挥中心大屏可视化设计、交大思源承接的北京地铁轨道批挥中心大屏可视化设计、数码视讯展厅大屏可视化设计，在积累了一定经验的同时，也在不断的学习和丰富关于大屏设计的特点及数据可视化的表达方式。

前一段参加大屏数据可视化设计的工作坊，听阿里的交互设计师和视觉设计师讲淘宝大屏设计的理念和过程，回来继续收集一些资料做为学习和理解，

分享如下：

，

原文链接：:ZNDA1MDM2

项目背景：

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

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

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

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

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

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

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

下图中为基础配色方案

下图中为字体运用方案

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

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

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

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

蓝蓝设计()是一家专注而深入的界面设计，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、界面设计、大屏设计、界面设计、包装设计、图标定制、用户体验、交互设计、建设、大平面设计服务

相关文章

大屏设计系列之十二

V 2015双十一媒体大屏回顾技术分享

大屏设计系列之十一：界面设计分享可视化大屏界面设计三十例

大屏设计系列之十：界面设计分享可视化大屏界面设计三十例

大屏设计系列之九：浅析大显示屏的八大应用领域

大屏设计系列之八: 浅析监控领域的GIS技术应用

大屏设计系列之七：大屏幕界面设计应用案例欣赏

大屏设计系列之六：有"屏"有据，阿里双11大屏是怎样炼成的

大屏设计系列之五：大屏设计语言分析

大屏设计系列之四：大数据可视化设计，故事+数据+设计 =可视化

大屏设计系列之三：某地区地铁1号线大屏幕控制中心应用案例

大屏设计系列之二：大屏数据可视化设计项目心得

大屏设计系列之一：与太极合作，设计中国国家应急广播大屏预警系统界面设计

经过筛选和调研无人机控制系统 UI 设计很可能会成为带动经济发展的新生力量。北京兰亭妙微（蓝蓝设计）是一家专注而卓越的UI界面设计公司,以良好的服务为众多优秀企业提供卓越的UI咨询、竞品分析、交互设计、UI界面设计、大数据可视化设计、嵌入式软件界面设计开发、图标icon设计、大型网站设计、用户体验设计、软件开发....是一家从用户研究、交互设计及优化咨询、软件和网站设计、界面开发实施全方位提供解决方案的创新型设计公司。http://www.lanlanwork.com

		自动登录	找回密码
密码			立即注册