按钮是界面设计中的关键性元素，引导用户进行下一步交互。对话框、输入框、工具栏等很多组件都需要按钮。在这里，我们将盘点一下按钮设计中最常遇到的问题。

按钮需不需要边框？

按钮设计的基本准则很简单——让按钮看起来像按钮。边框加强了传统按钮的感觉，并为用户创建了引人注目的目标。

如果没有边框，元素看起来更像是一个链接而不是按钮，所以在可选择的情况下，使用带边框的设计会更安全。

选择什么颜色？

颜色作为视觉语言，是与用户进行交流的重要组成部分。选择颜色时，需要记住以下几点：

色彩鲜明的按钮更容易被发现。在Gmail界面中“发送”按钮会立即吸引用户的注意。

图片来源smashingmagazine

颜色强调了动作的本质。可以通过颜色的常见含义来确定选择。对于可能存在危险的操作(例如删除用户信息)，则选择红色。

无论选择哪种颜色，都要确保让使用产品的用户能够理解这些颜色的含义。

按钮需不需要一致？

只要整体按钮样式是统一的，任何设计样式都可以使用。例如，对于4px的圆角并使用渐变和阴影，请尝试将相同的样式应用于所有按钮设计。

使用圆形还是方形？

圆形按钮对用户来说有两个优点：

• 圆形在视觉上更讨人喜欢。人们会很自然地避开锋利的物体，例如削尖的铅笔，锋利的针等物体。
• 圆形按钮将用户的注意力指向了按钮中心，即文本标签所在的位置，因此用户更有可能阅读标签。

另外在设计时，要根据产品整体的视觉形式来选择合适的按钮形状。如果页面中使用了很多方形的设计，也应该使用方形按钮。

按钮的尺寸大小？

按钮的目的是让用户能最大程度地减少错误操作的风险，轻松地与界面交互。

按钮的尺寸要求：

• 保证文本标签的易读性和可读性。(请检查所选的字体在较小的屏幕上是否清晰可见！)
• 让按钮易于点击，小的触摸目标会增加错误操作的风险。建议创建尺寸为9mm的控件，以便可以用手指准确地敲击它们。

使用有填充还是无填充按钮？

近年来，空心按钮(Ghost buttons)变得很流行，常用于登录页面中。但在用户体验方面，空心按钮的视觉重量较小，吸引用户注意力的效率要低很多。通常填充按钮由于具有更高的色彩对比度而用于强调。

有时可能需要这两类按钮同时显示，在这种情况下，填充按钮吸引最多的注意力，作为主要CTA（即行为召唤，设计师有意识地通过设计引导用户执行特定操作，诸如点击按钮、留下联络方式或点击购买)。空心按钮起到辅助作用。

如何写出恰当的文本标签？

文本标签描述了当用户点击按钮时将发生的操作。

建议使用动词来清楚地描述操作，例如当用户发送电子邮件时，应该使用的标签为“Send(发送)”而不是“Submit(提交)”。

如何传达按钮状态？

用户不仅需要明白按钮的操作，还需要了解按钮的状态。

定义按钮的状态：

• 正常（活动）。活动状态是按钮可点击时的状态。
• 悬停（仅限桌面）。这个额外的状态可以让用户明白某个元素是可交互的。
• 按下。按钮改变视觉形式来反馈点击。
• 已禁用。当用户没有完成必要的操作时，可以禁用该按钮。

原作者：Nick Babich