拥有一个完善的设计系统是所有正在或即将要做设计系统和设计语言的设计师与开发者的目标，B-Design 设计系统语言层建立了有关颜色、字体、icon、栅格、版式、间距、数据可视化等指南，组件层提供30+不同的组件，包括它们的不同状态，形成的模式，以及应用的产品。该篇文章聚焦B-Design视觉的形成与应用。创意平台百度ai

 豆包语音对话

B-Design 的设计原则为：简单、专业、包容豆包软件怎么用

在视觉上，关键词为：简洁（减少线的使用，空间留白呼吸），风格灵动（呼吸色、虚实），品牌强化（多品牌色）。基于多样化的产品组合、庞大的用户群体，我们希望这个设计系统在整体的视觉表现上是开放、包容的，传达品质感、高级感。智能对话

 电子魅魔

# 色彩体系音子ai官网

印第安纳大学一个研究：在杂货店的环境中，如果你只有文字，而且没有可识别的包装，无论是形状还是颜色，只要有人用它来选择你的品牌，大约需要8秒的时间；如果你有一个可辨别的颜色，需要6秒；如果你有一个可辨别的颜色和形状，需要2秒。ai工具十大排名

不管是线下还是线上的设计，色彩与形状是作为区分不同公司或品牌基因识别最强的2块而存在。全球范围内，如果要你说出IBM Design Language的色彩和Google Material的色彩是什么，熟知的人会立即说出：IBM Design Language的色彩是蓝色+深灰色（注意：不仅仅只有蓝色），Material Design的颜色是一个神奇的紫色，并且暗黑模式下的紫色也非常具备自己特色。音子ai官网

B-Design在色彩上也进行了很多的挖掘与沉淀，一方面突出BDesign的品牌，另一方面兼顾其服务的行业及产品特色，主要沉淀以下几点：豆包语音对话

标准色 Standard Color字节跳动ai大模型

B-Design提供冷暖2色代表，橙色作为暖色系中最温暖的颜色，欢快活力，积极向上，蓝色稳定，和平，自信，有点活跃的同时不至于太死板，建立企业服务产品的可靠性与稳定。豆包软件.

 豆包是免费使用吗

呼吸色 Breathing Color豆包语音对话

呼吸是机体与外界环境之间气体交换的过程，是我们赖以生存的介质。ai软件学习

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

呼吸色作为B-Design设计最核心的特色之一，应用在卡片中，大背景，品牌氛围等场景中。本地部署ai

冷暖融合渐变与呼吸感的风格，共同构成了B-Design灵活而又统一的视觉体系音子ai官网

同时，阿里云设计中心内部GDS（Generative Design Studios），开发了一个B-Design呼吸色彩工具，可以自定义调整颜色、动态类型，呼吸频率等。创意平台百度ai

 ai集成平台

渐变色 Gradient Colorai软件学习

B-Design蓝，渐变色应用在导航、高亮卡片、数据图表中电子魅魔

带有行业属性的色彩应用本地部署ai

 字节跳动ai大模型

无障碍色 Accessibility Color蘑兔ai

在遵循阿里云XConsole无障碍体系时，B-Design色彩增加了2个细节：一是核心色的色彩的acs值都为5.5或5.6，误差不大于0.1，再以统一的acs值往亮和暗色调整，确保整体颜色色卡在横向和纵向上和谐统一。二是浅色与暗黑颜色为一套，在light mode下，色彩主要集中在50到100之间，在dark mode下，色彩使用在10-60.ai工具十大排名

 ai集成平台

# 虚实-毛玻璃智合ai

虚实作为阿里云设计语言的一个风格语义点，在B-Design这类主关注用户界面的设计上，主要体现为材质毛玻璃Frosted Glass。智合ai

UI 中，毛玻璃是一种轻量级的设计元素，作辅助/支撑使用，应用在pictogram与插画设计中，也应用在2级3级导航、鼠标hover展示内容中。创意平台百度ai

B-Design的毛玻璃与呼吸色是融合在一起的。我们期望在后续的技术及设计进程中，可以再进步一些：用户可以自定义毛玻璃参数，比如背景模糊与饱和度，赋予色彩，色彩的渐变，不透明度，光影、薄厚、噪点等。豆包是免费使用吗

 本地部署ai

# 圆角与阴影豆包是免费使用吗

B-Design使用了圆角与阴影的设计风格。圆角，代表友好、亲和力，整体贯穿在B-Design的组件、按钮、卡片中。阴影，与毛玻璃材质一样，可以创建视觉层次结构，提供多种阴影层次的设计供用户选择。ai工具十大排名

 蘑兔ai

组件设计上，灵动多样极致，摆脱B类设计固有的枯燥、严肃，刻板印象提供更加灵动的视觉语言，灵活的页面框架，细腻的微动效。并从浅色拓展到暗黑及手机端。ai官网

值得一提的是，我们的数据可视化设计，通过对B端产品的整理和总结，确定了五个设计原则：诚实性、正确性、倒金字塔结构逻辑、一致性&扩展性、美观度。形成了一套可参考的数据可视化专业指南，最终达到可快速灵活运用于产品设计中。电子魅魔

 ai工具十大排名

我们的场景来自于阿里云不同业务及这些业务中提炼出的共性和特点。从核心设计语言建立基础通用模版设计的同时，也输出面向各行各业带有自己强烈业务属性的设计。豆包软件怎么用

目前，我们共赋能了3大领域，6+行业，10+产品。ai集成平台

行业SaaS智能对话

面向垂直行业，如零售、工业、金融等创意平台百度ai

 电子魅魔

通用SaaS朱雀腾讯ai检测

面向企业办公、ERP、CRM等企业通用领域朱雀腾讯ai检测

 ai软件学习

云化工具智能对话

面向开发运维等工具类场景ai工具十大排名

B-Design的不同行业/场景/产品设计实践为企业建立开箱即用的体验设计方案。从文章开篇前言中“从大规模生产模式变成大规模个性化”，我们可以看到B-Design即提供企业服务通用设计，也提供行业通用设计，无设计能力的中小企业或独立开发者，可以使用B-Design快速地搭建自己网站。另一方面，允许用户定制化的设计，即云计算生态下的各个行业开发者，设计师，都可以参与B-Design的共创，利用B-Design的风格建立属于自己的设计模板，设计规范甚至是设计系统。小云雀ai

让B-Design更具活力、更灵活、更具吸引力和更有意义。豆包语音对话

 本地部署ai

在《The Technium》这本书中提到：al软件哪个好用

虽然上句话针对计算机及人工智能快速发展下越来越多的设计被AI进行快速设计与生成，计算机需要“给我们好的答案”。但反观越来越多的设计语言与设计系统产生，或急于求成，或质量不佳，B-Design还是希望能借由技术与设计的手创造舒适的体验，美观的视觉，为产品增值。好的设计会越来越成为我们的核心竞争力。我们不仅仅要“好的答案”，更需要“好的设计”，以成就“好的商业”。字节跳动ai大模型

转载请注明：西瓜导航 >> B-Design： 呼吸视觉朱雀腾讯ai检测