Действительно хорошая анимация делает приложение полезным и привлекает внимание, но, при этом, выглядит естественно и почти незаметно. Чтобы оптимизировать использование анимации, дизайнер должен понимать, какое место она занимает. Ведь успешное мобильное приложение использует анимацию там где это действительно нужно. Чтобы анимация была уместной, рассмотрим ее типы и основные принципы дизайна.
Типы анимации
Поскольку анимация интегрирована в интерфейс приложения, ее следует рассматривать как функциональный, а не декоративный элемент. При создании анимаций вам необходимо проанализировать ее влияние на удобство использования, и если вы не видите положительного влияния на взаимодействие, лучше отказаться от нее. Мы расскажем о наиболее популярных типах анимации, которая используется для улучшения взаимодействия и пользовательского опыта.
Изменение функций
Этот тип анимации показывает, как меняются функции элементов. Добавление такого типа анимации помогает сосредоточить внимание пользователя на происходящих изменениях. Чаще всего используются кнопки, значки и другие мелкие элементы дизайна. Когда вы нажимаете на картинку или кнопку, появляется дополнительная информация о них.
Визуальный фидбек
Визуальная обратная связь является неотъемлемой частью любого пользовательского интерфейса. Физические объекты реагируют, когда мы взаимодействуем с ними. Поэтому люди подсознательно ожидают, что в мобильных приложениях будет что-то похожее. Фидбек в виде аудио или вибрации дает пользователю ощущение контроля при работе, а визуальный отклик показывает, что приложение работает правильно. Когда кнопка увеличивается при нажатии или изображение перемещается в заданном направлении, становится ясно, что приложение реагирует на команды пользователя.
Подсказки для пользователя
Использование анимированных подсказок помогает обучить пользователя тому, как использовать все элементы приложения по назначению. Для этого вы можете установить визуальные акценты. Например, выделите активные элементы одним цветом, или сделайте так, чтобы они двигались при нажатии.
Навигация
В основном пользователь ориентируется в приложении, используя меню со списком основных разделов или функций. Однако многие приложения имеют сложную структуру. В этом случае анимация работает как визуальный ориентир. То есть пользователь видит, как меняется изображение на экране в процессе выбора и навигации по разделам приложения. Таким образом, анимация используется для намеренного перемещения пользователя по приложению и помогает запомнить, как использовать элементы управления.
Структура элементов и их взаимодействие
Анимация идеально подходит для описания различных частей интерфейса и демонстрации их взаимодействия друг с другом. Каждый анимированный элемент имеет свое назначение и место. Например, если кнопка активирует всплывающее меню, было бы лучше, если бы там появлялись кнопки, а не просто слайдер. Это поможет пользователю понять, что два элемента (кнопка и всплывающее меню) взаимосвязаны.
Состояние системы
Пользователи хотят знать об основных процессах в приложении, таких как загрузка документов или изображений, отправка сообщений, воспроизведение аудио и видео и другие. Анимация позволяет демонстрировать прогресс процесса и отслеживать статус приложения в режиме реального времени. Это дает пользователю ощущение спокойствия и контроля над ситуацией. Мобильное приложение будет лучше восприниматься, если каждый процесс сопровождается характерной анимацией.
Забавные анимации, которые сделают ваше приложение запоминающимся
Вы можете использовать анимацию просто потому что это весело, а также, чтобы запомниться пользователям. Мудрая интеграция брендинга в дизайн пользовательского интерфейса может сыграть важную роль в повышении узнаваемости бренда. В большинстве случаев это анимация логотипов, маскотов и других элементов, которые часто используются для экранов приветствия.
Функция плавности (easing) — наиболее полезный принцип Disney
В 1930-х годах аниматоры Диснея Олли Джонстон и Фрэнк Томас разработали 12 принципов анимации, которые были подробно описаны в книге «Иллюзия жизни: анимация Диснея». Многие люди создают анимации пользовательского интерфейса на основе принципов Disney, но на самом деле не все они работают для приложений.
Одним из наиболее очевидных признаков компетентного дизайнера является сдержанность интерфейса. Чрезмерное использование анимации замедляет взаимодействие пользователя и приложения. Основным принципом дизайна мы можем назвать Easing, который делает элементы интерфейса более естественными. Есть три типа такого движения. Давайте разберем каждый
Ease-in
Эта кривая полезна в тех случаях, когда объекты вылетают с экрана на полной скорости. Например, это делается для системных уведомлений или карточек в интерфейсе. Однако стоит отметить, что Ease-in подходит только для случаев, когда объекты выходят за пределы экрана, и мы их не возвращаем.
Ease-out
Это обратный эффект: объект быстро преодолевает большое расстояние и постепенно замедляется до полной остановки. Эти кривые полезны в случаях, когда элемент быстро появляется на экране, постепенно замедляется и останавливается. Ease-out можно использовать для карточек или объектов, которые появляются из края экрана.
Ease-in-out
Ease-in-out используется, когда элементы перемещаются из одной точки на экране в другую. В этом случае анимация выглядит максимально естественно и не привлекает слишком много внимания. Рассмотрим этот тип, используя боковое меню в качестве примера. Этот элемент исчезает с экрана, но пользователь может в любое время вернуть его на исходное место. Для таких элементов и используется принцип Ease-in-out.
Больший акцент стоит сделать на конец кривой, чем на ее начало, чтобы объект ускорялся немного быстрее, чем замедлялся. Так пользователь будет уделять больше внимания окончательному перемещению элемента, что позволит сосредоточиться на его новом состоянии.
Вывод
Использование принципов и правил, описанных выше, позволит веб-разработчикам создавать интересные анимации, которые выглядят великолепно. Если анимация учитывает визуальные особенности обычных объектов и соответствует действиям пользователя, это значительно улучшит общее впечатление от приложения. Мы также можем сделать вывод, что хорошая анимация — это те элементы, которые используются в нужном месте и не перегружают интерфейс приложения.
