设计系统不仅仅是一种组织设计资源的方式，更是帮助团队提高工作效率、确保设计一致性以及加强品牌形象的重要工具。回想一下苹果公司的设计系统，它的一致性和优雅性不仅让用户爱不释手，更让品牌在激烈的市场竞争中脱颖而出。本文，笔者将带你深入探讨如何从0开始搭建B端设计系统~
什么是设计系统？
设计系统（Design System）是一套旨在提高设计效率、确保设计一致性和加强品牌形象的规范化系统。它是由一系列设计原则、组件库、样式指南、交互规范等组成的集合体，旨在为设计团队提供统一的设计语言和资源，以便在不同项目中保持一致的视觉风格和用户体验。
设计系统通常包括设计原则、色彩规范、字体排版、图标库、组件库、界面样式指南、交互规范等内容，这些构成了一个完整的设计体系。
如何创建自己的设计系统？
本文将着重讲述创建B端设计系统的基础规范，可根据公司要求定制化搭建一套基础的设计系统。在这里推荐大家引入Paavan的设计系统画布（designsystemcanvas.com），以及摹客DT设计工具（[https://www.mockpl...](www.mockplus.cn/dt?hmsr=wen...%25EF%25BC%2589%25EF%25BC%258C%25E6%259C%2589%25E5%258A%25A9%25E4%25BA%258E%25E5%2588%259B%25E5%25BB%25BA%25E8%25AE%25BE%25E8%25AE%25A1%25E7%25B3%25BB%25E7%25BB%259F%25EF%25BC%258C%25E5%25AE%258C%25E7%25BE%258E%25E4%25BD%2593%25E7%258E%25B0%25E8%25AE%25BE%25E8%25AE%25A1%25E7%25B3%25BB%25E7%25BB%259F%25E4%25BB%25B7%25E5%2580%25BC%25E3%2580%2582 "https://www.mockplus.cn/dt?hmsr=wenjj03yjl)%EF%BC%89%EF%BC%8C%E6%9C%89%E5%8A%A9%E4%BA%8E%E5%88%9B%E5%BB%BA%E8%AE%BE%E8%AE%A1%E7%B3%BB%E7%BB%9F%EF%BC%8C%E5%AE%8C%E7%BE%8E%E4%BD%93%E7%8E%B0%E8%AE%BE%E8%AE%A1%E7%B3%BB%E7%BB%9F%E4%BB%B7%E5%80%BC%E3%80%82")
制定设计规范
制定基础的设计规范是设计系统中的关键步骤之一，它能够为团队提供统一的设计标准和指南，以确保设计的一致性和质量，主要包含品牌色、字体、图标、阴影等。
1）建立品牌色
设计系统中的品牌色是指公司或产品所使用的主要颜色，它是品牌形象的重要组成部分之一。
品牌色通常由主色调和辅助色调组成，主色调是最重要的色彩，用于品牌标志、主要元素等地方；辅助色调则用于补充和强化主色调，提升视觉层次和丰富度。
品牌色的定义需要结合公司或产品的特点和定位进行综合考虑，确保能够准确地传达所希望表达的信息和形象。
2）定义字体大小
在设计系统中，通常会选择一种主要字体用于标题和重要信息的展示，另外再选择一种辅助字体用于正文和其他次要信息的展示。这样的搭配可以在视觉上提升层次感和统一性。
在选择字体时，建议先进行测试和评估，确保选定的字体能够满足设计系统的各项要求，并与其他设计元素相互配合，形成统一的设计语言。
3）制定图标风格
设计系统中的图标（Icon）扮演着至关重要的角色，它们不仅仅是视觉上的装饰，更是用户界面中的重要元素，能够传达信息、引导操作、增强用户体验。
同时在命名的时候也需要定义了命名规范，如图标命名格式：类别_场景_功能_状态_尺寸(icon_tab_home_def_44)。
4）制定阴影层级
阴影是模拟真实世界的反馈，原理一般根据光源位置判断，光源越远，阴影越高。
阴影可以根据使用场景，划分不同阴影层级，能够增加元素之间的层次感和立体感，提升用户界面的整体质感。
搭建组件库
设计和标准化组件是搭建组件库的关键。团队需要设计各种常用的组件，如按钮、输入框、卡片、导航栏等，并制定统一的样式规范和命名规范。
常规的B端组件分类，主要包括：按钮、输入框、切换器、选择器、下拉菜单、分页器等。搭建组件库的过程，就需要设计工具的强大支撑，这里推荐大家使用摹客DT（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端设计系统，主要包含制定基础设计规范、搭建基础组件库，在实际使用过程中，还包括不限于界面样式指南、交互规范等。但规范的制定并非一成不变的，设计系统也要随着需求增加和变动进行更新迭代，以适应变化。
设计系统的构建是一个需要耐心和细心的过程，但它能够极大地提高设计团队的工作效率和一致性，帮助公司加强品牌形象，希望本文能对大家有所帮助，快去试试搭建设计系统吧~