按钮是用户界面中最流行的交互元素之一。更重要的是，它们对于创建可靠的交互和积极的用户体验至关重要。今天，继续使用 UI/UX 术语表，我们在这里收集了我们每天在网站和移动应用程序上看到的广泛使用的按钮类型的定义和示例。

什么是按钮？

按钮是一种交互式元素，可以按照特定命令从系统中获取预期的交互式反馈。基本上，按钮是一种控件，允许用户直接与数字产品通信并发送必要的命令以实现特定目标。例如，可能是发送电子邮件、购买产品、下载一些数据或一段内容、打开播放器以及大量其他可能的操作的任务。按钮如此受欢迎和用户友好的原因之一是它们有效地模仿与物理世界中的对象的交互。

现代 UI 按钮非常多样化，可以用于多种用途。呈现交互区域的典型和经常使用的按钮通常清楚地标出可见性，具有特定的几何形状，并且通常支持说明将通过此按钮完成哪些操作的副本。设计师必须花费大量的时间和精力来创建有效且引人注目的按钮，这些按钮自然地融入一般的风格概念，但又足以在布局中脱颖而出。

让我们检查在移动和 Web 界面中广泛使用的按钮类型。

号召性用语按钮

一种 号召性用语 (CTA) 按钮是用户界面的一个交互元素，旨在鼓励用户采取某种行动。这一行动提出了一个 转换对于特定页面或屏幕（例如购买、联系、订阅等），换句话说，它将被动用户变成主动用户。因此，从技术上讲，它可以是受号召性用语文本支持的任何类型的按钮。它与页面或屏幕上的所有其他按钮的不同之处在于其引人入胜的性质：它必须引起注意并刺激用户执行所需的操作。

这是一个的主页 电子商务网站卖给孩子们的书。在特色幻灯片上，有一个核心操作设定为页面目标：让用户订阅邮件列表共享。因此，按钮被设计为布局中最引人注目的元素之一，以便用户只要愿意就可以立即看到如何执行操作。

文本按钮

这里的术语是透明的：它是一个带有一段文本的按钮。这意味着副本没有集成到任何形状、填充选项卡或类似的东西中。因此，在我们对物理世界中这种现象的标准理解中，它看起来不像一个按钮。这复制是它唯一的视觉呈现者。尽管如此，它还是一个允许用户与界面交互的实时控件。您还可以看到这些用颜色或下划线标记的按钮。此外，用于网站标题，文本按钮将用户与网站的核心内容部分连接起来——在这种情况下，它们不会被标记为标题区域中的所有（或大多数）元素默认情况下都是交互式的。文本按钮通常用于创建辅助交互区域，而不会分散主要控件或 CTA 元素的注意力。

这是时尚商店的优雅网站设计。如您所见，布局的交互部分基于文本按钮。只有主要的 CTA 元素显示为一个易于解码的按钮。所有其他功能仅在报价的标题和选项卡中复制。这种方法支持一般的光和简约风格 网页的。

下拉按钮

下拉按钮，当您单击它时，会显示一个包含互斥项目的下拉列表。您经常可以在设置按钮中遇到这种类型。当用户选择列表中的选项之一时，它通常被标记为活动的，例如按颜色标记。

会打开选​​项下拉列表。一旦您选择一个，大按钮就会消失，留下选中的选项和小加号按钮，以防您想再次检查列表。

汉堡按钮

它是隐藏菜单的按钮。单击或点击它时，菜单会展开。这种菜单（以及按钮）因其由三条水平线组成的形式而得名，看起来像典型的面包-肉-面包汉堡。今天它是一种广泛使用的互动元素网页和移动布局；尽管如此，关于其优缺点的争论仍然很激烈。

定期访问不同网站的活跃互联网冲浪者默认知道此按钮隐藏了各种类别的网站内容，因此此技巧不需要额外的解释和提示。有什么好处，汉堡菜单释放了空间，使界面更加简约和通风；从功能的角度来看，它为其他重要的布局元素节省了大量空间。还可以提到响应式和自适应设计隐藏导航元素并使界面在不同设备上看起来和谐的其他好处。

反对汉堡包菜单的论点是基于这样一个事实，即这种设计元素可能会让不经常使用网站的人感到困惑，并且可能会被具有高度抽象特征的标志误导。它可能对导航产生负面影响，并可能成为用户体验不佳的原因。因此，应该在用户研究和定义目标受众的能力和需求之后做出关于应用汉堡包按钮的决定。

虽然汉堡包菜单仍然属于现代网页和应用程序设计的有争议的问题，但它们被频繁使用。

加号按钮

被点击或轻敲，加号按钮使用户能够向系统添加一些新内容。取决于应用程序类型，它可以是一个新的帖子、联系人、位置、注释、列表中的项目——任何是数字产品的基本操作。有时，点击这个按钮，用户会直接进入创建内容的模式窗口，在其他情况下，也有一个中间阶段，给他们额外的选项可供选择，使添加内容更加集中。

消耗性按钮

单击或轻按此按钮后会打开各种选项。这是另一种在不使屏幕过载的情况下设置适当交互流程的方法，这对于屏幕空间有限的移动界面尤为重要。

这是 Travel Planner 应用程序：标签栏的中心交互元素是一个加号按钮，允许用户向特定的旅行添加新的旅行或新项目。为了使体验更简单，按钮被扩展为一组标记确定内容类型的按钮，以便用户可以在开始时做出选择并到达所需的屏幕。

