按钮是交互设计中的基本元素。他们在用户和系统之间扮演重要角色。在本文中，我们将一起思考创建有效按钮所需了解的七个基本原则。

⬇⬇⬇点击获取更多设计资源

https://js.design/community?category=design&source=csdn&plan=bbqcsdn768

让按钮看起来像按钮

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

但是用户如何理解某个元素是否具有交互性呢？他们使用以前的经验和视觉符号来阐明 UI 对象的含义。这就是为什么使用适当的视觉符号（如大小、形状、颜色、阴影等）使元素看起来像一个按钮如此重要的原因。

 

但是，在许多界面中，交互性的能指很差，它们的可发现性变得很弱。

如果缺少清晰的交互指引，并且用户为什么是“可点击”而什么不是“可点击”而苦苦挣扎，那么我们设计的有多酷就无关紧要了。如果他们发现它很难使用，那你很可能最终就会流失用户。

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

不要以为你的用户界面中的某些东西对你的用户来说是显而易见的

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

您对可点击性指示符的解释能力与您的用户不同，因为您知道自己设计中的每个元素的用途。

为你的按钮使用熟悉的设计

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

带方形边框的填充按钮

圆角填充按钮

带阴影的填充按钮

幽灵按钮

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

不要忘记空格

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

 

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

按钮应位于用户可以轻松找到或期望看到的位置。不要让用户寻找按钮。如果用户找不到按钮，他们就不会知道接下来如何操作。

 

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

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

不要和你的用户玩寻宝游戏

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

用它们的作用标记按钮

带有通用或误导性标签的按钮可能会让您的用户感到沮丧。编写按钮标签，清楚地解释每个按钮的作用。理想情况下，按钮的标签应该清楚地描述它的动作。

用户应该清楚地了解单击按钮时会发生什么。举一个简单的例子。假设你不小心触发了删除操作，现在看到以下错误消息。

目前尚不清楚此对话框中的“确定”和“取消”代表什么。大多数用户会问自己“当我点击‘取消’时会发生什么？”

从未设计过仅由“确定”和“取消”两个按钮组成的对话框或表单。

与其使用“OK”标签，不如使用“Remove”。这将清楚地说明此按钮对用户的作用。此外，如果“删除”是一项具有潜在危险的操作，您可以使用红色来说明这一事实。

适当调整按钮大小

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

优先按钮

让最重要的按钮看起来就是最重要的按钮。始终使主要操作按钮更加突出。增加它的大小（通过使按钮变大，使它看起来对用户更重要）并使用对比色来吸引用户的注意力。

使按钮对移动用户手指友好

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

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

注意顺序

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

用户界面是与您的用户的对话

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

避免使用过多的按钮

这是许多应用程序和网站的常见问题。当提供太多选项时，你的用户最终会无所事事，不知所措。在你的应用或网站中设计页面时，请考虑希望用户采取的最重要的操作。

提供交互的视觉或听觉反馈

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

为什么会这样？作为人类，我们期望在与对象交互后得到一些反馈。它可能是视觉、听觉或触觉反馈——任何承认交互执行这一事实的东西。

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

结论

尽管按钮是交互设计中的一个普通元素，但为了使这个元素尽可能好，还是值得多加注意的。