Components 与 Patterns 究竟有什么区别

上期的周刊咱们介绍了 Design System 中最为重要的一个概念 - Principles，做为整个 Design System 的核心，它将指引着咱们整个产品设计、开发的过程和决策，同时它也体如今咱们整个 System 的基础建设中。

今天第三期的周刊将给你们介绍 System 中的 Components 和 Patterns，做为咱们整个产品建设中的“砖、瓦、泥”，System 的“魂”也须要直接体如今它们的设计中。

在 Design System 的讨论中，Components（组件）和 Patterns（模式）是一组很是容易混淆的概念。有些 System 中只有 Components，另外一些却只有 Patterns，还有一些两个都有。

因为咱们不在其业务背景之中，理解他们的理念、初衷并非那么容易，因此今天的这一期咱们将 Components 和 Patterns 放在一块儿来讨论，看看他们之间究竟有哪些差别？咱们应该如何去建立、使用它们。

Components 是什么？

在这个系列的第一期，对 Components 有过一个基础定义。它是整个产品设计的基础，是组成一个界面的最基础元素，为完成一个基础操做提供支持。

早在 Web 时代咱们就有了 Components 的概念，输入框、按钮、文字、连接、下拉菜单… 从网页开始出现，这些元素就已经被你们所认知、牢记。不管页面的设计如何变化，它们基本上都是由这些组件所组成的。

固然，网页时代的早期咱们可用的组件并很少，偶尔出现一些新的形式也都是基于现有的组件组合或变形而来的。

因此对于用户来讲记住并理解它们的用途并不太难，这也就为往后的设计的不断发展提供了一个可被认定、认知的基础。

移动互联网时代的到来，用户的互联网环境已经逐步迁移到了手机。因而对于设计师和用户你们开始接触到了 iOS、Android、Microsoft 等新的平台，开始与这些新的组件打交道。

事实上这些元素并无发生太大的变化，它们不少只是基于屏幕大小和可触控的新特性发生了进化。而咱们所看到的那些组件在不一样平台上的差别性更可能是源于系统平台自己以及它们的设计理念差别。

这个现状给设计师带来了更多的麻烦，咱们在设计产品的同时还须要更多的关注不一样操做平台的组件差别性，以顺应不一样用户的使用习惯。

固然，随着行业的不断发展咱们所面临的麻烦会更多，咱们如今所能看到的 VR 设备、线下实体以及咱们还未看到的新的形式都会让 Components 不断的进化，也变得更复杂。

Patterns 是什么？

相对于 Components，Patterns 要处理的事情会更复杂一些。它的目标是为完成一个任务提供基础操做，是解决一系列问题的全局解决方案。

举一个直接的案例，在 Material Design 中有一个叫作 Confirmation & Acknowledgement （确认与知会）的 Pattern（见上图）。

简单来讲当用户在 App 中执行了一个操做，咱们须要给予反馈，告知用户，而这个 Pattern 要解决的问题就是为这一系列场景提供一套设计解决方案。

其实不管是 Components 仍是 Pattern，它们都是目标都是为具体的问题提供实际、可复用的解决方案，为整个产品开发过程提供一致性保障、提供决策依据以及提高效率下降开发成本。

Components 与 Patterns 有什么差别？

基于上面的描述，你们应该对 Components 和 Patterns 有了一个基础认知，但它俩之间的具体差别仍是比较模糊，因此接下来咱们从功能角度来接着聊聊它俩的差别。

事实上大多数的 Design System 并无特别清晰的去定义它俩，有些只给出了 Components，有些只给出 Patterns，好比下图中的 Salesforce、Carbon、MailChimp。这背后其实与对应的业务领域及这些 System的理念有很大的关系，咱们在后面会再说起。

相较而言 Material Design 对于 Components 和 Patterns 有明显的定义和区分。从这些关键词的定义上咱们基本能够看出Components 关注的是产品中的某个点，相对简单；而 Pattern 关注得更可能是一件事儿，也相对更为复杂。

仍是回到前面 Confirmation & Acknowledgement （确认与知会）的案例，Pattern 抽象了业务的可能性并提供了一个通用性的解决方案。

操做触发、给予反馈，这里面包含的情景和复杂度显然是高于利用菜单展现一列信息的。Material Design 将它大体分红了两种主要情景：

1. 重要操做，须要用户确认
2. 非重要操做，须要知会用户

Material Design 分别使用了 Dialogs（重）和 Snackbar（轻）两种设计形式来回应着两种情景，为其提供更为合适的解决方案。

