Принципы моушн-дизайна: как интерфейсы должны двигаться в 2026 году

Движение — самый злоупотребляемый инструмент в современном интерфейсном дизайне. Каждая команда выпускает рилс с анимациями, и почти никто не выпускает систему движения. В итоге продукт подпрыгивает, трясётся и прокручивается с параллаксом прямо на пути у пользователя. Движение, которое следовало вырезать.

Эта статья — версия для практикующего дизайнера. Семь принципов, которые решают, заслуживает ли движение своего места, справочник по длительностям и easing, который закрывает споры, и короткий список паттернов, выдерживающих реальное тестирование с пользователями. Никаких лупов с Dribbble, никаких брендовых роликов, только продуктовое движение, которое уважает время пользователя.

Что такое моушн-дизайн на самом деле

Моушн-дизайн — это слой поведения продукта. Он определяет, как элементы появляются, исчезают, реагируют и связаны друг с другом во времени. Если сделать хорошо, движение подсказывает пользователю, где он находится, откуда пришёл и куда может пойти, без единого лишнего слова текста.

Если сделать плохо, движение сообщает пользователю, что у дизайнера был доступ к Framer. Декоративная анимация, бесконечные пружины и hero-видео, которые автоматически играют со звуком, — это одна и та же ошибка в разных костюмах. Движение стоит внимания, трафика и доступности. Оно должно отработать свой счёт.

Статья про визуальную иерархию в дизайне объясняет, как глаз читает статичную страницу. Движение — следующий слой. Оно подсказывает глазу не только куда смотреть, но и когда.

У движения две задачи, и только две

Каждая анимация в выпущенном продукте выполняет одну из двух задач. Если не выполняет ни одну, это декор, а декор первым летит под нож на ревью производительности.

Задача первая: сообщить об изменении состояния. Кнопка, которая была неактивна, теперь нажата. Модальное окно, которого не было, теперь открыто. Строка, которая была пустой, теперь содержит данные. Движение делает изменение понятным, показывая переход вместо резкого скачка в новое состояние.

Задача вторая: вести взгляд. Новый элемент выезжает справа, потому что пользователь нажал кнопку «вперёд». Карточка уменьшается к нижней навигации, потому что её сохранили. Движение обучает пользователя пространственной модели продукта, не заставляя читать документацию.

Движение, которое не сообщает о состоянии и не ведёт взгляд, бесплатно забирает у пользователя внимание. Режьте.

---

Семь принципов продуктового движения

Это рычаги. Используйте их в сочетании, и движение читается как осознанное. Не используйте ни одного, и продукт ощущается жёстким. Используйте слишком много, и продукт превращается в игрушку.

Принцип 1: сначала смысл, потом полировка

Каждая анимация отвечает на один вопрос: что потеряет пользователь, если этого движения не будет? Если ответ «ничего», это декор. Если ответ «он не поймёт, что произошло», движение структурное, и оно остаётся.

Дизайнеры, которые начинают с «давайте добавим тут немного анимации», выпускают продукты, которые кажутся шумными. Дизайнеры, которые начинают с «чего не хватит пользователю, если тут всё щёлкнет мгновенно», выпускают продукты, которые кажутся живыми.

Принцип 2: длительность соответствует значимости

Короткие анимации для мелких событий. Длинные для крупных.

Нажатие кнопки укладывается в 100 миллисекунд. Переход между страницами может занять до 400. Модальное окно, занимающее весь вьюпорт, может позволить себе 500. Всё, что дольше, ощущается медленным уже на десятом взаимодействии, даже если на первом казалось киношным.

Таблица длительностей:

Всё, что длиннее 500 мс в продукте (в отличие от маркетинговой страницы), — налог на каждого повторного пользователя. Первый просмотр киношный. Сотый — пытка.

Принцип 3: easing несёт эмоцию

Линейное движение роботизировано. Физический мир не движется линейно, и интерфейсы, которые так делают, кажутся механическими. Кривые easing делают движение человеческим.

Три easing закрывают 90% продуктовой работы.

• Ease-out для элементов, появляющихся на экране. Быстро в начале, медленно в конце. Так пользователь ожидает, что объект встанет на место.
• Ease-in для элементов, покидающих экран. Медленно в начале, быстро в конце. Пользователь видит, как элемент «подтверждает» уход, прежде чем исчезнуть.
• Ease-in-out для элементов, перемещающихся из одного места в другое. Плавно с обоих концов. Это соответствует физической инерции.

