B 端设计飞升，从学习组件设计开始

今天我们更近一步，再整理一次 B 端常用的控件和组件类型，帮助刚接触 B 端的同学对 B 端组件库的内容有更彻底的认识。

推荐阅读

一、B 端控件和组件的划分

根据分子原理的逻辑，我们可以把 B 端的产品从整个项目拆解到最小的单元，那么对应的结构和层级顺序如下：

页面和项目很容易理解，而基础元素、控件、组件则很容易搞混，就需要更具体的解释。

首先基础元素是 UI 界面中最下级的单位，只用于传递视觉和信息内容，包括：

1. 文字：系统通过字体文件渲染出来的文本内容
2. 图片：所有运营、内容、背景图和界面切图
3. 图标：在系统内具有一定隐喻和装饰作用的图形符号
4. 几何：模块的背景、按钮的边框、分割线等几何元素

控件则是产生交互效果的元件，是 UI 界面中最基础的交互元素。比如按钮、输入框、标签、进度条等，用于向用户输出或输入数据。

组件则是比控件更复杂的交互元素，是由基础元素和控件共同组成的更完整的业务、信息、功能模块。

比如一个输入框控件，仅能输入一段信息，比如用户名。而在一个登录场景中，光有用户名是不够的，还需要密码、验证码，以及用于登录的按钮。一个登录窗口必须包含并组合这些控件，才能实现完整的登录功能，而这个登录窗口就是一个组件。

同理，类似侧边导航、日期选择、表格、穿梭框等包含了不同基础元素和控件的复杂模块，也都是组件。

控件英文是 Controls，组件的英文则有不少，如 Elements、Components、Kits、Widgets 等。这两个词汇在各大系统、框架中并没有严格的定义和划分，所以在项目协作中往往会混用。同时它们也是编程中的专业术语之一，程序员口中的控件、组件往往和设计用的控件、组件不是一种东西。

作为 UI 设计师，了解两者之间的概念并形成清晰的定义是非常有必要的，可以更好的展开后续知识点的学习。而我们平时说的“组件库”，就是控件和组件的集合库，而不是只整理了组件的库。

组件对于 UI 界面设计来说是最重要的部分，因为界面是由组件组合而成，界面设计本质上就是逐步设计组件的过程。

在展开下面的具体类型认识和学习之前，要先强调组件可以划分成三个大类：

1. 通用组件
2. 业务组件
3. 数据图表

通用组件即具有普适性的组件，用于实现一些非常底层、基础的功能，大多数项目都可以使用。比如日期选择、删除确认弹窗、表格等，都是非常常见的组件，不会被局限在某类特定的行业或项目中。

业务组件则是根据特定业务需求自定义的组件，比如在 OA 管理中添加的任务卡片、审批流程图等组件，这在其它类型的产品中很难用到，或者因为需求的特殊性，只能用在本项目中，即使同类的其它项目也无法直接复用。

我们熟知的 Ant、Arco、TDesign 等开源框架提供的组件库，都是通用组件，因为这些组件易于复用。而业务组件难以复用，需要设计师根据项目需求独立定制，这是设计师在 B 端项目发挥的主要作用之一。

最后一个图表组件，是用于反应数据的可视化图形组件，无论是设计还是开发方式都和常规组件完全不同，所以我们会把它划分成一个独立的类型。

二、常见的组件类型认识

B 端项目的控件和组件众多，除了通用组件和业务组件的区分以外，我们还可以根据作用类型对它们做出进一步的分类，主要的类型包含下面这些：

不同前端框架的组件库分类方式不同，但基本大同小异，只要掌握这些基本类型的认识即可，下面会逐一对它们进行介绍。

1. 按钮

按钮是 UI 中最重要、最原始的交互元素，用于启动某个预设好的功能或程序。比如登录按钮，点击后会发送账户密码等数据给服务器进行验证。

按钮因为使用场景多、频率高，所以衍生了出了很多下级分类，在 AntDesign 中，将按钮分为了五种：

