使用者體驗模式6 分鐘閱讀·Updated 2026 年 10 月·ExodeUI 團隊
浮動操作按鈕：何時使用 FAB 以及如何為其設定動畫
當浮動操作按鈕有幫助時，當它有害時，每個螢幕一個 FAB、擴展 FAB 和 FAB 選單、滾動行為和運動。
直接總結與定義
核心要點
使用浮動操作按鈕來執行螢幕上最重要的操作，例如撰寫或建立。每個螢幕僅顯示一個，在沒有明確主要操作的螢幕上跳過它，當圖示不清楚時使用標籤的擴展 FAB，並在展開、滾動折疊或打開選單時保持其動作有目的。
FAB 的用途是什麼
Material Design 3 將 FAB 描述為螢幕的主要操作，並建議不要在一個螢幕上顯示多個 FAB。它還指出，並非每個螢幕都需要 FAB，例如當影像已經代表主要操作時。
變體
材料提供了多種形式：
- 標準 FAB：眾所周知的操作（例如撰寫）的圖示。
- 擴展 FAB：圖示加標籤，對於不太明顯的操作和較大的螢幕上更清晰。
- 大型 FAB：用於突出的主要操作，適合更寬的窗口，例如平板電腦和展開的可折疊設備。
- FAB 選單：FAB 開啟一組簡短的相關操作。
何時不使用一個
在主要操作已經很明顯並且覆蓋重要內容或控制的螢幕上，跳過 FAB 進行次要或破壞性操作。在 iOS 上，FAB 不是本機模式； iPhone 使用者更熟悉工具列或導覽列按鈕。
運動
當人們滾動時，FAB 通常會從擴展折疊到標準，然後再次展開，並且在點擊時可以轉換為工作表或選單。這些轉換解釋了動作的去向及其內容的來源。保持它們簡短，避免在每個滾動條上彈跳，並尊重減少的運動。
要記住的關鍵 Principle
- 每個螢幕一個 FAB，用於主要操作
- 並非每個螢幕都需要一個
- 當圖示不明顯時使用擴充FAB
- 避免 FAB 進行輕微或破壞性行為
- 使用動作來顯示 FAB 內容的來源
常見問題解答
來源
- FAB guidelines — Material Design 3