按钮是用户界面中最受欢迎的交互元素之一。此外，它们对于创建可靠的交互和积极的用户体验至关重要。本文收集了我们每天在网站和移动应用程序上看到的广泛使用的按钮类型的定义和示例。

什么是按钮（Button）?

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

现代化的UI按钮非常多样化，可以满足各种用途。典型且经常使用的按钮，其呈现出交互式区域，通常清楚地标出可见性并具有特定的几何形状，并且通常支持通过该按钮上的文字解释将实现什么样的动作。设计师必须花费大量的时间和精力来创造有效且引人注目的按钮，这些按钮自然地融入到全局的风格概念中，但是其对比性又足以能在整体布局中脱颖而出。

image

接下来，让我们来看一下移动和Web界面中广泛使用的按钮类型。

行动号召（CTA）按钮

行动号召（CTA）按钮是用户界面的交互式元素，旨在鼓励用户执行特定操作。此操作为特定页面或屏幕（例如购买、联系、订阅等）提供转换，换句话说，它将被动用户转换为活动用户。因此，从技术上讲，它可以是支持号召性文本调用的任何类型的按钮。它与页面或屏幕上的所有其他按钮的不同之处在于其引人注目的特性：它必须引起用户注意并刺激用户执行所需的操作。

[图片上传失败...(image-5fed28-1568609063610)]

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

文本按钮

该术语是显而易见的：它是一个带有一段文字的按钮。这意味着文本不会被集成到任何形状、填充标签或类似的内容中。因此，在我们对物理世界里这种现象的标准理解使看起来并不像按钮。该文本是它唯一的可视化演示者。不过，它是一个允许用户与界面进行交互的实时控件。你还可以看到标有颜色或带下划线的这些按钮。此外，在网站页眉中使用文本按钮可以将用户与网站的核心内容部分连接在一起，在这种情况下，它们不会以任何方式被标记，因为默认情况下标题区域中的所有（或大多数）元素都是交互式的。文本按钮通常用于创建辅助交互式区域，而不会分散主要控件或CTA元素的注意力。

image

这是一个优雅的时装店网站设计。如你所见，布局的交互部分基于文本按钮。只有主要的CTA元素才会显示为一个易于解码的按钮。所有其他功能如页眉和标签中仅提供文本支持。这种方法通常供简约风格的网页使用。

下拉按钮（Dropdown button）

单击下拉按钮时，将显示互斥项目的下拉列表。你通常可以在设置按钮中遇到此类型。当用户选择列表中的一个选项时，它通常会通过颜色变化等效果被标记为活动状态。

[图片上传失败...(image-97ab42-1568609063610)]

HealthCare应用程序交互流程是这样操作的，当打开详细信息列表的按钮时会将医生添加到特定账单中：单击按钮时，将打开选项的下拉列表。一旦你选中其中一个列表，大按钮就会消失，只留下选择选项和小个的加号按钮，以防你再次检查该列表。

汉堡包按钮（Hamburger button）

它是一种隐藏菜单式的按钮。单击或点击它时，菜单会展开。这种菜单（以及按钮）的名称由于它的形状由三条水平线组成，看起来像典型的汉堡包形状。今天，它是一种广泛使用的网页和移动布局的互动元素; 关于其利弊的争论至今仍然很激烈。

定期访问各种网站的活跃互联网用户在默认情况下都知道此按钮隐藏了各种类别的网站内容，因此这个使用技巧不需要额外的解释和提示。汉堡包菜单的好处在于释放了空间使界面更简约; 从功能的角度来看，它为其他重要的布局元素节省了大量空间。该类型菜单的其他好处在于对于响应式和自适应设计隐藏导航元素并使界面在不同设备上看起来和谐统一。

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

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

hamburger_button_s.gif

这是使用汉堡菜单功能的网站示例。它允许隐藏扩展的选项菜单，以便将用户的注意力集中在令人印象深刻的视觉效果和核心信息上。

加号按钮（Plus button）

通过单击或点击，加号按钮可以使用户向系统添加一些新内容。根据应用程序的类型，它可以是列表中的新帖子、联系人、位置、注释、项目，即任何可作为数字产品基本操作的操作。有时，点击此按钮，用户将会被直接转移到创建内容的模式窗口，在其他情况下，当用户被赋予其他选项以做选择以及使添加内容更加集中时，也会有一个中间阶段。

可展开式按钮（Expendable button）

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

image

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

分享按钮（Share button）

随着社交网络、聊天和电子邮件的高度普及，这些按钮简化了将应用或网站内容与用户的个人社交资料相关联的过程。此类按钮可以直接将内容或成就分享给社交网络帐户。为了使连接清晰，它呈现的图标具有特定社交网络的品牌标志，并且易于识别。现在，如果共享不是用户在页面上预期的关键动作，它们将不会被标记为按钮（没有附加形状、颜色标记、下划线等），你看到的只有图标，但它们是交互式的。这种方法支持极简主义和有效利用负空间（negative space）。它还可以让用户专注于主要功能，但又能保证用户总能看到快速访问其社交个人资料的标记符号。

