Моушен-дизайн и анимация интерфейсов
Движение со смыслом: переходы, реакции и жизнь между состояниями — один язык движения на весь продукт.
04 05 service 4 of 5 in Дизайн и визуал
Что входит
- Язык движения: тайминги, кривые и иерархия заданы один раз на весь продукт
- Переходы интерфейса, объясняющие, что только что произошло
- Микровзаимодействия в тех состояниях, которых касаются чаще всего
- Сюжет, ведомый прокруткой, там, где он заслуживает внимания, а не крадёт его
- Отдаётся как Lottie, видео или код — тем способом, который ваши разработчики смогут внедрить
- Поведение при отключённой анимации спроектировано, а не оставлено на волю случая
Кому подходит
- Продукты, которые выглядят статичными рядом с конкурентами
- Команды, где анимации добавляли по случаю и теперь они спорят друг с другом
- Запуски, которым нужен сайт, запоминающийся после первой прокрутки
Коротко
Движение в интерфейсе — не украшение: оно объясняет, что только что произошло, показывает, откуда что появилось и куда делось, и ведёт внимание. Мы задаём язык движения один раз на весь продукт — тайминги, кривые и иерархию — и проектируем переходы, микровзаимодействия и, где это заслуживает внимания, сюжет при прокрутке. Отдаём движение так, как его смогут внедрить ваши разработчики: кодом, Lottie или видео. А поведение при отключённой анимации спроектировано, а не оставлено на волю случая. Цена считается по часам.
Зачем интерфейсу движение
Хорошее движение замечают, только когда его нет: интерфейс вдруг кажется резким и непонятным.
-
01
Объясняет изменения
Куда делся элемент после удаления, откуда появилось новое окно.
-
02
Подтверждает действия
Кнопка реагирует на нажатие — человек знает, что клик сработал.
-
03
Ведёт внимание
Взгляд идёт туда, где движется, — так выделяется важное.
-
04
Скрашивает ожидание
Понятное состояние загрузки ощущается короче, чем замерший экран.
-
05
Даёт характер
Спокойное или энергичное движение — часть бренда, как и цвет.
-
06
Рассказывает историю
Сцены при прокрутке объясняют сложный продукт шаг за шагом.
Язык движения: тайминги и кривые
Общепринятые ориентиры, от которых настраивается язык конкретного продукта. Правило простое: чем меньше изменение, тем быстрее движение.
- 100–200 мс
- Микровзаимодействия: кнопка, переключатель, наведение.
- 200–400 мс
- Смена состояний: открытие меню, карточки, подсказки.
- 300–500 мс
- Крупные переходы: между экранами и страницами.
- По сценарию
- Бренд-анимация и сюжетные сцены — сколько нужно идее, но не блокируя человека.
- Замедление в конце
- Для появляющихся элементов: быстрый старт, мягкая остановка.
- Ускорение в конце
- Для исчезающих элементов: разгоняются и уходят.
Где работает движение
От реакции кнопки до бренд-ролика — у каждого места своя задача и свой темп.
-
01
Переходы интерфейса
Между экранами и состояниями — чтобы человек не терял нить.
-
02
Микровзаимодействия
Там, чего касаются чаще всего: кнопки, формы, переключатели, лайки.
-
03
Загрузка и ожидание
Заготовки и прогресс вместо замершего экрана.
-
04
Сюжет при прокрутке
Там, где он заслуживает внимания, а не крадёт его, — запуски, сложные продукты.
-
05
Анимация логотипа
Знак в движении для заставки ролика, экрана запуска приложения и соцсетей.
-
06
Ролики для соцсетей
Короткие объясняющие ролики и анимация продукта в стиле бренда.
Код, Lottie или видео: как передаём движение
Формат выбирается по тому, где будет жить движение и кто будет его внедрять.
| Критерий | Код | Lottie | Видео |
|---|---|---|---|
| Что это | CSS и JavaScript прямо в интерфейсе | файл векторной анимации, который проигрывает плеер | заранее отрисованный ролик |
| Лучше всего для | переходов и микровзаимодействий | иллюстраций, иконок, анимации логотипа | сложных сцен и соцсетей |
| Реагирует на пользователя | полностью | частично | нет |
| Вес | самый лёгкий | лёгкий | тяжёлый — сжимается и грузится лениво |
Когда движение отключено
У части людей сильное движение вызывает головокружение, и они отключают его в системе. Поведение на этот случай тоже проектируется.
-
01
Смысл остаётся
Переход становится мягким проявлением — человек всё равно видит, что изменилось.
-
02
Без параллакса и зума
Крупные перемещения по экрану отключаются первыми.
-
03
Без автозапуска
Ролики и анимации ждут нажатия.
-
04
Содержание на месте
Ничего важного не спрятано внутри анимации.
Частые ошибки в моушене
-
Анимации по случаю
У каждой своя скорость и кривая — и они спорят друг с другом.
-
Слишком медленно
Интерфейс, который заставляет ждать свои анимации, раздражает уже к десятому разу.
-
Движение ради движения
Если оно не объясняет и не ведёт, оно отвлекает.
-
Тяжёлые эффекты на телефоне
То, что плавно на мощном компьютере, дёргается на обычном телефоне.
-
Игнорировать «уменьшение движения»
Настройка в системе существует не просто так.
Вопросы о моушен-дизайне
Сколько стоит моушен-дизайн?
Цена считается по часам и зависит от числа переходов, сцен и их сложности. Сумма фиксируется до старта, оценка — бесплатно.
Не замедлит ли анимация сайт?
Нет, если сделать правильно: анимируются только сдвиг и прозрачность, тяжёлые сцены грузятся по требованию и останавливаются вне экрана.
В каком виде мы получим движение?
Так, как смогут внедрить ваши разработчики: кодом, файлами Lottie или видео — под каждое место.
Можете анимировать наш логотип?
Да — для заставки роликов, экрана запуска приложения и соцсетей, в характере бренда.
А что с теми, кто отключил движение?
Сайт следует настройке системы и показывает спокойную версию, в которой смысл и содержание сохраняются.
Форма
Обсудить
моушен
Расскажите о продукте или запуске и о том, где движение должно помочь, — предложим подход и оценим работу. Консультация бесплатная.