分享按钮

随着社交网络、聊天和电子邮件的高度流行，这些按钮简化了将应用程序或网站内容连接到用户社交资料的过程。这种类型的按钮使用户能够将内容或成就直接分享到社交网络帐户。为了使连接清晰，它显示了具有特定社交网络品牌标志且易于识别的图标。现在很多时候，如果分享不是用户在页面上期望的关键操作，它们无论如何都不会被标记为按钮（没有额外的形状、颜色标记、下划线等）——你只看到图标，但它们是交互的。这种方法支持极简主义和有效使用负空间. 它还可以让用户专注于主要功能，但始终可以看到快速访问其社交资料的迹象。

幽灵按钮

幽灵按钮是一个透明的按钮，看起来是空的。这就是为什么它也被称为“空的”、“空心的”甚至“裸的”。它作为按钮的视觉可识别性通常提供一个形状，该形状由按钮副本周围的相当细的线包围。如果有多个 CTA 元素，这种类型的按钮有助于设置视觉层次结构：核心 CTA 显示在填充按钮中，而辅助（仍处于活动状态）显示在幽灵按钮中。

这是餐厅应用程序的注册屏幕。它具有三种不同类型的按钮：核心 CTA 带有填充按钮，提供最流行和最简单的快速注册方式；幽灵按钮提供对不太受欢迎的选项的访问；文本按钮集成到下一行作为问题的答案并用颜色标记。这种方法有助于建立一个稳固的视觉层次y 屏幕上的按钮。

浮动操作按钮 (FAB)

在 材料设计，浮动操作按钮（简称FAB）是在应用程序屏幕上呈现主要操作的按钮。通常，它是一个高于其他页面内容的圆形图标按钮。此按钮通常可让用户即时访问用户使用应用程序执行的基本或流行操作。根据移动应用程序的设计和信息架构，FAB 可以：

• 执行一个典型的核心操作（打开新邮件的屏幕，打开添加照片或视频内容的屏幕，在图库中搜索所需的内容等）
• 显示其他操作
• 转换为其他 UI 元素。

FAB在屏幕上的位置通常是由高可见度的因素决定的，可能会根据应用程序屏幕的总体设计理念而有所不同。经验法则是每个屏幕只使用一个 FAB，而不是更多，以避免注意力不集中。

这是旅行者日记应用底部应用栏、重叠 FAB 和编织图像列表的交互流程。

有效按钮设计的因素

尺寸。 大小是告知用户布局元素的重要性和构建组件层次结构的核心方式之一。一个有吸引力且高效的号召性用语按钮需要足够大以便快速找到，但又不能太大，以免破坏布局结构。市场领导者经常在他们的指南中提供关于按钮的适当尺寸的建议。例如，Apple 表示移动 UI 中的 CTA 至少应为 44Х44 像素，而 Microsoft 建议使用 34Х26 像素。如果您为移动设备设计，对不同类型按钮的要求可能非常严格，因此请仔细研究指南，以尽量减少因 UI 设计不佳而导致应用程序被拒绝的风险。

颜色。为了让一些按钮更容易被注意到而一些按钮是次要的，至关重要的是选择合适的颜色. 问题是人类的情绪和行为与视觉环境高度相关，而颜色是这方面最强大的工具之一。在为 CTA 选择颜色时记住这一点至关重要：按钮和背景颜色必须形成良好的对比，以使按钮快速从其他 UI 组件中脱颖而出。

形状。至于 CTA 按钮，它们通常看起来像水平矩形。原因是你要明确这个按钮是可点击和交互的，人们习惯于将这个形状感知为一个按钮。此外，建议设计带有圆角的 CTA，因为它们被认为是指向按钮内部，从而引起对副本的注意。当然，这个决定是在形状与为网页或移动应用程序屏幕选择的一般风格概念和谐结合的情况下做出的。

放置。按钮的位置对于建立一个坚实的视觉层次 并且清楚 导航. 如果它们位于用户眼睛无法看到的区域，则其他视觉方面（例如颜色和大小）可能无法有效工作。设计师必须学习最多的东西可扫描区域 并将核心功能的按钮放置在用户的路径中。

复制。强大的按钮微文案通常简短但一致，以便快速吸引用户的注意力。它通常以大写字母执行，以使副本在布局中更具吸引力。不过，这没有必要，决定是根据一般的设计理念做出的，排版，以及短信的心情。

让我们回顾一下页面上使用的所有按钮：

• 邀请访问者加入的核心 CTA 按钮立即引人注目：设计师使用了一个圆角矩形填充按钮，其颜色与背景形成鲜明对比，但将视觉连接设置为动画英雄形象，页面上最突出的视觉元素。CTA 文本以简单易读的字体给出，所有字母均为大写
• 标题具有 4 个文本按钮，可将用户连接到网站上的重要内容部分。
• 标题的左侧部分具有辅助 CTA 按钮，可以快速扫描并允许已注册的用户输入他们的帐户。
• 在共享按钮被放置在圆形的形状，但，这样可以很容易地找到，但没有从主CTA扰乱用户没有给出太多的色彩对比。

显然，还有更多类型的按钮可以通过 UI 设计示例进行讨论和检查。所以，我们将在下一篇文章中继续审查，不要错过更新。