大厂常用的幽灵按钮，设计起来有点头疼

你知道什么是幽灵按钮（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