Анимация добавляет жизнь статическим вещам. Когда дело доходит до программного обеспечения, речь идет не только о красоте, но и о решении проблем.

Мы привыкли видеть, как мир движется вокруг нас и если какая-либо часть программного обеспечения имеет последовательную анимацию, она чувствует себя живым и естественным.

Руководители технологий  подталкивают свои продукты к более естественным. Сложные слова, такие как Motion Design, Motion UX, UX Choreography, набирают популярность.

Круто, начнем с использования движения

1. Начать наблюдение

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

2. Анимация - это не просто слой краски

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

3. Где вводить движение в свой продукт?

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

4. Типы движений UX

Вы можете классифицировать движение в продуктах в виде переходов (изменение содержимого / перемещение пользователя на другой экран), микро-взаимодействия (например, кнопка «Like Twitter»), графическая анимация (например, скачок скутера на всплывающем экране приложения «Zomato Order»).

5. Обеспечить пространственную информацию движением

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

6. Начните понимать такие вещи, как Продолжительность, Временная кривая, Анимационный путь, Начальные и конечные значения

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

7. Никогда не заставляйте людей ждать посередине вашей анимации

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

8. Инструменты для использования

Lottie, Adobe Animate CC, After Effects, Sketch, 2AE, Framer, Origami, Animatic App, UIDynamics (iOS) - это некоторые инструменты для Motion Design. Просмотрите их.

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

9. Захват и сохранение вещей, которые будут интересными

Сохраните вещи, которые вам интересны. Наблюдайте за ними снова и снова, замедляйте их и понимайте, как движутся элементы. Узнайте, копируя. Мой мак полон анимированных GIF-файлов, которые мне интересны. Вы также можете сохранить GIF на dribbble . Кроме того, для захвата и записи на экране Mac, Giphy Capture отлично работает.

Источник: uxdesign.cc