Day 05 - 行前说明 — UI 元件分类你知多少？

今天是行前说明的最後一篇了，前面几篇都是很架构面的知识，而今天要讲的就是真的很贴近 UI 元件的分类系统了。

首先想先回答一个问题：「UI 元件为什麽要分类呢？」

分类的目的其实就是让我们能有系统、有架构地去理解、纪录以至於和他人沟通，而在 UI 元件这边也不例外，想像一个 UI 元件库完全没有分类，就是把元件全部列出来的话，会多麽难去找到特定元件，上下元件应用的情境差太多也会增加理解的负担。

而分类的方式没有一定，有些是业界惯例、约定俗成会这样去分，也有些则是各自依照使用情境来分，但大原则就是「有共通点」才会分在一起。

那以下我就先把 Material-UI、Ant Design 和 Chakra UI 这三个比较知名的元件库分类都列出来，之後我再透过在首页写得比较完整的 Ant Design 来细部跟大家说明各个分类是什麽，以及与其他两个元件库的分类差异比较。

这样列出来後大家有没有看到什麽端倪了呢？

还没看出来的话，我稍微帮大家画个辅助线 ?

没错！端倪就是他们都有 Layout、Navigation、Data Display、Feedback 这几个分类，算是一种约定俗成了，而剩下的虽然在不同的系统中会有不同的分类，但是代表的意义和涵盖的元件其实差不多，像是跟表单相关的则是各自取成 Data Entry、Inputs、Forms 这三种不同的名字。

以下会一一介绍它们的概念，有些比较特殊的就不赘述，大家自己去看一下应该就能懂了。

其实 Ant Design 真的整理的不错了，因此这里会以它们的介绍为底，并与各家系统比较，提出一些其他可能的选择、补充一下没提到的 UI 元件。

Components Overview - Ant Design

Layout

Layout 这类的元件是指与网站的排版布局有关系的元件，主要是有些固定的排版方式其实是可以写成一个 UI 元件让各页面来复用的。

而除了以上的 Grid、Divider、Layout、Space 的这四个元件之外，还可能会有 Box、Container、Flex 和 Wrap 等等。

Navigation

Navigation 是指跟导览相关的元件，这些元件能提示使用者处於网站中的哪一个阶段，与这些元件的互动通常会切换页面。

除了上述之外，还有 Drawer、Links 等等元件。

Data Display

Data Display 是指呈现资料用的元件们，这些元件基本上是在接後端传回来的资料，并提供各自适合的方式呈现，所以叫 Data Display （资料展示），但当然也可以是静态的资料的！

举例来说，列表类的资料就很适合透过 Table 呈现。

这边我看 Ant Design 有讲到的元件就差不多了，就不额外补充比较特别的了。

Feedback

Feedback 是「回馈」，也就是使用者互动过後网页给使用者的反应，让使用者感受到网页还有在运作，或是说网页自动发出的推播、背景持续处理的请求之类的。

像是 Progress 是在让使用者知道他请求或送出的资料目前的进度在哪、Alert 可能告诉使用者送出某个表单後的结果、Skeleton 是页面还在载入时譨让使用者知道网页没有当机等等的元件。

Inputs, Forms or Data Entry

最後一个共通的分类，这三个名字的分类主要都是与表单相关的元件，彼此之间主要是命名的差异。

而我觉得 Ant Design 的名字也取得挺好的，因为表单元件大多需要使用者输入或送出一些资料，所以叫 Data Entry（资料入口）。

常见的元件有 Input、TextArea、Checkbox、Radio 等等就如图上所示。

Utils or Other

这两种分类则是会放一些功能性的元件，在 Chakra 则是有拆出更多的分类。

以 React 来说可能会是 Hooks，像 useBoolean、useClickAway 和 useMediaQuery 等等，也可能是像 Transitions 和 BackTop 这种与其他元件没什麽共通点的元件。

General

General 是只有 Ant Design 有的分类，但我自己挺喜欢这样分的，因为有把 Design System 的 Typography 和 Icon 都放进来，这两个放在这里其实很合理。

Material 虽把 Typography 放在 Data Display，但我认为 Typography 里有些标题可能是固定的，放在 Data Display 稍有那麽点不合适，而 Chakra 则是有额外把 Typography 切成自己一类，对我来说会分得太细。

Button 的部分在 Material 和 Chakra 都被分类与表单元件同类，虽然按钮很常被用作表单的送出按钮或是其他跟 API 有关的操作，但其实 Button 也有很多跟表单没关系的使用情境，但又是在网页中最常见的元件之一，我自己会觉得被抽出来放到 General 的方式比较恰当。

那这只是我自己的想法，其实各个分类一定都有自己的考量和当时的情境，其实只要能自圆其说，怎麽分类都是合理的！

最後要注意的是一开始有提到分类方式没有一定，就算是共通都有的分类，里面的元件也不会全然相同，有些元件在不同的系统之中可能会被归类到不同的分类，像是 Tabs 在 Material 是 Navigation、在 Ant Design 是 Data Display，而在 Chakara 则是被归类到一个 Disclosure 去。

小结

希望今天这样介绍完元件的分类後，也能顺便让大家对网页中有哪些元件大概有个概念，在 UML 篇章会再更细部地去介绍一个个元件。

明天开始就要进入本系列的第二个章节 — Design System 。

首先会介绍「为什麽需要 Design System？Design System 又是什麽？」再来从设计的角度去理解跟架构一个健全的网站，知道哪些东西应该是要在最前期定义好的後，再来用工程的角度看该如何去实作它，相信下个篇章讲完後，不论是网站初期的打底还是日後跟 UIUX 合作上都能让你受益良多！

那就明天见罗！