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

Да здравствует анимация! 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

 

 

 

 

 

 

 

 

 


Ещё

  • Umbrella IT признана одной из ведущих российских компаний в области мобильной и веб разработки в рейтинге GoodFirms
    Umbrella IT признана одной из ведущих российских компаний в области мобильной и веб разработки в рейтинге GoodFirms
    Согласно GoodFirms компания Umbrella IT занимает высокую позицию в рейтинге ведущих российских компаний, предлагающих услуги мобильной и веб-разработки. Агентство GoodFirms базируется в Вашингтоне, округ Колумбия, и занимается исследовательской и аналитической деятельностью. Платформа пользуется уважением благодаря объективности исследований и помогает найти поставщиков услуг самого высокого качества. Недавно агентство GoodFirms проводило анализ работы компании Umbrella IT на основании …
  • Оплата картами в вашем приложении: узкие места мобильной коммерции и как их обойти
    Оплата картами в вашем приложении: узкие места мобильной коммерции и как их обойти
    В 2021 г. покупки в цифровой среде совершат 2,14 миллиарда человек, сообщает Statista. А на популярной торговой площадке Shopify продажи через мобильные устройства в дни Черной пятницы и Киберпонедельника в 2017 г. составили 64% от всех продаж (на 10% больше, чем в предыдущем году). Пользователи охотно устанавливают и используют мобильные приложения, потому что в них можно …
  • Umbrella IT вошла в Топ веб и мобильных разработчиков
    Umbrella IT вошла в Топ веб и мобильных разработчиков
    Скейтбордисты и банджи-джамперы любят риск. Будоражащее кровь чувство опасности – именно то, что заставляет их сердца биться быстрее. Но когда дело касается представления своего бизнеса в интернете – зачем рисковать? Umbrella IT – надежный партнер. Мы были первым официальным партнером Symfony в России. Наш опыт и экспертизу давно ценят наши клиенты, а теперь – и …