Вдохните жизнь в свои творения!

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

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

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

Помните – Анимация подсознательно создает индивидуальность вашего приложения. Подобно структуре, свободному пространству, типографике и цветам.

Вы когда-нибудь замечали эластичный отскок на iPhone, когда вы заканчиваете прокрутку страницы? Кажется, что крошечные детали, подобные этой, играют большую роль в формировании индивидуальности продуктов Apple.

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

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

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

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

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

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

3. Где добавить анимацию в свой продукт?

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

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

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

5. Обеспечение пространственной информации при помощи движения

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

6. Начните понимать такие понятия, как продолжительность, кривая синхронизации, кривая анимации, начальные и конечные значения

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

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

Никогда не замедляйте людей в середине процесса, чтобы ЗАСТАВИТЬ их, ждать окончания анимации. Если им действительно НУЖНО подождать, то порадуйте их значимой анимацией. Никогда не забывайте использовать анимацию для решения проблемы. Поэтому существуют анимированные загрузчики. Кроме того, не перегружайте свой интерфейс анимацией. Это не фильм.

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

8. Инструменты

Lottie, Adobe Animate CC, After Effects, Sketch2AE, Framer, Origami, Animatic App, UIDynamics (iOS) – это лишь некоторые инструменты для анимации интерфейсов. Ознакомьтесь с ними.

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

9. Сохраняйте анимации, которые вам интересны

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

? Скажите прощай своему страху

Все еще боитесь начать? Сядьте. Расслабьтесь. Съешьте любимый десерт. Включите любимую песню. Выключите телефон. Возьмите ручку и бумагу. Может быть, немного вздремните. Чувствуйте себя комфортно. Держите этот чистый лист бумаги перед собой. Держите перо в руке. Накарябайте что-нибудь. Возьмите еще один лист бумаги. Снова накарябайте что-нибудь. Следующий лист бумаги. Нарисуйте фигуру. Следующий лист бумаги. Нарисуйте больше. Сделайте раскадровку. Сделайте еще одну раскадровку. Почувствуйте свободу и двигайте руками. Начните. Просто начните. Посмотрите, что получится.

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

Спасибо за прочтение. Надеюсь эта статья поможет вам! ✌