图片：Gal Shir

按钮是交互设计的基本元素。它们在用户和系统之间的对话中起主要作用。在本文中，我将回顾7个基本规则，以创建有效的按钮。

1.使按钮看起来更像是按钮

当涉及到与用户界面的交互时，用户需要立即知道什么是可点击，哪些是不可点击的。设计中的每个界面都需要用户去理解，一般来说，用户对界面进行理解的时间越长，其可用性就越差。

但用户如何判断某个元素是否具有互动性呢？他们会使用以前的经验和视觉本能来进行判断。这就是为什么使用合适的视觉符号（如尺寸，形状，颜色，阴影等）使按钮看起来更像是一个按钮。

不幸的是，在许多界面中，可交互的部分做的很弱，大大降低了可可见性。

如果交互缺少引导性，用户就会苦于可点击还是不可点击，设计的酷炫程度并不重要。如果他们觉得很难使用，他们会觉得很沮丧，最终放弃使用。

交互部分做的弱对于移动用户来说是更重要的问题。为了了解单个元素是否可交互，pc用户可以将鼠标移动到元素上并检查鼠标是否改变其状态。移动用户没有这样的机会，要了解某个元素是否是可交互的，用户不得不点击它，没有其他方法来检查可交互性。

不要以为用户界面中的某些元素是显而易见的

在很多情况下，设计师不会故意去强调按钮，他们认为可交互元素对用户来说是显而易见的。在界面设计中，你应该始终牢记以下规则：由于你知道自己设计的每个元素都是做什么用的，因此你对界面的理解力和用户是不同的。

为你的按钮提供熟悉的设计

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

方形填充按钮

圆角填充按钮

带阴影的填充按钮

边框按钮

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

不要忘记留白

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

作为用户，您无法判断它是盒子还是按钮。

2.将按钮放在用户希望找到它们的地方

按钮应该放在用户可以轻松找到或者期望看到的地方。不要让用户去寻找按钮。

尽可能使用传统布局和标准的ui界面

按钮的传统位置提高了可发现性。通过标准布局，用户可以轻松理解每个元素的用途-即使是没有强指示性的按钮。通过标准布局和干净的视觉设计，会使用户更加容易理解。

不要与用户玩按钮捉迷藏游戏

3.标签按钮要清楚表明是要做什么

带有通用标签或者说误导性标签的按钮可能会给用户带来巨大的挫折。编写可清楚解释每个按钮功能的按钮标签。理想情况下，按钮的标签应该清楚表明了其操作。

用户应该清楚的了解当他们点下按钮时会发生什么。让我给你一个简单的例子。想象一下，你不小心触发了一个删除操作，现在你看到下面的错误信息。

模糊的标签'OK'并没有太多说明动作按钮的作用。

不清楚在这个对话框中确定和取消代表什么。大多数用户会问自己，点击取消会发生什么呢？从来没有一个对话框，它只包含两个按钮ok和cancel

不要使用ok标签，最好使用删除。这将清楚这个按钮为用户做了什么。另外，如果删除是一项潜在的危险操作，你可以使用红色来表明。

'删除'清楚了表达按钮是做什么。 在这个界面中，一个潜在的危险行为'禁用卡片'以红色着色。图像：  Ramotion

4.正确调整按钮的大小

按钮大小应该反应该屏幕上的优先级。大按钮意味着更重要的操作。

优先按钮

让最重要的按钮看起来就很重要。保证主要按钮更加突出。增加其尺寸（通过增大按钮使其看起来对用户更重要）并且使用对比强一些的颜色捕捉用户的注意力。

Dropbox使用尺寸和颜色对比将用户的注意力集中在'Try Dropbox Business free'CTA按钮上。

更适合移动用户的手指

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

左侧：正确尺寸的按钮。右：按钮太小。图片：苹果

麻省理工学院触摸实验室的研究发现，手指垫的平均值在10-14毫米之间，之间为8-10毫米。这使10mm*10mm成为一个良好的最小触摸尺寸。

图片来源：uxmag

5.注意顺序

按钮的顺序反映用户和该系统之间对话的性质。问问自己，用户期望在屏幕上显示什么顺序，然后进行相应的设计。

用户界面是与用户的对话

推动你前进的按钮应该在右侧，后退的按钮应该在左侧。

6.避免使用太多按钮

这是许多应用程序和网站的常见问题。当你提供太多的选择时，你的用户最终不知道该做什么。在你的应用或者网站中，请考虑好你最希望用户采取的最重要的操作。

太多的按钮

7.设计有关交互的视觉或音频反馈

当用户点击按钮时，他们期望用户界面能做出适当的反馈。根据操作类型，这可能是视觉或音频反馈。当用户没有收到任何反馈时，他们可能会认为系统没有收到他们的指令并会重复该操作。这种行为通常导致多次不必要的操作。

作为人类，我们期望在与对象交互之后得到一些反馈。它可能是视觉，听觉或者触觉反馈。

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

结论

尽管按钮是交互设计的普通元素，但我们仍要尽可能的使这个元素更好。