GIF зареждащи устройства срещу векторна анимация: Защо екипите заменят анимираните GIF в потребителския интерфейс
Защо анимираните GIF не са подходящи за зареждащи устройства и икони на потребителския интерфейс, какво да използвате вместо това (CSS, SVG, Lottie, видео, базирани на състоянието времена за изпълнение) и как да изберете.
Ядро за вкъщи
Анимираните GIF са ограничени до палитри от най-много 256 цвята, имат включена или изключена прозрачност, размазват се при мащабиране и не могат да реагират на състоянието на приложението. За зареждащи потребителски интерфейси и икони, CSS или SVG анимацията обикновено е по-лека и по-отчетлива; Lottie работи за по-богати илюстрации; и базирани на състоянието времена за изпълнение като ExodeUI или Rive са най-добри, когато анимацията трябва да се променя при зареждане, успех и грешка.
Какво може и какво не може да прави GIF
Ръководството за формат на изображението на MDN обяснява, че всеки GIF пиксел е индекс в палитра от най-много 256 цвята и отбелязва, че по-старите формати като GIF се представят зле в сравнение с по-новите като WebP и AVIF. За потребителския интерфейс практическите проблеми са ивици в градиенти, назъбени ръбове на прозрачен фон, замъглено мащабиране на екрани с висока плътност и никакъв начин да се отговори на това, което приложението прави.
Какво да използвате вместо това
Изберете какво трябва да направи анимацията:
- Обикновен спинър или импулс: CSS анимация или вграден SVG. Малък, остър и лесен за пауза за намалено движение.
- Илюстриран цикъл или икона: Lottie или анимиран SVG. Вектор, мащабируем, малък за прости произведения на изкуството.
- Фотографски или сложни кадри: видео (WebM или MP4) или анимиран WebP/AVIF, не GIF.
- Зареждащ инструмент, който се превръща в успех или грешка: базирано на състоянието време за изпълнение, като ExodeUI или Rive, управлявано от състоянието на приложението ви.
Товарачите трябва да знаят какво се случва
GIF зацикля по същия начин, независимо дали заявката отнема една секунда или една минута, и не може да се превърне в отметка, когато работата е свършена. Базиран на състоянието зареждащ модул може да премине от зареждане към успех или грешка и да покаже напредъка, което казва на хората много повече от въртящо се изображение.
Достъпност
Зациклящите GIF не могат сами да спазват настройката за намалено движение. CSS, SVG и анимациите по време на изпълнение могат да бъдат поставени на пауза или опростени, когато потребителят поиска по-малко движение. Също така дайте на зареждащите устройства достъпен етикет, като например „Зареждане на резултати“, така че потребителите на екранни четци да знаят какво се случва.
Ключове Principle, които трябва да запомните
- GIF палитрите съдържат най-много 256 цвята и се мащабират лошо
- Използвайте CSS или SVG за прости зареждащи устройства
- Използвайте Lottie за илюстрирани цикли, видео за кадри
- Използвайте базирано на състоянието време за изпълнение, когато зареждането трябва да се превърне в успех или грешка
- Поддържайте намалено движение и добавете достъпни етикети
Често задавани въпроси
Източници
- Image file type and format guide — MDN Уеб документи
- lottie-web — GitHub (Airbnb)
- prefers-reduced-motion — MDN Уеб документи