GIF-laders versus vectoranimatie: waarom teams geanimeerde GIF's in de gebruikersinterface vervangen
Waarom geanimeerde GIF's slecht geschikt zijn voor UI-laders en pictogrammen, wat u in plaats daarvan kunt gebruiken (CSS, SVG, Lottie, video, op status gebaseerde runtimes) en hoe u moet kiezen.
Kern afhaalmaaltijd
Geanimeerde GIF's zijn beperkt tot paletten van maximaal 256 kleuren, hebben aan- of uittransparantie, vervagen wanneer ze worden geschaald en kunnen niet reageren op de app-status. Voor UI-laders en pictogrammen is de CSS- of SVG-animatie meestal lichter en scherper; Lottie werkt voor rijkere illustraties; en op status gebaseerde runtimes zoals ExodeUI of Rive zijn het beste wanneer de animatie moet veranderen bij laden, succes en fouten.
Wat GIF wel en niet kan doen
De beeldformaatgids van MDN legt uit dat elke GIF-pixel een index is in een palet van maximaal 256 kleuren, en merkt op dat oudere formaten zoals GIF slecht presteren in vergelijking met nieuwere zoals WebP en AVIF. Voor de gebruikersinterface zijn de praktische problemen de vorming van strepen in gradiënten, gekartelde randen op transparante achtergronden, wazige schaling op schermen met hoge dichtheid en geen manier om te reageren op wat de app doet.
Wat in plaats daarvan te gebruiken
Kies op basis van wat de animatie moet doen:
- Eenvoudige spinner of puls: CSS-animatie of een inline SVG. Klein, scherp en gemakkelijk te pauzeren voor minder beweging.
- Geïllustreerde lus of pictogram: Lottie of geanimeerde SVG. Vector, schaalbaar, klein voor eenvoudig artwork.
- Fotografisch of complex beeldmateriaal: video (WebM of MP4) of geanimeerde WebP/AVIF, niet GIF.
- Lader die in succes of fout verandert: een op status gebaseerde runtime zoals ExodeUI of Rive, aangestuurd door de status van uw app.
Laders moeten weten wat er gebeurt
Een GIF loopt op dezelfde manier door, ongeacht of het verzoek één seconde of één minuut duurt, en het kan geen vinkje worden als het werk klaar is. Een op status gebaseerde lader kan van laden naar succes of fout gaan en de voortgang laten zien, wat mensen veel meer vertelt dan een ronddraaiend beeld.
Toegankelijkheid
GIF's in een lus kunnen de instelling voor verminderde beweging op zichzelf niet respecteren. CSS-, SVG- en runtime-animaties kunnen worden gepauzeerd of vereenvoudigd wanneer de gebruiker om minder beweging vraagt. Geef laders ook een toegankelijk label, zoals 'Resultaten laden', zodat gebruikers van schermlezers weten wat er gebeurt.
Toets Principles in om te onthouden
- GIF-paletten bevatten maximaal 256 kleuren en zijn slecht schaalbaar
- Gebruik CSS of SVG voor eenvoudige laders
- Gebruik Lottie voor geïllustreerde loops, video voor beeldmateriaal
- Gebruik een op status gebaseerde runtime wanneer het laden moet uitmonden in een succes of een fout
- Ondersteun minder beweging en voeg toegankelijke labels toe
Veelgestelde vragen
Bronnen
- Image file type and format guide — MDN Webdocumenten
- lottie-web — GitHub (Airbnb)
- prefers-reduced-motion — MDN Webdocumenten