Пружинные кривые — четвёртый вариант, использовать осторожно. Пружины ощущаются игривыми и подходят потребительским приложениям с дружелюбным голосом. Для финансового ПО, медицины и любого продукта, где перелёт читается как нестабильность, они неуместны.

Принцип 4: движение уважает настройки движения

Каждый продукт выпускается с веткой prefers-reduced-motion. Пользователям с вестибулярными нарушениями, мигренями или повышенной чувствительностью внимания вредит движение, которое другим нравится. Игнорировать эту настройку — не стилистический выбор, а провал доступности.

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

Карточка, которая выезжала на 40 пикселей, становится карточкой, которая плавно проявляется. Изменение состояния по-прежнему сообщено, вестибулярный триггер убран. Разбор чек-листа веб-доступности показывает, где это вписывается в полный аудит доступности.

Принцип 5: консистентность по всему продукту

Движение должно ощущаться как единый продукт, в котором приняли один набор решений. Два экрана с разными easing и длительностями ощущаются как два продукта, сшитых вместе. Пользователи замечают, даже если не могут объяснить, что не так.

Решение — система движения. От трёх до пяти длительностей. От трёх до пяти easing.

Именованные токены вроде motion.short, motion.medium, motion.long, ease.enter, ease.exit, ease.standard. Разбор руководства по дизайн-системам показывает, где они живут рядом с токенами цвета и типографики.

Токены движения в 2026 году не опциональны. Это единственный способ не дать движению расползтись по мере роста команды. Команда из трёх человек, делающих анимации от руки, создаёт систему из трёх мнений. Следующий нанятый добавляет четвёртое. К двадцатому экрану у продукта нет связного слоя поведения.

Принцип 6: движение следует пространственной модели

У каждого продукта есть неявная карта. Новые экраны живут справа. Детальные виды приближаются из карточки. Оверлеи опускаются сверху. Навигационные панели выезжают с края экрана, где они находятся.

Движение подкрепляет карту. Экран деталей, который приближается из карточки, по которой нажал пользователь, учит пространственной непрерывности. Тот же экран, падающий сверху, сбивает пользователя с толку, потому что ломает подразумеваемую карту.

Когда дизайнеры ошибаются здесь, почти всегда это потому, что они выбирали анимацию изолированно, а не в контексте сценария. Проверка: можете ли вы проследить каждый переход до единой пространственной метафоры. Если нет, движение украшает, а не учит.

Принцип 7: у движения есть бюджет

Каждая анимация стоит CPU, батареи и внимания. Бюджетируйте всё.

Бюджет CPU и батареи означает анимировать только transform и opacity, избегая свойств, запускающих перерасчёт макета: width, height, top, left. Современные браузеры обрабатывают transform и opacity на GPU, это дёшево. Анимация свойств макета вызывает пересчёты, которые убивают производительность на Android-телефонах среднего класса.

Бюджет внимания означает ограничение одновременных анимаций. Почти всегда двигается что-то одно. Два движения — уже много, три — отвлечение.

Страница, где каждый элемент анимируется при прокрутке, — не продуманная страница, а люк для концентрации. Глоссарий по core web vitals описывает показатели производительности, которые анимации по скроллу обычно портят.

---

Паттерны, которые заслуживают своё место

Из десятков паттернов движения, плавающих по Dribbble, продуктовую работу реально улучшает короткий список. Остальное — костюмы.

Микровзаимодействия при вводе

Кнопка, которая сжимается на 2 пикселя при нажатии, переключатель, который пружинит между состояниями, поле ввода, которое слегка трясётся при ошибке валидации. Это самые дешёвые и самые эффективные движения в любом продукте. Они отвечают на вопрос пользователя (услышала ли меня система) меньше чем за 150 миллисекунд и без единого слова.

У каждого основного контрола должно быть микровзаимодействие. Кнопки, переключатели, поля ввода, чекбоксы, радиокнопки, слайдеры. Если контрол не отвечает видимо на касание пользователя, продукт ощущается медленным, даже когда бэкенд быстрый. Глоссарий по состоянию фокуса описывает правила доступности, которые управляют этими взаимодействиями.

Каскадное появление списков

