摘要：阿里巴巴在面对重要紧急项目中是如何高效协作和把控质量的？在阿里，不同岗位的员工如何高效协作？本文将带大家换一个视角感受阿里员工是如何思考和解决问题的，从阿里2017双11数据大屏项目设计师的角度探讨如何寻找“完美”设计与项目规划的平衡点。
本次直播视频精彩回顾，戳这里！
演讲嘉宾简介：
李以杰(花名：沉下)，阿里巴巴视觉设计师，2015年加入阿里巴巴，负责阿里巴巴基础设施产品的视觉设计，有着三年的双十一大屏项目经验。
以下内容根据演讲嘉宾视频分享以及PPT整理而成。
本次的分享主要围绕以下三个方面：
一、什么是数据可视化大屏
二、开启和管理项目
三、有理有据的设计
一、什么是数据可视化大屏
相信大家对于“数据可视化”这个概念一定不陌生，平时大家在做PPT演示文稿的时候使用的树状图、饼图等，这些其实就是数据可视化的基本展示形式。
此外，在一些电影大片或者科技展览中，大家也经常会见到如下图所示的一些数据可视化的艺术性表达。
用一句话来总结数据可视化大屏，那么它就是利用人眼的感知能力对数据进行交互的可视表达以增加认知的技术。这句话的重点在于“增加认知”，无论是简洁地表达还是炫酷地展现，将数据进行可视化都是为了让用户能够更好地阅读和理解。
可视化主要有以下4种作用：
- 减少认知负担
- 减少搜索时间
- 支持感知推理
- 传递交流思想
在企业中，可视化应用最广泛的领域当然要数监控和运维了。在阿里巴巴集团内部也有很多的运维和监控系统，这些系统会时刻注视着IDC的一些相关指标。而双11数据大屏的主要作用就是将影响双11交易的核心指标和辅助指标融合在一起，让技术人员能够快速定位问题，保障双11稳定性。下图所展现的就是阿里巴巴在双11当天的监控作战指挥室，图中远处那块高3米多，宽10米多的显示器就是用于投放监控大屏的。
阿里巴巴双11的数据大屏包含了4个部分，其中监控屏主要是对淘宝、支付宝交易数据以及限流、安全、预案数据进行展示；第二部分就是技术屏，这个屏主要是展现各个部门的重点数据以及重要能力；第三部分是无线大屏，也就是可以将数据展现在手机上面的工具，作为大屏全终端展示的一环，技术屏可以方便监控人员随时随地进行监控；第四部分是媒体技术屏，这部分用于双11晚会媒体中心，用于对外直播和展示集团技术亮点。
上述所有的经典大屏加起来一共有31块，同时对于阿里巴巴而言，项目的时间安排也是非常紧凑的。从项目启动到所有的大屏上线一共只用了不到两个月的时间，而总共的项目参与人员也只有1个PM、3个设计师以及4个开发人员。
数据大屏最终的呈现效果如下图所示，出于数据安全角度的考量，下图中只展现了部分的大屏。大家可以看到，每块大屏所涉及到的数据量是非常庞大的，每个大屏的开发不仅需要与十几个部门的接口人进行对接来保障稳定性，设计师也需要花费很大的心思去设计和组织每个数据大屏的内容，这样才能保障多个大屏投放在一起的时候所达到的效果是清晰的、统一的。
二、开启和管理项目
那么，阿里巴巴是如何保障在仅投放这么少的人力和这么短的时间内完成数量如此之多的大屏项目并且同时保证设计质量的呢？接下来就与大家分享。
传统的设计开发流程如下图所示，首先业务方会提出数据收集的需求，并把需求提给PM或者产品经理。PM或者产品经理来整理数据和需求并且对于这些需求进行排期，PM会将这些整理排期完成的需求提供给设计师。设计师会根据需求对这些数据进行展示设计，设计师完成的设计稿会回过头来给业务方进行设计评审。业务方会对于设计稿进行评审并且给出修改的意见。之后，设计师会根据修改意见进行修改，改完时候设计师会把图片进行标注、切图以及添加一些细节的动效，之后把这些东西给到前端进行开发。在开发完成之后将Demo返回给设计师，设计师进行验收再次给到前端修改，最终完成一个产品。
那么，上述的整个传统流程有什么样的特点呢？首先，它采用的是瀑布流的形式，耗时相对而言比较长，如果中间有一环出现延期，那么就必定会影响到后面阶段的进度。其次，传统方案是一个人对人的流程，人与人之间反复沟通所造成的成本是非常大的。第三，沟通所产生的结果，记录了设计的文档以及任务或者缺陷的清单往往难于管理，很多时候往往是使用Word文档的形式在人与人之间相互传递，这样就非常容易造成版本混淆。
所以，阿里巴巴采用了两个工具帮助提高工作效率，第一个工具就是云效，在阿里巴巴内部称之为Aone。在数据大屏项目中，主要利用了Aone的项目管理和度量的功能，可以借助Aone提需求和缺陷，并且进行任务指派和划定优先级，通过这样的方式就可以非常高效地管理会议记录等。
第二个工具是阿里内部设计经常使用的Demo中心，Demo中心主要是分为两个模块，其中一个是设计师经常使用的插件，这个插件安装之后可以一键导出设计稿，同时将设计稿中的文件传输到阿里内部的Demo中心的站点上并生成一个对应的链接，之后通过转发链接就可以让其他人快速地看到设计稿，并且这个工具可以帮助设计师进行自动标注和切图等，大大节省了设计师的时间。
那么，如何围绕这上述两个工具进行协同呢？如下图所示的就是阿里的设计开发协作流程。首先是由业务方收集到数据，将需求和问题提交到Aone，Aone立即会进行任务指派，这时候设计师会收到一个邮件的任务提醒。设计师会根据Aone上的需求以及业务方标注的任务优先级对需求进行划分，根据这些需求做一些相关的设计，设计师产出之后会将设计文稿上传到Demo中心，之后开发直接根据Demo中心最新的设计稿进行开发。当开发完成之后，设计师会直接在Demo中心进行验收，之后将缺陷再次提交到Aone，Aone再次指派到相应的前端进行开发管理。同时，设计师产出的设计稿也可以给到业务方进行评审，业务方对于设计的意见也可以加入到当前的需求中去。总结而言，就是业务方通过Aone提需求，设置优先级，反馈设计问题；设计师通过Aone管理业务方的设计任务，同时在Aone上针对前端提设计，还原缺陷，同时产出的设计稿可以一键上传到Demo中心。前端只需要对照Demo中心的设计稿进行开发就可以了，而不需要一次又一次地从设计师处获取文件。Aone上每一次需求的变更，相关的人员都会及时收到钉钉或者邮件的提醒。
同时，这样做也可以非常有效地保证设计的还原度。上面提到在传统的瀑布流的协作方式中沟通的成本很高，一些问题的记录很容易在碎片化的沟通过程中丢失，最终导致上线之后的效果出现一些问题。而通过以工具为中心的方式，设计师可以拆解设计需求，比如双11数据大屏中两个相似内容的布局，这样就可以一起做设计，或者多个大屏都有仪表盘的需求，这样就可以先将通用的组件进行设计，之后立即给到开发，也就是说开发同学可以通过设计师拆解的设计需求做敏捷的开发和快速交付。同时，交付即验证，也就是说在交付之后可以通过Aone立即通知到相应的人员，并且设计师可以快速得到业务方的反馈，前端的Demo也可以得到设计师的验收，每开发完成一个屏，设计师也可以理解进行设计筛查。这样的方式既保证了设计和开发的效率，同时也保证了快速交付、快速验证和快速迭代，能够最大限度地保证最终产品的设计和质量，不会遗漏任何一个设计问题。
其实，对于阿里的设计师而言，在工作中最长提到的一句话不再是“不是说上次的问题你改了吗”，而是“问题我提到Aone了，下午有空看一下”或者是“Aone上提的任务我修改完了，如果没问题就Fixed”。
三、有理有据的设计
最后分享作为阿里的设计师的一些思考。阿里的设计师除了做设计之外，不一定需要学会写代码，但是对于设计师而言，上需要了解业务的逻辑，下需要略懂一些前端的原理。之前开发大屏的模式是对于每一块都是单独写下来，每一块都是从布局、文字一点点开发出来的，这种方式不仅费时费力，而且还会有很多重复性的工作。这次双11数据大屏的前端采用React进行开发，其可以采用设置变量的方式减少大量的重复性工作，同时具备很高的灵活性。
基于这一点，可以将大屏中的设计元素类似于UI组件库一般一个个进行抽离，比如文字、颜色以及间距等等，依照信息层级设置成变量，前端通过录入设计师制定好的规范就可以大致实现数据大屏的整体框架和样式。比如设计师会根据前端开发人员先写整体布局和栅格，然后再写容器层，之后再在容器里写内容的代码习惯进行设计。
下图所展现的是数据大屏的设计规范。在阿里巴巴，并不是当需求来了，设计师就开始针对这个需求将大屏做出来，解决完成之后再做下一个，而是首先会出一个整体的规范，这个规范也是设计师与业务方和前端一起讨论出来的解决方案。从下图中可以看到，每一个颜色都会有自己具体的使用方法，并且文字的每一个变量都会进行标注。
大家知道，设计师有时候会天马行空地进行想象，而设计稿也会经过反复地修改。有时候开发已经完成了一个页面，而设计的突然修改就会带来很多返工的问题，特别是作为基础的设计规范。所以阿里巴巴内部对于设计规范的定制也是十分严谨，设计师会频繁来往于项目审核和作战的现场去验证设计的实际效果，比如下图中以字体的字号设计为例，为了达到最佳的阅读体验，设计师会经过多次尝试之后，根据现场不同人员的座位布局和距离大屏的距离将信息分为三个等级。
每个级别都会确定相应的信息层级以及字体、字号以及相应的颜色，然后标注作为变量，针对于每个变量会有明确的定义，这样便于前端进行录入，也使得后续的设计非常快捷，开发也非常顺畅。
一般的设计流程在设计之外，修改也是相当耗时耗力的。修改的时长可能会比初版的设计花费更多的时间，更多的修改意味着更大的沟通成本，而且往往在修改的过程中就会离设计师的最初目标越来越远，所以阿里巴巴的选择是在最基础的设计规范里做到有理有据的设计的同时尽量取得业务方和开发的认可，减少修改和返工，让设计回归设计本身。
最后，阿里巴巴的设计师们也在思考，产品出了规范，开发也根据设计规范产出了相应的组件，能够快速地搭建一个大屏，那么是不是也意味着其他人也能利用大屏的组件快速搭建一个大屏呢？能否将大屏的能力日常化、产品化，赋能到更多的业务中去，让项目的投入产出比最大化呢？阿里巴巴基于历年大屏的设计和开发经验实现了一个数据大屏智能搭建平台。所以，对于阿里的设计师而言，需要同时具备规范化的设计、全链路的思考以及产品化的思维这三种能力。
