12 принципов UI/UX анимации, которые вы должны знать
Сегодня пользователям требуются согласованные, узнаваемые и простые в использовании интерфейсы. Но как дизайнер может сделать свой пользовательский интерфейс более человечным?
Движение, имитирующее «живое» общение между пользователем и интерфейсом, заполняет этот пробел. Изучите эти 12 принципов анимации UI/UX, чтобы ваши интерфейсы наполнились весельем. ⚡️
1. СМЯГЧЕНИЕ
Ослабление относится к тому, как происходит анимация движения. Вы можете думать о смягчении как об ускорении или замедлении . Объект, который перемещается с одной стороны сцены на другую, может начать движение медленно, затем набрать скорость, а затем внезапно остановиться. Или объект может начать быстро, а затем постепенно останавливаться. Ваши ключевые кадры указывают начальную и конечную точки движения, но замедление определяет, как ваш объект переходит от одного ключевого кадра к другому.
Простой способ применить замедление к анимации движения — использовать панель «Свойства». Значения замедления находятся в диапазоне от –100 до 100. Отрицательное значение создает более постепенное изменение исходной позиции (известное как замедление). Положительное значение создает постепенное замедление (известное как ослабление).
2. Смещение и задержка
Когда несколько элементов пользовательского интерфейса перемещаются одновременно и с одинаковой скоростью, пользователи склонны группировать их вместе и упускать из виду возможность того, что каждый элемент может иметь свою собственную функциональность.
Смещение и задержка создают иерархию между элементами пользовательского интерфейса, которые перемещаются одновременно, и сообщают, что они связаны, но различны. Вместо полной синхронизации синхронизация, скорость и расстояние между элементами расположены в шахматном порядке, что приводит к тонкому эффекту «один за другим».
Когда пользователи перемещаются между экранами, смещение и задержка сигнализируют о наличии нескольких вариантов взаимодействия.
3. Воспитание
Родительский элемент связывает свойства одного элемента пользовательского интерфейса со свойствами других. При изменении свойства родительского элемента связанные свойства дочерних элементов также изменяются. Все свойства элемента могут быть связаны друг с другом.
Например, положение родительского элемента может быть привязано к масштабу дочернего элемента. Когда родительский элемент перемещается, размер дочернего элемента увеличивается или уменьшается.
Родительский элемент создает отношения между элементами пользовательского интерфейса, устанавливает иерархию и позволяет нескольким элементам одновременно взаимодействовать с пользователями. По этой причине родительские обязанности наиболее эффективны при взаимодействии в реальном времени.
4. Трансформация
Трансформация происходит, когда один элемент пользовательского интерфейса превращается в другой. Например, кнопка загрузки превращается в индикатор выполнения, который превращается в значок завершения.
С точки зрения UX трансформация — это эффективный способ показать пользователям их статус по отношению к цели ( «Видимость статуса системы» ). Это особенно полезно, когда переход между элементами пользовательского интерфейса связан с процессом, имеющим начало и конец (например, загрузка файла).
5. Изменение стоимости
Представления стоимости (числовые, текстовые или графические) изобилуют цифровыми интерфейсами, появляющимися в продуктах, начиная от банковских приложений и заканчивая личными календарями и сайтами электронной коммерции. Поскольку эти представления привязаны к реально существующим наборам данных, они могут быть изменены.
Изменение значения сообщает о динамическом характере представления данных и информирует пользователей о том, что данные являются интерактивными и могут в некоторой степени подвергаться влиянию. Когда значения вводятся без движения, желание пользователей взаимодействовать с данными снижается.
6. Долли и Зум
Dolly и масштабирование позволяют пользователям «путешествовать» по элементам пользовательского интерфейса в пространстве или увеличивать их масштаб, чтобы показать более высокий уровень детализации.
- Долли: Долли возникает, когда точка зрения пользователя приближается (или отдаляется) от элемента пользовательского интерфейса. Представьте себе человека с камерой, который подходит к цветку, чтобы сделать снимок поближе.
- Масштаб: при масштабировании точка зрения пользователя и элемент пользовательского интерфейса остаются фиксированными, но размер элемента увеличивается (или уменьшается) на экране пользователя. Теперь представьте, что человек остается на месте и использует функцию масштабирования камеры, чтобы цветок казался больше.
7. Размерность
Размерность создает впечатление, что элементы пользовательского интерфейса имеют несколько интерактивных сторон, как объекты в физическом мире. Поведение достигается за счет того, что элементы выглядят так, как будто они складываются, переворачиваются, плавают или наделены реалистичными свойствами глубины.
В качестве средства повествования многомерность подразумевает, что разные стороны элемента пользовательского интерфейса связаны между собой и обеспечивают бесшовные переходы между экранами.
8. Параллакс
Параллакс отображается, когда два (или более) элемента пользовательского интерфейса перемещаются одновременно, но с разной скоростью. Здесь снова целью является установление иерархии.
- Интерактивные элементы перемещаются быстрее и появляются на переднем плане.
- Неинтерактивные элементы движутся медленнее и отступают на задний план.
Parallax направляет пользователей к интерактивным элементам пользовательского интерфейса, позволяя неинтерактивным элементам оставаться на экране и сохранять единство дизайна.
9. Затемнение
Представьте дверь из матового стекла. Для открытия требуется взаимодействие, но можно (до некоторой степени) различить, что ждет на другой стороне.
Обскурация работает так же. Он представляет пользователям интерфейс, который призывает к взаимодействию, одновременно показывая подсказку на экране, чтобы следовать. Типичными примерами являются меню навигации, экраны паролей и окна папок/файлов.
10. Клонирование
Клонирование — это поведение движения, при котором один элемент пользовательского интерфейса разделяется на другие. Это умный способ выделить важную информацию или варианты взаимодействия.
Когда элементы пользовательского интерфейса материализуются в интерфейсе, им нужна четкая исходная точка, которая ссылается на элемент, уже отображаемый на экране. Если элементы просто взрываются или исчезают из ниоткуда, пользователям не хватает контекста, необходимого для уверенного взаимодействия.
11. Оварлей
В 2D-пространстве нет глубины, и элементы пользовательского интерфейса могут перемещаться только по оси X или Y. Наложение создает иллюзию разделения переднего плана и фона в двухмерном пространстве пользовательского интерфейса. Имитируя глубину, наложение позволяет скрывать и открывать элементы в соответствии с потребностями пользователя.
Информационная иерархия является важным фактором при использовании наложения. Например, первое, что пользователи должны увидеть в приложении для создания заметок, — это список своих заметок. Затем можно использовать оверлей для отображения дополнительных опций для каждого сообщения, таких как « Удалить » или « Архивировать » .
12. Маскировка
Маскировка — это стратегическое раскрытие и сокрытие частей элемента пользовательского интерфейса. Изменяя форму и масштаб периметра элемента, маскирование сигнализирует об изменении полезности, позволяя самому элементу оставаться идентифицируемым. По этой причине подробные визуальные эффекты, такие как фотографии и иллюстрации, являются идеальными кандидатами.
С точки зрения удобства использования дизайнеры могут реализовать маскировку, чтобы показать пользователям, что они проходят серию взаимодействий.
