Да здравствует анимация! 4 основных типа анимации для вашего мобильного приложения

 

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

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

На самом деле, анимация – настолько старая и неотъемлемая составляющая мобильных приложений, что вы, вероятно, даже перестали обращать на нее внимания.

 

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

 

ЗАЧЕМ НУЖНА АНИМАЦИЯ В МОБИЛЬНОМ ПРИЛОЖЕНИИ

Если вы думаете, что анимация – это опциональная функция, которая увеличивает время загрузки приложения и может быть актуальна только для мобильных игр, у нас есть для вас три контраргумента:

  • Анимация снижает когнитивную нагрузку
  • Анимация упрощает навигацию
  • Анимация препятствует возникновению “слепоты к изменениям”

Резкие и нелогичные переходы от раздела к разделу в приложении приводят к возникновению перцептивного явления, известного в когнитивной психологии как “слепота к изменениям”.

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

 

ТИПЫ АНИМАЦИИ ДЛЯ МОБИЛЬНОГО ПРИЛОЖЕНИЯ

Анимацию для мобильных приложений можно условно разделить на 4 группы в зависимости от функции, которую они выполняют:

  • Визуальный отклик;
  • Логичный переход;
  • Статус системы;
  • Первый запуск приложения.

 

Рассмотрим эти типы анимации в мобильных приложениях подробнее:

 

  • ВИЗУАЛЬНЫЙ ОТКЛИК

Покажите пользователю, что приложение работает стабильно

Визуальный отклик – это ключевая функция для UI/UX дизайна, информирующая пользователей о том, что приложение отвечает на запросы и функционирует корректно.

Помните старые кнопочные пульты от телевизора? Нажимаете на кнопку, и канал переключается. Тактильная и визуальная обратная связь – два отклика по цене одного.

К сожалению, холодное стекло экрана смартфона не позволит вам почувствовать нажатие кнопки, но несомненно позволит его увидеть.

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

 

vivino 1

 

  • ЛОГИЧНЫЙ ПЕРЕХОД

Сделайте свое приложение еще приятнее для пользователей

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

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

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

 

vivino2

 

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

 

3

 

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

 

4

 

  • СТАТУС СИСТЕМЫ

Убедите пользователей, что все под контролем

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

Согласно Mobyaffiliates, 71% пользователей полагает, что на загрузку приложения не должно уходить больше 3 секунд, а 63% пользователей закрывают приложение, если оно грузится более 5 секунд.

 

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

 

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

 

skype

 

Пример: вам знакомо это чувство, когда вы ждете важное сообщение или письмо, обновляя страницу снова, и снова, и снова, и…? Что может быть хуже? Но все не так плохо, когда в приложении есть нестандартная анимация обновления ленты сообщений. Отличный вариант – переосмыслить ставшую уже классической pull-to-refresh анимацию.

Pull-to-refresh анимация незаменима при обновлении контента на странице как индикатор работоспособности приложения. Визуальный отклик происходит сразу же после получения запроса от пользователя и анимация демонстрирует, что все данные будут обновлены через несколько секунд.

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

 

hint

 

  • ПЕРВЫЙ ЗАПУСК ПРИЛОЖЕНИЯ

Направляйте пользователей эффективно\

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

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

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

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

 

hint

 

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

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

 

Мы можем говорить о мобильной анимации часами (и иногда мы действительно так и делаем), поэтому мы не смогли остановиться всего лишь после трех типов. Встречайте 4-ый бонусный тип – уникальная анимация.

  • УНИКАЛЬНАЯ АНИМАЦИЯ

Сделайте ваше приложение запоминающимся

Перечисленные ранее типы анимации можно было бы объединить в одну общую категорию под названием “функциональная анимация”, но теперь мы имеем дело с гораздо более любопытным явлением.

Уникальная анимация нацелена на выполнение не системной, а эстетической функции. Но разве не эстетика то, что привлекает пользователей и генерирует новых лидов?

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

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

 

deer

 

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

Неуместная и перегруженная анимация замедляет загрузку и портит впечатление о всем приложении.

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

 

Анимируйте ответственно вместе с Амбрелла

 

Фото: Shutterstock.com

 

 

 

 

 

 

 

 

 


Ещё

  • Выбирай, но проверяй: нанимайте топовых Angular разработчиков
    Выбирай, но проверяй: нанимайте топовых Angular разработчиков
      Выбирая разработчиков, вы выбираете не только технологии и скиллы, но инструменты и процессы, которые они используют. В этой статье вы узнаете о том, на какие моменты стоит обращать внимание при найме AngularJS и Angular специалистов, чтобы они соответствовали конкретным задачам вашего проекта и вывели ваш продукт на топовый уровень.   Проекты на Angular: от нуля …
  • Грядут перемены: новые возможности мобильных приложений в эпоху 5G
    Грядут перемены: новые возможности мобильных приложений в эпоху 5G
      Люди всегда стремились передавать информацию на большие расстояния. В древности это были сигнальные костры и почтовые голуби. В век технологий появились более совершенные способы: интернет и мобильная связь, которые постоянно эволюционируют. Одним из таких витков эволюции стали разработки в области 5G. 5G – новое поколение мобильной связи, открывающее неизведанные ранее горизонты как для пользователей, …
  • Мобильные платежи и безопасность: как избежать рисков
    Мобильные платежи и безопасность: как избежать рисков
      Электронная коммерция активно применяет мобильные приложения для платежей. Это гораздо удобнее и безопаснее, чем оплата наличными. Технологии, делающие акцент на удобстве пользователей, всегда будут привлекать к себе внимание клиентов. Безопасные мобильные платежи значительно улучшат качество обслуживания клиентов вашего бизнеса, оптимизируют процессы и сократят затраты. Несомненно, мобильные платежи будут продолжать эволюционировать. У них есть все предпосылки …