Завантажувачі 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 Веб-документи