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

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

推荐阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、常见的组件类型认识

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

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

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

1. 按钮

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

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

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

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

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

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

2. 数据输入

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

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

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

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

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

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

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

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

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

3. 导航引导

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

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

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

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

4. 数据展示

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

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

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

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

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

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

5. 提示警告

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

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

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

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

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

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

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

其它

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

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

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

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

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

收藏 57
点赞 52

复制本文链接 文章为作者独立观点不代表优设网立场,未经允许不得转载。