把「按钮不够明显」变成可验证改动
拆成对比度、点击区、竞争元素和位置四项,逐项验收
我的主按钮在 [页面] 上被反馈「不够明显」。请把它拆成可测量的项:1)按钮文字与底色的对比度、按钮与页面背景的对比度,各给当前值和目标值;2)点击区尺寸,是否达到 44×44;3)同屏有几个元素比它更亮、更大或更饱和,列出来;4)它在用户扫描路径上的位置,是第几个视觉落点;5)这一屏是否只有一个主操作。给 3 个改动方案,每个标明只改了哪个变量、预期效果、怎么验证,比如首次点击时间、任务完成率。不要只说加大加粗。
使用建议
一次只动一个变量;否则点击率涨了,你也不知道该记住哪个改动。
适合什么场景
- 评审会上有人说「这个按钮不够明显」,但没人说得出改哪里——先把「明显」换算成对比度和竞争元素。
- 改版后主按钮点击率下降,团队想直接换个更亮的颜色——先排查是不是同屏多了两个同等重量的按钮。
不适合的场景
- 按钮是禁用态,或需要二次确认——不明显是刻意的,这时改的是状态说明,不是按钮。
- 页面只有这一个操作、周围空无一物——它就是最明显的,再加强只会显得吵。
示例
输入
移动端结算页:主按钮「提交订单」用品牌浅蓝 #7FB3FF 配白字,高 40px、宽 343px,同屏还有「继续购物」文字链和顶部红色优惠标签
你会得到
当前文字对底色 2.2:1、按钮对页面背景 1.4:1,都低于目标,文字 4.5:1、按钮边界 3:1;高 40px 低于 44px 的点击区下限;红色优惠标签比按钮更抢眼,扫视第一落点是它。方案 A 只换填色为 #0B5FFF,对比度到 6.4:1,不动布局;方案 B 把优惠标签降为浅色描边,让按钮成为唯一高饱和元素;方案 C 高度提到 48px 并加 12px 内边距。验证看首次点击时间和提交完成率,各跑一周。
常见误用
- 同时改颜色、尺寸、位置、文案——涨了也不知道是哪一项起了作用,下次没法复用。
- 用「加投影和渐变」制造明显——增加的是装饰,不是层级,深色模式下还会失效。
可以这样改
- 换成「按钮不明显,是因为它和次要按钮长得一样吗」——先查层级体系,再谈单个按钮。
- 加「给 3 个方案各写一条回滚条件」——达不到预期时怎么退回,比方案本身更能说服评审。