UI 设计：用户界面中按钮的基本类型

[PxCook]

本文介绍了用户在 Web 和移动界面中遇到的流行按钮的基本分类：使用 UI 示例检查其类型。

本文共计 2836 字，阅读大约需要 10 分钟

按钮是用户界面中最普遍的交互元素之一。更重要的是，它们对于创建可靠的交互和积极的用户体验至关重要。今天，我们在这里收集了网站和移动应用程序中常见的按钮类型的定义和示例。

什么是按钮？

按钮是一个交互元素，可以让您能够根据特定的命令从系统获得预期的交互反馈。基本上，按钮是一个控件，允许用户直接与数字产品通信，并发送必要的命令来实现特定的目标。例如，发送电子邮件、购买产品、下载一些数据或内容、打开播放器以及其他大量可能的操作。按钮之所以如此普遍，原因之一是它们能有效地模拟与现实世界中对象的交互。 现代 UI 按钮非常多样化，可以满足各种用途。典型且经常使用的按钮，其呈现交互部分，一般显示为可见性并具有特定的几何图形，同时有副本支持说明通过该按钮将执行的操作。设计师需要精心设计有效且引人注目的按钮，这些按钮要自然地融入整体设计风格，在对比度及布局上要明显突出。

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

CTA 按钮

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

文本按钮

顾名思义。文本按钮意味着没有任何形状、填充标签或类似的东西。因此，直观的看，它看起来并不像按钮。不过，可以用到标有颜色或带下划线的这些按钮，依然可以实现用户交互转换。文本按钮通常用于创建辅助交互部分，并不会分散主标题或 CTA 元素的注意力。

这是一个时尚商店优雅的网站设计。整体交互部分采用文本按钮。所有其他功能仅包含标题和标签中的复制功能。这种文本按钮方式一般用于简约风格的网页

下拉按钮

单击下拉按钮时，将显示互斥项目的下拉列表。一般在设置按钮中常见。当用户选择列表中的一个选项时，通常按颜色被标记为活动的。 以下图为例：单击按钮时，将打开选项下拉列表。只要您选择完成其中一项后，下拉列表就会消失，只保留选择选项和加号按钮，以防您再次重复选择下拉列表。

“汉堡”按钮

它是隐藏菜单式按钮。单击或光标选择按钮时，菜单会展开。这种菜单（或按钮）的名称由于它的形状由三条水平线组成，看起来像典型的面包 - 肉 - 面包，顾名“汉堡”按钮。现在它已是一种广泛应用的 Web 和移动布局的交互元素; 关于其利弊的争论也很激烈。 对于活跃互联网用户来说，默认情况下知道此按钮隐藏了各种类别的网站内容，因此这个技巧不需要额外的解释和提示。好的是，汉堡按钮菜单释放空间使界面更简约和舒服; 从功能的角度来看，它为其他重要的布局元素节省了大量空间。可以提到的响应和自适应设计隐藏导航元素使界面在不同设备上看起来更和谐。 不喜欢“汉堡”按钮的人认为，这个设计元素可能会让那些不经常使用网站的人感到困惑，并且会被那些具有高度抽象性的标志误导。这可能会对导航产生负面影响，并成为用户体验不佳的原因。因此，应在用户调研和定义目标受众的能力和需求后做出关于应用“汉堡”按钮的决定。

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

可伸展按钮

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

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

分享按钮

分享按钮可以将内容或直接共享到社交网络帐户。为了使这种联系更加清晰，网站上会出现一些图标，这些图标具有特定社交网络的 logo。如果用户不是专门为了分享登录网站的话，一般不需要将分享按钮详细化（没有额外图形、颜色标记、下划线等），只看到图标也是可以的，这种方法适合简约风格和有效利用负空间。不会让用户过于关注分享按钮，而抢了页面主要内容的风头。

这是一家风格简约的某网站。在主页的左下角，您可以看到社交平台的 logo 图标。它们很容易引人注目但又不影响网站内容平衡，不会分散核心导航和 CTA 按钮 的注意力

镂空按钮

镂空按钮是一个看起来透明的按钮。视觉上是以细线形状环绕按钮呈现的。这种按钮有助于归类视觉层次结构，以防出现多个 CTA 元素导致用户难以分辨主次信息：核心 CTA 以填充按钮显示，而辅助（仍然活动）以镂空按钮给出。

某 APP 首页：有三种不同类型的按钮：核心 CTA 以填充按钮，提供快速注册方式; 镂空按钮提供了次要的选项; 文本按钮被放到下一行并用颜色标注。这种方法有助于在屏幕上构建按钮的可靠视觉层次结构

浮动操作按钮（ FAB ）

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

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

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

某 APP 底部应用栏：重叠 FAB 和排列图像列表的交互流程。

有效按钮设计的因素

• 尺寸

按钮大小是告知用户布局元素的重要性和组成部分层次结构的核心方法之一。一个有吸引力和高效的 CTA 按钮 要足够大，以便快速找到，但不要太大，以免布局结构被破坏。例如：Apple 表示移动 UI 中的​​ CTA 应至少为 **44Х44 **像素，而 Microsoft 推荐 **34Х26 **像素。

• 颜色

为了使次要按钮同样容易引起注意 ，选择合适的颜色至关重要。人类的情绪和行为与视觉环境息息相关，颜色是这方面最强大的工具之一。在为 CTA 选择颜色时谨记：按钮和背景颜色必须对比度恰到好处，才能使按钮从其他 UI 内容中一目了然。

• 形状

关于 CTA 按钮，普遍使用水平矩形。原因是人们已经习惯将这个形状看作成一个按钮了。此外，建议设计带圆角的 CTA，因为圆角可以起到指向按钮内部，引起对按钮本身的注意。当然，这个形状是在与网页或 APP 屏幕风格一致时使用的。

• 布局

按钮的布局对于构建良好的视觉层次和清晰的导航至关重要。如果它们位于用户一眼无法找到的位置，即便运用颜色和大小也于事无补。设计师必须掌握核心功能的按钮放置最有效的位置

这是某少儿网站的登陆页面设计。让我们回顾一下页面上使用的所有按钮：

• 邀请访问者加入的 **核心 CTA 按钮 **一目了然：设计师使用了一个圆角矩形填充按钮，其颜色与背景形成对比，但设计了动画人物，其颜色与按钮形成了视觉联系。这是页面上最突出的视觉元素。
• 标题包含 4 个文本按钮，用于将用户转换到网站上的重要内容部分。
• 标题的左侧部分具有快速浏览的辅助 CTA 按钮，允许已注册的用户输入其帐户。
• 在分享按钮被放置在圆形框中，有少许颜色对比，这样可以很容易地找到，同时没有从主 CTA 分散用户注意力。

---

End

以上就是本次 译文内容

更有新鲜内容 微信关注公众号：像素大厨 PxCook 体验一下吧！

专为“产●设●研”而生！

可获取更多设计资讯，和各种作图小技巧

[Midnight]

图裂了

[PxCook]

@Midnight 不好意思 会从新发布的