浮动操作按钮操作
它浮在页面内容上方,用一个醒目的按钮承载当前界面最重要的主要操作。
- 右下角飘着的圆按钮
- 一直浮在内容上面的加号
- 滚页面时还待在角落的那个按钮
- 悬浮按钮
- 主操作浮钮
- 浮动主按钮
示例
尚无经验证的示例
这条词条暂时只提供平台定义和出处,不用临时动画冒充正式内容。
Web / iOS / Android 对照
Web需自己实现
桌面与移动端现代浏览器
Floating Action Button
也叫 FAB
网页没有原生浮动操作按钮,需要用普通按钮配合定位和层级自行实现。
通常怎么做:使用 button,并保证不会遮住内容、键盘焦点清晰且移动端触控区域足够。
iOS需自己实现
iOS / iPadOS
Floating Action Button
也叫 FAB
苹果没有这种固定悬浮在内容上的标准主按钮,常用导航栏或工具栏操作表达主要任务。
通常怎么做:优先把操作放进导航栏、工具栏或内容本身;确需悬浮时用 Button 自定义。
Android原生支持
Android 手机 / 平板
Floating Action Button
也叫 FAB
Compose Material 3: FloatingActionButton
使用规范
什么时候用
- 当前页面有一个高频且明确的主要操作
什么时候别用
- 同一页面有多个同等重要操作,或按钮会长期遮挡关键内容
容易混淆
给 AI 的提示词
这条词条还没有经过验证的实现提示词。