Перед началом
Запишите размеры площадки и ограничения файла. Разделите сообщение на начало, действие и результат. Смысл должен быть понятен и человеку, который увидел только один кадр.
Текстовое объяснение схемы
Задача → Показ процесса → Спокойный результат. Три кадра: задача, небольшой показ процесса, готовый результат. Если последняя фраза содержит главное предложение, она должна оставаться на экране дольше короткого перехода.
Как сделать
- Создайте слои или кадры одного размера. Оставьте неизменными сетку, подписи и положение кнопки. Не заставляйте читателя каждый раз искать сообщение заново.
- Настройте длительности так, чтобы текст можно было прочитать. Избегайте вспышек и частого чередования контрастных кадров. Для собственной страницы предусмотрите статичный вариант при предпочтении reduced motion.
- Экспортируйте и откройте готовый GIF в браузере. Проверьте полный цикл и вес файла. Для длинной фотографической анимации сравните видеоформат; GIF не всегда экономичен.
Разберём пример
Три кадра: задача, небольшой показ процесса, готовый результат. Если последняя фраза содержит главное предложение, она должна оставаться на экране дольше короткого перехода.
Проверьте результат
Анимация не перекрывает текст; неподвижная версия сохраняет смысл; ссылка работает по всей предназначенной области. Значимые сведения доступны обычным текстом рядом.
Где легко ошибиться
Бесконечное мигание не доказывает вовлечённость. На собственной странице длительное автоматическое движение требует доступного способа остановки, если нет применимого исключения.
Источники и продолжение
- W3C — Pause, Stop, Hide
- Как сделать анимированный GIF баннер самостоятельно. Пошаговая инструкция — 2008-11-29 (RU)
Схема и примеры: редакция Web Article. Схема объясняет принцип и не является снимком интерфейса или результатом испытания программы.