一文讲透 | 产品新人必懂的5种组件类型

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

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

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

一、组件的5种类型

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

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

二、基础组件

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

一文讲透 | 产品新人必懂的5种组件类型

三、导航组件

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

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

一文讲透 | 产品新人必懂的5种组件类型

四、录入组件

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

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

一文讲透 | 产品新人必懂的5种组件类型

五、展示组件

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

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

一文讲透 | 产品新人必懂的5种组件类型

六、反馈组件

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

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

一文讲透 | 产品新人必懂的5种组件类型

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

七、如何正确使用组件

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

个人推荐头条和阿里,真心不错!

#ArcoDesign@ 头条

官网:https://arco.design/

一文讲透 | 产品新人必懂的5种组件类型

#Ant Design@阿里

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

一文讲透 | 产品新人必懂的5种组件类型

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

一文讲透 | 产品新人必懂的5种组件类型

版权声明

本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部