Движение — мощный инструмент, который можно использовать для применения ключевых принципов UX-дизайна, таких как привлекательность и удобство использования, в продуктовых решениях. На протяжении веков люди инстинктивно обращали внимание на движущиеся объекты, и в современном мире дизайнеры используют анимацию, чтобы привлечь внимание пользователей с помощью движения.
Анимация в приложениях может выполнять различные функции, такие как усиление фирменного стиля за счёт уникального анимационного стиля. Но главное — движение и анимация могут служить формой тонкой обратной связи для микровзаимодействий, например, когда навигационное меню выезжает на экран после нажатия на иконку-гамбургер.
Однако создание красивых и естественных анимаций — задача непростая. В 1981 году аниматоры Олли Джонстон и Фрэнк Томас выпустили книгу под названием «Иллюзия жизни: анимация Disney», где представили 12 принципов анимации. Эти принципы остаются актуальными и по сей день — в том числе для UI-анимации. Применяя эти принципы в дизайне, вы сможете использовать движение, чтобы сделать продукт более привлекательным и удобным.
Easing (замедление и ускорение)
В реальном мире ничто не движется с постоянной скоростью. Например, когда яблоко падает с дерева, его скорость со временем увеличивается из-за гравитации. Чтобы создать такую естественную анимацию, дизайнеры используют easing — замедление или ускорение. Вы можете сделать так, чтобы элемент начинал двигаться медленно, а затем ускорялся, или наоборот. Easing делает движение менее искусственным и «роботизированным».
Offset & delay (смещение и задержка)
Принцип смещения и задержки определяет связь между элементами и визуальную иерархию. В правильном примере видно, как элементы появляются по очереди, создавая ощущение, что они принадлежат одной группе.
Дизайнеры могут использовать offset и delay, чтобы показать значимость элементов. Например, если вы анимируете появление карточки на экране, задайте анимацию так, чтобы сначала показывались заголовок и изображение, а затем с задержкой — кнопка. Это привлечёт внимание пользователя к последнему элементу — кнопке, с которой он может взаимодействовать.
Parenting
Вместе со смещением и задержкой, parenting (иерархическая связь) помогает определить отношения между элементами. Parenting связывает свойства одного объекта с другим, устанавливая прямую зависимость. В примере размер и положение дочернего элемента зависят от положения родительского элемента.
Когда пользователь взаимодействует с родительским элементом, дочерние элементы должны двигаться соответствующим образом. Например, когда пользователь пролистывает карусель изображений, изображения должны двигаться вместе со слайдером и прокруткой.
Transformation (трансформация)
Вы когда-нибудь смотрели завораживающие таймлапсы, где гусеница превращается в прекрасную бабочку? В анимации существует похожий тип трансформации. Это один из базовых принципов движения. Проще говоря, трансформация — это процесс, в котором элемент переходит из одной формы в другую, изменяя своё состояние.
Простой пример — изменение кнопки Submit. Вы наверняка видели, как кнопка при отправке превращается в индикатор загрузки, а затем — в значок подтверждения. Это отличный способ дать пользователю мгновенную обратную связь на его действия.
Value change (изменение значения)
Изменение чисел при загрузке индикатора прогресса называется value change. Это изменение даёт пользователю понять, что что-то происходит — важная форма обратной связи, подтверждающая, что действие принято и обрабатывается.
Индикаторы загрузки — не единственный пример, где полезно отображение изменения значений. Подумайте, например, о слайдере для установки цены. Когда пользователь перемещает ползунок, метка передвигается вместе с ним, и значение цены изменяется. Это помогает пользователю понять, что данные динамичны.
Загрузчики и переходы — примеры взаимодействия, происходящего не в реальном времени. Пользователь наблюдает за динамикой изменения значений, но это происходит после его действия.
Совет! Добавление value change к элементам дашборда улучшает пользовательский опыт.
Masking (маскирование)
Маскирование — это процесс показа или скрытия объекта с использованием другой формы. Оно устанавливает связь между объектом и его назначением.
Большинство дизайнеров знакомы с инструментом маскирования. Обычно он используется для статичных объектов, например, аватаров, но эта техника применима и в motion-дизайне. Подумайте, например, о музыкальных приложениях — как Spotify. Пока трек играет, обложка альбома и другие элементы скрыты за маской, чтобы вы могли свободно просматривать приложение. При клике маска раскрывает скрытое содержимое.
Overlay
С наложением (overlay) мы сталкиваемся в мобильном дизайне постоянно. Оно позволяет размещать один слой поверх другого, изменяя значение обоих. Слоистый дизайн усиливает восприятие пространственной иерархии, передаёт глубину и становится более интуитивным для пользователей.
Частый пример использования overlay — вторичные опции Archive или Delete в приложениях вроде Gmail и Whatsapp, появляющиеся при свайпе.
Cloning (клонирование)
Вы наверняка знаете, что такое клонирование в биологии. В пользовательском интерфейсе это схожее явление — естественное создание новых объектов на основе уже существующих.
Дизайнеры активно используют клонирование, чтобы экономить пространство. Например, в приложении Google Календарь в правом нижнем углу находится кнопка FAB. При нажатии она расширяется и создаёт несколько вариантов действий: создать событие, задачу, цель или напоминание.
Obscuration (затенение)
Затенение — это частичное скрытие одного слоя, чтобы сфокусировать внимание на другом. Оно похоже на overlay, так как также временно скрывает контент. Наиболее распространённые техники для этого — размытие и снижение прозрачности.
Затенение часто применяется в диалогах подтверждения, навигационных меню или окнах с папками и файлами.
Parallax (параллакс)
Параллакс — это принцип движения, при котором объекты пользовательского интерфейса движутся с разной скоростью. Этот эффект создаёт иллюзию глубины.
При прокрутке элементы, движущиеся медленнее, кажутся дальше. Человеческий мозг воспринимает такие элементы как менее важные, поэтому фоны обычно двигаются медленнее. Быстродвижущиеся элементы, такие как текст, изображения или кнопки, наоборот, воспринимаются как приоритетные.
Dimensionality (объёмность)
Объёмность — ещё один способ анимации появления и исчезновения элементов через иллюзию глубины. Она позволяет интерфейсным элементам выглядеть как объекты физического мира с несколькими интерактивными сторонами. Пользователи могут их складывать, переворачивать, перетаскивать и выполнять другие действия. Dimensionality также обеспечивает плавные переходы между экранами.
Dolly & zoom (наезд и зум)
Принцип dolly & zoom пришёл из кинематографа, где используется для создания необычного визуального восприятия. Он достигается с помощью двух одновременных действий:
- Dolly — изменение расстояния между камерой и объектом. Представьте фотографа, приближающегося к предмету, чтобы сделать более детальный снимок.
- Zoom — масштабирование изображения искусственным путём. Представьте, что тот же фотограф использует зум камеры, чтобы увеличить нужную часть кадра.
Дизайнеры часто используют этот принцип для создания крупного плана изображения или изменения ракурса, чтобы показать его с другой стороны.