Плаващи бутони за действие: Кога да използвате 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