My Secret Rainbow

B-Design：云时代的企业设计

① 导言

在这个各行各业都在拥抱云计算，积极地讨论着“行业重构”，“SaaS化”，“建设企业中台”的时代，设计师对B类设计的理解是否还停留在「页面简单，靠表格表单，专注提效，好看没必要」的传统想法？

阿里云作为行业数字化的领导者，应该倡导什么样的设计，助力不同行业快速地云化转型？阿里云企业级产品设计系统B-Design尝试回答这个问题。

② 云计算带来的设计变革

云计算的到来，让整个社会各行各业开始了数字化重构的过程，传统的企业业务产生了革命性的转变。各大企业越来越倾向采购成熟的SaaS化解决方案，而不再自建内部系统。

云化的趋势使企业系统在从基础能力上进行整合，云计算建设生态，企业依附生态深挖垂直领域。

阿里云也在打造自己的企业产品生态，为企业提供一个全方位的数字化工作台。在这样的变革中，产品的边界将被打破，原本以产品/功能维度去定义信息结构的设计方式将被动摇。

1.行业：企业服务逐渐商品化

在过去的几年里，云计算行业里越来越多成熟的技术开始对外商业化。这些原本用于内部员工或者开发者使用的平台，在逐渐由系统转化成商品，并且给客户快速复制交付和使用的过程中，必然面临被评价，被选择。

企业级产品再也不是非用不可，体验的差异也会更直接地摆在客户面前。

2.功能：业务与技术的更深融合

过去，我们普遍认为，云计算是单纯的技术输出，售卖的是云资源和运维工具。然而在帮助越来越多企业进行云化转型的过程中，我们发现不同行业都有着自己的特点与模式，企业级的产品中，业务与技术会越发不可分割。一个好的产品需要懂业务，同时又兼具云技术中台快速开发和定制的能力。

3.用户：业务员与开发者边界的模糊化

在行业拥抱云的同时，云也在拥抱行业。

越来越多低门槛编程，快速搭建页面和流程的工具，让每个企业的用户都可以在自己的系统上进行微创新和改造。建立符合自己场景的小型应用。【平民开发者】的概念近年来在行业内被越来越多人关注。相比传统企业中IT与业务团队截然分开的情况，未来业务员与开发者的边界会逐渐模糊。

技术门槛逐渐降低的同时，设计也慢慢走向普惠，如何帮助越来越多用户、企业、开发者认识设计，理解设计，快速地学习和使用好的设计，让设计和技术一样，走向开源和共建，是我们需要思考的问题。

③ 阿里云B-Design，为企业上云而作

未来的企业服务产品，会逐渐转向「搭积木」式的设计模式—底层构建丰富而可解耦的技术能力模块，上层以解决问题的方式组装不同的业务产品。像CRM这样大型的业务系统，不会是越长越大越发冗余，而是可以被拆分成小颗粒的原子能力集，灵活组装成不同体量不同侧重的分子产品。

面对企业全面上云，交付场景千变万化，阿里需要一套完整而灵活的设计系统去组织云上生长出的各种企业级服务。为此，我们搭建了全新的B-Design企业级设计系统，迎接云时代SaaS与行业设计的挑战。

B-Design的以阿里云行业的产品交付经验为基础，对内帮助解决方案交付和业务上云，对外配合云计算的能力输出，赋能合作伙伴与开发者，建设各自的产品。

B-Design倡导 “简单，专业，包容” 的原则，灵活满足不同行业，不同场景，不同品牌的客户诉求。通过鲜明而灵动的视觉风格，来建设云生态下的设计认同。

阿里云企业级设计生态

1.灵活而包容的框架设计

Alla Kholmatova曾在他的书中给出设计系统的不同模式：

“模块化的系统由可交换的和可重复使用的部分组成。它对于需要快速扩展的项目来说非常合适。坏处是想要模块既能一起使用也能分开使用，这一点特别困难。这种系统尤其适合大型产品像是电商类，金融类，和政府网站类。将模块化设计和原子设计一起应用会非常有趣。

集成式的系统适用于独特的情境。它由不同的小部分组成，但是不同的小部分不能互换。这种系统适用于重复模块极少和视觉方向频繁变动（作品集，橱窗展示，营销活动）的产品。”

