---
title: 设计模式库与设计组件库到底有什么区别？
date: 2022-07-14
tags: [设计系统, 设计模式, 职业发展, 体验设计]
description: 设计系统 Design System 中有两个重要的概念，设计系统和设计模式。对于这两者之间的区别，很多人都比较困惑。在设计系统中，每个组件就像 SOP 中的某个步骤，是解决某一个具体操作的方法，而将这些组件组合起来处理一件事情或任务，就是我们所理解的 Pattern 模式库。
author: 5key
source: https://www.thefivekey.com/difference-between-design-pattern-and-design-component/
---

# 设计模式库与设计组件库到底有什么区别？

> 设计系统 Design System 中有两个重要的概念，设计系统和设计模式。对于这两者之间的区别，很多人都比较困惑。在设计系统中，每个组件就像 SOP 中的某个步骤，是解决某一个具体操作的方法，而将这些组件组合起来处理一件事情或任务，就是我们所理解的 Pattern 模式库。

**作者**：5key　·　**发布于**：2022-07-14　·　**原文链接**：https://www.thefivekey.com/difference-between-design-pattern-and-design-component/

---


设计系统 （Design System）中有两个重要的概念，设计系统和设计模式。对于这两者之间的区别，很多人都比较困惑。**其实用一个例子就能很好的解释，比如大家都喜爱的小龙虾 🦞。**

## 用一个例子来解释

小龙虾好吃，但真做起来并不是所有人都会。不过你可以在各类美食应用上看到它的「制作 SOP」，大致会有以下这些步骤

## 制作小龙虾 SOP：

- 去虾线
- 清洗小龙虾
- 准备小料
- 下龙虾过油
- 加入小龙虾调料翻炒
- 加入啤酒闷煮
- .…

你不一定懂小龙虾的制作方法，但刷个小龙虾一听就能明白，把这些步骤组合在一起，你也能做出一盘色香味俱全的小龙虾了。

## 设计系统 中的 SOP：

在[设计系统](https://www.thefivekey.com/tag/design-system/)中，每个组件就像 SOP 中的某个步骤，是解决某一个具体操作的方法，而将这些组件组合起来处理一件事情或任务，就是我们所理解的 Pattern 模式库。

所以，洗小龙虾、过油它们都是“组件”，做小龙虾是“模式”。

如果十三香小龙虾已经成为一个行业标准，大家做得基本完全一个样，那么小龙虾也可以被进一步的收敛，成为你做晚餐的一个标准“组件”了。

当然，如果你家的小龙虾和别人有些差异，比如重甜、重辣、或者说是三分熟（😁），那它的做法就具备较强的特色，成为你的业务级设计模式了。

## 设计系统 延展阅读

- [设计系统 · 我们为什么要做 Design System](https://www.thefivekey.com/why-we-need-design-system/)
- [设计系统 · 这么多 Design System，我们应该怎样去学习？](https://www.thefivekey.com/how-to-learn-from-other-design-systems/)
- [设计系统 · 如何向你的主管和团队介绍 Design System 的重要性](https://www.thefivekey.com/how-to-prove-the-value-of-design-system-to-your-boss/)
- [设计系统 · Design System 应该做到什么程度才够？](https://www.thefivekey.com/what-should-a-design-system-look-like/)
- [设计系统 · 案例 CloudScape Design System](https://www.thefivekey.com/aws-cloudscape-design-system/)


---

_本文由 [5key](https://www.thefivekey.com/) 创作，原文发布于 [https://www.thefivekey.com/difference-between-design-pattern-and-design-component/](https://www.thefivekey.com/difference-between-design-pattern-and-design-component/)。欢迎引用，请注明出处。_

_订阅付费专栏「OFF DESIGN」：https://www.thefivekey.com/premium-design-subscription/_