鼠标在提交按钮上停了两秒，最后还是移开了

回放一段会话录屏：访客从搜索结果进来，落在一台设备的详情页，往下滚了四屏，在参数表那里停了将近一分钟，继续滚到底部，鼠标移到「提交需求」上，停住，两秒，然后移开，往回滚，重新看了一遍参数，再往下，鼠标又一次贴到按钮边缘，还是没有按下去，最后关掉了标签页。一周三百多次会话里，这样的片段能挑出四十多段。按钮没有失效，颜色是醒目的橙色，位置也在视野正中。

把这类会话单独拉出来对比，共同点是鼠标在按钮上有停留、有细微的来回抖动，就是不落下去。这是犹豫，不是没看见。犹豫的成本极低——移开就行了，所以它在数据里表现得非常安静：跳出率涨一点，表单量掉一点，没有人会为此报故障。要查的其实是一个很窄的问题：那两秒里，用户在等一个什么信息，而页面没给。

先把「点不动」和「不想点」分开

诊断顺序不能颠倒。物理层面的毛病不排掉，后面所有关于文案和配色的讨论都是空谈。三件事当场就能做：把浏览器窗口宽度拖到 360 像素，看按钮会不会被压成两行、会不会被父容器裁掉右边一截；打开开发者工具选中按钮，量它的真实盒子高度，不是看上去的那一块——很多站视觉上是 40 像素高的按钮，实际热区只有文字所在的 20 像素，因为内边距写在了里层的行内元素上；最后把鼠标悬上去，看有没有任何视觉变化，一个没有悬停反馈的矩形，在用户的认知里和一段带底色的文字没有区别。

这三项只要有一项不过，先修它。网页制作里最容易漏掉的就是热区，因为设计稿是静态的，标注上写着高度 48，实现时用行高凑出来的视觉高度也是 48，可点范围却只有中间那一条。这个缺陷在手机上表现为「要戳两三次才中」，在桌面端表现为鼠标必须精确对准文字，两种表现都不会有人专门反馈，只会体现为转化率低了一截。

按钮上的字，要说清楚按下去之后会发生什么

「提交」「了解更多」「立即咨询」这三个词，在企业站上大概占了所有按钮文案的六成。它们的共同毛病是只写了动作，没写结果。用户按之前要预判三件事：会不会马上有人打电话过来、要不要填一大堆信息、多久能有回音。三个问题都没答案，那两秒的停顿就是在做风险估算，算不出来就放弃。

改法很具体：动词加结果对象，四到八个字。「提交」改成「获取报价单」，「了解更多」改成「看这台的现场视频」，「立即咨询」改成「让工程师回电」。如果表单字段超过三个，在按钮正下方补一行不超过二十字的说明，把代价和回报都摆出来，比如「填完约 30 秒，1 个工作日内回电」。这行小字用 12 到 13 像素、次要文字灰，不要加粗，它的作用是消除顾虑，不是抢注意力。网页制作交付前把所有按钮文案抄进一张表里通读一遍，凡是脱离页面就看不懂指向的，全部要改。

同一屏里有三个同样重的按钮，等于一个都没有

翻一下自己站的产品详情页，数数首屏加第二屏里有多少个填充实色的按钮。常见情况是：导航栏右侧一个「在线咨询」，主图下面一个「索取资料」，参数表下面一个「立即询价」，右侧浮窗还挂着一个「电话沟通」，四个颜色相同、大小接近。注意力被平均分掉，每一个都像可以点，也都像可以不点。

处理办法是每一屏只保留一个主按钮，其余降级。降级不是等比缩小，是换形态：次级动作用描边按钮，第三级用带下划线的文字链。可以照抄的比例是主按钮视觉面积为次按钮的 1.2 到 1.5 倍，主按钮品牌色实底，次按钮同色描边加透明底，文字链不带任何背景。右侧那一列浮窗尤其要砍，四个图标堆在一起，实际点击几乎全落在最上面那个，下面三个一周点不到十次，删掉不会有任何损失，还能给移动端右下角腾出干净的空间。

手指的宽度是不变量