Список карточек, плавно проявляющихся с задержкой 50 мс между элементами, читается как осознанный. Тот же список, появившийся целиком разом, читается как резкий. Каскад почти всегда стоит лишних нескольких сотен миллисекунд при первом рендере.

Предел — четыре элемента. После четырёх продолжайте каскад ниже линии сгиба и пусть остальное запускает прокрутка пользователя. Каскад из двадцати элементов подряд ощущается медленным, и большинство из них пользователь всё равно не видит.

Переходы общих элементов

Карточка, по которой нажал пользователь, становится шапкой экрана деталей. Миниатюра, разворачивающаяся в полноразмерное изображение. Эти переходы громко и дёшево обучают пространственной модели, и это самый эффектный на ощущение паттерн движения в современной продуктовой работе. Они же требуют затрат на разработку, поэтому большинство команд их режет. Когда момент важен (онбординг, ключевой конверсионный сценарий, фирменная функция), платите.

Индикаторы прогресса, уважающие время

Прогресс-бары, движущиеся в реальном времени на долгих операциях. Скелетон-экраны для данных, которые грузятся дольше 300 мс. Спиннеры только для операций короче 1 секунды, где скелетон просто мелькнул бы. Движение прогресса — это движение доверия. Оно говорит пользователю, что система работает, а это единственное, что его волнует во время ожидания.

Осмысленные состояния загрузки

Состояние загрузки — не отсутствие дизайна, а полноценный дизайн. Глоссарий по прогрессивному раскрытию объясняет, как состояния загрузки могут раскрывать контент поэтапно, а не блокироваться на самом медленном элементе.

---

Провалы движения, за которыми надо следить

Каждое ревью движения ловит одни и те же провалы. Если продукт выходит хотя бы с одним из них, система движения подрывает остальной дизайн.

Автоплей видео в hero. Перехватывает внимание, убивает производительность и нарушает настройки reduced-motion. Замените статичным изображением или запуском по действию пользователя.

Параллакс, который никто не просил. Параллакс — это движение, эквивалентное брендовому цвету, использованному для основного текста. В скриншоте он выглядит премиально, а на реальном устройстве читается как морская болезнь.

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

Переходы, которые обгоняют сервер. Переход экрана на 500 мс, когда данные приходят за 200 мс, делает продукт медленнее, чем он есть. Движение должно совпадать с реальной операцией или чуть отставать, но никогда не растягивать её.

Зацикленная фоновая анимация. Фон, который двигается вечно, вечно отвлекает. Каждый раз, когда пользователь бросает взгляд обратно, он теряет фокус. Зацикливайте, только когда движение и есть смысл (статус, визуализация, индикатор пульса).

---

Движение внутри системы

Движение принадлежит дизайн-системе рядом с цветом и типографикой. Относиться к нему как к финальной полировке — причина, по которой большинство продуктов выходит с несогласованным движением. Команда, которая владеет системой, владеет и токенами движения.

Минимальный набор токенов движения:

Назовите их, задокументируйте, выпустите как переменные в слое дизайн-токенов. Каждая новая анимация в продукте использует один из этих токенов, или есть письменная причина, почему нет. Эта дисциплина удерживает движение связным в команде из пяти дизайнеров и двадцати инженеров.

Как ревьюить моушн-дизайн

Пропустите каждую анимацию через четыре вопроса, прежде чем она уйдёт в релиз.

Сообщает ли она об изменении состояния или ведёт взгляд. Если ни то ни другое, режьте.

Укладывается ли она в таблицу длительностей. Если затянута, сокращайте, пока не станет ощущаться агрессивной, затем откатитесь на один шаг.

Использует ли она токен. Если она написана вручную, она уйдёт от системы. Переведите её в токен или отклоните.

Проходит ли она prefers-reduced-motion. Переключите настройку. Если движение всё ещё вызывает вестибулярную реакцию, пересоберите его только на прозрачности.

Четыре вопроса. Пять минут на анимацию. Большинство продуктов выходит, не задав ни одного из них, поэтому большинство продуктов ощущаются украшенными, а не спроектированными.

Если вам нужна команда, которая проводит это ревью на этапе релиза, а не извиняется за расползание движения в постлонч-аудите, наймите Brainy. Мы делаем бренд, веб и продуктовый UI с движением внутри системы с первого экрана.

Движение в условиях 2026 года

Важны три сдвига. Движение должно пережить их все.

