мобильная анимация что это
Анимированные переходы в мобильных приложениях
Изображение: Ramotion
Анимация играет важную роль во взаимодействии с пользователями. Например, в мобильных приложениях с её помощью можно передать очень многое. Когда вы отправляете сообщение, открываете раздел настроек, ставите флажок или переходите на другую страницу, на экране происходят изменения. Анимация таких изменений — это удобный способ отображения действий пользователя.
В этой статье мы рассмотрим несколько типичных случаев, когда функциональная анимация дополняет визуальный дизайн и поддерживает взаимодействие пользователя с интерфейсом.
Осторожно: под катом много тяжёлых гифок.
Оповещения о состоянии системы
Если пользователь выполняет в системе какое-то действие, он ожидает увидеть чёткое и понятное подтверждение, что его запрос принят и обрабатывается. Вот несколько примеров того, как анимация позволяет повысить качество взаимодействия с пользователем.
Уведомите пользователей о результатах их действий. Изображение: Колин Гарвен (Colin Garven)
Простая анимация помогает пользователям понять, что происходит. Изображение: Ramotion
С помощью анимации можно начать взаимодействие с пользователем ещё до полной загрузки приложения. Изображение: UI8
Последовательность шагов в многоэтапных процессах
Некоторые действия требуют выполнения нескольких шагов. Очень важно, чтобы эти шаги были связаны друг с другом. Анимация — отличный инструмент, который помогает связать между собой каждый шаг и создаёт целостную картину происходящего.
Ниже представлен отличный пример того, как с помощью анимации можно отобразить последовательное развитие событий.
Изображение: Якуб Анталик (Jakub Antalík)
Анимация помогает дизайнерам использовать метод последовательного раскрытия (progressive disclosure). Он упрощает взаимодействие пользователя с интерфейсом, потому что в нужный момент отображается только необходимая часть информации. Ниже представлены два ярких примера применения последовательного раскрытия, когда пользователь получает информацию порциями.
Изображение: Ramotion
Изображение: Антон Скворцов
Представление новых элементов
Когда мы представляем новый элемент на странице, то стараемся привлечь к нему внимание пользователя и объяснить, зачем он нужен. В таких случаях анимация позволяет показать связи между объектами и их иерархию.
С помощью анимации можно показать, откуда взялись объекты. Изображение: Вирджил Пана (Virgil Pana)
Навигация в приложении
Анимация облегчает навигацию в приложении. Это особенно важно для мобильных устройств. Всё время отвлекаясь и работая с приложением на маленьком экране, пользователь может просто запутаться в огромном количестве различных страниц.
И здесь приходит на помощь анимация. Она объясняет пользователю, как связаны между собой переходы между экранами. Она не даёт ему запутаться, объясняя, где он находится в данный момент.
Ориентационная анимация позволяет определить, где вы находитесь по отношению к тому, где вы были раньше. Изображение: Джэ Сон Чон (Jae-seong, Jeong)
В примере ниже плавающая кнопка (floating action button, FAB) превращается в элемент заголовка, что позволяет пользователю понять, как связаны эти два объекта.
Анимация визуализирует связи между элементами. Изображение: Аниш Чандран (Anish Chandran)
Минимизация когнитивной нагрузки
Когнитивная нагрузка — это количество умственных усилий, необходимых для того, чтобы использовать продукт. Она во многом определяет удобство использования приложения. Как правило, чем больше усилий приходится прилагать для использования продукта, тем меньше он нравится пользователям.
Нашей целью является создание лёгкого в применении и удобного интерфейса. Анимация, если её правильно использовать, позволяет снизить количество усилий, необходимых для выполнения той или иной задачи.
Почти в каждом приложении пользователю необходимо заполнить какие-либо формы. Во многих из них поля помечены подсказкой-заполнителем. Когда пользователь выбирает такое поле, подсказка пропадает. В результате становится трудно понять, какую информацию необходимо ввести. Всплывающие подсказки (floating label) позволяют пользователям не терять контекст и обеспечивают удобство при заполнении длинных форм.
Когда речь заходит о вводе данных пользователем, не стоит полагаться на его память. Всю критически важную информацию необходимо оставить на виду. Изображение: MDS
Визуализация функциональных изменений
После взаимодействия с пользователем элемент может поменять свою функцию. Например, после нажатия кнопка начинает выполнять новое действие. Если анимировать это изменение, пользователю будет легче ответить на вопрос, что же теперь делает данный элемент.
Отличный пример можно найти во многих мобильных приложениях. Речь о переключателе. Анимация позволяет пользователю понять, в каком состоянии находится элемент.
Анимация проигрывается при нажатии на кнопку, чтобы изменения были сразу заметны. Изображение: Юрре Хауткамп (Jurre Houtkamp)
В некоторых случаях функциональное изменение одного элемента может полностью «изменить экран». В качестве примера можно привести кнопку меню, которая превращается в X и включает новый режим отображения.
Чётко покажите пользователям, что функция объекта изменилась. Изображение: Тамас Койо (Tamas Kojo)
Заключение
Если подойти к использованию анимации вдумчиво, её возможности окажутся поистине огромными. С её помощью можно оживить интерфейсы, сделав их по-настоящему «отзывчивыми» к действиям пользователя, и решить множество функциональных проблем. Для чего бы ни было предназначено ваше приложение, оно будет тесно взаимодействовать с пользователем. И именно анимация поможет сделать это взаимодействие по-настоящему захватывающим и эффективным.
12 приложений для создания анимации
Анимацию в основном создают при помощи сложных программ для компьютера вроде After Effects или Maya. В них получаются максимально качественные ролики, но для работы с ними требуется много практики и знаний.
А что делать, если нужно создать что-нибудь простенькое? К счастью, есть множество приложений для смартфонов, которые позволят нарисовать вполне приличные двух- и трехмерные ролики, не прибегая к сложному ПО. Причем большинство из них — бесплатны.
Animation Desk
В Animation Desk можно добавить анимацию к изображениям, видео, слоям PSD или нарисовать все покадрово с нуля. Здесь есть все базовые инструменты, в том числе набор из 46 кистей и шрифтов, видеоинструкция по раскадровке и красивые штампы, а также несколько карандашей с регулируемой толщиной и прозрачностью линии.
Найдется и много других функций – анимированные фрагменты можно отобразить в виде раскадровки, указать тег или комментарий к каждому кадру, импортировать/экспортировать слои Photoshop и сохранить работу в разных форматах. Для работы доступно до девяти слоев.
Rough Animator
RoughAnimator подойдет и новичкам и профессионалам. Здесь есть всё, что нужно для создания классической покадровой анимации. Но есть небольшой минус — приложение стоит 5 долларов.
Все элементы интерфейса расположены идеально. Поэтому с приложением довольно легко разобраться. С ходу доступны таймлайн и неограниченное количество слоев, легко регулируются настройки кистей и время экспонирования каждого рисунка, есть функция синхронизации губ персонажа с речью.
Stick Nodes
Stick Nodes позволяет мгновенно создавать мультфильмы на основе схематических рисунков и сохранять их в виде гифок или в формате MP4. Приложение автоматически достраивает промежуточные кадры, делая анимацию более плавной. Виртуальная камера перемещениями и наездами добавляет кинематографичности, а еще здесь есть широкий выбор шейпов и оттенков цветов.
Плюс ко всему на сайте бесплатно выложены тысячи моделей, которые можно редактировать на свой вкус. Отлично подойдет новичкам. В то же время приложение достаточно мощное, чтобы продвинутые пользователи могли продемонстрировать свой талант.
Draw Cartoons
В Draw Cartoons у вас запросто получится создать мультик, контролируя каждый штришок. Можете начать с персонажей и предметов из коллекции приложения, а можете нарисовать собственный мультфильм с нуля. Для работы доступно любое количество слоев, есть возможность озвучки. Готовый проект можно сохранить в формате MP4.
Доступно только для Android.
Stop Motion Studio
С помощью Stop Motion Studio можно создать анимацию в стиле историй про Уоллеса и Громита или прикольных короткометражек Lego на YouTube. За обманчивой простотой интерфейса скрываются мощные инструменты.
Разобраться в приложении нетрудно — показываются подсказки о том, как расположить элементы в кадре и пользоваться интерактивным таймлайном. В видео можно добавить титры, плашки и надписи. Чтобы получилось качественное видео, лучше снимать в 4К и использовать хромакей.
PicsArt Animator
С помощью PicsArt Animator можно без труда сделать простую анимацию. Забавные каракули, движущиеся стикеры и гифки делаются за пару секунд – никаких особых знаний не нужно. А возможность дублирования кадров, поддержка множества слоев и контроль скорости позволяют создавать более сложную анимацию. Готовый ролик можно сохранить в GIF или видео.
Toontastic 3D
С помощью этого приложения от Google, дети могут создавать собственные мультфильмы. Делать это в Toontastic 3D очень легко – нужно просто нажать кнопку «запись» и передвигать персонажа по экрану. Среди персонажей есть лихие пираты, коварные злодеи, принцессы, трансформеры и многие другие, которые пробудят детское воображение.
Можно выбрать одну из трех опций: классическая история, короткая история или научный доклад. В каждой будет оригинальная завязка, кульминация и развязка. После того, как будет завершен последний этап, Toontastic 3D всё обработает и покажет созданный мультфильм. Его можно выложить в интернет и показать родственникам.
FlipaClip: Cartoon Animation
В FlipaClip есть всё необходимое для создания набросков, раскадровок и анимации. Можно анимировать несколько слоев, есть таймлайн, режим просмотра кадров, сетка и множество инструментов – кисти, лассо и готовые шейпы. А еще видео можно ротоскопировать и добавить до шести звуковых дорожек.
Если хотите сделать собственный мультфильм, FlipaClip вам определенно поможет. Нарисуйте необходимое количество изображений и приложение автоматически создаст из них мультфильм.
Stick Fighter
Stick Fighter – простенькое приложение для создания такой же простой анимации. Несложными инструментами можно создавать битвы на палках, пистолетах, топорах и ножах. Результат – почти как в флипбуке. Так что, если будете в настроении сочинить покадровую анимацию – попробуйте Stick Fighter!
Animate it
Приложение во многом похоже на Toontastic. Клипы, сцены и персонажи редактируются как угодно. В сцене можно разместить несколько действующих лиц и заставить их двигаться. Персонажи, честно говоря, выглядят странновато и ничего серьезного не сделаешь, но если хотите повеселиться – сгодится в самый раз.
Animation Desk Classic
Интерфейс в Animation Desk Classic устроен в точности как рабочее место аниматора. Всё интуитивно понятно и оформлено под альбом для зарисовок.
Все нужные инструменты выбираются нажатием – заливка, карандаш, перьевая ручка, три вида кистей и ластик. У каждого можно отрегулировать толщину линии, прозрачность и жесткость. Еще здесь можно изменять частоту кадров и накладывать соседние кадры друг на друга. В общем, есть всё, чтобы создавать замечательную анимацию.
Bot3D Editor
Bot3D позволяет создавать трехмерных персонажей, которые умеют говорить и танцевать. Можно одеть свою модель с ног до головы. Функция FaceEditor добавит ей эмоций, а HandEditor заставит руки и ноги двигаться. Можно даже задать движения пальцев, вплоть до едва различимых движений суставов. Есть также опция синхронизации речи в реальном времени: вы говорите в микрофон, а ваш персонаж повторяет ту же мимику.
Да здравствует анимация! 4 основных типа анимации для вашего мобильного приложения
Считается, что одно изображение может заменить тысячу слов. Сколько же слов способна заменить одна анимация? Время отдать должное анимации в мобильных приложениях вместе с Umbrella IT.
Однако почти каждое нажатие кнопки, почти каждая активация бургер-иконки вызывает анимированный системный отклик. Большинство анимаций подобного рода направлены скорее на оптимизацию процессов, чем на создание эстетики. Тем не менее даже у них есть своя изюминка.
ЗАЧЕМ НУЖНА АНИМАЦИЯ В МОБИЛЬНОМ ПРИЛОЖЕНИИ
Резкие и нелогичные переходы от раздела к разделу в приложении приводят к возникновению перцептивного явления, известного в когнитивной психологии как “слепота к изменениям”.
Такое бессвязное переключение между навигационными слоями порождает много неструктурированной информации, с обработкой которой человеческий мозг просто не справляется. В результате, пользователь совершенно перестает понимать логику интерфейса приложения. Анимация именно тот инструмент, который сглаживает эффект от происходящих изменений, делая их более прозрачными и понятными.
ТИПЫ АНИМАЦИИ ДЛЯ МОБИЛЬНОГО ПРИЛОЖЕНИЯ
Анимацию для мобильных приложений можно условно разделить на 4 группы в зависимости от функции, которую они выполняют:
Рассмотрим эти типы анимации в мобильных приложениях подробнее:
Покажите пользователю, что приложение работает стабильно
К сожалению, холодное стекло экрана смартфона не позволит вам почувствовать нажатие кнопки, но несомненно позволит его увидеть.
Сделайте свое приложение еще приятнее для пользователей
Современные мобильные приложения имеют сложную структуру, состоящую из многочисленных навигационных слоев. Переход с одного слоя на другой должен быть простым и интуитивным.
Убедите пользователей, что все под контролем
Большинство пользователей даже не догадываются, сколько скрытых процессов протекают в активном приложении и сколько времени требуется на каждый из них. Однако в ряде случаях необходимо знать точно на какой стадии находится тот или иной процесс, будь это загрузка медиа файлов или обновление приложения.
Согласно Mobyaffiliates, 71% пользователей полагает, что на загрузку приложения не должно уходить больше 3 секунд, а 63% пользователей закрывают приложение, если оно грузится более 5 секунд.
Pull-to-refresh анимация незаменима при обновлении контента на странице как индикатор работоспособности приложения. Визуальный отклик происходит сразу же после получения запроса от пользователя и анимация демонстрирует, что все данные будут обновлены через несколько секунд.
В качестве наглядной иллюстрации мы предлагаем посмотреть вам на лого-призрак мессенджера Snapchat, который начинает танцевать на меняющем цвета фоне при попытке пользователя потянуть список чатов вниз, чтобы обновить страницу. На наш взгляд, это превосходное решение UI дизайна, сочетающее в себе чистый функционал и элемент игры.
Направляйте пользователей эффективно
Анимация часто используется в качестве подсказки, чтобы выделить определенный элемент или опцию меню, или чтобы помочь пользователю быстро сориентироваться в новом для него приложении.
В мобильном плеере для аудиокниг Voice при первом запуске приложения появляется анимация, выделяющая главные опции в меню. Не сомневайтесь, ваши пользователи точно не пропустят такой пульсирующий пузырь.
Количество пользователей вашего приложения и, соответственно, ваша прибыль напрямую зависят от того, насколько приятным был опыт взаимодействия пользователя с вашим приложением. И креативная и функциональная анимация играет в этом не последнюю роль.
Мы в Umbrella IT уверены, что анимация в мобильных приложениях, независимо от тематики или платформы, неочевидный, но продуктивный инструмент, способный оказать мощный положительный эффект на ваш бизнес.
Сделайте ваше приложение запоминающимся
Перечисленные ранее типы анимации можно было бы объединить в одну общую категорию под названием “функциональная анимация”, но теперь мы имеем дело с гораздо более любопытным явлением.
Уникальная анимация нацелена на выполнение не системной, а эстетической функции. Но разве не эстетика то, что привлекает пользователей и генерирует новых лидов?
Мы в Umbrella IT считаем, что нестандартная анимация очень недооценена, вопреки тому, что именно она формирует восприятие и превращает взаимодействие со скучным приложением в увлекательный опыт.
Пример: очевидно, что анимация в этом примере, лишь временная фича, приуроченная к праздникам. И кратковременность делает эту анимацию еще более уникальной. Коснувшись снежного сугроба в правом нижнем углу экрана, пользователь активирует анимацию: незамедлительно начинает сыпаться снег, а из сугроба появляются крошечный олень и медведь, закутанный в желтый шарф.
Неуместная и перегруженная анимация замедляет загрузку и портит впечатление о всем приложении.
Простая и нестандартная анимация превращает ваше приложение в уникальный продукт и кратно увеличивает количество пользователей.
Анимированные UI-эффекты в мобильных приложениях
Примеры применения анимации в мобильных интерфейсах. Навигация, гамбургер, переходы состояния, ввод данных, ошибки, обновление контента.
Анимированные UI-эффекты используются во многих мобильных приложениях. Хорошо продуманная анимация и движение могут повысить удобство использования и сделать взаимодействие с продуктом более увлекательным и приятным.
В этой статье речь пойдёт о нескольких элементах, где дизайнеры могут применить анимацию для улучшения UX.
Хорошо продуманные анимированные эффекты облегчают взаимодействие пользователей с вашим приложением.
Анимированные значки на панели вкладок служат двум целям — они сообщают текущее местоположение и подтверждают выбор пользователя, предоставляя приятную визуальную обратную связь.
Анимированная кнопка «гамбургер» усиливает ощущение прямой манипуляции и делает переход к новому состоянию (экран с опциями навигации верхнего уровня) более очевидным для пользователей.
Анимация может использоваться как для маленьких, так и для больших элементов пользовательского интерфейса. Например, можно использовать микроанимацию для таких элементов, как переключатели и кнопки призыва к действию.
Но анимация также может заполнить промежутки между предварительным просмотром и подробным состоянием фрагментов контента. В этом случае она выполняет промежуточные роли и делает визуальный переход более естественным.
Прыгающая анимация обычно используется для информирования пользователей о том, что их ввод неверен. Она особенно полезна в случаях ввода пароля.
Большинство из нас сталкивались с проблемами при создании пароля для нового сервиса. Когда правила надёжности пароля не проверены в действии, пользователь натыкается на ошибку. Анимация может помочь преодолеть эту проблему путём предупреждения о некорректном вводе.
Очень важно держать пользователя в курсе текущего состояния системы. Когда пользователи начинают какую-либо операцию и не получают никакой обратной связи, есть вероятность, что они будут раздражены и закроют приложение. Анимация позволяет пользователю точно знать, что происходит.
Для быстрых операций (менее десяти секунд) рекомендуется использовать бесконечные загрузчики.
Для более длительных операций (более десяти секунд) рекомендуется использовать анимированные индикаторы состояния.
Анимация Pull-to-refresh обеспечивает мгновенную обратную связь о действии обновления контента, инициированном пользователем. Она также может сделать время ожидания более приятным.
Движущиеся объекты привлекают внимание — наши глаза естественным образом отслеживают их направление. Мы можем правильно использовать это в дизайне пользовательского интерфейса, чтобы привлечь внимание пользователей и научить их тому, как работать с системой.
Дайте пользователям советы о том, какие действия возможны в UI. Выделите основные функции и важные элементы управления.
Хорошо продуманные анимированные UI-эффекты для кнопки «лайк».
Чтобы не пропустить ещё больше интересных статей, новостей и всевозможных подборок — заходите на наш блог и Telegram-канал.
Кто-то открыл для себя Dribbble? О чём статья?
На самом деле всё это создаёт шум и ощущение заторможенности.
Это все палка о двух концах, если инструмент реализовать правильно не нагружая интерфейс, то и пользователь не будет плеваться
лайтовая анимация действительно уместна и впрямь сильно помогает, НО вызывает лаги =\
Знать бы еще как все это реализовать)
Знать бы еще как это делается!
За отправную точку гуглите airbnb lottie
After effects в помощь. Научиться делать не проблема, главное, чтобы было зачем.
И как After Effects поможет в разработке под Андроид и iOs?
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.
SwiftUI такое реализовывает.
Дада. Давайте потратим три недели команды разработки на пару свистелок, ведь у нас есть лишние полмиллиона рублей.
Дизайнеры в своем дрибло-пузыре такие очаровательные.
Где вы в статье увидели про ограничение бюджета?
Давайте вообще UI/UX отдадим на откуп разработчикам? Ух, сэкономим!
А где вы увидели проекты с неограниченным бюджетом и сроками?
Давайте вообще UI/UX отдадим на откуп разработчикам? Ух, сэкономим!
Ох уж этот черно-белый инфантильный мир.
А где вы увидели проекты с неограниченным бюджетом и сроками?
Например, личные проекты, которые делаются в свободное от работы время для наработки навыков, или стартапы, где все сначала делается ради пользователя и его восприятия продукта?
Или в вашем мире все работают на огромные корпорации, где за каждый пук нужно отчитаться по расходам 8 начальникам и занести время в TMS?
Пока вы экономите на восторге пользователя, кто-то вас уже опередил и получил куда больше лояльности.
Очень смешно, спасибо.
Лояльность у нас теперь считается в анимированных иконках. «Еще три иконки и у нас будет +1 лояльность! По коням!»
тут никто не говорит о том, что это необходимо, но как мелочи очень хорошо работают (можно например посмотреть как сделаны анимации в телеге), при этом я видел апки которые рисовали типичные дриблодизайнеры и пользоваться этим невозможно из-за того что все прыгает/ездит
Ну вот у мобильного приложения Скайпа эти спистоперделки доведены до абсурда. И что?
Не очень ясно: чему здесь вдохновляться? На любом смартфоне полно приложений с подобной анимацией.
Вот что бывает когда человек, делающий раньше свистоперделки для сайтов, лезет в разработку мобильных приложений.
А то, что показано в статье, проще на unity делать)))) Один только виджет из приложения музыки с тремя разными состояниями чего стоит)))
Совершенно не скейлящееся решение, от которого телефоны будут плакать, а от прототипа на фигме с миллионом слоев будет троттлить топовый макпро))
Со вторым индикатором загрузки у меня вот похожая демка есть трехлетней давности (основанная на гифке с дрибббла) https://codepen.io/suez/pen/rrraYb
Красивенько, в конце только галочка не по центру