桌面端按钮高度放在 40 到 48 像素比较稳，低于 36 就开始像标签而不像按钮；移动端不要低于 44 像素，这是指腹接触面换算过来的下限，安卓一侧的规范给到 48。左右内边距至少是文字高度的 1.2 倍，四个字的按钮总宽通常落在 96 到 120 像素之间，再窄会被当成徽章。圆角控制在 4 到 8 像素，全圆角胶囊形在信息密集的产品页里容易和标签混淆。这几个数值不值得每个项目重新争论一遍，写进网页制作的组件规范里直接取用就行。

更容易被忽略的是相邻可点元素之间的空隙。两个按钮并排、间距小于 8 像素时，误触率明显上升，尤其是「提交」和「重置」这种一好一坏的组合，误触的代价是用户填了三分钟的内容被一次清空。最稳妥的做法是直接删掉重置按钮，企业站的表单几乎没有需要它的场景。移动端底部固定操作条还要额外避开手势条区域，大约 34 像素，压上去的部分是真的点不到，而这个问题在电脑上预览一百遍也发现不了。

按下去之后的三百毫秒

点击后界面毫无变化，是重复提交的直接来源。人对反馈的耐心大约就是 300 毫秒，超过这个时长还是原样，多数人会再点一次，后台于是多出一条重复线索，销售打两遍电话，对方的印象反而更差。

四个状态一个都不能省：默认、悬停（背景加深 8% 到 10%）、按下（下沉 1 像素或背景再深一档）、加载中（文字换成「提交中」并锁住重复点击）。加载态必须在点击后 100 毫秒内出现，不用等接口返回。验收方法是把开发者工具的网络限速调到慢速 3G，再点一次，如果按钮在这种条件下依然纹丝不动，那就是漏做了，不是网络慢。提交成功之后也别只弹一个转瞬即逝的提示，把按钮区域直接换成一句带下一步的确认文案，比如「已收到，稍后由王工与您联系」，用户才知道这件事已经结束了。

灰按钮是最常见的死路

表单没填完就把提交按钮置灰，看着规范，实际是把定位问题的活儿甩给了用户。灰按钮不说明差在哪一项，用户只能从头往下逐个字段找，字段一多就直接走人。更糟的是灰按钮往往连点击事件都没绑，点上去毫无反应，很多人会判断成页面卡死。

替代方案是按钮始终可点，点击后触发校验，把第一个未通过的字段滚动到视口中间并自动聚焦，同时在这个字段下方写出具体原因——「手机号少了一位」比「请填写完整」有用得多。这个改动通常半天工时就能做完，在网页制作的各类优化项里属于投入产出比最高的一档。顺带把必填项标记也检查一遍，星号标在标签左边、颜色和错误提示区分开，别让用户点到最后才知道哪些能空着。

按钮出现的时机比按钮本身更要紧

用户下决心的位置不在页脚。把页面的滚动深度和停留时长拉出来，找出被看得最久的那两个区块——企业站上通常是参数表和案例图集——在这两块内容的正下方各放一个按钮。等到用户滚过这些内容、兴趣已经衰减，再在底部摆一个「联系我们」，接住的只是残余流量。

还有几个容易被漏掉的高意图节点：型号或规格选择完成的瞬间、资料下载填完邮箱的瞬间、在线选型工具算出结果的瞬间。这些位置上用户的意图强度最高，按钮放在这里，点击率通常是页脚那个的三到五倍。做网页制作时把这类节点在原型上单独标出来逐个安排入口，比在全站铺一层悬浮客服有效得多，也不会招人烦。

一个不用工具的验收办法

把按钮从页面里截出来，单独贴在一张白纸上，只留形状和文字，周围的内容全部去掉。然后找一个完全没参与过这个项目的人，问他两个问题：这个东西能点吗，点下去会发生什么。他要是想超过三秒，或者说出来的答案跟你预期的不一样，那这个按钮就还没做完，回到上面六项里挨个对一遍——是热区、是文案、是层级、是尺寸、是反馈，还是它压根就不该出现在那个位置。