Programy ładujące GIF a animacja wektorowa: dlaczego zespoły zastępują animowane GIF w interfejsie użytkownika
Dlaczego animowane GIF nie nadają się do modułów ładujących i ikon interfejsu użytkownika, czego zamiast tego użyć (CSS, SVG, Lottie, wideo, środowiska wykonawcze oparte na stanach) i jak wybrać.
Rdzeń na wynos
Animowane modele GIF są ograniczone do palet maksymalnie 256 kolorów, mają włączoną lub wyłączoną przezroczystość, są rozmyte przy skalowaniu i nie mogą reagować na stan aplikacji. W przypadku modułów ładujących i ikon interfejsu użytkownika animacja CSS lub SVG jest zwykle jaśniejsza i ostrzejsza; Lottie działa w przypadku bogatszych ilustracji; a środowiska wykonawcze oparte na stanach, takie jak ExodeUI lub Rive, są najlepsze, gdy animacja musi się zmieniać wraz z ładowaniem, sukcesem lub błędem.
Co GIF może, a czego nie może zrobić
Przewodnik po formacie obrazu MDN wyjaśnia, że każdy piksel GIF jest indeksem palety maksymalnie 256 kolorów i zauważa, że starsze formaty, takie jak GIF, działają słabo w porównaniu z nowszymi, takimi jak WebP i AVIF. W przypadku interfejsu użytkownika praktyczne problemy obejmują gradienty, postrzępione krawędzie na przezroczystym tle, rozmyte skalowanie na ekranach o dużej gęstości i brak możliwości reakcji na to, co robi aplikacja.
Czego użyć zamiast tego
Wybierz, co ma robić animacja:
- Prosty spinner lub puls: animacja CSS lub inline SVG. Mały, ostry i łatwy do zatrzymania w celu ograniczenia ruchu.
- Ilustrowana pętla lub ikona: Lottie lub animowany SVG. Wektor, skalowalny, mały do prostych grafik.
- Materiał fotograficzny lub złożony: wideo (WebM lub MP4) lub animowany WebP/AVIF, a nie GIF.
- Moduł ładujący, który kończy się sukcesem lub błędem: środowisko wykonawcze oparte na stanach, takie jak ExodeUI lub Rive, zależne od stanu aplikacji.
Ładowacze powinni wiedzieć, co się dzieje
GIF wykonuje pętlę w ten sam sposób, niezależnie od tego, czy żądanie zajmuje jedną sekundę, czy jedną minutę, i nie może stać się znacznikiem wyboru po zakończeniu pracy. Program ładujący oparty na stanach może przejść od ładowania do sukcesu lub błędu i pokazać postęp, co mówi ludziom znacznie więcej niż obracający się obraz.
Dostępność
Zapętlające się GIF nie mogą same przestrzegać ustawienia ograniczonego ruchu. Animacje CSS, SVG i środowiska wykonawczego można wstrzymywać lub upraszczać, gdy użytkownik poprosi o ograniczenie ruchu. Nadaj także programom ładującym przystępną etykietę, np. „Wyniki ładowania”, aby użytkownicy czytników ekranu wiedzieli, co się dzieje.
Klucz Principles do zapamiętania
- Palety GIF mieszczą maksymalnie 256 kolorów i są słabo skalowane
- Do prostych ładowarek użyj CSS lub SVG
- Użyj Lottie do ilustrowanych pętli, wideo do materiału filmowego
- Użyj środowiska wykonawczego opartego na stanach, gdy ładowanie musi zakończyć się sukcesem lub błędem
- Obsługuj ograniczenie ruchu i dodawaj dostępne etykiety
Często zadawane pytania
Źródła
- Image file type and format guide — Dokumenty internetowe MDN
- lottie-web — GitHub (Airbnb)
- prefers-reduced-motion — Dokumenty internetowe MDN