在前一天我们知道了 Design System 为什麽出现、它试图解决的问题和一些使用上的 Mindset 後，今天要来介绍 Design System 到底包含了哪些东西，这个系统是由什麽构成的。

在开始介绍前，一样先来观念厘清一下

不同的 Design system 之间会各自取舍需要定义的视觉元素，可视情况增减需要的元素。

像是 Material Design 和 Shopify 的 Design System 所包含的元素就稍有不同：

以下就会透过 Material Design 和 Shopify Design 来跟介绍 Design System 真正所包含的东西 — Color System, Typography, Spacing, Icon, interaction states, and Motion 。
其实色码、字级、间距这些也就是一个网页和 UI 元件们都会需要的基础视觉元素，而声音跟动画则是进阶一点的元素。

Color System - Palette

参考 Material Design - The Color System

Color System 经常会以 Palette （调色盘）来命名。

颜色是网站中很重要的元素，也是能快速让人识别品牌的方式之一

Material 管理的方式主要是定义出三种角色：

1. 主色跟副色 （ Primary & Secondary ）
2. 根据使用情境再赋予主副色不同的 深浅 （ variant ）
3. 其他 UI 颜色，例如背景、表面、错误、排版和图标的颜色。

同时也可以使用主题 ( Theme ）来设定替代色 （ Alternative Colors ）以支援各种使用情境。

可以用来支援 深色模式（ Dark Mode ）。

上述第三个角色「其他 UI 的颜色 」是 Color System 中最复杂的部分，因为我们需要「定义各种情境下要使用的颜色名称」，也就是语意化你的色码。

这是什麽意思呢？让我们以这张用到的色块为例来说明：

Background：指网页的背景底色

Surface：指各种 UI 元件的背景底色，而 UI 元件的底色就像是他们的表面一样，一个系统中 UI 元件都会共享一个相同的底色，来与背景做出对比，像是页面的主要内容、卡片 或是 弹出框，如果应用 Surface 就能让使用者很明显地知道这是与背景不一样的区块，是独立的元件。

Surface Subdued：这个命名我认为就见仁见智了，一样是用来呈现出不同区域的色码，需要让使用者注意到的程度没有 Surface 的那麽重要，但也不能与背景同色的情境，像是表单的底色就可以用这个。

这边还是强调一下，命名的逻辑其实都是看各个 Design System 怎麽去定，而上面提到的大多已是约定俗成的取名方式，像是 Primary, Secondary, Backgrond, Surface 等等，而更细部的其他 UI 颜色定义就是看各系统之间怎麽去设定了。

以下多列了一些情境供大家再感受一下：

最後完整定义出来的 Color System 在 Figma 上面看大概会长这样：

（ 明天 Day 08 就会讲如何在网页中实作你自己的 Palette ！ ）

Typography

参考 Material Design - Typography

在 Design System 中，文字的系统有一个专有名词叫 Typograhy ，中译为「字体排印学」，是指透过排版使得文字易认、可读和优美的技艺。

而「排版」则包括字体与字号的选取(h1~h6, ...）、行高以及字距的调整等。

那 Typography 实际上在 Material Design 中会有这样的表格：

基本上整个 字型（ Font Family ）会统一，如图就是 Roboto ，各个字级是通过字体粗细（ Font Weight ）、大小 ( Font Size )、字母间距 ( Letter Spacing) 还有行高 ( Line Height ) 来体现差异的，这些属性也就是在使用 Design System 时我们可以去客制化的选项。

有关网页中的文字层级差不多就像图上写得这样，而各个层级对应到的场景应该也挺直觉的。

在 Material-Design 中 H1 ~ H6 是应用在标题，Subtitle 是副标或小标，Body 会应用在大段文字，类似 p ，Caption 是照片的描述文字、Overline 就是指有底线的字。

但其实在各系统中如何去定义和使用也还是因人而异，像我之前参与过的专案就没去定义 Subtitle 的层级，但多定义了 Input 1~3 来满足我们的使用情境。

剩下的实作就留待 Day 09 来介绍了！

Spacing 间距

参考 Shopify Polaris - Spacing

间距其实就是我们熟知的内距跟外距（ Padding & Margin ），一致性的间距会创造视觉平衡，让使用者能更容易地浏览网页。

需要定义主要是元素跟元素之间的距离，如下：
!

最後跟 Typography 一样，会产出一个 Spacing 的层级表，像这样：

有了这个表之後，所有元素之间的距离都只是不同等级的 spacing 而已，设计只要在稿上标注 spacing-1 工程师就能知道是 4px，而工程端其实也只要在一开始写好 CSS 变数，後续要套用跟修改都去改变数就好。

这边在 Tailwind 很赞的是它已经帮你预设好一系列的 Spacing 了，使用 Tailwind 的话就能无痛使用，不用自己做太多设定！

详见 Tailwind Spacing

但需要注意的是，不是所有的 Padding 和 Margin 都可以用 Spacing 替代，只有那些你在使用时希望能统一缩放的距离才适用，有些情况你希望元件之间的距离是固定的情况，你就可以直接写死。

但有些元件内部的距离是固定的情况，像是 Radio 中心的填色区域与圆框的距离就不适合用 Spacing，因为你不会希望在整个网页间距变大後，Radio 里面的空白也一起变大导致整个按钮看起来很奇怪。

当然这种例外情况在整个系统中占少数，因此只要记住「 Spacing 的主要使用情境是在方便统一调整元件之间的距离」就好罗！

Icons

参考 Shopify Polaris - Icons

Icon 也是现代网站中很重要的元素，是一种视觉辅助的工具，辅助呈现常见的操作、文件、设备和目录等等，不只增添网页的美感，也能辅助使用者更快地理解网页。

常见的 Icon 大概这些：

但 Icon 其实有无限多种，根据不同的网页设计 Icon 也需要做对应的客制化，像是圆角的程度、中空还是填满等等，这边推荐几个找 Icon 的网站：

1. iconic
2. flaticon

有关 Icon 的实作重点会在 Day 10 中跟大家介绍。

Interactive States

参考 Shopify Polaris - Interaction States

互动状态，顾名思义就是使用者对元件进行操作後（滑鼠、触控和键盘事件等等）的各种可能状态，也是用来让使用者知道当前元件状态的重要元素，像是点击按钮就应该要有按压 （ Pressed ）的状态，不能按就要显示 Disabled 等等。

举例来说一个按钮的状态展示可参照下图：

其中 Focused 就如其名，是焦点的意思，这个状态可以提示使用者整个页面的焦点 — 「正在操作的元件」，同时也是实作无障碍功能 （ A11y ）时的主要状态，简言之，你在网页中一直按 Tabs 键时就是在切换焦点。

另外 Demo 一下网页中 hover, activated. selected 的状态：

网页中可互动的 UI 元件基本上都会有这些状态，在同一个网站中，这些状态的呈现都需要是一致的，像是错误的色码都要是同一个，以免混淆使用者。

而状态应该要是叠加而不是唯一，如果一个元件现在同时有多个状态被触发，那应该是要全部显示而不是选择性显示，这样才能让使用者正确认知到当前元件有多种状态被触发，也能避免我们在某些状态上做的功能没有被正确触发到，像是 Focus 的状态在上图左下我们也能看到 Focus 与 Selected 状态叠加时，是与单纯的 Selected 不一样的。

（实作的部分就待 Day 21 - Button 搭配 Button 来跟大家介绍了！）

Motion / Transition

最後要来介绍的就是网页元件的「动画」啦！
现代网页大量地使用动画来创造元件的即时回馈感，打造更直觉的使用者介面，进而达到更好的使用者体验。
标题放「动画（Motion）」其实是有点夸张了，毕竟在元件实作上其实不过是在过场（Transition），而元件上的实作也都是称为 Transition。

Transition 可以翻成过场或过渡，指的是动画呈现的形式，因为元件动画的使用情境通常是打开或关闭、出现跟消失，像是打开一个 Modal 时，从无到有的过程中会套用缩放、展开等等的动画效果，因此是一个过场或过渡。

而 Transition 也已经有许多常见的类型，如下：

1. Collapse ： 摺叠，打开 UI 元件就像是拉开抽屉。
2. Fade in/out：渐进、出，UI 元件会慢慢地出现跟消失。
3. Slide：滑入，UI 元件会从某个方向滑进来。
4. Zoom in/out：缩放，让 UI 元件变大或变小

其余还有像是 rotate （旋转）、transform （变形） 等等可以再定义，但这边先列举到这样就好！

在这边就不再多放影片了，可以搭配 Mateial 的 Demo ， 或是 8 SIMPLE CSS3 TRANSITIONS THAT WILL WOW YOUR USERS 来理解一下各种 Transition 类型。

讨论完类型之後，Transition 还有 持续时间 （ Duration ） 跟 缓速效果（ Easing ）这两项重要的参数，不管是哪种过场类型，都需要去定义这两项参数才能真正达到视觉上的过渡效果。

持续时间 ( Duration )

动画从开始到结束的时间，会根据动画影响的画面范围来调整，范围越小持续时间就会越短，通常是以毫秒来表示。

缓速（ Easing ）

定义完 Transition 的时间後，接着要透过调整二次贝兹曲线来在过渡的期间内去实现不同的加减速效果。

二次贝兹曲线是什麽？
它是一个用来建立平滑曲线的模型，对於网页动画来说是不可不知的一项函数，但我们其实不用真的很理解这个函数在干嘛，大方向只要能知道「二次贝兹曲线是透过调整两个控制点，来决定的一个曲线，而曲线越缓的地方速度越慢。」，大家可以在 cubic-bezier.com 手动调参数感受一下。

那在 Design System 中有这四种常见的缓速效果：

Standard Easing 标准

• 通过花费更多时间来「减速」而不是加速，将焦点放在动画的结束。
• 以静止开始和结束的元素使用标准缓动。
• 快速加速并逐渐减速，以强调过渡的结束。

Emphasized Easing 强调

• 其实跟 Standard Easing 非常像，但比它更强调动画的结束。
• 通常与更长的持续时间配对，以传达更风格化的速度感。
• 快速加速并「非常缓慢地」减速，特别强调过渡的结束。

Decelerated easing 减速

• 元件要从萤幕外显示进来时适用
• 动画开始时速度是最快的，并减速到结束时的静止状态。

Accelerated easing 加速

• 就是都跟 Decelerated easing 相反
• 元件要离开萤幕的情境可使用
• 动画是从静止的状态开始，接着逐渐加速到动画结束。

那在元件实作通常会先实作一个 Transition 元件当成底层的介面，再因应不同的 Transition 类型会再实作出各个元件（像是 Fade、Collapse 等等），而剩下的实作细节就等 Day11 再跟各位介绍了！

小结

关於 Design System 设计方面的介绍就到这为止了！

内容就如题所说，是前端工程师都该知道的 Design System ，虽说我们不用真的下去设计，但是理解这些设计的基本元素，让我们与设计师沟通或是自己要做 Side Project 相信都会有很大的帮助，就像我们会希望设计师懂一点技术，那设计出来的东西就不会那麽天马行空。
而如昨天所说， Design System 就是在使用系统性的方法来减少在 UI 上的不确定，帮助我们更快地厘清跟缩小问题的范围，确认问题是 Design System 的定义有问题、UI 元件本身设计不良、还是在组装元件时少考虑了哪些情境，或是错误地混用了哪些概念等等，才不至於在与设计师沟通时需要花许多额外的成本。

透过 Design System 将网页中各种基础元素详细定义过後，也能大幅减少每次差个几 Pixel 在那边调很久的情境，让前端工程师能更快、更容易地让网页达到 Pixel Perfect （ 让网页的每个 Pixel 都与 UI 稿一致 ），进而能有更多时间去处理商业逻辑、效能优化等等。

小感性时间

在这边也想先感谢从 Day 01 一路看到这边的朋友，目前看起来都还很像在纸上谈兵，密集地塞了很多观念，但毕竟前期规划是一个专案最花时间也最关键的，到後来会发现其实实作都是很後面才做的事。

而这系列叫「关於 UI 元件你所该知道的事」，因此会希望能传递这些开发上的观念，有些前因後果其实是很难单从程序码就看出来的，可能会需要一些经验跟前人带领才能跌跌撞撞地理解到，希望这边有办法让大家稍微跳过那个阶段来理解到这些观念，那如果有任何建议或是问题想讨论的也欢迎留言告诉我！

不过明天就要进入本系列第一篇实作环节了，接下来几天的目标就是要把今天提到的这些设计元素都一一转化为程序码！

那就明天见罗！