Alice

你可能经常会有这样的疑惑:对于弹窗的尺寸、抽屉的宽度、输入框的长度、表格每一栏的宽度等等组件的细节尺寸,为什么 Ant Design 这类开源的组件库,几乎没有给出明确的数值定义?要回答这个问题,就要先理解这两个概念:「基础组件」和「高级组件」。本文会从两者的概念区别以及设计重点等方面,具体说说相关的知识。

 

图片

 

一. 概念区分

「基础组件」和「高级组件」并不存在严格的界限区别,以至于很多设计师对二者没有做过多的区分,但两者各自有明显的特点。

 

1 . 基础组件

「基础组件」也可以被叫做「原子组件」「通用组件」,是一种底层组件,其特点如下:

  • 单一的不可再拆分的组件:比如一个 button,一个输入框,一个开关等。
  • 适用于各类业务场景:比如政务业务、电商业务、金融业务等业务都可以使用。
  • 可保证设计质量和效率:使用组件可以使设计稿具备较高的一致性,并提升设计和开发的工作协同效率。

图片

一部分基础组件的示例

 

最为大家熟知的、典型的基础组件库就是 Ant Design,通用、开源、包容是其主要特点。迄今为止,Ant Design 已拥有超过 1k+ 的设计和开发贡献者,被应用于 2w+ 的企业各类业务场景中。

 

2 . 高级组件

「高级组件」也可以被叫做「区块组件」「业务组件」,是一种相对来说更具备业务属性的组件,其特点如下:

  • 复合型的区块组件:是基础组件的合集,比如一个表单,一个表格,一张多功能卡片等。
  • 适用于更专业的业务场景:带有强烈的业务属性,在业务实操设计过程中,会更有针对性、更高效。
  • 可保证业务完成的专业性和效率:好的业务组件可以更好地赋能业务,更快地完成业务需求。

图片

复合表单组件,提炼于政务类业务场景

 

图片

指标+统计数值的复合组件,来源于数据统计类业务场景

 

业务组件源于业务,是设计师对有业务特色的、出现频次高的组件进行的整理和沉淀。Ant Design Pro(TechUI)就是 AntD 团队根据业务中的实际应用场景和需求,总结出的更适合蚂蚁集团业务场景的高级组件库。

 

二. 设计重点

「基础组件」和「高级组件」在搭建和设计的过程中要注意哪些内容?什么样的内容可以被做成基础组件?什么样的内容和组件又可以/应该被封装成业务组件?

 

1 . 基础组件设计依据

基础组件可以直接借鉴已有的、成熟的开源组件设计体系,减少重复劳作。如果自己的团队也想做,判断依据通常包括:

  • 内容或元素出现和使用的频次
  • 用户操作后的基础交互反馈,比如 hover 后出现的气泡、违规操作后看到的提示条;
  • 设计走查的过程中经常会看到的质量问题,也可以用组件来统一,比如 icon 的颜色总是用错、位置总是上上下下差几个不一致等等。

 

2 . 高级组件设计依据

相比于基础组件,高级组件因其独特的业务属性,以及与产品的强绑定关系,很难找到已有的组件库进行借鉴和应用。判断内容是否应该被沉淀的依据通常包括:

  • 元素或内容是很多个基础组件的拼接合集,且在很多场景中的布局具备一定规律,会同时出现;
  • 在通用组件的基础上带有强烈的业务特性和需求,比如每次使用组件 A 的时候,都要加入业务需要的表单或提示信息,A 就可以升级成业务组件 A+。

需要注意的是,业务组件库中的组件数量不是越多越好“专而精” 有时会更高效。毕竟设计系统的根本目的是降本提效,而非设计师炫耀设计价值的工具。

另外,“专而精” 也是另一个维度的 “全”。当我们通过对业务需求和属性的深入研究,将业务组件做的足够专业,也会从另一个维度对业务进行补充和赋能,从设计侧推动业务进行体验优化,促进产品质量的提升。

业务组件的搭建标准和规则,更多由业务设计师来决定,也是所有 B 端设计师应该精进的能力。

 

3 . 完整概念列表

所以回到我们开篇遇到的问题:

“为什么对于弹窗的尺寸、抽屉的宽度、输入框的长度、表格每一栏的宽度等等组件的细节尺寸,为什么 Ant Design 几乎没有给出明确的数值定义?”

因为每个产品各具特色,对于这种与业务强相关的组件尺寸,在通用的、开源的基础组件库中,不太好给出一刀切的定义。但在我们日常面对业务需求所用的高级业务组件库中,则需要有明确的规范

那么到底哪些数据需要被规范?应该如何编写规范?「基础组件」和「高级组件」在设计中还要注意到哪些细节?为了帮助大家更清晰地区分概念,关于「基础组件」和「高级组件」我总结出了一个完整的清单列表:

  • 基本概念区分
  • 案例区分
  • 组件设计工作流程区分
  • 组件设计内容区分
在公众号后台留言 “列表”  ,可以看到详细完整的内容分享👇👇👇,共 30+ 项、2000 字对比内容和设计过程,相信会对你有帮助。

图片

 

知识福利 

2021 年是我前半生中最充实的一年,工作强度堪比高考,设计知识的沉淀和产出量也在不断刷新着记录:

图片

我在每日输出的知识内容中,选择了一部分进行汇总,梳理了从【接到设计需求到产出设计沉淀】的完整流程。想要看到更多详细内容的同学,可以在公众号后台留言 “设计思维”  👇👇👇

图片

学海无涯,盼你同舟!

 

原文链接:长弓小子(公众号)

作者:元尧

转载请注明:学UI网 » 详解| 一文带你了解「基础组件」和「高级组件」

登录收藏
 
你可能喜欢的:
工作经验|设计组件的更新和优化,需要哪些流程?工作经验|设计组件的更新和优化,需要哪些流程?
我是万万没想到,这么复杂的效果,竟然是用这么简单的工具做出来!我是万万没想到,这么复杂的效果,竟然是用这么简单的工具做出来!
B类新品场景设计B类新品场景设计
想要优化好UI作品,这14个设计细节一定要检查到位!想要优化好UI作品,这14个设计细节一定要检查到位!
探索节日运营新思路探索节日运营新思路
2021-16篇 | 产品细节剖析,让你看看大厂是如何做设计的2021-16篇 | 产品细节剖析,让你看看大厂是如何做设计的
Behance 首页推荐的作品集为什么这么高级?彩云为你拆解其中7个秘密Behance 首页推荐的作品集为什么这么高级?彩云为你拆解其中7个秘密
交互设计师专业能力体系交互设计师专业能力体系
案例锦囊|设计该如何引导用户下单 / 购买商品?案例锦囊|设计该如何引导用户下单 / 购买商品?
做了近百个网页,总结的高质量设计方法做了近百个网页,总结的高质量设计方法