这四种最最常见的按钮类型，设计师必须掌握

按钮可能是现代图形用户界面中最常见的功能元素。尽管它很受欢迎并且很简单，但这个 UI 对象可能很难设计。

本文将为大家介绍 4 种不同类型按钮的美学以及使用它们的上下文。请注意，我们将仅讨论规范类型的按钮（也称为简单按钮），不会涵盖切换按钮或单选按钮。

1. 实心按钮

实心按钮是具有实心填充的按钮。大多数时候，设计师使用对比色，这样实心按钮自然会吸引很多注意力。它使此按钮成为主要号召性用语的不错选择。

什么情况下使用

当您想要提示用户完成特定操作时，请使用实心按钮。例如，此按钮类型适用于登录页面上的“注册”或“购买”操作。

“Shop now”按钮在特斯拉主页上引起了很多关注。

需要注意的事情

传达按钮状态。用户应该通过查看按钮来了解按钮的当前状态。例如，禁用状态应该具有与活动状态不同的视觉风格。

实心按钮的启用和禁用状态

使用正确的按钮形状。关于形状，有两种流行的选择——方角和圆角。带有圆角的按钮在人眼看来确实更好看（我们自然倾向于避免具有锋利边缘的物体）。

按钮的圆角和方角

但终归到底，我们要注意，应根据应用程序的样式选择按钮的样式。这意味着如果你所有的 UI 元素都是方形的，那么按钮也不应该是个例外。

视觉一致性是创造良好用户体验的关键。

提供视觉反馈。提供有关交互的视觉反馈至关重要。微妙的悬停（桌面）和点击动画将作为对用户的确认。

使用阴影创建 3D 效果。阴影创造了一种高度的效果——一个按钮看起来像一个三维物体。阴影还可以加强视觉反馈——可以改变 Z 深度来模仿点击按钮的移动感。但与按钮形状类似，阴影的使用应由您的视觉设计决定。如果您使用投影，请确保将这种样式应用于所有按钮类型。

扁平按钮与加了阴影的按钮

2.幽灵按钮（空心按钮）

幽灵按钮，也称为空心按钮，是没有填充的按钮。只有按钮的轮廓可见。

什么时候使用？

幽灵按钮适用于辅助号召性用语按钮。主要的号召性用语按钮将引导用户进行我们希望他们采取的行动，而辅助按钮提供了一个合理的选择。

系统对话框中的空心按钮

对于我们不想分散用户注意力的用户界面，幽灵按钮也是一个不错的选择。由于幽灵按钮自然具有较小的视觉重量，因此它比实体按钮吸引的注意力更少，从而使 UI 界面不那么满。

最后但并非最不重要的一点是，幽灵按钮是视觉上的多功能按钮，这意味着它们可以在不同类型的背景上很好地工作。它使幽灵按钮适用于深色和浅色主题。

浅色和深色背景上的幽灵按钮

3.单一图形按钮

顾名思义，仅图标按钮是没有标签的按钮；它仅由图标表示。

不同样式的纯图标按钮

何时使用

因为图标按钮不占用太多空间，所以它可以成为菜单和系统栏的不错选择。

Google文档中的图标

当您需要呈现大量动作但由于某种原因不希望将它们堆叠在一起时，仅图标按钮可以很好地工作。

设计要点

确保图标的含义对用户来说是清楚的。图标的含义对用户来说应该是非常清楚的。不理解图标含义的用户倾向于避免与它进行交互。这就是为什么许多设计师说“最好的图标是文本标签”。

显示工具提示。如果您设计桌面应用程序，请考虑为仅图标按钮添加工具提示。用户应该能够将鼠标悬停在元素上并查看它的作用。

在悬停时显示工具提示以描述图标按钮

4.悬浮按钮

悬浮按钮（FAB-Floating Action Button），是一种由 Google Material Design 推广的按钮。FAB 是一个只有图标的按钮，设计有微妙的阴影，通常位于屏幕的右下角。

何时使用

由于 FAB 是一个相对紧凑的按钮，它通常用作移动应用程序的主要操作。FAB 通常用于一项操作。例如，Twitter 移动应用程序使用 FAB 创建推文。

也可以在桌面上使用 FAB，但没有必要这样做，因为我们有足够的屏幕空间。

设计要点

确保所有用户组都清楚地了解图标的含义。由于 FAB 通常代表主要的号召性用语，因此使用清晰的图标更为重要。所有用户组都应该理解图标的含义。我进行的可用性测试表明，当用户不理解 FAB 图标的含义时，他们不会与之交互，这对您的应用程序来说可能是一个关键问题。

FAB 仅用于一项操作。谷歌表示，当按下时，FAB 可能包含更多相关操作。但大多数时候，最好避免这样做，因为它会使 UI 看起来更复杂。相反，最好坚持一个简单的方法——一旦用户点击/轻敲 FAB，他们应该触发主要操作。

FAB 不一定是一个完美的圆圈。可以为 FAB 使用更多视觉上有趣的形式，例如椭圆形。

FAB 的视觉风格略有不同

原文：https://uxplanet.org/buttons-in-ui-design-four-common-styles-f6bd02468388 翻译：静电