7 个简单的按钮设计技巧

今天，我将分享一些关于可点击按钮设计的有用技巧。您可以使用这些提示轻松创建视觉上吸引人且用户友好的按钮。它们包含更多清晰的点击次数。人们很容易理解他们采取的行动。

1. 避免在按钮上换行

避免按钮上有多行文本。按钮标签应保持在一行上。

• 单行文本提高了可读性，使用户能够快速理解按钮的用途。
• 按钮上的换行文本可能会显得杂乱或不平衡。
• 一致的单行标签增强了设计的一致性。
• 保持按钮标签简洁，避免使用长短语。

2. 避免使用禁用的按钮

不要使用禁用按钮。因为很难理解为什么它被禁用以及应该做什么来启用它。

1. 禁用的按钮会让用户感到困惑，让他们想知道为什么他们无法继续，从而导致负面体验。

2. 残障用户可能会发现很难理解按钮被禁用的原因，从而影响可用性和辅助功能。

3. 不要禁用按钮，而是通过清晰的消息或说明来指导用户如何完成必要的步骤来启用该操作。

4. 启用的按钮保持用户体验无缝，让用户专注于完成任务而不会受到干扰或困惑。

3. 将动作动词用于按钮标签

按钮标签吸引用户以采取行动。要确定按钮将做什么，请使用 function（verbs） 作为按钮的标签。

• “提交”、“下载”或“探索”等操作动词创建了明确的号召性用语，提示用户立即采取行动。
• 动词提供直接上下文，使用户更容易理解单击按钮时会发生什么。
• 清晰、面向操作的标签可减少混淆，帮助用户顺利高效地浏览界面。
• 动作动词感觉更有活力和吸引力，从而激励用户与界面交互。

4. 一致对齐按钮

如果有很好的空间将它们并排放置，请不要将一个按钮放在另一个按钮的下面。这将破坏视觉流程，使界面感觉混乱和混乱。

• 正确对齐的按钮支持屏幕阅读器和辅助工具，使所有用户都能更轻松地浏览界面。
• 可预测的按钮位置可帮助用户知道查看位置，从而最大限度地减少犹豫或错误。
• 一致的对齐方式会带来更有条理和视觉吸引力的界面。

5. 使用标准按钮布局

使用标准按钮布局可以提高熟悉度，轻松指导用户完成操作，并提高界面的整体可用性和效率。

• 遵循标准按钮设计可确保各种应用程序、网站和平台之间的一致性。
• 为您的应用程序制定样式指南，以保持有凝聚力的主题和设计风格。
• 一致的按钮布局简化了设计和开发过程，使团队能够专注于功能，而不是为每个项目重新发明轮子。

6. 突出显示 Primary Action 按钮

通过颜色、大小和位置强调主要操作按钮可以吸引用户的注意力，有效地引导他们执行最重要的操作。

• 主按钮应具有更大的视觉重量，通过大胆的样式、边框或阴影效果来实现，以增强其突出性。
• 颜色应与周围的界面形成对比，以确保易于查看。
• 主要操作按钮的位置是必不可少的;它应位于用户预期会找到它的区域。

7. 不要在同一个按钮中使用两个图标

避免在单个按钮中使用两个图标，因为它会产生混淆和混乱，从而降低清晰度和用户理解力。

按钮中的每个图标都有其视觉含义，使用两个图标可能会产生歧义。

• 使用多个图标会使按钮显得拥挤和压倒性，从而降低整体用户体验和清晰度。
• 用户可能难以理解哪个图标代表按钮的操作。
• 单个图标传达明确的操作或目的，帮助用户快速了解按钮的作用，而不会产生歧义。
• 坚持每个按钮一个图标有助于建立一致的设计语言，使界面更加直观和用户友好。