Плавающие кнопки действий: когда использовать FAB и как его анимировать
Когда помогает плавающая кнопка действия, когда мешает — по одной FAB на экран, расширенные FAB и меню FAB, поведение прокрутки и движение.
Главное
Используйте плавающую кнопку действия для самого важного действия на экране, например создания или создания. Показывайте только один значок на экране, пропускайте его на экранах без четкого основного действия, используйте расширенный FAB с меткой, когда значок сам по себе неясен, и сохраняйте целенаправленное движение, когда он расширяется, сворачивается при прокрутке или открывает меню.
Для чего нужен FAB
Material Design 3 описывает FAB как основное действие экрана и не рекомендует отображать несколько FAB на одном экране. Он также отмечает, что FAB не нужны на каждом экране, например, когда изображения уже представляют основные действия.
Варианты
Материал предлагает несколько форм:
- Стандартный FAB: значок известного действия, например создания сообщения.
- Расширенный FAB: значок и метка, более четкие для менее очевидных действий и на больших экранах.
- Большой FAB: для заметных основных действий, подходит для более широких окон, таких как планшеты и развернутые складные устройства.
- Меню FAB: FAB открывает краткий набор связанных действий.
Когда не следует использовать один
Пропустите FAB для незначительных или деструктивных действий на экранах, где основное действие уже очевидно и где оно затрагивает важный контент или элементы управления. В iOS FAB не является собственным шаблоном; Кнопки панели инструментов или панели навигации более знакомы пользователям iPhone.
Движение
FAB часто сворачивается из расширенного состояния в стандартное при прокрутке, затем снова расширяется и может трансформироваться в лист или меню при нажатии. Эти переходы объясняют, куда пошло действие и откуда взялось его содержание. Держите их короткими, избегайте подпрыгивания при каждом прокрутке и соблюдайте ограниченное движение.
Ключевые принципы
- Один FAB на экран для основного действия.
- Не каждому экрану нужен такой
- Используйте расширенный FAB, когда значок неочевиден.
- Избегайте FAB за незначительные или деструктивные действия.
- Используйте движение, чтобы показать, откуда берется контент FAB.
Частые вопросы
Источники
- FAB guidelines — Material Design 3