一、什么是幽灵按钮
幽灵按钮（Ghost Button）是界面中隐藏背景色与边框的轻量化按钮形式，默认仅显示文字或图标，鼠标悬停 / 触屏按下时，轮廓边框才清晰显现，本质是为文字链接、图标按钮、导航项添加透明热区边框的交互组件。
该设计概念早在十年前于海外提出，2018 年谷歌 Material Design 2 将其纳入规范，Figma 更是大范围应用；近年在国内大厂设计系统引领下，逐渐成为导航栏、工具栏的主流样式。
二、幽灵按钮的核心优势
- 界面轻量化，降低视觉负担
工具栏、导航栏密集排布图标 / 文字时，幽灵按钮无冗余底色与边框，保持界面简洁清爽，避免视觉杂乱。
- 扩大操作热区，提升交互准确率
解决纯文字 / 图标点击区域过小、易误触的问题，设计阶段明确热区范围，前端可直接落地，适配触摸屏操作习惯。
- 清晰视觉反馈，强化操作感知
悬停 / 按下时边框显现，直观展示实际可点击范围，比单纯变色更醒目，让用户操作更有安全感。
三、幽灵按钮的落地痛点
- 设计成本与感知不对等
视觉效果极简，但需精细化调整边框、间距，付出双倍设计成本，易被误解为 “工作量不足”。
- 存量产品改造成本高
替换现有图标 / 文字链接为幽灵按钮，需重构层级、间距结构，易影响页面其他区域，不适合大幅改动框架。
- 设计精度要求极高
需单独配置按钮边框，精准把控内边距、组件间距，打破传统对称、对齐的设计逻辑，调试难度大。
四、幽灵按钮的核心设计难点
- 视觉对称≠实际边距对称
文字 + 图标组合的按钮，若默认边距完全对称，图标侧会显空旷；需微调边距，让视觉平衡优先于数值对称。
- 视觉对齐≠实际位置对齐
文字与图标看似对齐，悬停显示边框后会出现偏移；需刻意调整位置，保证默认态整洁、交互态规整。
五、应用现状与大厂案例
幽灵按钮在海外产品中已普及，国内虽未全面覆盖，但在AntDesign、ArcoDesign、TDesign等主流设计系统中广泛应用，是轻量化界面的核心组件之一，尤其适合导航、工具栏等高频操作区域。
