Перед початком
Запишіть розміри майданчика та обмеження файлу. Поділіть повідомлення на початок, дію й результат. Зміст має бути зрозумілим навіть із одного кадру.
Текстове пояснення схеми
Завдання → Процес → Спокійний результат. Три кадри: завдання, короткий показ процесу, готовий результат. Якщо головна пропозиція міститься у фіналі, він має залишатися довше за перехід.
Як зробити
- Створіть шари або кадри однакового розміру. Збережіть сітку, написи й положення кнопки, щоб читач не шукав повідомлення заново.
- Дайте достатньо часу для читання. Уникайте спалахів і частого чергування контрастних кадрів. Для власної сторінки передбачте нерухомий варіант за reduced motion.
- Експортуйте й відкрийте готовий GIF у браузері. Перевірте весь цикл і вагу. Для довгої фотографічної анімації порівняйте відеоформат: GIF не завжди економний.
Розгляньмо приклад
Три кадри: завдання, короткий показ процесу, готовий результат. Якщо головна пропозиція міститься у фіналі, він має залишатися довше за перехід.
Перевірте результат
Рух не перекриває текст, нерухома версія зберігає зміст, потрібна область посилання працює. Важливі відомості доступні звичайним текстом поруч.
Де легко помилитися
Нескінченне блимання не доводить залученості. Тривалий автоматичний рух на власній сторінці потребує доступної зупинки, якщо немає застосовного винятку.
Джерела й продовження
- W3C — Pause, Stop, Hide
- Как сделать анимированный GIF баннер самостоятельно. Пошаговая инструкция — 2008-11-29 (RU)
Схема й приклади: редакція Web Article. Схема пояснює принцип і не є знімком інтерфейсу або результатом випробування програми.