从业务场景抽离出来看，这个 Pattern 不只能够用于信息列表的处理，还能够用于处理购物车、wishlist、联系人… 这些业务场景各不相同，但均可以使用同一种设计模式。而这些 Design Pattern 也正是由咱们前面所提到的 Components 组合而来的。

再回到细节部分，Components 做为“砖、瓦、泥”是有明确的使用指导的，每一个组件的尺寸规范使用方法都有明确的文档给予细节的支持。

而 Patterns 做为一种通用解决方案则更加灵活、松散，面向的不是一个具体界面而是一个产品（用户）的需求而服务的。

咱们能够再来看一个更为直观的例子 - 播放器。下图是 YouTube 的在线播放器，从 System 的角度来讲它会被应用在平台的不少情景中。

咱们能够将它定义为一个视频播放的通用 Pattern，若是咱们将它（下图左）做为该业务下播放器最复杂、最全的解决方案，那么它也将应该依据场景诉求逐步降级（下图右），为播放器提供一个总体性的设计解决方案。

下图是 YouTube 播放器的功能操做区，这里面隐藏了 YouTube 的不少强大功能，从字幕、外链到画质设置，均可以融入到这一小块区域中。

若是咱们尝试对这些功能作一些分解，能够大体还原出这个 Pattern 的整个框架。为了让这个 Pattern 具有设计和工程两个层面的一致性和复用度，设计师须要将关注点从某个具体业务抽离回来，站在更高的视角去看如何打造一个适用于更多情景的播放器框架，对于框架的构想和定义也可以方便全部相关人员用一样的思惟方式去思考、判断问题。

固然，Pattern 并不只仅以这一总形式存在，它的目的就是解决一类问题。它能够是一组界面，也能够是一个任务流（好比购买流程），甚至也能够是一套手势操做。

在前面咱们提到过，Pattern 与 Components 还有一个很大不一样 - 领域的差别性。对于 Material Design 这种系统底层的 System 来讲它能够服务于任何领域、业务类型，因此他们的 Pattern 很“中立”，但对于咱们绝大多数设计师来讲，咱们主要关注的是某一个领域的产品，因此咱们也更应该关注到 Pattern 的领域差别性。

Firefox 在几个月前也发布了他们本身的 Design System - Photon。做为一款浏览器，Firefox 的关注点显然与咱们大多数人是不同的。

浏览器（壳）中的内容是由网站所提供的，Photon 更关注的本身所服务的部分。它们会对 Warnings（警示）这类浏览器服务作清晰的定义，制定了普通警告和重要警示两种不一样等级，并提供了相应的设计展现。

而对于 MailChimp 它们甚至就不提供 Components ，只给出了一组 Pattern（好比下图的 Feedback）。由于 MailChimp 本身的自身特性，它们的封装已经足够完整并且业务特性也很是的鲜明（且不会过于复杂），直接提供 Patterns 反而更利于总体的一致性和效率。

固然，MailChimp 没有提供 Components 并不表明它们没有，只不过将它们收起自行维护，使用者不用关心罢了。

聊了这么多咱们不妨再来想一想 Components 与 Patterns 之间的差别，我尝试将它概括成如下几点：

1. Components 相对稳定，是整个 System 中的基础物料（砖、瓦、泥），是解决单点问题的基础元素。你们对它是具有基础认知的；Patterns 则是解决一类问题的总体解决方案，有多种的可能性；
2. 从工程角度来讲 Components 也是相对稳定的，Patterns 是基于这些相对稳定的 Components 组合而成的；
3. Pattern 具有领域的差别化，不一样的领域它所关注的点以及设计的处理形式都存在着差别；
4. Patterns 更加的复杂，不仅是界面，也能够是流程、手势、甚至是透过视觉、动效、文案传递出的一种气质。

讲完了这两个概念之间的差别，在余下的全文中（付费部分）我想将重点回到 Patterns 上，和你们聊聊咱们为何须要 Pattern 以及应该思考如何去完成对 Patterns 的总结、建立。

Design System 是 PinDesign 周刊的一个新系列，基于「Design Systems」这本书结构框架的读书笔记和经验总结。但愿将本身的感觉和经验分享给你们，辅助你们的阅读。

加入 PinDesign 会员，获取本期主题「什么是 Design Principle」的全文内容及前两期周刊的赠送。

点击领取 PinDesign 会员计划 50 元优惠券

Design System 往期回顾：

01. 什么是 Design System

02. 什么是 Design Principles