share_button.gif

这是一家建筑公司优雅而简约风格的企业网站。在主页的左下角，你可以看到企业社交帐户的图标。它们很容易引人注目但平衡型很好，不会分散对核心导航和CTA按钮的注意力。

幽灵按钮（Ghost button）

幽灵按钮是一个看起来为空的透明按钮。这就是为什么它也被称为“空的”，“空心的”甚至是“裸露 ”的按钮。它作为按钮的视觉可识别性通常是通过提供一个具有极细线条的边框围绕按钮文本来实现。这种按钮有助于设置视觉层次结构，以防出现多个 CTA 元素：核心CTA以填充式按钮显示，而辅助（仍然处于活动状态）以幽灵按钮的形式给出。

image

这是餐厅应用程序的注册屏幕。它具有三种不同类型的按钮：核心 CTA 填充按钮显示，提供最流行和最简单的快速注册方式; 幽灵按钮提供了不太流行的选项; 文本按钮被集成到下一行作为问答提示形式并用颜色进行了标记。这种方法有助于在屏幕上构建按钮的可靠视觉层次结构。

浮动按钮 (FAB)

在 Material Design 中，浮动按钮（简称FAB）是在应用程序屏幕上显示的主要操作按钮。通常，它是一个视觉上高于其他页面内容的圆形图标按钮。此按钮通常允许用户使用该应用程序执行的基本操作或热门操作进行快速访问。根据移动应用程序的设计和信息架构，FAB可以：

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

FAB在屏幕上的位置通常由高可见度因素决定，并且可以根据应用屏幕的总体设计概念而变化。 经验法则是每个屏幕仅使用一个FAB，以避免注意力分散。

image

这是一个旅游日记应用程序的交互设计流程，在应用的底部有一个应用栏，FAB按钮重叠其上，并且还有一个图像列表显示在屏幕中央。

有效按钮设计的因素

尺寸

尺寸大小是告知用户布局元素的重要性和构建组件层次结构的核心方法之一。一个有吸引力和高效的CTA按钮需要足够大，以便快速找到，但也不要太大，以免布局结构被破坏。市场领导者经常在其指南中提供有关按钮尺寸的建议。例如，Apple表示移动UI中的CTA应至少为44Х44像素，而Microsoft推荐34Х26像素。如果是移动端设计，对不同类型的按钮的要求可能非常严格，因此要彻底研究指南，以最大限度地降低因UI设计不佳而导致应用被拒绝的风险。

颜色

为了使一些按钮容易引人注意而另外一些按钮处于次重要地位，选择合适的颜色至关重要。这是因为人类的情绪和行为与视觉环境高度相关，而颜色是这方面最强大的工具之一。在为CTA选择颜色时必须牢记这一点：按钮和背景颜色必须对比度良好才能使按钮从其他UI组件中快速脱颖而出。

形状

对于CTA按钮，它们通常看起来像水平矩形。原因是你要让这个按钮清晰可见是可点击和具有交互的，并且人们习惯将这个形状看作一个按钮。此外，建议设计带圆角的CTA，因为它们被指向按钮内部时会吸引用户对按钮文本的注意。当然，为按钮的形状作出决定需要与网页或移动应用的总体风格相协调。

位置

按钮的放置对于构建可靠的视觉层次结构和清晰的导航至关重要。如果它们位于用户眼睛无法捕捉到的区域，则其他视觉方面（例如颜色和大小）可能无法有效工作。设计人员必须了解最可被扫描到的区域，并在用户路径中放置具有核心功能的按钮。

文本

功能强大的按钮微缩本文通常很短但一致，因此可以快速吸引用户的注意力。它通常以大写字母表示，以使文本在布局中更具吸引力。不过，这是没有必要的，对文本的使用取决于总体设计概念，排版以及本文信息所要传达的情绪。

button_review_s.gif

这是幼儿园的登陆页面设计。让我们查看一下页面上使用的所有按钮：

• 邀请访客加加入的核心CTA按钮立即引人注目：设计师使用了与背景形成鲜明对比的圆角矩形填充按钮，但设置了与动画英雄形象的视觉联系，这是最突出的视觉元素。CTA文本以简单易读的字体提供，所有字母均为大写字母
• 页眉包含4个文本按钮，用于将用户连接到网站上的重要内容部分。
• 页眉的右侧部分具有快速扫描的辅助CTA按钮，允许已注册用户直接进入他们的账户页面。
• 分享按钮被放置在圆形背景中但没有给出太多的颜色对比，以便容易找到但又不会分散用户对主CTA的注意力。

（编译完）

英文原文：地址
原文作者：Tubik Studio
编译作者：@iris0327

以上译文仅代表原作者观点。如需转载请遵循CC版权协议正确标明出处。

image