Date 2026-01-22 23:15:40
UI 设计师对按钮的设计比较讲究，但在大多数视觉设计师的感知中，按钮的位置似乎微不足道，只要主视觉好看，其实不然。
要知道你要靠业绩拿工资，而且钱很香。
虽然活动视觉很重要，但归根结底还是吸引用户点击购买转发。通过合理 CTA 结合营销手段，设计形式有助于实现业务目标。
CTA，Call to Action，行为召唤是一种营销术语。用普通人类语言来说，用户可以采取下一步行动，通过一些形式(通常是按钮)达到营销目的。
今天，这位阿姨从为数不多的经验中总结出了极其肤浅的经验 7 让我们分享一下按钮设计的技巧：
(如果你不想花五分钟看完自己的脸，跳到最后点个赞老阿姨会很欣慰……)
在 UI 在设计中，标准按钮有一定比例的公式。
按钮的高度通常是文字大小 2.4 倍，然后取 4 整倍数。例如：字号 24，乘以 2.4 就是 57.6，取离 4 最近的倍数值是 56PX。
按钮宽度通常取文本宽度和按钮高度的总和，如文本宽度 96，按钮高度 那么按钮宽度就是56 152。
当然，在视觉设计中，可以根据情况进行调整，公式仅供参考。但需要注意的是，考虑文本和空白的比例、按钮的大小以及热区的大小是否会影响操作。
比如考拉的这个 banner，只有原始设计的按钮 GO 然后，如果两端有空白，观感会更容易。文案和限量抢劫会让用户感觉更紧迫，点击欲望更强，按钮整体比例更舒适。
颜色对人眼有很强的感知影响，可以利用颜色对比来吸引用户点击。
如图所示，原始设计突出了价格，但事实上，最需要用户点击购买的按钮与背景集成。如果你优化背景颜色，我相信点击率的数据会更漂亮。
另外，如果你的活动页面上有多个按钮，这里给你一个安利骚操作理论:冯·雷斯托夫效应。
冯·雷斯托夫效应也被称为隔离效应，当有许多相似的物体时，最不同的物体最有可能被记住。
问题：下面哪一种水果给你留下了深刻的印象？
阅读文章 >例如，您可以使用风格+比例+颜色三剑集成来突出您最想要用户点击的入口。
如上图所示，通过风格和颜色的区别，立即下单按钮更加突出，延长比例，增加点击热区，使用户更容易操作。综上所述，它可以吸引比图片左侧更低成本的傻瓜操作，并直接点击订单。
此外，还有一个不受欢迎的考虑。当多个按钮想要通过颜色区分时，尽量不要使用红、绿、蓝、黄来照顾色盲群体。
在设计按钮时，不要忘记考虑按钮的所有状态。
懒人小 Tips：悬浮状态可以在正常状态的基础上增加 10%黑色蒙层，点击态可以在正常基础上添加 白色蒙层的20%通常用于禁用状态#cccccc 和#999999。
如果一个页面上有很多按钮，而且风格和颜色不容易与其他元素区分，那么点击转换率和用户体验真的不好。
举例来说，下图活动页面左侧的原版是不是在玩找茬消乐？
如果页面上有很多按钮，一定要根据重量级来区分，包括风格、比例、形状和颜色。不要让用户进来上教育课。
Tips：在同一页面下，对于同一类型的圆角按钮，圆角的比例应保持一致。请注意，圆角的大小不一致。不同尺寸的按钮有相同的圆角大小，但比例会有所不同。同一类型的按钮样式应保持一致，而不是圆形。
按钮应该看起来可以点击，并且具有很高的识别度。尝试制作圆形、圆角矩形和直角矩形，这是众所周知的形式。不要为了创新而忽视用户的阅读成本和转换收入。
Tips：一般来说，圆角按钮的识别度高于直角按钮，但直角设计更适合下拉菜单选项。方形直角按钮的小圆角半径控制在 15%以下比较合适，个人喜欢用。 10%。
按钮与信息的排版亲密性和阅读轨迹的舒适性非常重要。在上图的右侧，经过简单的优化，层次差异明显得多。
现在大屏幕手机很流行，我们也应该设计 mini 家庭要仔细考虑，不要让用户做长臂猿运动。重点设计拇指，在手指自然弧形范围内建立最舒适的点击区域，可以提高主人的点击意愿。
麻省理工学院的实验室研究发现，手指垫宽度的平均值是 10~14mm 指尖在之间 8-10mm 之间，这使得 10×10mm 按钮尺寸合理。因此，42-72 像素之间的按钮精度最高。换句话说，最适合用户的最小按钮尺寸是 42 像素，最大按钮尺寸是 72 像素。
此外，还应考虑到单屏幕的高度限制。如果关键排水按钮放置在第二个屏幕甚至长图片的末尾，则大大降低了点击转换。在这种情况下，建议使用底部按钮的形式。底部按钮的优先级在页面中相对较高，将始终粘贴在页面的底部，不受长度的影响。但需要注意的是，底部按钮必须是页面指南中最重要的功能，并需要注意适应性 iPhoneX 和 XS 这种类型的型号。
比如，基于 2X 吸底的常见高度是尺寸 88PX、100PX 和 112PX。在常规模型中，如果吸底高度为 如此适合88PX X 下控件区域应增加尺寸 68PX。
如下图所示，为方便大家识别，吸底区域用绿色标注。
请康康这张 H5 截图，下面的五个按钮，不是对密集恐惧症患者的谋杀吗？
一旦按钮数量增加，就会分流，大大降低点击率，影响用户体验。协调 H5 框架要提前想清楚哪个按钮对业务最重要，其他的都弱化了，层次分明了。
另外需要注意的是，一般来说，按钮中的文案数量不超过 6 个字，2-4 个字为佳。
商品推广活动页面，一般流程是点击商品，进入详细信息页面，然后加入购物车。
但是对于一个页面上有很多商品的情况，如果我看中了十个，我需要点击-购买-返回-点击-购买-返回...在同一页面上至少点击29次购买所有10个商品，整体购买率会降低。
严格选择的活动页面设计非常聪明，点击按钮直接购买，即使购买 20 商品也不会让用户产生来回跳跃的眩晕感。
减少一层漏斗，用户体验飙升。此外，我们需要注意元素之间的密切排版关系，不要让用户花一定的识别成本来选择下一个操作。
现代人的大部分特点是什么？
1. 喜欢薅羊毛
打折？太便宜了，就像白抢一样！有礼物吗？刺激单身多年没收礼物！2. 追求稀缺感
限时？看完还剩几秒钟！专属？我怎么能不拥有这么高贵的东西呢！3. 抗拒被绑架
一定要买吗？老子的钱还轮不到你管！不是猪吗？你是猪！SO，在设计按钮时，我们也应该仔细考虑文案。太平淡，没有兴趣点，刺激用户的负面情绪，会导致数据平淡。
比如下图两版文案，你更愿意点哪一个？
在设计一些商品推广海报时，你也可以携带营销手段来做一些风骚的操作。例如，音频做一张折扣海报，如果你使用图片左侧的设计形式，用户可能仍然认为我是来花钱的，1000元有点贵，不想点进去看。但如果改为图片右侧的设计形式，它会在一定程度上让用户认为我是来捡便宜货的，点击赚钱 999 元，值得，不管买不买，先点。
另外，在 UI 在设计中，按钮经常遇到禁用状态，但在视觉活动设计中，我阿姨不建议你使用，最好让按钮总是可以点击。那么，如果正常情况真的不可用呢？为侃侃举几个例子。
如图所示，当限量优惠券已经完成时，左边的状态会让用户失望地离开。即使有明天开放的文本提醒，也不会有多少人特别设置闹钟，明天准时回来，会造成一定的损失。
但是，如果将已完成的禁用态优化为开启提醒功能，会给用户一种期待感和第二天的提醒 PUSH 它还将为活跃的回流做出一定的贡献。
如图所示，当用户查看他们在活动中的排名时，如果提示活动已经结束，这一波操作可能会在这里闭环。然而，如果优化成分来分享荣誉，用户也可以与主要的社交媒体分享他的收获，这将为活动带来后续的良性沟通，为下一季的活动提供更多的基础，并为下一个性能带来好处。
侃侃之后，很多时候做设计，就是讲究各种细节，探索各种细节对目标实现的影响，而不是简单的做一张图。
这位阿姨不一定很专业。我希望你们这些壮士能多交流和指导。我们一起学习，一起进步，一起成为才华横溢、美丽富有的仙女。
欢迎关注作者微信微信官方账号:「米吸设计」
热评 Li -Jing