Интерфейсы на базе ИИ двигаются больше, чем устаревшие UI. Потоковые ответы, живые трассы рассуждений и динамические вызовы инструментов создают постоянное тонкое движение. Правило: движение ИИ должно быть предсказуемым, а движение продукта спокойным. Если всё анимируется одновременно, ничто не читается как важное.

Анимации, управляемые скроллом, теперь функция браузера. CSS scroll-timeline позволяет дизайнерам анимировать по положению прокрутки без JavaScript. Это новый рычаг, и большинство команд злоупотребляют им, анимируя слишком много элементов при скролле. Правило: одна анимация по скроллу на страницу, обычно hero, иногда CTA.

Регулирование доступности ужесточается. European Accessibility Act и аналогичные законы означают, что reduced-motion — не приятный бонус, а обязательное требование. Выпускать продукт без ветки reduced-motion — риск несоответствия, а не дизайнерское мнение. Глоссарий по wcag описывает базовые требования.

---

FAQ

Какие принципы моушн-дизайна самые важные?

Сначала смысл, потом полировка, длительность по значимости, easing, несущий эмоцию, уважение к настройкам движения, консистентность по продукту, понимание пространственной модели и строгий бюджет производительности и внимания. Движение, которое заслуживает своё место, создают семь принципов в сочетании, а не какой-то один из них.

Какой длины должна быть UI-анимация?

От 100 до 500 миллисекунд почти для любого продуктового взаимодействия. Анимации отклика (hover, нажатие) идут 100–150 мс. Небольшие изменения состояния 150–300 мс. Переходы страниц и модальных окон 300–500 мс. Всё длиннее становится налогом на повторных пользователей, даже если на первом просмотре кажется киношным.

В чём разница между моушн-дизайном и анимацией?

Моушн-дизайн — это слой поведения продукта, а анимация — визуальная техника, с помощью которой он создаётся. Моушн-дизайн спрашивает, какое изменение состояния сообщает анимация и зачем она нужна. Анимация спрашивает, как выглядит движение. Моушн-дизайн — стратегия, анимация — ремесло. Хорошей продуктовой работе нужны оба.

Должно ли у каждого взаимодействия быть анимация?

Нет. Каждому основному контролу (кнопка, переключатель, поле ввода) полезно микровзаимодействие, потому что пользователь ждёт отклика на касание. Второстепенным элементам нет. Проверка: уберите анимацию и посмотрите, теряет ли пользователь информацию. Если нет, оставьте убранной.

Что такое prefers-reduced-motion и как с ним работать?

Это настройка операционной системы, сигнализирующая, что пользователь хочет меньше движения, обычно по вестибулярным причинам или из-за внимания. Правильная обработка не в том, чтобы убрать движение полностью, а в том, чтобы заменить анимацию на расстояние анимацией на прозрачности. Изменение состояния по-прежнему сообщено, вестибулярный триггер убран.

Как построить систему движения?

Начните с трёх длительностей и трёх easing как именованных токенов. Задокументируйте, где используется каждый. Проверяйте токены на код-ревью. Добавляйте новые токены только когда существующий набор даёт по-настоящему неверное движение, но никогда ради разовой прихоти дизайнера. Обычно продукту хватает трёх–пяти токенов на каждую ось.

Движение — это ремесло, а не функция

Продукты с отличным движением ощущаются живыми. Продукты без него ощущаются жёсткими. Продукты со слишком большим количеством движения ощущаются как демо-рилс. Расстояние между этими тремя небольшое, и единственный путь к первому — система с жёсткими правилами и честными ревью.

Используйте семь принципов в сочетании. Держитесь внутри таблицы длительностей. Выбирайте easing осознанно. Выпускайте слой токенов движения рядом с токенами цвета и типографики.

Пропускайте каждую анимацию через четыре вопроса, прежде чем она уйдёт в релиз. Получившийся продукт не будет выглядеть так, будто старался. Он будет выглядеть так, будто думал.

Если вам нужна команда, которая применяет эту дисциплину к бренду, вебу и продуктовому UI как к единому проекту, наймите Brainy. Движение как полноценное системное решение, каждый раз.

Что почитать ещё

• Визуальная иерархия в дизайне
• Руководство по дизайн-системам
• Чек-лист веб-доступности
• Хэндофф дизайна из Figma в разработку