Kelluvat toimintapainikkeet: Milloin FAB:ia käytetään ja miten se animoidaan
Kun kelluva toimintopainike auttaa, kun se sattuu, yksi FAB per näyttö, laajennetut FAB- ja FAB-valikot, vieritys ja liike.
Core Takeaway
Käytä kelluvaa toimintopainiketta näytön tärkeimpään yksittäiseen toimintoon, kuten kirjoittamiseen tai luomiseen. Näytä vain yksi näyttöä kohden, ohita se näytöillä ilman selkeää ensisijaista toimintoa, käytä laajennettua FAB-toimintoa, jossa on otsikko, kun kuvake yksinään on epäselvä, ja pidä sen liike tarkoituksenmukaisena, kun se laajenee, kutistuu vierittäessä tai avaa valikon.
Mihin FAB on tarkoitettu
Material Design 3 kuvaa FAB:n näytön ensisijaisena toimintona ja suosittelee olemaan näyttämättä useita FAB:ita yhdellä näytöllä. Se huomauttaa myös, että FAB:ita ei tarvita jokaisessa näytössä, esimerkiksi kun kuvat edustavat jo ensisijaisia toimintoja.
Vaihtoehdot
Materiaali tarjoaa useita muotoja:
- Normaali FAB: kuvake tunnetulle toiminnolle, kuten kirjoittamiselle.
- Laajennettu FAB: kuvake ja etiketti, selkeämpi vähemmän ilmeisiin toimiin ja suuremmilla näytöillä.
- Suuri FAB: Näkyviin ensisijaisiin toimintoihin, sopii leveämpiin ikkunoihin, kuten tabletteihin ja taitettaviin ikkunoihin.
- FAB-valikko: FAB avaa lyhyen joukon liittyviä toimintoja.
Milloin sellaista ei saa käyttää
Ohita FAB vähäisissä tai tuhoavissa toimissa näytöillä, joissa päätoiminto on jo ilmeinen ja joissa se kattaisi tärkeän sisällön tai hallintalaitteet. On iOS, a FAB is not a native pattern; työkalupalkin tai navigointipalkin painikkeet ovat tutumpia iPhonen käyttäjille.
Liike
FAB kutistuu usein laajennetusta vakioksi, kun ihmiset rullaavat, laajenevat sitten uudelleen ja voivat muuttua taulukoksi tai valikoksi napauttamalla. Nämä siirtymät selittävät, mihin toiminta meni ja mistä sen sisältö tuli. Pidä ne lyhyinä, vältä pomppimista jokaisessa rullauksessa ja kunnioita vähentynyttä liikettä.
Avain Principles muistettavat
- Yksi FAB näyttöä kohden ensisijaista toimintaa varten
- Jokainen näyttö ei tarvitse sitä
- Käytä laajennettua FAB:ta, kun kuvake ei ole ilmeinen
- Vältä FAB:ita vähäisissä tai tuhoisissa toimissa
- Käytä liikettä näyttääksesi, mistä FAB:n sisältö tulee
Usein kysytyt kysymykset
Lähteet
- FAB guidelines — Material Design 3