按钮 Buttons 的使用原则

本文章属于《UI 线框图》专栏，查看专栏阅读更多文章。

按钮是一个用来执行动作的控件，例如发送电子邮件。 设计按钮不难，但他们的使用复杂一些，有一些棘手的事情要注意。

何时使用按钮

根据《Designing Interfaces》一书，按钮应该是“大的，可理解的，明显的，即使是最没有经验的计算机用户也非常容易使用”。 它们最适合用于重要的行动。

按钮的挑战在于，你添加的按钮越多，每个按钮就越不明显，也越不容易使用。 所以，明智而谨慎地使用它们。

让我们来看一个例子:

这个页面上有许多元素，包括用户可以执行的几个操作。 但是只有三个按钮，用于最重要的操作: 现在购买 Buy It Now，添加到购物车 Add to Cart，现在出售 Sell now。

如何使用按钮

将用户极有可能选择的按钮设置为默认(主要)。

避免使用按钮模仿其他控件的行为。

按钮之间有足够的空间，以便用户可以轻松地点击其中一个按钮。

避免在标准按钮中显示图像。

按钮中的文本应该使用动词或动词短语并带有标题样式的大写。

如果点击按钮立即打开另一个窗口、对话框或应用程序来执行其操作，则在按钮文本中添加省略号ellipsis。

从非破坏性控制中分离破坏性按钮。

按下按钮后应立即响应。

当几个按钮相邻放置时，确保它们有相同的宽度。 这对于 取消 Cancel 和 确定 OK 按钮尤其重要。

如果错误按下按钮可能导致数据丢失，请不要设置默认按钮

标签要简短，这样就不会让按钮占用太多空间。 考虑标签在本地化时如何改变长度也很重要。

基本用法

• Use the primary state for the default action
• 默认行动使用主要状态按钮
• Group related buttons
• 组合相关按钮
• Position unrelated buttons away from realated ones
• 将不相关的按钮远离相关按钮

状态 States 

变化 Variations

• 图标按钮 Icon buttons

按钮文本旁有图标，或直接以图标取代文本。

• 分割菜单按钮 Split Menu buttons

按钮可以激活，但也提供了一个下拉菜单选项的二级菜单

参考资料 References

1. Apple macOS Human Interface Guidelines 苹果 macOS 人机界面指南
2. GNOME Human Interface Guidelines 人机界面指南

相关控件 Related Controls

• Links 链接

进一步阅读 Further Reading

• “Designing Interfaces” by Jenifer Tidwell

《设计界面》作者:Jenifer Tidwell

• Google Material Design button guidelines

《谷歌材质设计按钮指南》

• Button UX Design: Best Practices, Types and States (UX Planet)

《按钮 UX 设计: 最佳实践，类型和状态(UX Planet)》

• Buttons in Design Systems (EightShapes)

《设计系统中的按钮》

下一篇：文本输入 Text Input