Pinapps
首发于Pinapps
Components 与  Patterns 究竟有什么区别

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 系列已更新:

5key:什么是 Design Systemzhuanlan.zhihu.com图标5key:Design Systems 02 - 什么是 Design Principleszhuanlan.zhihu.com图标5key:Components 与 Patterns 究竟有什么区别zhuanlan.zhihu.com图标5key:你该为产品设计怎样的气质zhuanlan.zhihu.com图标5key:Design System 中的 Design Tokenzhuanlan.zhihu.com图标5key:Design Pattern 实例 - 用户通知与中断zhuanlan.zhihu.com图标5key:Design Pattern 组合实例 - 列表页设计思考zhuanlan.zhihu.com图标

点击下方链接,了解 PinDesign 会员计划详细信息:

PinDesign 互联网产品设计周刊

文章被以下专栏收录

    我推荐的不仅仅是apps,更是一种态度。 偶尔我也会聊聊和 apps 相关的设计,请保持关注! 微信搜索「Pinapps」