1. 主按钮：用于主行动点，一个操作区域只能有一个主按钮。
2. 默认按钮：用于没有主次之分的一组行动点。
3. 虚线按钮：常用于添加操作。
4. 文本按钮：用于最次级的行动点。
5. 链接按钮：一般用于链接，即导航至某位置。

在上面案例中，按钮的主体是文字，虽然文本按钮并没有显眼的外边框和背景色，但我们可以通过文字的寓意来识别它是不是一个按钮。而除了文字以外，图标也可以产生相同的效果，所以按钮也可以使用图标作为主体。

2. 数据输入

输入是指用于往系统内输入、编辑数据的操作，用于实现这类操作的元素也被称为表单控/组件。在主流的交互方式中，输入分为两个大类：

1. 自定义输入
2. 选择输入

自定义输入即用户根据内容的类型自己输入想要的数据，比如文本、密码、图片、附件等，用户会输入的具体内容系统是无法预判的，只能给出一定限制。

要额外强调，虽然图片、附件上传等控件使用有一个 “选择” 附件的过程，但是最后会上传什么文件依旧是不确定的，所以也在自定义的分类之中。

自定义输入控/组件类型较少，主要包含下面两个大类：

选择输入，则是数据的范围、格式都已经确定好了，用户要从这个范围中选出一个或多个参数。比如设置某台设备运行功率的百分比，那么可以使用一个 0-100% 的滑块控件，而不是给用户一个输入框再引导他自己输入正确数值（0-100 的整数）。

因为数据范围、格式多种多样，所以选择类的控/组件类型非常多，常见的包含下面这些：

3. 导航引导

导航是用于对用户所在位置、目标进行标识，或是引导用户快速前往某些位置的操作。

最常见的导航就是全局组件中的导航，用于跳转到不同的页面中。但一个复杂的 B 端项目往往还会包含不同的页面跳转引导，比如面包屑或是步骤等。

常见的导航引导类组件包含下面这些类型：

4. 数据展示

数据展示即系统通过不同的方式向用户展示指定数据的过程。在一个 B 端系统中数据的类型多种多样，所以展示的形式也不同。

因为展示的形式很多，所以我们简单划分成两个大类，独立展示和列表展示。

独立展示即展示的数据有一定的独立性，在一个组件范围内仅有一个，或和其它同类数据没有序列关系，也是比较基础的展示元素。比如下面这些常见的数据展示类型：

列表展示则是用有序的排列方法展示多个数据的形式，在 B 端项目中，列表展示的内容通常权重较高，也是重点设计的对象，常见的列表展示类型如下所示：

5. 提示警告

提示警告即在用户使用过程中，对用户的操作进行反馈或对特定信息进行警示的操作。提示的种类丰富，根据传统的分类方式可以将它们分为强提示和弱提示两类。

强提示字如其名，会用比较强硬的方式吸引用户注意力，并需要用户进行额外的操作来关闭提示，常用于删除、新建、变更等重要操作中。

强提示主要包含下面这些类型：

弱提示则应用于一些权重较低的场景中，比如表示系统的状态、操作的解释、加载的进度等等。同时，弱提示的出现通常不会影响用户的正常操作流程，可以完全忽视它们，无需进行额外的操作就会自己关闭。

弱提示主要包含下面这些类型：

其它

上面列举的都是非常常见的控件和组件，相信大家早已司空见惯不需要我挨个解释。但还有很多组件是无法被上面这些分类定义，且不能形成新的分类，就需要大家在实践过程中自己区分和积累了。

同时，对于项目特有的业务组件来说，可以用业务或功能作为依据，对它们做出额外的分类，比如 CRM 系统中，用于展示客户数据和企业数据的众多组件，我们可以直接创建 “客户展示组件” 和 “企业展示组件”两个分类，而不是把它们强行归类到通用组件的类型中去。

因为业务差异，致使任何成熟项目的组件库分类都是不同的，所以在项目中搭建组件库，需要设计师自己根据经验和对需求的理解自己定义分类。

欢迎关注作者的微信公众号：「超人的电话亭」