如何设计更好的按钮

在今天的文章中，将介绍大家需要了解的基本项目，以便创建有效的控件来改善用户体验。

· 使按钮看起来像按钮

用户如何理解元素是一个按钮？答案很简单。视觉提示可帮助人们确定可点击性。在可点击元素上使用适当的可视指示符使其看起来像按钮非常重要。

形状

一个安全的选择是根据网站或应用程序的风格制作带圆角的正方形或方形按钮。很久以前，矩形按钮被引入数字世界，用户对它们非常熟悉。

当然，你可以更具创造性并使用其他形状（圆形，三角形甚至自定义形状），但请记住，独特的想法可能会更具风险。你需要确保人们可以轻松地将每个变化的形状识别为按钮。

无论你选择何种形状，请务必在整个界面控件中保持一致性，以便用户能够识别并识别所有UI元素作为按钮。

为什么一致性如此重要？因为用户记住细节，无论是否有意识。例如，用户会将特定元素的形状与“按钮”相关联。因此，保持一致不仅有助于设计美观，而且还可以为用户提供更熟悉的体验。

下图完美地说明了这一点。在应用程序的一个部分（例如系统工具栏）中使用三种不同的形状不仅会让用户感到困惑，而且这是不正确的设计实践。

阴影和亮点

阴影是有价值的线索，告诉用户他们正在寻找哪个UI元素。阴影使元素在背景中突出，并使其易于识别为可点击或可点击的元素，因为看起来凸起的对象看起来像是可以按下（点击或点击）。即使使用平面按钮（几乎是平的，确切地说），仍然有这些微妙暗示的地方。

· 清楚标签按钮

用户避免使用没有明确含义的界面元素。因此，UI中的每个按钮都应该有一个合适的标签或图标。

清晰明确的标签

可操作界面元素上的标签（例如按钮）应该始终与用户的操作相关联。当用户理解按钮的操作时，他们会感觉更舒服。诸如“提交”之类的模糊标签或下面示例中的抽象标签不能提供有关该操作的足够信息。

操作按钮应确认该任务是什么，以便用户确切地知道他们单击该按钮时会发生什么。使用动作动词指示按钮的作用非常重要。例如，如果用户正在注册帐户，则会显示一个“创建帐户”按钮，告诉他们按下按钮后的结果。这项任务明确而具体。此类明确标签可作为即时帮助，让用户有信心选择正确的操作。

放置用户可以找到它们的按钮

不要让用户寻找按钮; 将按钮放在用户可以轻松找到或希望看到它们的位置。

位置

如果你正在设计本机应用程序，则在选择正确的按钮位置和顺序时，应遵循平台GUI指南。为什么？因为应用符合用户期望的一致性设计可以节省人们的时间。

· 让用户轻松与按钮交互

按钮的大小和视觉反馈，在帮助用户与他们互动方面发挥关键作用。

大小和填充

应该考虑按钮相对于页面上其他元素的大小。同时，需要确保你设计的按钮足够大，以便人们进行交互。

当点按用作你的应用或网站的主要输入法时，你可以依靠MIT Touch Lab研究为你的按钮选择合适的尺寸。这项研究发现，指垫的平均尺寸在10-14mm之间，指尖是8-10mm，使得10mm×10mm的最小触摸目标尺寸很好。当鼠标和键盘是主要输入方法时，可以略微减少按钮测量以适应密集的UI。

你应该考虑按钮元素的大小以及可点击元素之间的填充，因为填充有助于分离控件并为你的用户界面提供足够的呼吸空间。

提供视觉反馈

此要求与按钮最初对用户的看法无关; 它是关于UI元素的交互体验。通常，按钮不是单状态对象。它具有多状态，并为用户提供视觉反馈，以指示当前状态应该是最优先的任务。Material Design的这个有用的插图清楚地表明了如何传达不同的按钮状态：

· 视觉突出显示最重要的按钮

确保设计强调主要或最突出的行动。使用颜色和对比度使用户专注于操作，并将按钮放在用户最有可能注意到的显着位置。

号召性用语按钮

重要按钮旨在引导用户采取你希望他们采取的操作。要创建一个有效的号召性用语按钮，一个吸引用户注意并诱使他们点击的按钮，你应该使用与背景相关的高对比度颜色，并将按钮放在用户的路径中。

如果我们查看Gmail的UI，界面非常简单，几乎是单色的，但“发送”按钮除外。一旦用户完成写入消息，他们会立即注意到这个漂亮的蓝色按钮。

同样的规则适用于网站。如果你看一下下面的Behance示例，首先引起你注意的是“注册”号召性用语按钮。在这种情况下，颜色和位置比文本更重要。

主要和次要按钮的视觉区别

你可以通过表单和对话中的按钮找到另一个抓住用户注意力的示例。在主要和次要操作之间进行选择时，视觉区别是帮助人们做出可靠选择的有用方法：

· 与按钮相关的主要积极动作需要携带更强的视觉重量。它应该是视觉上占优势的按钮。

· 次要动作（例如“取消”或“回去”等选项）应具有最弱的视觉权重，因为减少次要动作的视觉突出性可以最大限度地降低潜在错误的风险，并进一步指导人们取得成功的结果。

结论

按钮是创建流畅用户体验的重要元素，因此值得关注它们的最佳基本实践。快速回顾一下：

· 使按钮看起来像按钮。

· 用他们为用户做的标签按钮。

· 将按钮放在用户可以找到或期望它们的位置。

· 使用户可以轻松地与每个按钮进行交互。

· 使最重要的按钮清晰可辨。

当你设计自己的按钮时，请从最重要的按钮开始，并记住按钮设计总是与识别和清晰度有关。