用户界面（UI）元素是我们用来构建应用程序或网站的一部分。 它们为用户界面增加了交互性，在用户四处导航时为其提供了接触点。 考虑按钮，滚动条，菜单项和复选框。作为运营人员也需要了解一些用户界面（UI）的小知识，了解如何使用UI元素创建一种视觉语言，并确保整个产品的一致性-使其易于使用且易于浏览，而无需用户过多考虑。在本文中，我们将探讨一些最常见的用户界面元素，并考虑何时以及为何使用它们。
准备好了吗？ 我们开始吧。
用户界面元素简介
用户界面元素通常包含以下四类:
- 输入控件
- 导航组件
- 信息组件
- 容器
输入控件允许用户将信息输入到系统中。 例如，如果您需要用户告诉您他们所在的国家/地区，则可以使用输入控件让他们这样做。
导航组件可帮助用户在产品或网站上移动。 常见的导航组件包括iOS设备上的标签栏和Android设备上的汉堡包菜单。
信息组件与用户共享信息。
容器将相关的内容放在一起。
了解您的UI元素：一个全面的术语表
我们大多数人每天都在界面上花费相当大的时间。我们花时间看我们最喜欢的应用程序或我们在工作中使用的软件，使我们熟悉了常见的UI元素。我们学习如何使用它们以及它们的行为。当我们在新的应用程序或网站上看到它们时，由于之前与它们有过互动，我们立即知道该如何处理它们。了解您的UI元素将使您能够发现在设计中使用它们的机会，从而帮助您设计出清晰而简单的界面。让我们看看您将会遇到的最常见的UI元素。
Accordion可折叠手风琴
手风琴可让用户扩展和折叠内容的各个部分。 它们可帮助用户快速浏览资料，并允许UI设计人员在有限的空间内包含大量信息。
Bento Menu
以便当盒命名的便当菜单代表具有网格项的菜单。 在阅读的过程中，您会开始注意到UI设计师只是美食家的另一个字眼-我们喜欢以食物命名UI元素。
Breadcrumb面包屑
这些链接的痕迹可以帮助用户了解他们在网站中的位置。面包屑通常位于网站的顶部，让用户看到他们的当前位置和前进的页面。用户还可以点击它们来在步骤之间移动。比如你看下本文标题下面，那里就是面包屑。
button按钮
传统上，按钮显示为带有标签的形状，按钮告诉用户他们可以执行特定的操作，例如提交。
卡片card
卡片是一种长方形或方形的小模块，以按钮、文本、富媒体等形式包含不同种类的信息，这在当今非常流行。卡片作为用户的入口点，并排显示不同种类的内容，然后用户可以点击这些内容。如果你想聪明地利用可用空间，为用户呈现多个内容选项，而不是让他们在传统的列表中滚动，那么卡片是一个很好的UI设计选择。
Carousel旋转木马
轮播允许用户浏览内容集，例如图像或卡片，这些内容通常超链接到更多内容或来源。 在用户界面设计中使用轮播的最大优势在于，它们可以使多个内容在页面或屏幕上占据相同的空间区域。
复选框Checkbox
在UI设计中，复选框的出现正如其名称所暗示的那样:屏幕上的一个小方框，用户可以选中或取消选中。复选框允许用户从列表的多个选项中选择一个，每个复选框作为一个单独的操作。勾选复选框用一个小勾标记它。这个元素的一些常见用例包括表单和数据库。
Döner菜单
doner菜单是比较有名的汉堡菜单的一种变体。汉堡菜单上有三条等长的线，一条叠在另一条上面，而doner菜单上有三条不同长度的线，垂直堆叠:一条长线，下面一条短线，下面一条更短的线!这个UI元素表示一组过滤器。
Form表单
表单帮助用户将相关信息输入系统并提交。网上到处都是表单，就是填表嘛，还记得以前推荐的Chrome密码和填表插件吗？
汉堡包菜单
这三条小水平线看起来有点像美国的经典餐，代表了一个列表菜单。你通常会在应用程序的左上角发现汉堡包菜单，而且很可能包含一组导航链接。
Icon，读作唉抗
图标是用于将各种事物传达给用户的图像。 它们可以帮助更好地交流内容，或者可以交流和触发特定的动作。
烤肉串菜单
我们已经讲完了汉堡包菜单和其他可以吃的食品菜单：现在再讲另一个(不可食用的！)UI元素:烤肉串菜单。烤肉串菜单由三个垂直的点组成，代表了一组选项。
Loader：加载
加载程序可以采用多种形式，设计人员喜欢利用它们来发挥创造力。 加载程序旨在让用户知道系统正在后台执行操作，因此应等待。
肉丸菜单meatball menu
菜单家族的另一个成员是肉丸菜单，由三个水平的点组成。肉丸菜单表明有更多的选项可用，当你点击菜单点显示。例如微信上任何一个聊天窗口的右上角就有三个点儿。
Modal
模态窗口是一个包含内容或消息的小框，要求您在关闭它并返回流程之前与它进行交互。想想你最近一次删除手机上的内容。弹出的小消息要求你确认你想要删除时，那就是一个模态窗口。
分页Pagination
分页通常出现在页面的底部，它将内容组织成页面。分页让用户知道他们在页面中的位置，并单击以移到其他部分。
选择器picker
日期和时间选择器让用户选择日期和时间。与输入字段相比，使用选择器的优点是能够使数据库中所有数据用户输入的数据保持整洁和格式一致，从而使信息易于管理和访问。
进度条Progress bar
进度栏可帮助用户直观地看到他们在一系列步骤中的位置。 通常，您会在结帐时找到它们，标记出用户完成购买交易所需完成的不同阶段，例如下载过程和运输等。
单选按钮radio button
单选按钮经常与复选框混淆，它是让用户从列表中选择一个选项的圆形小元素。这里的关键在于，用户只能选择一个选项，而不能像复选框那样选择多个选项。
Slider controls滑动控件
滑块是一种常见的UI元素，用于选择一个值或一个值范围。通过用手指或鼠标拖动滑块，用户可以在购物时逐步精细地调整音量、亮度或所需的价格范围。
Stepper步进器
步进器是两段控件，也允许用户调整值。但是，与滑块不同的是，它们只允许用户以预定义的增量更改值。
Tag标签
这个概念太重要了，在wordpress里是极其常见的，是分类学的一个概念，注意它与category的区别。在UI设计中，标签本质上是帮助标记和分类内容的标签。它们通常由相关的关键字组成，使查找和浏览相应的内容片段更容易。标签经常在社交网站和博客上使用。
Tab bar标签栏或者叫选项卡
标签栏出现在移动应用程序的底部，允许用户在应用程序的主要部分之间快速地来回移动。比如在Excel中有不同的sheets.
Tooltip提示信息
工具提示提供了很少的提示来帮助用户理解界面中的一个部分或过程。那么在这里思考一下，tooltip和安卓中的toast以及snack bar有什么区别？
Toggle开关
把toggle想象成开关。它让我们这样做：打开或关闭一些东西。
除了以上元素，还有落下的吗？欢迎在下方评论。