手把手教你从0开始搭建B端设计系统

设计系统不仅仅是一种组织设计资源的方式，更是帮助团队提高工作效率、确保设计一致性以及加强品牌形象的重要工具。回想一下苹果公司的设计系统，它的一致性和优雅性不仅让用户爱不释手，更让品牌在激烈的市场竞争中脱颖而出。本文，笔者将带你深入探讨如何从0开始搭建B端设计系统~

什么是设计系统？

设计系统（Design System）是一套旨在提高设计效率、确保设计一致性和加强品牌形象的规范化系统。它是由一系列设计原则、组件库、样式指南、交互规范等组成的集合体，旨在为设计团队提供统一的设计语言和资源，以便在不同项目中保持一致的视觉风格和用户体验。

设计系统通常包括设计原则、色彩规范、字体排版、图标库、组件库、界面样式指南、交互规范等内容，这些构成了一个完整的设计体系。

如何创建自己的设计系统？

本文将着重讲述创建B端设计系统的基础规范，可根据公司要求定制化搭建一套基础的设计系统。在这里推荐大家引入Paavan的设计系统画布（https://designsystemcanvas.com），以及摹客DT设计工具（https://www.mockplus.cn/dt），有助于创建设计系统，可以完美体现设计系统价值。

制定设计规范

制定基础的设计规范是设计系统中的关键步骤之一，它能够为团队提供统一的设计标准和指南，以确保设计的一致性和质量，主要包含品牌色、字体、图标、阴影等。

1）建立品牌色

设计系统中的品牌色是指公司或产品所使用的主要颜色，它是品牌形象的重要组成部分之一。

品牌色通常由主色调和辅助色调组成，主色调是最重要的色彩，用于品牌标志、主要元素等地方；辅助色调则用于补充和强化主色调，提升视觉层次和丰富度。

品牌色的定义需要结合公司或产品的特点和定位进行综合考虑，确保能够准确地传达所希望表达的信息和形象。

2）定义字体大小

在设计系统中，通常会选择一种主要字体用于标题和重要信息的展示，另外再选择一种辅助字体用于正文和其他次要信息的展示。这样的搭配可以在视觉上提升层次感和统一性。

在选择字体时，建议先进行测试和评估，确保选定的字体能够满足设计系统的各项要求，并与其他设计元素相互配合，形成统一的设计语言。

3）制定图标风格

设计系统中的图标（Icon）扮演着至关重要的角色，它们不仅仅是视觉上的装饰，更是用户界面中的重要元素，能够传达信息、引导操作、增强用户体验。

同时在命名的时候也需要定义了命名规范，如图标命名格式：类别_场景_功能_状态_尺寸(icon_tab_home_def_44)。

4）制定阴影层级

阴影是模拟真实世界的反馈，原理一般根据光源位置判断，光源越远，阴影越高。

阴影可以根据使用场景，划分不同阴影层级，能够增加元素之间的层次感和立体感，提升用户界面的整体质感。

搭建组件库

设计和标准化组件是搭建组件库的关键。团队需要设计各种常用的组件，如按钮、输入框、卡片、导航栏等，并制定统一的样式规范和命名规范。

常规的B端组件分类，主要包括：按钮、输入框、切换器、选择器、下拉菜单、分页器等。搭建组件库的过程，就需要设计工具的强大支撑，这里推荐大家使用摹客DT（https://www.mockplus.cn/dt），帮助大家一起搭建组件库，让团队小伙伴高效管理和复用设计资源~

1）按钮

设计师可以优先大致梳理按钮的分类，再根据分类定义不同状态的按钮，如：

按照重要程度来划分:主要(Primary)按钮 >次要(Secondary)按钮 >文字(Text)按钮/图标(lcon)按钮;

按钮状态:常态(Normal)、悬停(Hover)、按压(Press)、禁用(Disable)；

按钮尺寸:大(L)、中(M)、小(S)

在摹客DT中可以分类将按钮制作为组件，此时创建组件，需要定义组件命名规范，便于后续查找复用等。

2）输入框

输入框一般主要有两种使用场景，一是信息输入，二是作为筛选条件。这里以信息输入为例，可以根据产品使用场景定义不同的信息输入类型，如单线输入框、框状输入框、内嵌输入框。

3）切换器

常见的切换器组件主要有文字切换、图标切换、选项卡切换，设计师需要定义不同类型的宽高、间距、尺寸最大限制等。

在设计这种选项卡类型时，使用摹客 DT 的自动布局功能，可以快速搭建组件，还便于后续修改调整。

4）选择器

常见的选择器主要是框状下拉选择，设计师除了定义基础的间距、尺寸大小，特别容易遗漏一些关键状态，可以参考以下状态拆解。

5）下拉菜单

下拉菜单类型比较多，常见的如：多选下拉菜单、带搜索下拉菜单、带图标下拉菜单等。

设计师在设计定义下拉菜单时，注意对一些交互细节做好规定，比如勾选全部时，下面所有选项也应被选中。

6）分页器

分页器主要有带指定页面输入框、无输入框、带总计数、带页面显示量、页面过多等情况，在设计时，需要注意不同场景的设计规范。

当设计系统搭建完后，摹客DT作为一款高效的在线设计工具，可以轻松一键共享资源同步到团队内，实时共享设计资源~

以上是介绍了如何创建基础的B端设计系统，主要包含制定基础设计规范、搭建基础组件库，在实际使用过程中，还包括不限于界面样式指南、交互规范等。但规范的制定并非一成不变的，设计系统也要随着需求增加和变动进行更新迭代，以适应变化。

设计系统的构建是一个需要耐心和细心的过程，但它能够极大地提高设计团队的工作效率和一致性，帮助公司加强品牌形象，希望本文能对大家有所帮助，快去试试搭建设计系统吧~