GIF rakodók vs vektoros animáció: Miért cserélik le a csapatok az animált GIF-eket a felhasználói felületen
Miért illenek rosszul az animált GIF-ek a felhasználói felület betöltőihez és ikonjaihoz, mit érdemes helyette használni (CSS, SVG, Lottie, videó, állapotalapú futtatókörnyezet) és hogyan válasszunk.
Core Takeaway
Az animált GIF-ek legfeljebb 256 színt tartalmazó palettára korlátozódnak, be- és kikapcsolható átlátszósággal rendelkeznek, átméretezve elmosódnak, és nem tudnak reagálni az alkalmazás állapotára. A felhasználói felület betöltőinél és ikonjainál a CSS vagy SVG animáció általában világosabb és élesebb; A Lottie gazdagabb illusztrációkhoz működik; és az állapotalapú futási környezetek, például a ExodeUI vagy a Rive a legjobbak, ha az animációnak változnia kell a betöltés, a siker és a hiba miatt.
Mit tehet a GIF és mit nem?
A MDN képformátum-útmutatója elmagyarázza, hogy minden GIF pixel egy legfeljebb 256 színből álló paletta indexe, és megjegyzi, hogy a régebbi formátumok, például a GIF, gyengén teljesítenek az újabbakhoz, például a WebP-hez és az AVIF-hez képest. A felhasználói felület esetében a gyakorlati problémák a színátmenetek sávosodása, az átlátszó hátterek szaggatott élei, a nagy sűrűségű képernyők elmosódott skálázása, valamint az, hogy nem lehet reagálni arra, amit az alkalmazás csinál.
Mit használjunk helyette
Válassza ki, hogy mit kell tennie az animációnak:
- Egyszerű pörgető vagy impulzus: CSS animáció vagy beépített SVG. Apró, éles és könnyen szüneteltethető a mozgás csökkentése érdekében.
- Illusztrált hurok vagy ikon: Lottie vagy animált SVG. Vektoros, méretezhető, kicsi az egyszerű grafikákhoz.
- Fényképes vagy összetett felvétel: videó (WebM vagy MP4) vagy animált WebP/AVIF, nem GIF.
- Sikerbe vagy hibába torkolló betöltő: állapotalapú futási környezet, például a ExodeUI vagy a Rive, amelyet az alkalmazás állapota vezérel.
A rakodóknak tudniuk kell, hogy mi történik
A GIF ugyanúgy hurkol, akár egy másodpercet, akár egy percet vesz igénybe, és nem válhat pipává a munka végeztével. Az állapotalapú betöltő képes a betöltésről a sikerre vagy hibára lépni, és előrehaladást mutathat, ami sokkal többet mond az embereknek, mint egy pörgő kép.
Megközelíthetőség
A hurkolt GIF-ek önmagukban nem tudják betartani a csökkentett mozgás beállítását. A CSS, SVG és futásidejű animációk szüneteltethetők vagy egyszerűsíthetők, ha a felhasználó kevesebb mozgást kér. Adjon a betöltőknek egy hozzáférhető címkét is, például „Eredmények betöltése”, hogy a képernyőolvasó felhasználói tudják, mi történik.
Kulcs Principle, amit meg kell jegyezni
- A GIF paletták legfeljebb 256 színt tartalmaznak, és rosszul skálázhatók
- Használja a CSS vagy SVG egyszerű rakodógépekhez
- Használja a Lottie-et az illusztrált hurkokhoz, a videót a felvételekhez
- Használjon állapotalapú futási környezetet, ha a betöltésnek sikeresnek vagy hibának kell lennie
- Támogatja a csökkentett mozgást, és adjon hozzá hozzáférhető címkéket
Gyakran Ismételt Kérdések
Források
- Image file type and format guide — MDN webdokumentumok
- lottie-web — GitHub (Airbnb)
- prefers-reduced-motion — MDN webdokumentumok