如何确定 CTA 按钮的大小？

核心一句话：按钮大小由「触屏点击热区」打底，再由版面留白、信息权重、PC / 移动端分开设定，最后用数据验证，不是越大越好，也不能刚好卡下限。

区分两个概念：点击热区（用户可点击范围） 和 视觉按钮尺寸（看得见的色块），很多时候热区可以比视觉按钮更大。

一、硬性底线：触屏热区标准（最重要）

移动端是流量主力，遵循 WCAG + 谷歌、苹果移动端规范： ✅ 最小有效点击热区：48px × 48px 含义：手指落点区域至少 48px，低于这个尺寸极易点错、点不上，降低体验，直接拉低点击意愿。

注意：这是热区，不是视觉色块。 你可以视觉按钮 44px 高，但是把点击热区向外扩展到 48px（CSS padding 实现）；但不建议视觉按钮本身小于 44px，太小看着不起眼，失去高对比 CTA 的意义。

推荐高度区间（直接套用）

• 移动端主 CTA：52px～64px（最舒服，B 端着陆页优先 52–56px）
  • 52–56px：通用首选，稳重不笨重
  • 60–64px：竞价信息流、强获客页，强调醒目
• 移动端次要按钮：48–52px，比主按钮略小，拉开层级
• PC 端：高度 40–48px 足够，PC 是鼠标点击，对尺寸宽容很多

❌ 避雷：移动端不要做到 40px 及以下，手指很容易点偏；也不要高于 72px，挤占首屏宝贵空间，把标题、主视觉挤没了。

二、宽度怎么定（3 种主流方案，按场景选）

方案 1：移动端通栏按钮（获客着陆页首选，转化普遍更高）

• 规则：左右预留安全边距（16px～24px），不贴屏幕边缘
• 特点：视觉上最强、识别成本最低，一眼看到；适合首屏主 CTA、底部悬浮 CTA
• 适合：竞价、信息流、留资、预约、报价类着陆页（你做的工业、工程类非常推荐）

方案 2：自适应宽度（文字长度自适应，居中）

宽度由文字内容决定，文字左右预留内边距（padding）

• 左右 padding：24px～36px 适合：PC 端、或者页面有两个并排按钮（主 + 次）

移动端尽量少用窄的居中按钮，对比弱，容易被忽略

方案 3：固定窄按钮（慎用）

宽度固定，不推荐做主转化按钮；只适合次要操作、查看详情。

✅ 优先级总结：移动端主 CTA 优先【通栏】> 自适应居中 > 固定窄按钮

三、内边距 padding（决定文字呼吸感）

按钮里面文字不能贴边：

• 垂直 padding（上下）：用来控制高度
• 水平 padding（左右）：
  • 短文案（4–6 个字：获取报价、预约勘测）：左右 24px+
  • 长文案（免费上门勘测方案）：左右 32px

文字不要塞满按钮，拥挤会压抑、看不清。

四、主次按钮大小层级规则（非常关键，防止分流）

主按钮 > 次要按钮，从尺寸上就拉开差距，和颜色权重配合： 示例（白底着陆页）

• 主 CTA：56px 高，通栏，实心高对比色
• 次要 CTA：48px 高，自适应宽度，描边样式

绝对不要主、次按钮一样大！用户分不清该点哪个。

五、布局约束：要结合首屏空间来权衡

首屏空间极其珍贵（尤其手机）：

1. 如果首屏内容多：标题 + 信任标签 + 大图，按钮就选 52px，不要 64px，避免把主视觉挤出首屏
2. 如果首屏简洁、留白多：可以给到 56–60px，强化视觉锚点
3. 悬浮底部 CTA（固定悬浮条）：推荐高度 50–56px，通栏，和首屏主按钮保持一样文案、一样视觉规格，形成记忆联动

悬浮 CTA 额外限制：不能遮挡页面核心内容，不要挡住表单、图片上的关键信息

六、屏幕适配规则（响应式怎么写）

一套规范写法：

• 移动端（<768px）：通栏，高 52–56px
• PC 端（≥768px）：不再通栏，改为自适应宽度、居中，高度降到 40–44px

PC 宽屏上一个铺满屏幕的巨宽按钮会非常难看，很廉价。

七、自测方法（不用复杂工具，快速判断合不合适）

1. 手指模拟测试：手机打开页面，想象用大拇指点击，会不会容易点到旁边空白
2. 缩略图测试：页面缩小，远距离看，能不能快速定位按钮
3. 首屏校验：滚动到页面最顶部，首屏里，按钮会不会挤占标题、主视觉
4. 对比周围元素：按钮要比普通正文、标签组件明显更大，形成大小对比

八、A/B 测试：怎么测试尺寸变量（一次只改一项）

可以单独测试这些变量，其余颜色、文案、位置完全不动：

1. 高度实验 A：52px ｜ B：60px
2. 宽度实验 A：移动端通栏 ｜ B：居中自适应按钮
3. 有无悬浮 CTA（独立变量）

看指标：

• CTA 点击率
• 最终线索转化率（优先看这个）

现象：更大的按钮点击率上升，但如果大到挤压内容，跳出率升高，最终转化反而下降。按钮不是越大越好。

九、直接复制的落地尺寸样板（B 端工业 / 工程着陆页）

✅ 移动端（手机）

主 CTA： 高度：56px 左右边距：20px（通栏） 文字：16–18px 粗体

次要按钮： 高度：48px 左右 padding：28px

底部悬浮 CTA： 高度：52px，通栏

✅ PC 端

主 CTA： 高度：44px 左右 padding：32px 文字：16px

次要按钮： 高度：40px

十、常见踩坑清单

❌ 只设置视觉按钮很小，靠扩大透明热区补救：虽然能点，但看不见按钮，用户不知道哪里可以点 ❌ PC、移动端一套尺寸，PC 端通栏巨宽，很丑 ❌ 主次按钮尺寸几乎一样，视觉层级失效 ❌ 按钮太大，吃掉首屏空间，用户看不到产品 / 服务价值 ❌ 按钮内文字太长，padding 给太少，文字挤在一起