下面我将从核心原则、具体尺寸、响应式设计、特殊情况和五个方面，为你详细阐述如何规范按钮的大小。
（图片来源网络，侵删）
核心原则
在设定具体尺寸之前,首先要理解几个指导原则：
-
清晰可点击原则
- 目标： 用户能轻松准确地点击到按钮，不会误触或错过。
- 实践： 按钮需要有足够大的点击区域，尤其是在移动端，苹果的《人机界面指南》建议移动端按钮的最小触摸目标为 44x44点，这能保证用户操作的舒适性和准确性。
-
视觉层级原则
- 目标： 通过大小、颜色等视觉属性，让用户一眼就能识别出哪个按钮最重要，哪个是次要操作。
- 实践： 主要按钮（如“提交”、“购买”）通常比次要按钮（如“取消”、“返回”）更大、更突出，这能引导用户的注意力，降低操作错误率。
-
一致性原则
（图片来源网络，侵删）- 目标： 在同一产品或同一页面中，相同类型的按钮应保持相同的尺寸和样式。
- 实践： 建立一个“按钮规范库”，确保所有设计师和开发者在任何地方使用按钮时都遵循相同的规则，这能建立用户的肌肉记忆，提升整体的专业感。
-
内容适配原则
- 目标： 按钮的大小应能舒适地容纳其内部的文字或图标，避免文字被截断或按钮显得空洞。
- 实践： 按钮的宽度应基于其内部内容动态调整，同时设定一个最小宽度和最大宽度，防止按钮过小或过大影响布局。
具体尺寸规范
这里我们以桌面端和移动端为例,给出一些业界常用的参考值，这些数值通常是基于一个标准化的“设计系统”或“设计令牌”来定义的。
桌面端
在桌面端,按钮的尺寸通常使用像素 或 rem 来定义（使用rem可以更好地实现响应式）。
| 按钮类型 | 高度 | 内边距 | 字体大小 | 圆角 | 适用场景 |
|---|---|---|---|---|---|
| 大型按钮 | 48px |
16px 24px |
16px / 1rem |
8px |
主要操作，如“开始试用”、“立即购买”，用于吸引用户注意。 |
| 中型按钮 | 40px |
12px 20px |
14px / 875rem |
6px |
最常用的尺寸，用于表单提交、确认操作等。 |
| 小型按钮 | 32px |
8px 16px |
12px / 75rem |
4px |
次要操作，如“查看详情”、“编辑”，或在空间受限时使用。 |
| 微型按钮 | 24px |
6px 12px |
11px / 6875rem |
3px |
辅助操作，如“删除单个”、“标记”，通常图标按钮较多。 |
内边距 的作用：
内边padding是决定按钮“感觉”的关键，它为文字提供了呼吸空间，使按钮看起来不那么拥挤，高度和内边padding的比例通常是协调的，40px 高的按钮，左右 20px 的内边，视觉上会比较平衡。
（图片来源网络，侵删）
移动端
移动端更强调触摸体验,因此按钮的尺寸通常会更大。
| 按钮类型 | 高度 | 内边距 | 字体大小 | 圆角 | 适用场景 |
|---|---|---|---|---|---|
| 主要按钮 | 56px |
16px 24px |
16px / 1rem |
8px |
核心操作，如“下一步”、“完成注册”。 |
| 次要按钮 | 48px |
12px 20px |
16px / 1rem |
6px |
次要操作，如“取消”、“稍后再说”。 |
| 图标按钮 | 48px |
0 (图标居中) |
- | 8px |
用于导航、返回、菜单等功能。 |
移动端要点：
- 最小触摸区域： 确保任何可点击元素的尺寸都至少为
44x44px。 - 足够的间距： 按钮之间要有足够的间距（至少
8px），防止用户误触。
响应式设计规范
按钮尺寸不能一成不变,需要根据屏幕大小进行适配。
-
断点设定：
- 在小屏幕上（如手机），使用移动端的大尺寸按钮。
- 在中等屏幕上（如平板），可以适当减小按钮高度，例如从
56px减小到48px。 - 在大屏幕上（如桌面），则使用桌面端的规范尺寸。
-
布局流式调整：
- 在响应式布局中,按钮的宽度可以设置为百分比（
width: 100%）或max-width，以确保在小屏幕上能完整显示，在大屏幕上不会过分拉伸。
- 在响应式布局中,按钮的宽度可以设置为百分比（
-
文字换行：
如果按钮文字很长,应允许文字换行，按钮的高度需要相应增加，或者限制其最大宽度，以确保可读性。
特殊情况和最佳实践
-
图标按钮：
- 图标按钮的尺寸通常由图标本身决定,图标应清晰地放置在点击区域中心。
- 为图标按钮添加
aria-label属性，确保屏幕阅读器可以正确识别其功能，这对于无障碍访问至关重要。
-
加载状态：
- 当按钮正在执行操作（如提交表单）时，应显示一个加载动画（如旋转的图标）。
- 关键点： 在加载状态下，按钮应保持可点击状态不变（包括尺寸、颜色和禁用状态），以避免界面布局跳动，给用户造成困惑。
-
禁用状态：
- 禁用状态的按钮尺寸和样式应与正常状态保持一致,但颜色会变灰，并添加
cursor: not-allowed样式，明确告知用户当前不可操作。
- 禁用状态的按钮尺寸和样式应与正常状态保持一致,但颜色会变灰，并添加
-
分组按钮：
当多个按钮组合在一起时（如“取消”和“确定”），它们的尺寸应保持一致，以体现其并列关系，可以通过调整内边距来微调，但高度必须统一。
如何建立你的按钮规范
要系统地规范按钮大小,可以遵循以下步骤：
- 确定设计系统： 使用 Figma、Sketch 或 Adobe XD 等工具创建一个“组件库”或“样式指南”。
- 定义令牌： 不要直接使用具体的像素值，而是创建设计令牌。
spacing-sm: 8pxspacing-md: 12pxheight-button-lg: 48pxheight-button-md: 40pxfont-size-button: 16px
- 创建组件： 基于这些令牌，创建不同类型的按钮组件（如
PrimaryButton,SecondaryButton），并设置好它们的间距、颜色、状态等。 - 编写文档： 为你的按钮规范编写清晰的文档，说明每种按钮的用途、尺寸、状态变化等，并附上示例图，方便团队成员查阅。
- 推广与应用： 在整个产品中强制推行这套规范，确保所有新功能都遵循它，并逐步统一旧有的不一致按钮。
通过以上方法,你就可以建立起一套专业、清晰、可扩展的按钮大小规范，从而显著提升产品的设计质量和用户体验。
