在设计原型时，如果有自己用顺手的组件库，会提高很多工作效率。本文讲解了5中常见的组件类型，大家可以学起来。

不少产品新人，在练习原型图时，会拿UI界面进行临摹。但到了项目实战时，还是不知道怎么画。

出现这个情况，有2个主要的原因

1. 还没梳理功能需求、页面布局（这是基本功，篇幅有限，以后再单独写）
2. 不了解页面组件类型、用法（本篇讲解的内容）

一、组件的5种类型

按组件的用途，可归纳为5种常见类型

1. 基础：页面基础元素，如icon、文本、按钮；
2. 导航：显示用户当前位置和指引各个页面跳转；
3. 录入：用户操作数据录入，例如勾选、填手机号；
4. 展示：显示相关数据内容、状态说明；
5. 反馈：进行操作后，给用户相应的反馈说明

二、基础组件

有些组件库也叫「通用」，一般有按钮、文本、icon。在不同的场景、状态下，又有不同的样式。

三、导航组件

显示当前停留的页面、功能模块，以及引导跳转至其他页面

B 端产品经理如何快速成长？

产品与业务架构主要是将整个业务工作流进行分层，梳理，然后抽象出一个个需求，将业务需求与产品合情合理的映射起来，最终使业务数据在产品中流动，执行，记录，使用。

查看详情 >

常用的：顶部导航条、选项卡、底部导航栏、分段器

四、录入组件

有些组件库也分类为「表单」，是最常用的分类，例如选择内容、输入文本等操作。

常见的：单选框、复选框、输入框、表单、选择器等。

五、展示组件

展示数据相关的内容（如手机号、头像）、提示性内容

常见：标签、徽标、通告栏

六、反馈组件

对用户操作行为或页面状态的提示，让用户知道当前的状态

常见：Toast、弹窗、可操作提示

如果临摹UI画原型时，没有对组件进行总结分析，那只是练习画图软件的操作，而设计能力并无提升。

七、如何正确使用组件

阿里/腾讯/微信等大厂都有官方组件库 + 详细文档，非常值得下载、学习。

个人推荐头条和阿里，真心不错！

#ArcoDesign@ 头条

官网：https://arco.design/

#Ant Design@阿里

官网：https://ant-design.antgroup.com/docs/resources-cn

下表是我整理的14个大厂组件库、官网，大家可以学习