设计系统 | 第六部分：反馈组件（完结）

和大家分享一套完整的“设计系统”的设计方案。目的是为大家提供一种搭建组件库的思路以及在Figma中组件的组织方式。其中所涉及的产品内部信息已脱敏处理。因版本不同会与线上产品有一定差异，重点在于思路本身。

设计系统整体分为6个部分：视觉 (Visual)、通用 (General)、导航 (Navigation)、录入 (Entry)、展示 (Display)、反馈 (Feedback)。本次分享的是第四部分 —— 

。

其中包含：

Dialog、

Alert dialog、

Confirmation dialog、

Message、

Announcement bar、

Inline alert。

看完这一篇，本次关于“设计组件库”的分享就全部结束啦~ 相比于里面的组件是如何实现的，以及组件的设计细节等，我认为最重要的是：通过这个案例，建立对组件库的“系统性的认知”，以及其中所展示对“组件的管理方法”。

系统性的认知：在全局的角度看待每一个组件，熟知组件的分类，以及每个分类下可能有的组件类型。就像是拼积木一下，当你能熟悉使用手中每一块积木的时候，那进行任何创作都能得心应手，效率自然不在话下。

组件的管理方式：通过标记“@号”开头的“根组件”和“#号”开头的“衍生组件”，让各个组件在迭代和使用的时候能更容易与团队其他成员达成共识。在搜索组件时，往往很容易到很多搜索名称相近但不相干的组件，标记@或#后，核心组件能更容易被找到。在进行组件更新或组件新增时，通过@和#标签，便可明确更新的范围，要改根组件还是改衍生组件，其影响的范围也更可预知。

如果有设计系统相关的疑问，欢迎在评论区留言，我会在看到第一时间回答哈~