Плаваючі кнопки дій: коли використовувати 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