2000 字快速入门!产品小白必懂的 5 种组件类型

作为公司的产品老油条,大小也面了不下 50 个产品,产品经验横跨 0~3 年、3~5 年。这么多次面试中,我每次都喜欢问一个问题“你大概了解几种 UI 组件(前端组件)呢,能举例说明一下吗?”

然而每次给我的答复 80% 是“什么是组件?”有时我会继续说“在页面内的所有内容都可以称为组件”候选人给我的反馈,还是一脸懵逼。

剩余的 20% 能答出“轮播、对话框、列表”等常见组件,就算产品基础能力一般的了。

我真的很想问他们,难道你在设计原型的时候,连自己做的是什么都不知道吗?那你的页面是怎么设计出来的?后续的一系列交互反馈,又是依据什么进行设计?

一、什么是组件?

创新,是在一系列约束条件下,对基础元素的排列组合。

一些爱偷懒的产品,发现了产品设计的套路,他们熟知不同的大厂组件库,了解 50+ 组件样式和组件类型,再依据不同功能、场景、需求,将各种组件进行排列、组合,完成页面、功能、乃至模块的高效设计。

那什么是组件呢?组件(Component)常见于互联网的设计和开发工作中。

用于 UI 设计时,组件是界面的组成部分,包含了不同的类型、行为和状态。而在开发领域,组件指的是对数据和功能的简单封装。

2000 字快速入门!产品小白必懂的 5 种组件类型

如图为京东首页,你认得几种组件呢

我对组件的理解是,组件是具有特定样式和用途的内容组合。

多个页面基本元素(例如文本、字体、字色、形状等)组成了组件,而多个组件又能组合成不同的页面。

简单来说,页面内的任意内容,都可称作组件。

二、组件的五种类型

我们可以把大多数组件,归类为五种常见类型:基础、导航、输入、展示、反馈。

  1. 基础:基础元素
  2. 导航:位置指引
  3. 输入:数据录入
  4. 展示:数据显示
  5. 反馈:数据交互

如图为有赞的 vant 组件库,大致包含了 5 种类型,约 70+ 个组件,不同的组件有各自的样式和用途。

2000 字快速入门!产品小白必懂的 5 种组件类型

基础

基础组件是一些常见的页面基础元素。

基础组件主要有:图标、文本、按钮、图片、单元格、遮罩层、弹出层等。

2000 字快速入门!产品小白必懂的 5 种组件类型

导航

导航类组件,主要帮助用户了解当前位置和指引各个页面跳转。

该类组件包括宫格、导航栏、标签栏、索引栏、分页器等。

2000 字快速入门!产品小白必懂的 5 种组件类型

输入

输入类组件一般用于数据录入,例如选择内容、输入文本等操作。

常见的输入类组件有:单选框、复选框、输入框、表单、选择器等。

2000 字快速入门!产品小白必懂的 5 种组件类型

展示

展示类组件,主要用于显示相关数据内容。

头像、徽标、标签、列表、通知栏等组件都属于展示类组件。

2000 字快速入门!产品小白必懂的 5 种组件类型

反馈

用户进行操作后,引发的一系列数据交互,即为反馈类组件。数据交互可以是内容提示、状态过渡、数据录入等。

常见的反馈组件包含了对话框、吐司提示、气泡提示、动作面板、下拉刷新等。

2000 字快速入门!产品小白必懂的 5 种组件类型

三、一些大厂的相关组件库

1. Ant Design

Ant Design 是蚂蚁集团(体验技术部)基于大量业务实践和项目总结,抽象构建出的企业级产品的设计体系。Ant Design 基于自然、确定性、意义感、生长性四大设计价值观,通过模块化解决方案,降低冗余的生产成本,让设计者专注于更好的用户体验。

2000 字快速入门!产品小白必懂的 5 种组件类型

2. Zan Design

Zan Design 是有赞出品的一套服务于产品设计的设计模式和实践方法。

它主要由产品原则、设计原则、内容策略、布局与模式、视觉、动效、资源、组件等几大部分组成。Zan Design 的组件库支持桌面端、移动端、小程序等多端组件。

2000 字快速入门!产品小白必懂的 5 种组件类型

3. Arco Design

Arco Design 是字节跳动 UED 团队出品的企业级设计系统,字节旗下的今日头条、番茄小说、头条号、火山引擎等优秀产品都使用了 Arco Design,同时它还支持多国语言、定制主题等特性。

2000 字快速入门!产品小白必懂的 5 种组件类型

4. 其他组件库

除了上述的组件库之外,还有:

  1. 小程序组件:微信、支付宝、百度、字节、360 等;
  2. 后台组件:Element、Semi Design、King Design、58 同城 matrix 等;
  3. web 组件:NutUI、Cube UI、VUX UI 等;
  4. 综合组件:Taro、uView UI。

总结

组件,是具有特定样式和用途的内容组合,主要有五种类型:基础、导航、输入、展示、反馈。

  1. 基础:基础组件是一些常见的页面基础元素,例如图标、文本;
  2. 导航:主要帮助用户了解当前位置和指引各个页面跳转;
  3. 输入:一般用于数据录入,例如选择内容、输入文本等操作;
  4. 展示:主要用于显示相关数据内容;
  5. 反馈:用户进行操作后,将会引发一系列数据交互。

不懂上述基础组件,产品设计就像是盲人摸象。只能依靠以往的产品经验、或找几个竞品功能抄抄完事,下次遇到新需求又得重头思考。所以,掌握组件概念,已经成为初级产品的必备知识。

欢迎关注作者微信公众号:「产品之外」

2000 字快速入门!产品小白必懂的 5 种组件类型

收藏 117
点赞 61

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