与阿里云控制台不同，B-Design 面向的是云生态下的 SaaS 和多变的行业交付场景，在「一致性」与「包容性」之间，B-Design 找到自己的定位：

B-Design需要是包容，模块化的设计系统：

灵活的，多选择的，相对宽容的设计系统，给具体产品的设计师提供足够自由和发挥的空间。同时提供丰富的场景模块和原子组件，供设计师/开发者快速组装适合自己场景的解决方案。

适配多端的设计模块

2.风格化与品牌强化

一套好的设计系统，需要是开放而演进的，以满足不同客户的差异化定制，B-Design允许客户在我们视觉语言基础上打造符合自己品牌风格的设计。而中小企业，尤其是一部分欠缺设计能力的独立开发者，往往又需要内容完整可以直接使用的设计方案。

阿里云云市场上有数以百计的SaaS产品，这些产品有的是内部孵化，有的是合作伙伴提供。面向这样的场景，B-Design提供热情橙与冷静蓝两种经典配色，为企业建立开箱即用的体验设计方案。无设计能力的中小企业或独立开发者，也可以使用B-Design快速地搭建自己网站。

同时，B-Design提供适应多行业的家族色系统，帮助合作伙伴与客户强化自己的品牌调性，打造一个符合用户自己品牌的配色方案。

B-Design多框架多配色方案

另一方面，在尊重客户自定义颜色和品牌的诉求时，我们陷入了另一个挑战：

允许客户过度开放，是否会丢失掉B-Design的设计内核，变成彻底的工具？如何在帮助客户传递品牌的同时，体现出生态的设计凝聚力，形成阿里云的设计认同？

我们需要用更加鲜明的，风格化的元素去体现自己的特点。

呼吸色

B-Design的呼吸色「Breathing Color」，灵活，流动性强，带入科技与智慧感，在繁忙的数字世界、人机交互过程中，鼓励正念（mindfulness）和交流（communication），也传达其不断的思考性（thinking）。

为了帮助用户快速构建自己的呼吸色体系，我们开发了一个呼吸色工具，自定义调整颜色、动态类型，呼吸频率等。

B-Design呼吸色工具，想要尝鲜了解详情，请关注我们后续的视觉设计详解：）

虚实-毛玻璃

毛玻璃效果在设计领域早已不是什么新鲜事。但是企业类后台系统的设计中，似乎还很少用到。究其原因，大概大部分设计师会认为毛玻璃设计复杂，消耗性能，在B类设计中没有必要。

然而随着技术的发展，性能早已不是瓶颈，我们发现，在企业类产品中，毛玻璃效果除了视觉点缀，传达品牌调性以外，更可以创造一种空间感，呈现介于2D与3D之间的层级。在零售，医疗等贯穿线上线下体验的产品中，尤其可以制造视觉差，帮助到用户理解信息之间的层级关系。

在建立阿里云B类鲜明设计风格的同时，如何将设计系统打磨得更易用，专业和高品质？让设计品质感成为产品的差异化竞争力？阿里云B-Design又在哪些行业和场景中落地实践？如何加入我们，共同建设一个开放的设计生态？

3.打造设计品质

当企业内部系统变为商品，摆在市场上被比较，被选择的时候，设计品质会是最先触达到用户的，在行业SaaS的时代，设计品质感将成为产品的差异化竞争力。观察海外优秀的云化SaaS类产品，无论Salesforce，还是Jira，Dynatrace，无不在体验的细腻和界面的品质上下足功夫。

B-Design希望扭转企业级设计长久以来简单，枯燥，只强调效率的设计现状，赋予阿里云企业生态更强烈的风格和品质感，打造一个年轻，生动，专业的设计形象。

专业化组件升级

原子级的组件（component），是一切设计系统的基石，B-Design的组件基于阿里云控制台Xconsole设计体系打磨多年的设计经验，除了常规通用组件外，也提供如多维筛选，代码编辑器等专业组件。

原有云计算组件的基础上，B-Design将呼吸色，圆角，企业级配色体系等融入其中，给出更加灵活的多变，更细腻的设计方案。

B-Design基础组件合集

