Моушн-дизайн

Что это такое

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

Почему это важно

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

Что в этом треке

Осмысленное движение (02-frontend/16-motion-design/01-purposeful-motion) — как выбирать, какие изменения анимировать, и как держать длительность и сглаживание честными.
Уменьшенное движение и производительность (02-frontend/16-motion-design/02-reduced-motion-and-performance) — как уважать настройку операционной системы и анимировать без потерянных кадров.

Предварительные требования

Каскадные таблицы стилей (CSS) (02-frontend/05-css)

Что читать дальше

Доступность (WCAG / a11y) (02-frontend/11-accessibility-wcag-a11y) — движение, которое нельзя отключить, не проходит по стандарту и подводит пользователя.
Веб-производительность (Core Web Vitals) (02-frontend/26-web-performance-core-web-vitals) — анимация — один из самых дешёвых способов потерять бюджет кадра.
Прототипирование (03-design-ux/40-prototyping) — там, где движение обычно пробуют впервые, до того как оно доходит до кода.