フローティング アクション ボタン: FAB を使用する場合とアニメーション化する方法

FAB の目的

Material Design 3 では、FAB を画面の主要なアクションとして説明し、1 つの画面に複数の FAB を表示しないようにアドバイスしています。また、画像がすでに主要なアクションを表している場合など、すべての画面で FAB が必要なわけではないことにも注意してください。

バリエーション

マテリアルにはいくつかの形式があります。

• 標準 FAB: 作成などのよく知られたアクションのアイコン。
• 拡張 FAB: アイコンとラベル。目立たないアクションや大きな画面でより明確になります。
• ラージ FAB: 主要なアクションが目立つため、タブレットや展開された折りたたみ式デバイスなどの幅の広いウィンドウに適しています。
• FAB メニュー: FAB では、関連するアクションの短いセットが開きます。

使用しない場合

主要なアクションがすでに明白で、重要なコンテンツやコントロールをカバーする画面では、軽微なアクションや破壊的なアクションの FAB をスキップします。 iOS では、FAB はネイティブ パターンではありません。 iPhone ユーザーにとっては、ツールバーまたはナビゲーション バーのボタンの方が馴染みがあります。

モーション

FAB は、ユーザーがスクロールすると拡張から標準に折りたたまれ、その後再び展開され、タップするとシートまたはメニューに変形することがよくあります。これらの遷移は、アクションがどこへ行ったのか、そのコンテンツがどこから来たのかを説明します。それらを短くし、スクロールするたびに跳ね返ることを避け、モーションの軽減を尊重します。