← 返回 Web 词条

浮动操作按钮

Web需自己实现

Web 原生没有这个

网页没有原生浮动操作按钮,需要用普通按钮配合定位和层级自行实现。

通常怎么做:使用 button,并保证不会遮住内容、键盘焦点清晰且移动端触控区域足够。

适用范围:桌面与移动端现代浏览器

社区一般叫它 Floating Action Button · FAB

它浮在页面内容上方,用一个醒目的按钮承载当前界面最重要的主要操作。

  • 右下角飘着的圆按钮
  • 一直浮在内容上面的加号
  • 滚页面时还待在角落的那个按钮
  • 悬浮按钮
  • 主操作浮钮
  • 浮动主按钮

其他平台的相似实现

iOS需自己实现
该平台没有原生实现

苹果没有这种固定悬浮在内容上的标准主按钮,常用导航栏或工具栏操作表达主要任务。

看 iOS 视角 →

使用规范

什么时候用

  • 当前页面有一个高频且明确的主要操作

什么时候别用

  • 同一页面有多个同等重要操作,或按钮会长期遮挡关键内容

容易混淆

Web 出处

查看 Web / iOS / Android 完整对照 →