На сайте с моушн-дизайном движение становится частью фирменного стиля. Его продумывают так же тщательно, как шрифты и цветовую палитру. Команда заранее определяет кривые ускорения, длительность, порядок появления элементов и то, что должно оставаться неподвижным. Эти правила действуют на всём сайте, поэтому он воспринимается как единое целое.
Большинству брендов нужно не больше анимации, а несколько чётко определённых движений, которые используются последовательно.
Моушн-дизайн и просто анимация: в чём разница
На сайте с моушн-дизайном есть анимация. Но наличие анимации ещё не означает, что за ней стоит продуманная система.
| Сайт с анимацией | Сайт с системой моушн-дизайна | |
|---|---|---|
| Как выбирают движение | Отдельно для каждого блока и у каждого дизайнера | По единым правилам |
| Кривые ускорения | Настройки библиотеки по умолчанию | Две-три кривые с собственными названиями |
| Длительность | Зависит от компонента | Задана в переменных системы |
| Уменьшение движения | Часто не предусмотрено | Отдельно продуманный режим |
| Какое создаёт впечатление | Шаблон с эффектами | Узнаваемый бренд |
Запрос «motion graphics website» обычно означает другое: сайт с портфолио видео и моушн-графики, например с шоурилом студии. Здесь же мы говорим об анимации самого интерфейса.
Движение как часть языка бренда
Вспомните, как закрываются двери двух разных автомобилей: одна - тяжело и с глухим звуком, другая - легко и быстро. В обоих случаях ощущение продумано. Так же работает анимация сайта. Неспешное замедление ease-out с мягким завершением создаёт ощущение спокойствия и высокого класса. Быстрое пружинящее движение, чуть выходящее за конечную точку, выглядит игриво и энергично.
Большую часть этого характера задают четыре свойства.
1. Кривая ускорения
Она определяет, как меняется скорость движения. Именно по ней сильнее всего считывается качество анимации.
Nielsen Norman Group отмечает, что полностью линейное движение выглядит неестественно, и рекомендует ease-out для большинства элементов, которые останавливаются. В системе бренда можно задать одну кривую для появления, другую для исчезновения и одну выразительную кривую для ключевых моментов.
2. Длительность
NN/g рекомендует для большинства анимаций интерфейса длительность 100-500 мс: около 100 мс для простой реакции, например переключателя, и 200-300 мс для более заметных изменений, например открытия модального окна. Ключевые моменты, такие как появление первого экрана или переход между страницами, могут длиться дольше, но использовать их стоит редко.
3. Ритм и интервалы
Когда элементы появляются один за другим, интервал задаёт ритм. При 40 мс движение похоже на волну. При 120 мс список раскрывается размеренно, поэлементно. Выберите один подход и используйте его везде.
4. Порядок движения элементов
Что движется первым, что следует за ним, а что остаётся на месте? В хорошем решении есть иерархия: сначала заголовок, затем изображение, в конце элементы управления. Если всё двигается одновременно, эта иерархия теряется.
Как выглядит система анимации на практике
Дизайнеры уже используют переменные для цветов и отступов. Так же можно задавать анимацию. Ниже - условный начальный набор: это наши примерные значения, которые подстраивают под конкретный бренд.
| Переменная | Значение | Применение |
|---|---|---|
--motion-instant |
100 мс | Реакция на наведение, переключение и нажатие |
--motion-quick |
200 мс | Выпадающие списки, подсказки, появление небольших элементов |
--motion-base |
320 мс | Карточки, модальные окна, появление изображений |
--motion-slow |
600 мс | Появление первого экрана, переходы между страницами |
--ease-enter |
Кривая ease-out | Элементы, которые появляются и останавливаются |
--ease-exit |
Кривая ease-in | Элементы, которые исчезают |
--stagger |
60 мс | Списки и сетки |
--motion-reduced |
Плавная смена прозрачности, 150 мс | Заменяет перемещение в режиме уменьшения движения |
Эти параметры хранятся в переменных CSS и конфигурации GSAP: дизайнеры и разработчики используют одни и те же названия. Если в следующем году бренду понадобится более спокойный характер движения, достаточно изменить четыре числа, а не переделывать четыреста анимаций.
Последний параметр особенно важен. Система должна учитывать, что посетитель мог включить уменьшение движения в операционной системе. Подробнее рассказываем в статье о доступной анимации сайта.
Кому подходит сайт с продуманной системой анимации
Хорошо подходит:
- Бренды класса люкс и модные марки. Ритм и сдержанность помогают передать качество. Подробнее - в статье о сайтах для люксовых брендов.
- Запуск продукта. Товар, который собирается, вращается или открывается при прокрутке, сам показывает, как он устроен.
- Жилые комплексы и другие проекты недвижимости. Покупатель выбирает то, чего ещё нет; анимация и 3D помогают представить будущий объект.
- Студии, портфолио, гостиничный и ресторанный бизнес. Когда впечатление от самого сайта помогает убедить клиента.
Плохо подходит:
- Документация, прикладные инструменты, государственные сервисы. Человеку нужен ответ, а не эффектное появление страницы.
- Новостные сайты и сайты с большим объёмом контента. Движение мешает сосредоточиться на чтении.
- Команды, у которых нет времени на поддержку. За систему анимации кто-то должен отвечать. Иначе на новых страницах появляются случайные эффекты и единые правила постепенно теряются.
Признаки того, что сайту нужна система анимации
- На разных страницах разный стиль анимации, хотя никто этого не планировал.
- В каждой задаче разработчики спрашивают: «Как должен двигаться элемент?»
- На скриншотах сайт выглядит хорошо, а в работе кажется дешёвым.
- Конкуренты с похожими товарами производят более дорогое впечатление, но вы не можете объяснить почему.
Если узнаёте хотя бы две ситуации, обычно стоит упорядочить анимацию, а не добавлять эффекты. Подходящие приёмы собраны в примерах сайтов с анимацией. Бюджеты разбираем в статье о стоимости таких сайтов.
