大厂常用的幽灵按钮，设计起来有点头疼
· 2026-09-05 20:41:58
你知道什么是常用幽灵按钮（Ghost Buttons）吗？
就是表面看起来像是简单的文字或图标 ，但鼠标悬停或触屏按下时 ，灵按按钮轮廓才会显现出来。钮设
你可以理解成传统按钮隐藏背景色和边框 。有点但实际更多的头疼情况是，给文本链接/图标按钮/导航加上一圈看不清的大厂的幽透明边框 。
这个词其实十年前就在外网出现了，灵按谷歌在2018年发布的钮设 Material Design 2 里 ，也包含了这种按钮样式 。计起
Figma里更是有点大面积的使用这种按钮 ：
但是头疼直到近几年，幽灵按钮才在国内变得常见起来（主要是大厂的幽大厂用得多一些，文章末尾有案例） 。
为什么要设计这么“拧巴”的幽灵按钮呢 ？因为：
一 、幽灵按钮的3大优点
1. 按钮轻量化展示
例如工具栏上的一堆图标 ，如果每个都把背景框展示出来 ，那就太复杂了。
2. 扩大文字/图标操作的热区
如果只有图标和文字的可见区域能点击 ，那就很容易点错了 。尤其对于触摸屏来说 ，前端通常需要将可点击热区设置得比视觉区域更大。但谁知道前端有没有处理 ？如果一开始就是按照幽灵按钮来设计 ，那么前端就必须把更大的热区做出来了 。
3. 明确的视觉反馈
即便把热区做得比可见区域大 ，如果用户看不出来 ，操作时还是心里没底 。
而幽灵按钮呢 ，可以在让用户在悬停或按下时 ，观察到实际的热区范围，心理更有底 。
而且这种按钮框的显现 ，比图标/文字换个颜色更加醒目 。
这优势也不弱了 ，为什么幽灵按钮并没有特别普及呢 ？主要是因为：
二 、幽灵按钮的问题
1. 费力不讨好的风险
在内卷激烈的工作环境，自己明明只出了2分力 ，都恨不得包装成9分 。
而做这种幽灵按钮 ，最终页面看起来很简单 ，实际却付出了2倍的成本。
如果遇到不细致的领导 ，可能还觉得你工作效率不行 ，那就太吃亏了 。还不如做点酷炫无脑的方案，至少工作考评容易糊弄 。
2. 谁也不想大改框架
如果是已经搭建好的产品 ，UI设计可以换皮或改局部交互，但如果想要大幅修改页面框架 ，那就很难了 。
把图标/文本链接换成幽灵按钮 ，虽然表面看似没什么变化 ，但层级结构和间距都要换一套 。替换的过程中，也难保不影响到页面的其它区域 。
幽灵按钮虽然有不少优点，并不值得为此大动干戈 。
3. 设计难度高
以往做一个图标/文本链接 ，直接贴一个图标进来，或写一行字 ，然后加个跳转链接就好 。
改成幽灵按钮的话 ，得每个都加一个按钮框，还要考虑内边距 、以及按钮之间的间距 ，麻烦多了 。
麻烦还是小事 ，更大的问题是 ，设计幽灵按钮的思路 ，跟以往会有很大的差异 。以往的哪些对称 、对齐的思路，都不能用了 。
接下来 ，我就主要从2个角度出发分享一下：
三、幽灵按钮的设计难点
1. 表面边距对称 ，实则没有
下图这种左侧标题右侧图标 ，是很常见的样式 。
看似两侧内边距是对称的 ，鼠标悬停后发现 ，图标侧的实际内边距要小一些 。
为什么要这么设计呢 ？如果不这么做的话 ，默认状态就会变成下图这样，显得图标那一侧很空 。
2. 表面上下对齐 ，实则没有
下图文字和图标看上去是对齐了 ，但鼠标悬停后发现 ，实际上并没有对齐 。
如果让他们实际上对齐 ，默认态看起来就会很混乱 。
总结一下
幽灵按钮在海外用得更多 ，像是Figma里就是大范围使用的典型案例 。
幽灵按钮目前在国内的产品里 ，尚未大范围的使用 。但是在国产大厂设计系统的引领下 ，幽灵按钮的运用已经越来越广泛 。尤其在导航栏和工具栏设计中 ，已经算是比较常见的样式了。
最后给大家展示几个大厂设计系统的幽灵按钮运用案例 ：
AntDesign
AntDesign
ArcoDesign
TDesign
文章推荐：
长时无间手游崔三娘禀赋推荐最新 长时无间手游崔三娘禀赋最新攻略
剑与远征出发2024最新铁汉强度榜一览 剑与远征出发铁汉强度排行榜
弹壳特攻队11月礼包兑换码是甚么 2024最新立冬兑换码一览
CORTIS日本初度孤单扮演往日开跑 ！3场全席售罄 人气再证
三角洲行动单方面沙场突击步枪强度榜 三角洲行动单方面沙场突击步枪选择推荐
2024王者名望挑衅者杯赛制轨则是甚么 王者名望2024挑衅者杯赛制轨则一览
《周刊文春》再爆重磅 ！三山凌辉婚内出轨 与已婚花乃玛丽亚酒店密会遭抓包
王者名望王昭君fmvp皮肤甚么时辰上线 王者名望王昭君fmvp皮肤上线时分