圆角与阴影

有别于阿里云控制台强调一致统一的设计标准，B-Design使用了圆角与阴影的设计风格，提供多种尺度和层次的设计供用户选择。

圆角的设计使控制台看起来更为亲和、友好。圆角的设计会贯穿在B-Design组件、卡片和页面布局中，配合多个层级的阴影效果，更清晰地展示信息层级。

数据可视化

在企业级产品后台中，数据可视化部分是最不可或缺的，也往往是高光的部分。

B-Design通过对阿里云及行业交付领域大量案例的分析和比对，结合云运维、云安全、城市数字化、线上线下数据共享等领域场景，整理出一套完整的，用于数据可视化的配色与布局方案。

数据可视化演示案例

三维与微动效

曾经一度，我们也认为只有C类设计才需要使用动画效果来吸引用户的眼球。但事实上，面向企业的设计中，自然，流畅，符合预期的动效不但可以提升产品的品质感，也可以很好地帮助用户理解信息。

在B-Design中，动效的出现旨在「连接“元素、用户、品牌”」，在专业的场景中，使用动效不仅仅为了吸引用户注意，更在于连接相关的信息，用户心智，和品牌元素。我们也沉淀出具有云计算和B-Design特点的一些典型动效供用户选择。

部分动效演示案例
暗黑风格

如果你去观察，会发现超过七成的工程师们都喜欢使用暗色的代码编辑器和工作台。对于为什么专业开发者偏爱暗黑色或许可以推给宇宙未解之谜。但提供暗黑版本，是定位「服务专业开发者」的B-Design不可或缺的部分。

针对暗黑版本，B-Design有针对性地构建配色模式，响应状态，和大部分核心组件。

B-Design浅色与暗黑模式

阿里云RPA产品暗黑版风格演示

④ 阿里云成功经验沉淀行业设计模板

阿里云的企业生态包括面向行业的解决方案，企业级SaaS产品及专业的开发运维工具等。在继承阿里云的设计风格和元素的同时，我们希望阿里云生态下的设计师与合作伙伴，能够专注自己的业务逻辑，快速搭建高级和有品质的产品体验。

B-Design行业实践合集

下面是B-Design的设计案例集合，出自于我们在不同领域和行业的设计实践。

想看更多的设计案例详图？可以关注下一篇B-Design的视觉设计详解

⑤ 去中心化的演进方式

Nathan Curtis曾在他的文章《 Team Models for Scaling a Design System 》详细介绍了不同类型的设计系统模型：Solitary（独一式）Centralized（中心式）Federated（联合式）。

在我们以往定义设计规范的过程中，往往是采用「独一式」或者「中心式」，由一个团队进行规范的定义和维护，其他设计师执行，强调一致，统一。这种模式适合一个集中的系统，保证产品内部的全面规范。
B-Design 当前还处于 V1.0 的成长初期，我们的场景来自于阿里云不同业务的设计师和产品，来自不同业务中提炼出的共性和特点。但 B-Design 还需要在更多产品、场景中锻炼，吸收各方的意见和建议。后续我们会陆续补充组件的前端范式，典型的设计模式与场景，以及面向行业的设计指南。敬请期待…
我们希望 B-Design 面向行业，保持开放，坚持包容的，联合的，去中心化的设计共创。让更多中小企业和合作伙伴，能够基于 B-Design 的风格进行快速的定制和再创作，形成适合自己场景的设计规范和子系统。
未来，在设计系统的基础版本定义完成后，我们希望以开源化的方式来运作 B-Design，让它不止是属于阿里云的，也是属于云时代的，属于领域和客户的。云计算生态下的各个行业开发者，设计师，都可以参与 B-Design 的共创，利用 B-Design 的风格建立属于自己的设计模板，设计规范。
在这个时代，阿里云在驱动行业实现快速的数字化转型，建设云化的企业服务生态，帮助中小企业和合作伙伴搭建自己的SaaS产品。B-Design希望能够以设计的方式助力这一进程，让云计算生态下的设计师，开发者，用户都能享用一个简单，专业，高品质的设计体验。

原文：https://mp.weixin.qq.com/s/BjMaoOoptndi_7_n_3wRZQ