按钮设计的7个基本原则

01.使按钮看起来像按钮

当涉及到与用户界面的交互时，用户需要立即知道什么是“可点击的”和什么是不可点击的。设计中的每一项都需要用户的努力来解码。通常，用户解码UI所需的时间越长，用户对UI的可用性就越低。

但是用户如何理解某个元素是否是交互式的呢？他们使用以前的经验和视觉符号来澄清UI对象的含义。这就是为什么使用适当的视觉符号(如尺寸、形状、颜色、阴影等)如此重要的原因。使元素看起来像一个按钮。视觉符号具有重要的信息价值-它们有助于在界面中创建可供使用的功能。

不幸的是，在许多接口中，交互性的符号很弱，需要交互努力；因此，它们有效地降低了可发现性。

如果缺少清晰的交互功能，用户会与什么是“可点击的”和什么不是“可点击的”进行斗争，那么不管我们设计的多么酷。如果他们发现很难使用，他们会发现它令人沮丧，并最终不能很好地使用。

对于移动用户来说，弱信号是一个更重要的问题。为了了解单个元素是否是交互式的，桌面用户可以将光标移动到元素上，并检查游标是否更改其状态。移动用户没有这样的机会。要理解一个元素是否是交互式的，用户必须点击它-没有其他方法来检查交互性。

不要假设UI中的某些内容对用户来说是显而易见的

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

使用熟悉的按钮设计（用户）

下面是一些大多数用户都熟悉的按钮示例：

01.方形边框填充按钮

02.圆角填充按钮

03.充满阴影的按钮

04.描边按钮

在以上的例子中，“充满阴影的按钮”设计对用户来说是最清晰的。当用户看到按钮的阴影时，他们立即知道这是我们可以按的东西。

别忘了空格

不仅按钮本身的视觉属性很重要。按钮附近的空格数量使用户更容易(或更难)理解它是否是一个交互元素。在本例中，下面的一些用户可能会将幽灵按钮与信息框混为一谈。

2.放置用户希望找到的按钮

按钮应该位于用户可以轻松找到或期望看到的位置。

不要让用户寻找按钮。

如果用户找不到按钮，他们就不会知道这个按钮的存在。

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

传统的按钮放置方式提高了可发现性。有了标准的布局，用户就可以很容易地理解每个元素的用途-即使它是一个没有强符号的按钮。将标准布局与干净的视觉设计和充足的空白结合起来，使布局更易于理解。

提示：在可发现性上测试您的设计。当用户第一次导航到包含您希望他们执行的一些操作的页面时，应该很容易为用户找到合适的按钮。

3.为按钮贴上标签

带有通用或误导性标签的按钮可能会给用户带来巨大的挫折感。编写按钮标签，清楚地解释每个按钮的功能。理想情况下，按钮的标签应该清楚地描述它的动作。

用户应该清楚地了解当他们点击一个按钮时会发生什么。让我举个简单的例子。想象一下，您意外地触发了一个删除操作，现在您看到了以下错误消息。

提示：不清楚在这个对话框中“OK”和“Cancel”代表什么。大多数用户会问自己：“当我点击‘取消’时会发生什么？”

与其使用“OK”标签，不如使用“Remove”。这将清楚显示此按钮为用户做了什么。此外，如果“删除”是一个潜在的危险操作，您可以使用红色来声明这一事实。

4.适当调整按钮的尺寸

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

优先次序按钮

让最重要的按钮看起来像是最重要的按钮。始终尝试使主动作按钮更加突出。增加它的大小(通过使按钮更大，使它看起来对用户更重要)，并使用对比颜色来吸引用户的注意。

使按钮对移动用户友好

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

                   麻省理工学院触摸实验室的研究发现，手指垫的平均值在10-14毫米之间，指尖在8-10毫米之间。

                   这使得10毫米x 10毫米是一个很好的最小接触目标大小。

5.注意命令

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

例如，如何在分页中订购“上一个/下一个”按钮？将你向前移动的按钮应该在右边，向后移动的按钮应该在左边，这是合乎逻辑的。

6.避免使用过多的按钮

对于许多应用程序和网站来说，这是一个常见的问题。当您提供太多的选项时，您的用户最终什么都不做..

当您在应用程序或网站中设计页面时，请考虑您希望用户采取的最重要的操作。

7.提供互动方面的视听反馈

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

为什么会发生这种事？

作为人类，我们期望在与对象交互之后得到一些反馈。它可能是视觉、音频或触觉反馈 --- 以便用于确认对象得到我们的信息

对于某些操作，例如下载，它不仅值得确认用户输入，而且还显示了进程的当前状态

此按钮转换为进度指示符，以演示操作的当前状态

最后结语

尽管按钮是交互设计中的一个普通元素，但是为了使这个元素尽可能好，值得投入大量的注意力。按钮的UI设计应该始终是关于识别和清晰。