最全 Web端 UI设计组件详解

作为一名UI设计师，PC端设计也是我们的主要工作职责，尤其在中后台设计、官网设计、网站设计中，我们要熟知所有的web UI组件，今天给大家总结了关于web端UI组件，希望可以帮到你。

一、什么是UI组件

UI 设计组件（UI KIT），直译过来就是用户界面成套元件，是界面设计常用控件或元件，「组」是设计元素的组合方式，「件」由不同的元件组成。

二、组件的优势

1、保证一致性 Consistency

与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；

在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

2、反馈用户 Feedback

控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；

页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。

3、提高效率，减少成本 Efficiency

简化流程：设计简洁直观的操作流程；

清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；

帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

二、组件详解

1、布局 Layout 

A. 顶部-侧边布局-通栏布局，多用于应用型的网站

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

当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。

用法指南：

A. 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。

B. 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。

C. 比起 Select 组件，可以在同一个浮层中完成选择，有较好的体验。

14、日期选择器  DatePicker

用于选择或输入日期

15、时间选择器  TimePicker

输入或选择日期的控件，当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。

16、日期时间选择器  DateTimePicker

在同一个选择器里选择日期和时间

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

进行标记和分类

26、进度条 Progress

用于展示操作进度，告知用户当前状态和预期。

用法指南：

在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。

27、树选择 TreeSelect

树型选择控件，用清晰的层级结构展示信息，可展开或折叠。

28、页头 PageHeader

页头位于页容器中，页容器顶部，起到了内容概览和引导页级操作的作用，包括由面包屑、标题、页面内容简介、页面级操作等、页面级导航组成。

29、标记/徽标数  Badge

出现在按钮、图标旁的数字或状态标记

用法指南：

一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。

30、头像 Avatar

用图标、图片或者字符的形式展示用户或事物信息。

31、折叠面板  Collapse

可以折叠/展开的内容区域。

32、步骤条 Steps

引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。

33、警告提示 Alert

警告提示，展现需要关注的信息。

用法指南：

A. 当某个页面需要向用户显示警告的信息时。

B. 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。

34、加载 Loading

加载数据时显示动效

35、加载中  Spin

用于页面和区块的加载中状态。

用法指南：

页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。

36、骨架图  Spin

在需要等待加载内容的位置提供一个占位图形组合。

用法指南：

A. 网络较慢，需要长时间等待加载处理的情况下。

B. 图文信息内容较多的列表/卡片中。

C. 只在第一次加载数据的时候使用。

D. 可以被 Spin 完全代替，但是在可用的场景下可以比 Spin 提供更好的视觉效果和用户体验。

37、消息提示  Message

常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。

38、弹框  Messagebox

模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。

39、通知  Notification

悬浮出现在页面角落，显示全局的通知提醒消息。

40、对话框  Dialog

在保留当前页面状态的情况下，告知用户并承载相关操作。

41、文字提示 Tooltip

常用于展示鼠标 hover 时的提示信息。

42、气泡卡片/弹出框  Popver

点击/鼠标移入元素，弹出气泡式的卡片浮层。

43、气泡确认框 Popconfirm

点击元素，弹出气泡式的确认框。

44、卡片 Card

将信息聚合在卡片容器中展示。

45、走马灯  Carousel

在有限空间内，循环播放同一类型的图片、文字等内容

46、时间轴  Timeline

可视化地呈现时间流信息。

47、分割线 Divider

区隔内容的分割线

48、日历  Calendar

按照日历形式展示数据的容器。

49、陈述列表  Descriptions

成组展示多个只读字段。常见于详情页的信息展示。

50、回到顶部  Backtop

返回页面顶部的操作按钮

用法指南：

A. 当页面内容区域比较长时；

B. 当用户需要频繁返回顶部查看相关内容时。

51、结果  Result

用于反馈一系列操作任务的处理结果。

52、抽屉 Drawer

屏幕边缘滑出的浮层面板。

抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。

53、空状态  Empty

空状态时的展示占位图，当目前没有数据时，用于显式的用户提示。

54、列表  list

最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面

写在最后

工欲善其事,必先利其器，充分了解每个组件所具备的功能和设计用法，能让你的设计效率提升，看完这篇文章，希望你可以在设计网站、中后后台界面时，不会再被各种各样错综繁杂的组件弄得晕头转向，可以帮助你更好的选择所需要的组件。