06 · Дизайн

Анимация интерфейсов

Используйте движение, чтобы объяснять переходы, действия и состояния интерфейса.

Пять прозрачных кадров с последовательными положениями синего круга.

Кому подойдёт

UI-дизайнерам и разработчикам, знакомым с основами композиции и устройством интерфейсов.

Что вы сможете

  • Выбирать длительность и кривую движения под задачу.
  • Связывать состояния через понятные переходы и обратную связь.
  • Описывать анимацию для реализации с учётом производительности и reduced motion.

Программа

  1. 01

    Логика движения

    Причина перехода, направление внимания и непрерывность объектов.

  2. 02

    Время и характер

    Длительность, задержки, ускорение и согласованность нескольких элементов.

  3. 03

    Состояния интерфейса

    Открытие панелей, отклик кнопок, загрузка, ошибки и подтверждение.

  4. 04

    Прототип и спецификация

    Сборка сценария, ограничения анимации и доступная версия без движения.

Формат

Практические этюды движения и итоговый интерактивный прототип.

Длительность
6 недель
Нагрузка
4–6 часов в неделю
Уровень
Есть базовые знания
Итоговая работа
Прототип одного сценария с набором описанных переходов и состояний.