七个按钮设计的基本原则

按钮是交互设计的基本要素。它们在用户和系统之间的对话中起主要作用。在本文中，我将回顾您创建有效按钮时需要了解的七个基本原则。

1.使按钮看起来像按钮

在与用户界面进行交互时，用户需要立即知道什么是“可点击”而哪些不是。设计中的每个项目都需要用户努力解码。通常，用户了解界面所需的时间越多，界面对它们的可用性就越小。

但是，用户如何理解某个元素是否具有交互性？他们使用以前的经验和视觉指示符来阐明UI对象的含义。这就是为什么使用适当的视觉指示符（如大小，形状，颜色，阴影等）使元素看起来像一个按钮这么重要。视觉指示符具有重要的信息价值 ， 它们有助于在界面中创建可供性。

如果缺少明确的交互力，并且用户在“可点击”和不可点击的东西上挣扎，那么我们设计的设计有多酷并不重要。如果他们发现难以使用，他们会发现它令人沮丧，并最终无法使用。

对于移动用户来说，弱的能指是一个更重要的问题。在尝试了解单个元素是否具有交互性时，桌面用户可以在元素上移动光标并检查光标是否更改其状态。移动用户没有这样的机会。要了解元素是否具有交互性，用户必须点击它 - 没有其他方法可以检查交互性。

对于移动用户来说，弱的引导性是一个严重的问题。在尝试了解单个元素是否具有交互性时，pc用户可以在元素上移动光标并检查光标是否更改其状态。移动用户没有这样的机会。要了解元素是否具有交互性，用户必须点击它 ,没有其他方法可以检查交互性。

不要认为您的界面中的某些内容对您的用户来说是显而易见的

在许多情况下，设计者故意不将按钮识别为交互元素，因为他们认为交互元素对用户来说是显而易见的。在设计界面时，您应始终牢记以下规则：

您示意可点击性指示符的能力​​与您的用户不同，因为您知道自己设计中的每个元素应该做什么。 

使用熟悉的按钮设计

以下是大多数用户熟悉的按钮示例：

带方形边框的填充按钮

带圆角带填充按钮

带阴影的填充按钮

ghost 按钮

在所有这些示例中，“带阴影的填充按钮”设计对用户来说是最清晰的。当用户看到对象的维度时，他们立即知道这是他们可以按的东西。

不要忘记留白

不仅按钮本身的视觉属性很重要。按钮附近的留白量使用户更容易（或更难）理解它是否是交互元素。在该示例中，下面的一些用户可能会将ghost按钮与信息框混淆。

2 将按钮放在用户希望找到它们的位置

按钮应位于用户可以轻松找到或希望看到的位置。不要让用户寻找按钮。如果用户找不到按钮，他们就不会知道它存在。

尽可能使用传统布局和标准UI模式

按钮的常规放置提高了可发现性。通过标准布局，用户可以轻松了解每个元素的用途 ， 即使它是一个没有强烈指示符的按钮。将标准布局与干净的视觉设计和充足的空白相结合，使布局更容易理解。

不要与您的用户一起玩寻找按钮的游戏

tips：在可发现性方面测试您的设计。当用户首次导航到包含您希望他们采取的某些操作的页面时，应该很容易为用户找到适当的按钮。

3.用他们所做的标记按钮

带有通用或误导性标签的按钮可能会给您的用户带来挫败感。编写按钮标签，清楚地解释每个按钮的作用。理想情况下，按钮的标签应清楚地描述其动作。用户应该清楚地了解点击按钮时会发生什么。让我举个简单的例子。想象一下，您不小心触发了删除操作，现在您看到以下错误消息。

目前尚不清楚“OK”和“取消”在此对话框中的含义。大多数用户会问自己“当我点击'取消'时会发生什么？”

不要设计一个对话框仅仅由OK和Cancle组成

使用“remove”会比使用“OK”更好一些，这样会使用户更清楚的认识到按钮的含义，并且如果删除是一个危险操作，您可以使用红色来表明这一事实。

‘Remove’ makes it clear what button does for users. A potentially dangerous action ‘Disable card’ is colored in red in this interface. Image: Ramotion

4 正确调整按钮大小

按钮大小应反映此元素在屏幕上的优先级。大按钮意味着更重要的动作。

优先按钮

让最重要的按钮看起来像是最重要的按钮。始终尝试使主要操作按钮更加突出。增加尺寸（通过使按钮更大，使其对用户来说更重要）并使用对比色来吸引用户注意力。

Dropbox uses size and color contrast to focus user attention on ‘Try Dropbox Business free’ CTA button.

让按钮对移动用户非常友好

在许多移动应用中，按钮太小。这通常会导致用户输入错误的情况。

Left: properly-sized button. Right: buttons are too small. Image: Apple

麻省理工学院触摸实验室的研究发现，指垫的平均值在10-14mm之间，指尖的平均值为8-10mm。这使得10mm x 10mm具有良好的最小触摸目标尺寸。

5 注意按钮的顺序

按钮的顺序应反映用户与系统之间的对话性质。问问自己，用户期望在这个屏幕上有什么样的订单并进行相应的设计。

用户界面是与用户的对话

6.避免使用太多按钮

这是许多应用和网站的常见问题。当您提供太多选项时，您的用户最终什么都不做。在您的应用或网站中设计网页时，请考虑您希望用户采取的最重要的操作。

7.提供有关互动的视觉或音频反馈

当用户单击或点击按钮时，他们希望用户界面将以适当的反馈进行响应。根据操作类型，这可能是视觉或音频反馈。当用户没有任何反馈时，他们可能会认为系统没有收到命令并会重复操作。这种行为经常导致多次不必要的操作为什么会这样？作为人类，我们希望在与对象交互后获得一些反馈。它可能是视觉，音频或触觉反馈 - 任何承认交互已注册的事实。

User interface provides visual feedback that a press has registered. Image: Vadim Gromov

对于某些操作，例如下载，不仅要确认用户输入，还要显示进程的当前状态。

This button translates into the progress indicator to demonstrate the current state of the operation. Image: Colin Garven

尽管按钮是交互设计的普通元素，但值得注意的是要使这个元素尽可能好。按钮用户体验设计应始终与识别和清晰度相关。

谢谢！

原文链接