Анимированные UI-эффекты в мобильных приложениях

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

Вдохновляемся, друзья. Оригинал статьи.

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

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

Навигация

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

Анимированные элементы

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

Гамбургер

Анимированная кнопка «гамбургер» усиливает ощущение прямой манипуляции и делает переход к новому состоянию (экран с опциями навигации верхнего уровня) более очевидным для пользователей.

Переходы состояний

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

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

Ввод данных

Ошибки ввода

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

Установка пароля

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

Текущее состояние системы

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

Для быстрых операций (менее десяти секунд) рекомендуется использовать бесконечные загрузчики.

Для более длительных операций (более десяти секунд) рекомендуется использовать анимированные индикаторы состояния.

Обновление контента

Pull-to-refresh-анимация

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

Образование и руководство

Анимированные подсказки

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

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

Восторг

Нравится или не нравится

Хорошо продуманные анимированные UI-эффекты для кнопки «лайк».

Чтобы не пропустить ещё больше интересных статей, новостей и всевозможных подборок — заходите на наш блог и Telegram-канал.

0
30 комментариев
Написать комментарий...
Dmitry Mezenin

Кто-то открыл для себя Dribbble? О чём статья?

Ответить
Развернуть ветку
Valera Rybakoff

На самом деле всё это создаёт шум и ощущение заторможенности.

Ответить
Развернуть ветку
Клим Мамаев

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

Ответить
Развернуть ветку
Pixel Lens

лайтовая анимация действительно уместна и впрямь сильно помогает, НО вызывает лаги =\

Ответить
Развернуть ветку
John Doe

Знать бы еще как все это реализовать)

Ответить
Развернуть ветку
Arkady Hh

Знать бы еще как это делается!

Ответить
Развернуть ветку
Aleksandr Talalaev

За отправную точку гуглите airbnb lottie

Ответить
Развернуть ветку
Леонид Барышников

After effects в помощь. Научиться делать не проблема, главное, чтобы было зачем.

Ответить
Развернуть ветку
Вы в федеральном розыске

И как After Effects поможет в разработке под Андроид и iOs?

Ответить
Развернуть ветку
Andrey Uglev

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, and allows native apps to use animations as easily as they use static assets.

Ответить
Развернуть ветку
Ilya Che

SwiftUI такое реализовывает.

Ответить
Развернуть ветку
Useforlogin

Дада. Давайте потратим три недели команды разработки на пару свистелок, ведь у нас есть лишние полмиллиона рублей. 

Дизайнеры в своем дрибло-пузыре такие очаровательные. 

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Useforlogin

А где вы увидели проекты с неограниченным бюджетом и сроками? 

Давайте вообще UI/UX отдадим на откуп разработчикам? Ух, сэкономим!

Ох уж этот черно-белый инфантильный мир. 

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Useforlogin

Очень смешно, спасибо.
Лояльность у нас теперь считается в анимированных иконках. "Еще три иконки и у нас будет +1 лояльность! По коням!"

Ответить
Развернуть ветку
Bender Rodriguez

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

Ответить
Развернуть ветку
borodutch

Ну вот у мобильного приложения Скайпа эти спистоперделки доведены до абсурда. И что?

Ответить
Развернуть ветку
Yaroslav M

Не очень ясно: чему здесь вдохновляться? На любом смартфоне полно приложений с подобной анимацией.

Ответить
Развернуть ветку
Roland

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

Ответить
Развернуть ветку
Дмитрий Сильнов

Блять, когда я вижу такую хуйню, я спешу напомнить, что даже Apple и Balenciaga, из того что приходит на ум, отказались от ряда свистелок, потому что первые не смогли оптимизировать (тот же itunes для мак, где фон менялся под цвет обложки) а баленсиага охуела поддерживать (я про версию дизайна, где очень красиво товары помещались в корзину) 

А то, что показано в статье, проще на unity делать)))) Один только виджет из приложения музыки с тремя разными состояниями чего стоит)))
Совершенно не скейлящееся решение, от которого телефоны будут плакать, а от прототипа на фигме с миллионом слоев будет троттлить топовый макпро))

Ответить
Развернуть ветку
Nikolay Talanov

Со вторым индикатором загрузки у меня вот похожая демка есть трехлетней давности (основанная на гифке с дрибббла) https://codepen.io/suez/pen/rrraYb

Ответить
Развернуть ветку
Salvatore

Красивенько, в конце только галочка не по центру

Ответить
Развернуть ветку
Anatolii Nesterov

Статья с информацией 5-ти летней давности коих в сети чуть больше чем дохера. Зочем?

Ответить
Развернуть ветку
proflance

Ребят, в чём делаете анимацию?

Ответить
Развернуть ветку
Dmitry Mezenin

After Effects, Animate CC, CSS3, CreateJS/GSAP. Простые анимации в интерфейсах с недавних пор еще начал собирать прямо в Figma. Drama еще крутое приложение.

Ответить
Развернуть ветку
Дарья Семенова

Инфа интересная , знать бы ещё как это все реализовать ) возможно курсы покупать , через Ютуб пробовать

Ответить
Развернуть ветку
Денис Верхоломчук

Спасибо за вдохновение!

Ответить
Развернуть ветку
Алексей Ульянов

как это всё красиво. кайф

Ответить
Развернуть ветку
Миша Ландау

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

Ответить
Развернуть ветку
27 комментариев
Раскрывать всегда