按钮是用户界面中最受欢迎的交互元素之一，在提供积极的用户体验方面起到了至关重要的作用。
什么是按钮？
按钮是一种交互元素，它能够按照特定的命令从系统中获得所预期的交互反馈。按钮是允许用户直接与数字产品进行通信并发送必要命令以实现特定目标的控件。例如，发送电子邮件、购买产品、下载一些数据或内容、打开播放器和大量其他可能的操作可能是一项任务。按钮如此受欢迎且体验良好的原因之一是它们能有效地模仿物理世界中的对象交互。
在现代UI设计中，按钮确实是多种多样的，可以满足许多目的。典型且常用的按钮具有交互区域，通常清楚地标记出可见性并具有特定的几何形状，通常搭配文字使用，以解释通过此按钮将执行什么操作。设计师必须花费大量的时间和精力来创建有效且引人注目的按钮，这些按钮自然地融入了一般的样式概念，但对比度却足以在布局中脱颖而出。
让我们来看看在移动和Web界面中广泛使用的按钮类型：
CTA按钮
行动召唤按钮(CTA)是用户界面的交互元素，旨在鼓励用户采取某种行动。此操作显示特定页面或屏幕的转换（例如购买、联系、订阅等）。换句话说，它把被动用户变成主动用户。因此，从技术上讲，它可以是任何类型的按钮，支持对操作文本的调用。它与页面或屏幕上所有其他按钮的不同之处在于它的吸引人的性质：它必须引起人们的注意，并刺激用户做所需的操作。
这是一个电商网站的主页，为孩子们销售书籍。在功能上，有一个核心操作集作为页面的目标：让用户订阅邮件列表共享。因此，按钮被设计成布局中最引人注目的元素之一，这样用户就可以立即看到如何在他或她愿意做的时候做这个动作。
文本按钮
它是一个带有文本的按钮。这意味着没有任何形状，填充标签或任何类似的东西。因此，在我们对物理世界中这种现象的标准理解中，它看起来不太像按钮。文字是它唯一的视觉展示。尽管如此，它是一个实时控件，允许用户与接口交互。您还可以看到这些按钮标记了颜色或下划线。此外，在网站标题中，文本按钮将用户与网站的核心内容部分连接起来——在这种情况下，它们无论如何都没有被标记为标题区域中的所有（或大多数）元素默认是交互的。文本按钮通常用于创建次要交互区域，而不会干扰主控或CTA元素。
这是一个优雅的时装店页面。如您所见，布局的交互部分基于文本按钮。只有主CTA元素被设计为一个易于理解的按钮。这种方法适用于轻巧和简约的页面风格。
下拉按钮
下拉按钮，当您单击它时，显示一个互斥项的下拉列表。您经常可以在“设置”按钮中遇到此类型。当用户选择列表中的一个选项时，它通常被标记为活动，例如通过颜色。
医保APP交互流程显示打开医生可以添加到特定账单的详细信息列表的按钮：当点击按钮时，打开选项的下拉列表，一旦你选择了一个，大的按钮就会消失，留下选择的选项和小的加按钮，以防你想再次检查列表。
汉堡按钮
汉堡按钮是隐藏菜单的按钮，当您单击或点击它时，菜单将展开。这种菜单（还有按钮）有这样的名字，因为它的形式是由三条水平线，看起来像典型的面包-肉-面包汉堡包。今天，它是一个广泛使用的网络和移动布局的交互元素；尽管如此，关于它的利弊的辩论仍然很激烈。
活跃的网民定期访问不同的网站，默认情况下，这个按钮会隐藏不同类别的网站内容，所以这个技巧不需要额外的解释和提示。好的是，汉堡包菜单节省了空间，使界面更加极简和具有呼吸感，从功能的角度来看，它为其他重要的布局元素节省了大量的空间。此外，还可以起到响应和自适应设计隐藏导航元素的用处，并使接口在不同设备上看起来和谐。
反对汉堡包菜单的论点是基于这样一个事实，即这个设计元素可能会让那些不经常使用网站的人感到困惑，并且可能会被带有高度抽象的icon误导。可能对导航产生负面影响，可能成为用户体验不佳的原因。因此，应该在用户研究和定义目标受众的能力和需求之后，按照实际情况做出应用汉堡按钮的决定。虽然汉堡菜单仍然属于现代网络和应用程序设计的一大争议问题，但它们的使用频率越来越高。
这是一个网站使用汉堡菜单功能的例子。它允许隐藏扩展的选项菜单，以集中用户的注意力在令人印象深刻的视觉和核心信息。
+按钮
点击添加按钮，用户可以添加一些新的内容到系统。根据应用程序的类型，它可以是列表中的新帖子、联系人、位置、注意事项——任何是数字产品基本操作的东西。有时，点击这个按钮，用户直接被转移到创建内容的模态窗口。
可展开/扩展式按钮
此按钮在点击后打开各种选项。这是在不超载屏幕的情况下设置适当的交互流的另一种方法，这对于屏幕空间有限的移动接口特别重要。
这里是旅行规划师应用程序：选项卡栏的中心交互元素是一个加号按钮，允许用户向特定的旅行添加一个新的旅行或一个新的项目。为了使体验更简单，按钮被扩展成一组标记特定类型内容的按钮，以便用户在开始时做出选择并直达所需要的页面。
分享按钮
随着社交网络、聊天和电子邮件的高度普及，这些按钮简化了将应用程序或网站内容连接到用户的社交配置文件的过程。此类型的按钮允许将内容或成就直接共享到社交网络帐户。为了使连接清晰，它呈现的图标具有特定社交网络的品牌标志，并且易于识别。现在很多时候，如果共享不是页面上用户期望的关键操作，它们就不会被标记为按钮（没有额外的形状、颜色标记、下划线等）。你只是看到图标，但它们是互动的。这种方法支持极简主义和有效利用消极空间。它还让用户专注于主要功能，但总是看到快速访问他们的社交简介的迹象。
这是一家建筑公司优雅而极简的公司网站。在主页的左下角，可以看到企业社会账户的图标。它们很容易被注意到，但平衡良好，不会分散对核心导航和CTA按钮的注意力。
幽灵按钮
幽灵按钮是一个透明的按钮，看起来是空的。这就是为什么它也被称为“空”、“空心”。它的视觉识别能力作为一个按钮，通常提供一个形状与相当薄的线周围的按钮副本。这种按钮有助于设置视觉层次结构，以防有几个CTA元素：核心CTA是在一个填充按钮中显示的，而次要（仍然活动）是在一个幽灵按钮中给出的。
这是一个餐厅应用程序的注册屏幕。它具有三种不同类型的按钮：核心CTA显示填充按钮，提供最流行和最容易注册的快速方式；鬼按钮提供访问不太受欢迎的选项；文本按钮集成到下一行作为问题的答案，并用颜色标记。这种方法有助于建立一个坚实的视觉层次结构的按钮在屏幕上。
浮动动作按钮(FAB)
在Material Design中，浮动动作按钮(简称FAB)是在应用程序屏幕上显示主要动作的按钮。通常，它是一个圆形图标按钮，高于其他页面内容。此按钮通常允许用户即时访问应用程序中的基本或流行操作。根据移动应用程序的设计和信息架构，FAB可以：
执行典型的核心操作（打开新电子邮件的屏幕，打开添加照片或视频内容的屏幕，在画廊中搜索所需的内容等）。
显示额外动作。
转换为其他UI元素。
屏幕上FAB的位置通常由高可见度的因素决定，并可能根据应用程序屏幕的一般设计概念而变化。经验法则是每个屏幕只使用一个FAB，而不是更多，以避免注意力分散。
这里有一个交互流，为旅行者日记应用底部应用程序条，重叠FAB和排列图像列表。
有效按钮设计的因素
尺寸：大小是告知用户布局元素的重要性和构建组件层次结构的核心方法之一。一个有吸引力和高效的CTA按钮需要足够大，以迅速找到，但也不能太大，以便布局结构不被破坏。很多公司经常在他们的指南中提供关于适当大小按钮的建议。例如，苹果说移动UI中的CTA应该至少是44Х44像素，而微软推荐34Х26像素。如果您为移动设计，对不同类型的按钮的要求可能相当严格，因此彻底研究设计规范是很有必要的。
颜色：为了使一些按钮容易被注意到和一些次要的，这是至关重要的选择一个适当的颜色。事情是人类的情绪和行为与视觉环境高度相关，颜色是这方面最有力的工具之一。重要的是要记住，同时选择颜色的CTA：按钮和背景颜色必须很好地对比，以使按钮从其他UI组件脱颖而出。
形状：至于CTA按钮，它们通常看起来像水平矩形。原因是你想清楚这个按钮是可点击的和交互式的，人们习惯于把这个形状看作一个按钮。此外，建议设计圆角CTA，因为它们被认为是指在按钮内部，提请注意副本。当然，这一决定是作出的，以防形状和谐地结合一般风格概念选择的网页或移动应用程序屏幕。
位置：按钮的放置对于建立坚实的视觉层次结构和清晰的导航至关重要。如果它们位于用户眼睛无法捕捉到的区域，其他视觉方面，如颜色和大小可能无法有效地工作。设计师必须学习可扫描的区域，并将核心功能的按钮放置在用户的路径中。
文字：强大的按钮文字通常是短的，但一致的，以便它可以迅速吸引用户的注意力。它通常用大写字母，以使文字在布局中更有吸引力。
这是幼儿园的登陆页面设计。让我们回顾一下页面上使用的所有按钮：
邀请游客加入的核心CTA按钮立即被注意到，设计师使用了一个圆形矩形填充按钮的颜色，与背景形成对比，但设置了与动画英雄图像的视觉连接，这是页面上最突出的视觉元素。CTA文本以简单可读的字体提供，并带有大写字母
标题具有4个文本按钮，将用户连接到网站上的重要内容部分。
头部左边部分具有辅助CTA按钮，该按钮被快速扫描，并允许已经注册的用户输入他们的帐户。
共享按钮被设计成圆形，但没有给出太多的颜色对比，既容易找到，又不会分散用户对主CTA按钮的注意力。
