Моушн-дизайн за 9 шагов
Вдохните жизнь в свои творения
Анимация добавляет жизнь в статические вещи. Когда дело доходит до технологий, она не только вызывает восторг, но и решает проблемы.
Как живые существа, мы привыкли видеть мир вокруг нас в движении, и если какая-либо часть программного обеспечения имеет последовательную анимацию, она чувствуется естественно, а интерфейс живым.
Лидеры технологической отрасли стараются делать свои продукты более естественными. Набирают популярность такие понятия как Motion Design, Motion UX, UX хореография.
Запомните: анимация подсознательно формирует индивидуальность вашего приложения. Также, как это делают типографика, цвета, сетка.
Вы когда-нибудь замечали этот эластичный отскок на iPhone, когда вы заканчиваете скроллить страницу? Вероятно, именно вот такие маленькие детали играют большую роль в формировании индивидуальности продуктов Apple.
Отлично, начнем?!
1. Начните наблюдать
Развивайте насмотренность анимации. Если вы не можете замечать все движения анимации, то вы и не сможете в дальнейшем с ней работать. Начните наблюдать как двигаются элементы по вашему экрану, когда вы используете ваши любимые приложения. Посмотрите снова и найдите то, почему вам нравится это и постарайтесь заглянуть еще глубже в детали. Замечайте всё, что меняется — форма, размер, расположение, цвета. Не имеет значения, насколько большие или крошечные детали, постарайтесь найти, какую роль играет каждый элемент анимации во всей композиции.
2. Анимация — это не просто слой краски
Анимация раскрывает более глубокий смысл. Будучи дизайнером, вы должны с самого начала думать об анимации осознанно. Если вы находитесь на стадии проектирования, добавьте анимацию в прототипы, чтобы зафиксировать её время. Если вы находитесь на стадии разработки кода, разделите свой код на модули, чтобы легко перемещать компоненты внутри интерфейса.
Совет: Осознанное мышление об анимационной индивидуальности вашего творения придаст ему характер и поможет более глубоко взглянуть на то, что вы пытаетесь построить.
3. Куда добавлять анимацию?
Самые очевидные места для добавления анимации в ваш продукт могут быть: смена экранов, взаимодействие пользователя с элементами интерфейса, ожидание пользователя и так далее.
4. Типы анимации пользовательского опыта (Motion UX)
Анимацию в продуктах можно разделить на Переходы (изменение контента, переход на другой экран), Микроанимации (например, кнопка Like в Twitter), Графическая анимация (прыжок скутера на заставке приложения Zomato).
5. Обеспечьте пространственную информацию анимацией
Если элемент интерфейса выезжает справа, пользователь мысленно представляет расположение этого элемента справа. Для примера возьмем кнопку гамбургер-меню, расположенную в верхнем левом углу экрана. Анимация раскрывающегося меню должна начинаться также слева сверху. Чтобы проверить, насколько анимации правильны и органичны, покажите их людям и послушайте что они скажут. Это самый простой способ избежать путаницы.
6. Начните понимать такие вещи, как Длительность, Тайминг, Траектория анимации, Начальные и Конечные значения.
Эти параметры технически формируют ваш фрагмент анимации. Поиграйтесь с настройками этих параметров и научитесь их использовать правильно. Как только вы почувствуете полный контроль над каждым из параметров, вы сможете создавать шедевры анимации. Например, для пользовательского интерфейса у Google есть хорошие рекомендации.
7. Никогда не заставляйте человека ждать
Никогда не замедляйте пользовательское взаимодействие, человек никогда не должен ждать окончания анимации. Если им действительно нужно подождать, удивите их осмысленной анимацией. Всегда используйте анимацию для решения проблем. Именно по этой причине существуют анимированные иконки загрузки. Кроме того, не перегружайте ваши интерфейсы движениями. Это не фильм.
Профессиональный совет: поддерживайте анимацию едва заметной и в соответствии с сюжетом вашего продукта, чтобы создать восхитительный опыт.
8. Какие использовать инструменты
Некоторые инструменты для моушн-дизайна: Lottie, Adobe Animate CC, After Effects, Sketch2AE, Framer, Origami, Animatic App, UIDynamics (iOS). Посмотрите и попробуйте их.
Я рекомендую сначала использовать ручку и бумагу. После этого перейдите на любой цифровой инструмент. Анимации для этой статьи я рисовал от руки в Animatic App.
9. Фиксируйте и Сохраняйте вещи, которые вам интересны
Сохраняйте вещи, которые вам понравились. Смотрите на них снова и снова, замедляйте их и разбирайтесь как двигаются элементы. Изучайте копируя лучшее. Мой Мак полон интересных гифок. Вы также можете сохранять анимации в Dribbble. А также, фиксируйте и записывайте анимацию со своих экранов, Giphy Capture работает отлично.
💥 Бонус: Попрощайтесь с вашим страхом
До сих пор боитесь начать? Сядьте. Расслабьтесь. Съешьте ваш любимый десерт. Включите вашу любимую песню. Отключите ваш телефон. Держите ручку и бумагу рядом. Может быть немного поспите. Вам хорошо. Почувствуйте себя комфортно. Положите этот пустой лист бумаги напротив. Возьмите эту ручку в руку. Сделайте произвольный набросок. Возьмите другой лист бумаги. Опять сделайте произвольный набросок. Следующий лист бумаги. Придайте рисунку форму. Возьмите следующий лист. Нарисуйте больше. Сделайте раскадровку. Сделайте раскадровку снова. Почувствуйте свободу и позвольте вашим рукам двигаться. Начните. Просто начните.
Гораздо страшнее прикоснуться к ручке, чем начать рисовать.
Понравилась статья?
Нажмите на 👏 . Вы можете нажать на 👏 до 50 раз, чтобы люди смогли найти эту статью и конечно же… не забудьте поделиться.
Оригинал: Get started with motion design in 9 steps by Arpit Agarwal.
