Загрузчики 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 и анимацию во время выполнения можно приостанавливать или упрощать, когда пользователь просит меньше движения. Также дайте загрузчикам доступную метку, например «Загрузка результатов», чтобы пользователи программ чтения с экрана знали, что происходит.
Ключевые принципы
- Палитры GIF содержат не более 256 цветов и плохо масштабируются.
- Используйте CSS или SVG для простых загрузчиков.
- Используйте Lottie для иллюстрированных циклов, видео для отснятого материала.
- Используйте среду выполнения на основе состояния, когда загрузка должна завершиться успехом или ошибкой.
- Поддержка ограниченного движения и добавление доступных меток
Частые вопросы
Источники
- Image file type and format guide — MDN Веб-документы
- lottie-web — Гитхаб (Airbnb)
- prefers-reduced-motion — MDN Веб-документы