一、什么是UI组件UI设计组件（UIKIT），直译过来就是用户界面成套元件，是界面设计常用控件或元件，「组」是设计元素的组合方式，「件」由不同的元件组成。
二、组件的优势1、保证一致性Consistency与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
2、反馈用户Feedback
控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
3、提高效率，减少成本Efficiency简化流程：设计简洁直观的操作流程；清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
二、组件详解1、布局LayoutA.顶部-侧边布局-通栏布局，多用于应用型的网站
B.侧边栏布局，采用侧边栏的页面，多用于展示类网站
2、导航菜单NavMenu导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。一般导航分为“侧边栏导航”和“顶部导航”2种类型。选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适（方向不明确），以下是「侧栏导航」和「顶部导航」的区别。A.侧边栏导航可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。
B.顶部导航顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。
3、面包屑Breadcrumb面包屑，显示当前页面在系统层级结构中的位置，并能向上返回，提供一个有层次的导航结构,并标明当前位置。用法指南：A.当系统拥有超过两级以上的层级结构时；B.当需要告知用户『你在哪里』时；C.当需要向上导航的功能时。
4、按钮Button按钮用于开始一个即时操作。用法指南：标记了一个操作命令，响应用户点击行为，触发相应的业务逻辑。在设计中，基本有以下四种按钮类型：主要按钮：用于主行动点，一个操作区域只能有一个主按钮。默认按钮：用于没有主次之分的一组行动点。线性按钮：常用于添加操作。链接按钮：用于次要或外链的行动点。
以及四种状态属性与上面配合使用。危险：删除/移动/修改权限等危险操作，一般需要二次确认。幽灵：用于背景色比较复杂的地方，常用在首页/产品页等展示场景。禁用：行动点不可用的时候，一般需要文案解释。加载中：用于异步操作等待反馈的时候，也可以避免多次提交。
5、下拉菜单Dropdown
将动作或菜单折叠到下拉菜单中。用法指南：当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。
6、标签页Tabs选项卡切换组件，常用于平级区域大块内容的的收纳和展现。基础样式
选项卡样式
卡片式
7、分页Pagination当数据量过多时，使用分页分解数据。
8、单选框Radio在一组备选项中进行单选
9、复选框Checkbox一组备选项中进行多选
10、输入框通过鼠标或键盘输入内容，是最基础的表单域的包装。
11、计数器/数字输入框InputNumber通过鼠标或键盘，输入范围内的数值。
12、选择器Select当选项过多时，使用下拉菜单展示并选择内容。
13、级联选择器Cascader
14、日期选择器DatePicker用于选择或输入日期
输入或选择日期的控件，当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。
17、颜色选择器ColorPicker
用于颜色选择
18、开关Switch表示两种相互对立的状态间的切换，多用于触发「开/关」。
19、滑块Slider通过拖动滑块在一个固定区间内进行选择
20、上传Upload通过点击或者拖拽上传文件
用法指南：A.上传是将信息（网页、文字、图片、视频等）通过网页或者上传工具发布到远程服务器上的过程。B.当需要上传一个或一些文件时。C.当需要展现上传的进度时。D.当需要使用拖拽交互时。
21、评分Rate评分组件
22、穿梭框Transfer
双栏穿梭选择框。
用法指南：A.需要在多个可选项中进行多选时。B.比起Select和TreeSelect，穿梭框占据更大的空间，可以展示可选项的更多信息。穿梭选择框用直观的方式在两栏中移动元素，完成选择行为。
23、表单Form由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据用法指南：A.用于创建一个实体或收集信息。B.需要对输入的数据类型进行校验时。
24、表格Table用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。
25、标签Tag进行标记和分类
27、树选择TreeSelect树型选择控件，用清晰的层级结构展示信息，可展开或折叠。
28、页头PageHeader页头位于页容器中，页容器顶部，起到了内容概览和引导页级操作的作用，包括由面包屑、标题、页面内容简介、页面级操作等、页面级导航组成。
29、标记/徽标数Badge出现在按钮、图标旁的数字或状态标记用法指南：一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。
30、头像Avatar用图标、图片或者字符的形式展示用户或事物信息。
31、折叠面板Collapse可以折叠/展开的内容区域。
32、步骤条Steps引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于2步。
用法指南：A.当某个页面需要向用户显示警告的信息时。B.非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
34、加载Loading加载数据时显示动效
35、加载中Spin
用于页面和区块的加载中状态。
用法指南：页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。
36、骨架图Spin
在需要等待加载内容的位置提供一个占位图形组合。
B.图文信息内容较多的列表/卡片中。
C.只在第一次加载数据的时候使用。
D.可以被Spin完全代替，但是在可用的场景下可以比Spin提供更好的视觉效果和用户体验。
37、消息提示Message常用于主动操作后的反馈提示。与Notification的区别是后者更多用于系统级通知的被动提醒。
38、弹框Messagebox模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。
39、通知Notification悬浮出现在页面角落，显示全局的通知提醒消息。
41、文字提示Tooltip常用于展示鼠标hover时的提示信息。
42、气泡卡片/弹出框Popver点击/鼠标移入元素，弹出气泡式的卡片浮层。
43、气泡确认框Popconfirm点击元素，弹出气泡式的确认框。
44、卡片Card将信息聚合在卡片容器中展示。
45、走马灯Carousel在有限空间内，循环播放同一类型的图片、文字等内容
47、分割线Divider区隔内容的分割线
48、日历Calendar按照日历形式展示数据的容器。
49、陈述列表Descriptions成组展示多个只读字段。常见于详情页的信息展示。
51、结果Result用于反馈一系列操作任务的处理结果。
52、抽屉Drawer屏幕边缘滑出的浮层面板。抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。
53、空状态Empty空状态时的展示占位图，当目前没有数据时，用于显式的用户提示。
54、列表list最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面