云栖TechDay第37期，阿里云资深视觉设计师野一带来题为“计算的旋律—阿里云视觉语言的探索”的演讲。本文主要从回顾阿里云品牌设计的心路历程开始谈起，走过了很多坑，换了很多方向，从用户出发，从赋能触发，总结经验整合设计，探索出一条有想象力的阿里云视觉设计之路。
云计算品牌设计对于很多设计师来说是一个陌生的领域，作为阿里云设计ACD团队的一员，从2014年至今经历了阿里云品牌升级、官网改版等项目，通过挖掘品牌属性，总结整合设计模式库，从用户出发，从效率出发，探索出了一条有想象力的阿里云视觉设计之路。
多方向思考
我们从2009年发展到现在，对比淘宝天猫这些BU来讲，我们不管是从体量或者是业务上面来说，还是非常小的BU。但是我们发展到今天，一直随着业务发展一边设计一边探索。
阿里云去年8月份北京云栖大会时进行了一次品牌升级，更换了品牌LOGO，我们在接到这个品牌项目时，首先第一步，先回顾阿里云2009年每个阶段做的每一个LOGO， 2009年的第一个LOGO就是阿里巴巴的云，不用做品牌背书。从2010年到2016年，我们一直用云的中文形状去代表品牌形象，在整个业务发展过程中，我们也遇到过很多问题，比如外国人不知道“云”到底是什么，包括随着整个业务的发展，体量越来越大，我们也会遇到云到底怎么去赋能业务，所以我们开始思考怎么样对品牌进行升级和调整。
然后开始到飞机稿的阶段，一开始方向是想要在原来图形上进行升级，考虑到我们品牌一些历史关系，我们本来不希望直接把所有东西全部搞掉，所以能够看到我们也做了很多尝试，包括字形、图形上面多一些细节或少一些细节，我们发现当减到只剩下7个点的时候，基本没有办法聊下去了。
我们又开始换方向去思考，去试一试别的图形的尝试。具像的云、抽象的云、一些线组成的云等。同时我们也看了一些竞品，包括腾讯云、百度云等，那么，当所有的友商都用一朵云去表达云计算的时候，我们是否还要这样去做呢？
于是，我们开始寻找很多关于计算的关键词，比如一些数字、符号、包括一些天文等等，希望回到计算的最初去思考。最后我们发现，计算的本质就是获取信息的一种过程，而这个过程就是由二进制0和1组成，所以我们又去做一些关于0和1图形的尝试，另外我们希望除了0和1，同时整体LOGO形态又像一颗水滴，象征云计算将像水电煤一样成为IT的基础设施，整体LOGO向上的动势，寓意阿里云要做云计算行业的先进领导者。
我们一度认为我们找到了设计的方向，但是我们忽视了两个非常重要的问题，我们沟通对象是谁，阿里云是什么?如果没搞清楚之前，我们永远在做无用功，我们发现沟通对象是阿里云现有用户和潜在用户，从这个图可以看出来，最下面一层是正在使用阿里云的公司，不管是央企、民企或者是中小型企业，中间部分用户是正在考虑云计算服务的潜在用户，而上面这些是云计算服务的一些观望者。我们认为中间部分是企业的先行者，而上面部分是企业大众。
那么到底谁是企业先行者？研究报告发现，有36%的中国CEO对未来市场前景非常有信心，而大部分企业主关注的是新技能出现、市场新品的出现以及新科技替换，而53%的中国CEO已经开始使用了这些数据分析来寻求更好的洞察。所以企业大众跟企业先行者的区别是什么？企业先行者是影响企业大众的一群人，企业大众会关注当前问题，缺乏一个完整的计划，而且不能完全明白洞察的力量，步伐缓慢缺乏对用户的理解，而企业先行者想法不断，计划不断，希望能够用洞察的力量灵活去为用户提供更好的服务。
从为企业找到高质的回报，到开始思考为用户和公众提供什么。包括他们洞察的点，不止于此，我希望能够为企业不断创造价值。作为一个云计算厂商，我们拿出所有方案去跟沟通对象去聊的时候，他们不能从这些图形里面理解，他们很难从这些图形里面找到代入感。
阿里云到底是什么？在DT时代，云计算是公共服务，更加是计算的引擎，而互联网是基础服、基础设施，数据是资源，在整个DT时代中，阿里云一直都是在发展中，目前阿里云在全球有600多个结点，覆盖了全国大部分的城市，包括美西、美东、欧洲、澳洲等14个地方都有飞天数据中心，去年一年我们在海外市场增速已经超过了400%，我们不断在帮助他们出海的同时也在为他们提供大数据云计算的服务，我们在国内的发展也非常迅速，阿里云在做这些事的同时，除了有很多的客户，除了可以挣一些钱，我们还可以给社会带来什么价值？
阿里云ET在赋能城市交通的时候，使得杭州市的部分交通路段车辆通行率提升了11%，ET城市大脑通过跟城市进行数据结合，能够让城市进行自我调节跟人类进行良性的互动。ET在医疗中也有一些实践，通过ET的医疗大脑，我们让甲状腺的结节诊断准确率，从医生准确率60%到70%提升到了85%。
重大突破
我们发现之前一些设计都太过于局限，无法讲清楚我们想讲的一些故事。接着我们重新换了方向，开始从程序员代码里面去找一些灵感，比如像一些计算的框、0和1代码、包括一些生态链连接等等关键词，从而得出最早的计算框图形。我们希望计算框图形本身是从代码而来，希望它除了固态图形，还能够有更多的想象。例如语言是一些无法计算的价值，生命科学是一些无法计算的价值，人类大脑是一些无法计算的价值，宇宙银河是一些无法计算的价值，我们在计算框本身的基础上又去赋予一些更多的含义，进行一些细节上的调整，中间两个框定义它是一个计算框，可以去赋能各行各业，中间是数据的流动计算，通过数据去服务各行各业。
到了这个阶段，阿里云LOGO的形象基本上已经确定了。但是完整的一个品牌形象，除了从品牌识别、字体、产品、视频、书、互动的一些东西以外，很重要一部分是网站线上的品牌体验。LOGO注册确认完以后，到最后要发布差不多一个月的时间，我们要对网站进行改变，然后去对一些网站上原有信息结构进行梳理，我们从视觉层面上进行一些优化，并且希望有一套新的视觉体系。
所以首先，我们需要回头看阿里云在各个历史阶段所做的一些网站，最开始阿里云不管是网站上面，包括现实中提供的服务还是非常好的。
然后到了第二阶段，我们在在线下用的是黄色，但是在线上用的是蓝色，蓝色用在网站的各个地方。
到了最后阶段，网站上面能够提供一些服务，包括解决方案、中间件、软件市场等等，它有非常大的体量，所以我们去做回顾，目的就是为了能够找到问题的本身，从而去解决问题。我们原来网站上面有很多的问题，线上用了不同两套视觉，包括有一些不同的配色，这些规范有很多图形、颜色的应用都是非常乱，包括在颜色使用上都是用小面积的文字链，或者是按钮，其实对用户来说很难形成非常强有力的视觉识别。
所以我们首先对阿里云颜色体系进行重新的推导和梳理，我们把阿里云这些品牌的颜色定义为品牌色，品牌中立色跟一些品牌功能色，去梳理出一张表，然后在表里面根据实际使用环境以及功能不同，在这个基础设置上面去做明度的变化，去定义整个网站包括组建文字图形控件状态等色彩。这个表的好处就是在做设计的时候，不再由设计师提供一个具体的设置，而是前端直接从库里面找到颜色，这个颜色就是阿里云的品牌色，这样既可以保证页面上的色彩统一，同时也可以保证高效的方便复用。
同时我们也重新梳理了网站的栅格体系，还有一些布局、字体、卡片等等，对于整个页面结构我们也进行了一些调整，针对原来我们通过字体大小或者是线来分别不同的信息层级而导致整个页面看起来非常零碎的问题，我们设计了一些不同的卡片形式，包括重新设计一些控件，适当的一些留白去重新组织这些信息。
然后我们又重新对阿里云首页所有图表、概念图、插图等等做了一些梳理，发现一个非常大的问题，我们如何用图形去表达类似于数据库或者存储或者云服务等等这样一些比较抽象的概念？很多时候我们对看不见、摸不着的类目，我们怎么去设计，怎么去表达？像谷歌云在做计算引擎跟APP引擎的时候，在做计算引擎LOGO的时候，很像一个芯片写实的形状，但是对表达APP引擎概念的时候又去找一些抽象的方案去实现。所以我们提出疑问，数据库的图表非得画的像一个数据库吗？这是一个非常有趣的问题。我们决定回到问题的最开始去寻找问题的答案。我们发现最早的人类在表达行走或者是太阳、房子、城镇的时候，不是去画三室两庭写实的房子，而是去画一个抽象的形状，通过想象你才能知道是什么意思。举个最简单的例子，一个加号，如果把它变长一点，又变成了一个十字架，如果是红色就是红十字符号，如果在界面里面看，你就能明白它是一个添加好友的符号。
我们发现符号其实是一个代表事物的标记，语言也是一个符号，符号本身有约定性和差异性，它这种约定性表示符号在这个社会约定俗成应用中间，形式和意义都是按照社会来约定俗成，符号的这种能指和所指，是由人类自己去规定的。
符号本身的差异性表示它不是孤立的一个符号，每一个符号都是在与其他符号单位差别中间去确定它自身的意义，说明符号它不是一个记号，而是系统的一个东西。
我们又去在一些艺术史上找一些不同的发现，我们曾经花了很多很多的时间去把一棵树画的很像，又去把一棵树变的不像。我们从一开始追求造型本身的美感，到后面我们开始慢慢去思考事物本身的内涵、气质、意义到底是什么，然后我们走出了死胡同，我们就发现去设计计算、存储、符号，其实它在一个大的系统没有一个约定俗成的意义里面，如果我们只用一个Icon没有任何的文字去解释这是存储、计算，这无疑是去发明一个新的文字。
Icon、banner、detail
所以其实我们想做的一件事情就是我们开始在思考到底什么图形才能够代表阿里云的气质。回到计算本身，去找很多二进制的代码，包括中国计算、珠算等等东西，包括去看一些当代的艺术作品，从中去推导我们第一个计算符号，从而形成大量的抽象符号体系，得出我们整个0和1的设计语言，这个设计语言分为形而上和行而下两个部分，形而上者为之道，行而下为之器。我们把道这部分定义为多维、运动、开放等关键词，而器我们定义为设计当中会遇到的容器或者是Icon，概念图或者是视频或者是线下书本等等。0和1设计从图形上面是抽象的，而组合方式是有规可行的。
举一个例子，比如多维怎么样去解释，我们在做产品的Icon，包括banner、详情页时候，我们其实在思考抽象的点线面图形怎么样在平面跟虚拟三维空间实现。我们在Icon上面定义好了一些线的粗细，不同的组合状态去形成一系列抽象的Icon，我们试图在图表上面去寻找运动的变化，去形成首页上一些抽象的图表。
但是到banner设计里面又发现了比较大的问题，我们在banner设计里面定义一个2.5维的空间，因为我们在首页或者是在各个banner设计的时候，我们会遇到一个比较大的问题，banner设计不像是一个Icon设计，它除了讲单纯一件事情的时候，可能还会有很多业务内容，比如说它的一些业务场景等，如果我们只用二维，会有很多变化。所以我们把banner拆分成三个不同的层，例如主体物、特性场景、背景层，我们通过一些小的交互动效方式把它们有机结合起来，去表达更多的含义。
到了产品详情页设计，我们又遇到了难题，我们希望抽象的图表在三维空间里面去进行一个尝试。因为用户在浏览从首页到详情页，是一个慢慢深入我们产品的过程。那我们想做的就是希望用户能够深入多产品内部，不止是在平面空间里面去看产品，更多我们在考虑有没有可能动起来，所以我们在图形形态、点线面体等等不同的形态上面，我们又开始考虑有没有一些材质上面的变化，有没有一些图形上面的变化，我们去推导规定好，通过这种规范的模型库，我们定义好不同的产品所表达的一些含义、所对应的这种形态、材质等等一系列的东西，我们去形成一系列产品的概念图，包括CDN产品、对象存储、FPGA云服务器、高速通道等等。我们希望用户在了解我们这些东西的时候，不仅仅看到平面的东西能够进入到一个产品的内部，能够知道这个产品是怎么运行，怎么去活动。
我们希望我们的计算框能够充满想象。所以我们在计算框线下面应用延展的时候，也定义好了一些计算的规则。比如说它是怎么样大小，在画面当中是什么样的比例，通过这套规则我们希望线上线下形成一整套，通过这个框去框住不同的各行各业，给它更多的一些想象力。然后打个比方能够看到这下面其实都是我们的一些客户，比如说12306，墨迹天气等等，小咖秀等等这些东西，其实大家很多时间在使用一些软件，使用一些APP的时候，已经不知不觉在享受我们云计算这些服务。
我们也希望计算框能够做一些更好玩的事情，不仅仅在图形上面去做一些解释，而且是能够在设计方面去做一些尝试。因为每年阿里云都会在全国各地举行好几个不同的云栖大会，每一个云栖大会我们都需要去做阿里云的产品手册，产品手册是一个非常大的工作量，我们一共有100多个产品，每个产品都有很多的内容，每一个云栖大会都需要做内容的更新，重新设计，我们通过把这些信息结构进行梳理规定好，骨架层、内容层跟一些皮肤层。通过骨架层定好内容的模板，皮肤层我们希望它可以有更多玩法，每一期可以让不同的设计师，去让一些不同的前端工程师，一些视觉工程师或者是一些数据可视化工程师去玩，可以把这个东西当成是一个画廊，你可以往里面做一些更多的想象。其实计算本身不是我们去设计一个什么样的东西，而是说这个数据本身呈现出来就具有一些美感。
说到运动，我们也归纳出了一些运动的方法跟规则，0和1在运动中间我们拆分成PTS规则，就说每一个运动方式都变成物理变化和速度等等。物理就是点或者线对象本身一个形态，物理是指物理属性通过这个形态与物理属性这种计算我们定义好了规则，它能够产生很多变化。而通过这些变化又能够产生进一步的更多变化，能够有一些更丰富可能性和一些视觉的表现，又能够产生一些新的不同形式和内容出来。当我们把这些东西加上一个速度，有了时间属性之后，它又有不同的东西，比如在不同的时间里面，它是先快后慢，先慢后快，怎么样的函数变化规则，通过这些规则组织，又有了一些不同的可能性，我们通过定义好这些规则之后，可以在不同的线上或者是线下延展或者传播设计的时候去做动效时候，可以去做一些尝试。
总结
最后，因为很多时候我们在做详情页、做渲染的时候，经常会遇到电脑太卡等一系列问题。对此，阿里云上线了GPU的云服务器，我们现在基本上都是通过云服务器进行一些动画、概念图、3D建模等等一系列设计。我们希望未来设计师不再去局限于工具的本身，而是解放生产力，去思考更多设计体验。另外，我们之所以从二维走向三维，因为未来设计不止会随着科技的发展，体验设计也在发展，我们未来面对设计环境不仅仅是在二维的屏幕上做设计尝试，而更可能是在AR或者VR等立体空间里面去做设计体验，所以我们希望，设计师以后在做这些设计的时候，所有设计师都有技术储备，能够在面对未来设计的时候游刃有余。
本文为云栖社区原创内容，未经允许不得转载，如需转载请发送邮件至yqeditor@list.alibaba-inc.com；如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至：yqgroup@service.aliyun.com 进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容。
