Фев 14, 2020

Как успешно использовать анимацию в вашем мобильном приложении: виды анимации и принципы дизайна

Frame 1 11 - Как успешно использовать анимацию в вашем мобильном приложении: виды анимации и принципы дизайна

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

Типы анимации

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

Изменение функций

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

0 sOl6YRYbey OIZo  - Как успешно использовать анимацию в вашем мобильном приложении: виды анимации и принципы дизайна
Image source: Dribbble

Визуальный фидбек

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

sh animation - Как успешно использовать анимацию в вашем мобильном приложении: виды анимации и принципы дизайна
Image source: Dribbble

Подсказки для пользователя

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

Clues for the user Image source Dribbble - Как успешно использовать анимацию в вашем мобильном приложении: виды анимации и принципы дизайна
Image source: Dribbble

Навигация 

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

App navigation Image source Dribbble 1 - Как успешно использовать анимацию в вашем мобильном приложении: виды анимации и принципы дизайна
Image source: Dribbble

Структура элементов и их взаимодействие

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

Structure of elements and their interaction Image source Dribbble - Как успешно использовать анимацию в вашем мобильном приложении: виды анимации и принципы дизайна
Image source: Dribbble

Состояние системы

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

READ  Как разработать приложение с использованием VR
State of the system Timeline App - Как успешно использовать анимацию в вашем мобильном приложении: виды анимации и принципы дизайна
Image source: Timeline App

Забавные анимации, которые сделают ваше приложение запоминающимся

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

34a42230 2134 11e7 8d86 ff64100ad61a 576x1024 - Как успешно использовать анимацию в вашем мобильном приложении: виды анимации и принципы дизайна
Image source: AGMobileGiftInterface library

Функция плавности (easing) — наиболее полезный принцип Disney

В 1930-х годах аниматоры Диснея Олли Джонстон и Фрэнк Томас разработали 12 принципов анимации, которые были подробно описаны в книге «Иллюзия жизни: анимация Диснея». Многие люди создают анимации пользовательского интерфейса на основе принципов Disney, но на самом деле не все они работают для приложений. 

READ  Как разработать приложение с использованием VR
Easing is the most useful Disney principle 1 1024x512 - Как успешно использовать анимацию в вашем мобильном приложении: виды анимации и принципы дизайна

Одним из наиболее очевидных признаков компетентного дизайнера является сдержанность интерфейса. Чрезмерное использование анимации замедляет взаимодействие пользователя и приложения. Основным принципом дизайна мы можем назвать Easing, который делает элементы интерфейса более естественными. Есть три типа такого движения. Давайте разберем каждый

Ease-in

Эта кривая полезна в тех случаях, когда объекты вылетают с экрана на полной скорости. Например, это делается для системных уведомлений или карточек в интерфейсе. Однако стоит отметить, что Ease-in подходит только для случаев, когда объекты выходят за пределы экрана, и мы их не возвращаем.

Ease in 1 1024x512 - Как успешно использовать анимацию в вашем мобильном приложении: виды анимации и принципы дизайна

Ease-out

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

Ease out 1024x512 - Как успешно использовать анимацию в вашем мобильном приложении: виды анимации и принципы дизайна

Ease-in-out

Ease-in-out используется, когда элементы перемещаются из одной точки на экране в другую. В этом случае анимация выглядит максимально естественно и не привлекает слишком много внимания. Рассмотрим этот тип, используя боковое меню в качестве примера. Этот элемент исчезает с экрана, но пользователь может в любое время вернуть его на исходное место. Для таких элементов и используется принцип Ease-in-out.

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

Ease in out 1024x512 - Как успешно использовать анимацию в вашем мобильном приложении: виды анимации и принципы дизайна

Вывод

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