按钮#

../../_images/buttons.png ../../_images/buttons-dark.png

按钮是最常见和最基本的用户界面元素之一。

通用指南#

  • 请遵循 标题栏按钮的指南。

  • 在标题栏之外，按钮应该包含一个图标或一个标签，而不能同时包含两者。

  • 不要在同一个窗口中使用超过一种或两种不同的按钮宽度，并确保彼此相邻的按钮具有相同的宽度。这将提供更好的外观。

  • 不要将双击或右键单击按钮的操作分配给它们。用户不太可能发现这些操作，如果发现了，也会扭曲他们对其他按钮的期望。

  • 当用户点击无效按钮时，使其失效，而不是显示错误消息。

  • 按钮标签应使用祈使动词，使用 标题大写。例如，保存 或 更新。

  • 按钮标签应简短，以保持按钮宽度较窄。请考虑标签在本地化时如何改变宽度。

切换按钮#

切换按钮在两种状态之间切换，已设置和未设置。这种状态通过按钮分别“按下”或“弹出”来指示。

切换按钮是用于具有明显二元性质的模式或设置的合适选择。通常在空间有限时使用，作为 开关 的替代方案。

切换按钮也可以链接起来，以创建用于选择一系列选项的控件。当可用选项本质上不是二元的，并且可用选项可以用简短的标签表示时，这种方法是合适的。

链接的切换按钮主要用于将选项适应相对较小的空间，例如列表行或标题栏。当空间不是限制因素时，其他选项（例如 单选按钮）可能是一个更好的选择。

可以在 LibAdwaita 演示应用程序中的 Flap 演示中找到链接切换按钮的示例。

按钮样式#

按钮提供了许多预定义的样式，可以使其适应各种情况。也可以创建自定义按钮样式，特别是为了赋予它们自定义颜色（请参阅 UI 样式）。

建议和破坏性操作#

../../_images/buttons-suggested-destructive.png ../../_images/buttons-suggested-destructive-dark.png

建议操作和破坏性操作样式为按钮赋予了强烈的颜色，传达了含义。

  • 建议操作 突出显示用于肯定操作的按钮。这可用于引起对流程中下一步或行动号召的关注。

  • 破坏性操作 是一种警告 - 它引起对使用按钮可能造成的潜在损害后果的关注。

每个视图应该只包含一个使用建议或破坏性样式的按钮。

替代形状#

../../_images/button-shapes.png ../../_images/button-shapes-dark.png

胶囊 和 圆形 样式改变了按钮的形状。当文本按钮位于开放空间中，并且是视图的主要操作时，可以使用胶囊。在这里，更大的圆形形状有助于使按钮适应其周围环境，并使其成为更具吸引力的点击目标。

圆形按钮不太常见，但可以在将许多小按钮紧密放置在彼此附近的情况下使用。

API 参考#