小雨点

01、项目背景

光明顶数据监控屏是每年在双十一、双十二前后,投屏在光明顶的作战指大屏,供在场的工作的同学协同办公,发现问题。双十一和双十二是每位技术人的大团建,在光明顶作战室的近20个BU的两百多名同学,其余分作战室10余个,这也是每年一次的超大规模人机协同。

回顾近三年的监控大屏设计,为了给技术同学营造更好的数据阅读体验,每一年我们都在思辨如何改进。但由于硬件上的限制,我们大多从配色,字号等细节方面优化,对于整体的布局以及综合体验难以有更大的变动。

今年,业务的量级和发展趋势已快速扩展到更大的维度 ,技术也迎来的更大的挑战,已有的监控模式已难以覆盖如今的业务体量。 加之我们平日已经对于数据大盘已有一定的平台沉淀,光明顶大屏硬件也在一定程度上有所升级,环境的驱动,监控模式的突破性体验升级势在必行。

我们从头梳理大屏的使用场景,发现了它目前在于体验的维度上相当局限。我们从三个维度去衡量整个监控体验:

业务视角(即业务诉求)是否全面?体验旅程(即用户诉求)是否覆盖全面? 体验接触点是否能有所创新或扩展?

 

02、呈现一个全方位的业务视角

以往的光明顶的监控大屏是一个”巨大的Dashboard”,布局上没有明确的重心和视觉焦点。又由于硬件的限制,内容在布局上没有整体性,各为一体。今年我们首先根据硬件升级的程度,将大屏分为一主屏,两辅屏的方式,让布局上更加聚焦的同时保持业务视角的覆盖。

接下来,根据大屏的物理拼接方式来划分整个大屏的栅格,以及业务模块,这样能够尽量避免内容出现在拼接缝的位置,这种拼接缝在展示时一般会吃掉2px左右。

在视觉设计过程中,遵循这样一个由中间向两边扩散的层级关系进行。同时,选择主屏来诠释我们的业务层级关系,底层是基础设施的分布,为我们中间层为淘系及支付宝核心交易数据,这两大核心数据支撑整个GMV。

主屏会聚焦在当下场景所关注的核心数据,一般不做变化,辅屏根据投屏的临时需求随机更换。譬如,当压测时,“业务一”出现了问题,用户可以通过语音交互或Ipad在辅屏空间内,放大“业务一”的内容。

主屏会聚焦在当下场景所关注的核心数据,一般不做变化,辅屏根据投屏的临时需求随机更换。譬如,当压测时,“业务一”出现了问题,用户可以通过语音交互或Ipad在辅屏空间内,放大“业务一”的内容。

 

03、覆盖一个完整的体验旅程

从往年来看,对监控的需求实际上从双十一备战期间就已经开始了。双十一备战从双十一前很早就开始了,在这段时间持续保持强烈的对系统监控的需求。所以我们对整体监控的体验流程应该从从双十一备战期间就开始切入,而不仅仅是双十一当天使用。

今年我们让各个场景的视角更加聚焦,压测聚焦在系统稳定性、成功率上;双十一当天将视角转移到淘系交易相关内容上,双十一白天10点之后随着新零售业务加入双十一的大军,我们增加了新零售场景;在接近双十一尾声,我们增加更多回顾技术双十一历程等总结性的数据内容,以及拍照留念的内容。在整个体验流程中,营造更多的惊喜点。

 

04、讲述一个全体感的监控故事

 

数据是看不见摸不到的,怎么样才能让用户有更全方位的数据感受?我们转换下思维,调动的五感的目的是什么?当我们能够真切的感受到一个物体的时候,实际上操控感、控制感的增加。从这个角度出发,我们首先尝试了对大屏的灵活控制感:

监控屏的交互很麻烦,在多人协同的情况下,很难统一视角,所以,监控大屏的控制必须掌握在现场的指挥手中,听从指挥调度。

IPad的切屏方式已经是非常成熟的方案,除此之外我们还尝试了更加智能的通过天猫精灵来切监控大屏。通过天猫精灵技术支持同学帮助,提前录入切屏的话术达到智能切屏的效果。(由于现场声音嘈杂增加了隔音罩)

往年监控屏需要做好所有切屏预案,把可能发生的切屏场景都开发好,现场根据需要切预案。今年,我们通过DOA快速复制配置,并且同步移动端。这样一来,每位同学都能够掌控自己的大屏。

通过DOA的快速搭建同款双十一监控大屏,衍生出众多“战区大屏”,用于各个作战室进行投屏监控如蚂蚁战区、盒马战区,研发效能战区,IDC战区,高德战区,导购战区等等。

 

视觉作为五感中的最核心,今年我们也在思考如何更深入的营造监控氛围。我们发现往年监控屏的”故事“讲述的不完整,用户都是直接阅读到“故事的高潮”,并没有开头和结尾。今年,我们加入开场视频,视频内容从新零售出发,最后回归全球化监控视角,讲述完整链路。为接下来所有的数据监控场景做好铺垫。

每次压测都会从夜晚持续到凌晨,开场视频配上激昂的音乐,不仅从观感上给在场的同学以仪式感,还能够让大家打起精神更好的状态备战。

 

上海媒体中心的技术大屏,是对阿里技术今年的一份答卷,这些数据凝结了阿里技术人的付出和奋斗,它讲述技术人这一年来前进的脚步。用这样一份答卷作为光明顶监控的故事结尾最合适。

每个阿里技术人都为这个阿里巴巴缔造了全球数字经济时代的“操作系统”舔砖加瓦。在11号GMV出现历史性颠覆时刻时(如超过去年峰值,超过2千亿,零点),我们在光明顶作战指挥大屏投上技术大屏及GMV,供大家拍照留念,记录双十一“高考交卷。

 

04、沉淀

在双十一后我们将历年的大屏样式沉淀成各种大盘主题,并落地在平台中。通过配置项变量统一控制大屏风格,最终达到一键切换主题的目的。

文章内容为原创,未经允许,不得转载。

 

原文地址: TXD技术体验设计(公众号)

作者: 弋南(高超)

 

转载请注明:学UI网 » 带你探索双十一光明顶监控大屏

登录收藏
 
你可能喜欢的:
点滴匠心,声入人心点滴匠心,声入人心
数据可视化大屏设计经验分享 【进阶篇】数据可视化大屏设计经验分享 【进阶篇】
司机金融首页改版浅析司机金融首页改版浅析
AI时代下的求职服务设计|58智能求职助手交互设计总结AI时代下的求职服务设计|58智能求职助手交互设计总结
PUPU奇幻之旅 - 品牌视频设定PUPU奇幻之旅 – 品牌视频设定
从0到1:领宠APP产品与视觉设计分享从0到1:领宠APP产品与视觉设计分享
设计沉思录|58车检改版项目总结设计沉思录|58车检改版项目总结
一个日常需求的层层提核一个日常需求的层层提核
哇哦!原来你的主KV是这样设计哒!哇哦!原来你的主KV是这样设计哒!
PUPU激萌表情设计故事PUPU激萌表情设计故事