Yüzen Eylem Düğmeleri: FAB Ne Zaman Kullanılmalı ve Nasıl Animasyon Verilmelidir?
Kayan bir eylem düğmesi yardımcı olduğunda, acıttığında, ekran başına bir FAB, genişletilmiş FAB'ler ve FAB menüleri, kaydırma davranışı ve hareketi.
Ana nokta
Ekrandaki oluşturma veya oluşturma gibi en önemli tek eylem için kayan eylem düğmesini kullanın. Ekran başına yalnızca bir tane gösterin, net bir birincil eylemi olmayan ekranlarda onu atlayın, tek başına simge net olmadığında etiketli genişletilmiş bir FAB kullanın ve genişlediğinde, kaydırıldığında daraltıldığında veya bir menü açıldığında hareketinin amacına uygun olmasını sağlayın.
FAB ne işe yarar?
Material Design 3, FAB'ı ekranın birincil eylemi olarak tanımlar ve tek bir ekranda birden fazla FAB'nin görüntülenmesine karşı tavsiyede bulunur. Ayrıca, örneğin görsellerin zaten birincil eylemleri temsil ettiği durumlarda FAB'lerin her ekranda gerekli olmadığını da belirtiyor.
Varyantlar
Malzeme çeşitli formlar sunar:
- Standart FAB: oluşturma gibi iyi bilinen bir eylemin simgesi.
- Genişletilmiş FAB: simge artı etiket, daha az belirgin eylemler ve daha büyük ekranlar için daha net.
- Büyük FAB: belirgin birincil eylemler için, tabletler ve katlanmamış katlanabilirler gibi daha geniş pencerelere uygundur.
- FAB menüsü: FAB, ilgili eylemlerin kısa bir dizisini açar.
Ne zaman kullanılmamalı
Ana eylemin zaten açık olduğu ve önemli içerik veya kontrolleri kapsayacağı ekranlarda, küçük veya yıkıcı eylemler için FAB'yi atlayın. iOS'te FAB yerel bir kalıp değildir; araç çubuğu veya gezinme çubuğu düğmeleri iPhone kullanıcılarına daha aşinadır.
Hareket
Bir FAB, insanlar kaydırdıkça genellikle genişletilmişten standarda daralır, ardından tekrar genişler ve dokunulduğunda bir sayfaya veya menüye dönüşebilir. Bu geçişler eylemin nereye gittiğini ve içeriğinin nereden geldiğini açıklar. Bunları kısa tutun, her kaydırmada zıplamaktan kaçının ve azaltılmış harekete saygı gösterin.
Hatırlanacak temel ilkeler
- Birincil eylem için ekran başına bir FAB
- Her ekranın bir ekrana ihtiyacı yoktur
- Simge belirgin olmadığında genişletilmiş bir FAB kullanın
- Küçük veya yıkıcı eylemler için FAB'lardan kaçının
- FAB içeriğinin nereden geldiğini göstermek için hareketi kullanın
Sık sorulan sorular
Kaynaklar
- FAB guidelines — Material Design 3