Gif анимация на мобильных устройствах доклад

Обновлено: 20.05.2024

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

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

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

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

Анимация в приложениях: разбиваем на типы по функциям

1. Визуальная обратная связь

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

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

2. Навигация

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

3. Функция изменения

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

4. Мониторинг состояния приложения

Например, почтовое приложение может показывать процесс отправки писем. Это хорошо видно из анимации с меняющимися числовыми значениями:

Ещё один пример анимации процессов приложении, широко известный как “pull down to refresh” или “потяни вниз для обновления”. Этот приём активно применяется в новостных приложениях, чтобы пользователь всегда видел, что его лента новостей пополняется новыми публикациями.

5. Структурирование информации

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

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

6. Подсказка

Использование анимированных подсказок в приложении помогает научить пользователя применять все элементы приложения так, как это задумано. Для этого можно расставлять визуальные акценты. Например, выделять активные элементы одним цветом, приводить их в движение при прикосновении.

Следующий пример хорошо отображает анимацию этого типа:

Здесь активные элементы выделяются зелёным цветом и параллельно сопровождаются эффектом вспышки. С помощью таких анимационных приёмов можно легко запомнить принцип работы приложения.

7. Гид по приложению

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

8. Кастомная анимация

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

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

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

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

Важные моменты: подводим итоги

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

8 основных типов анимации в целом работают по этому принципу и отличаются своими достоинствами:

  • Визуальная обратная связь – создаёт ощущение физического воздействия на объект
  • Навигация – облегчает перемещение по приложению
  • Функция изменения – акцентирует внимание пользователя на происходящих изменениях (положение элементов, разворот подробной карточки и т.п.)
  • Мониторинг состояния приложения – отображает ход процессов в приложении
  • Структурирование информации – показывает иерархию элементов и связи между ними
  • Подсказка – визуально подсказывает, как использовать элементы приложения
  • Гид по приложению – учит, как ориентироваться в многообразии функций приложения со сложной структурой
  • Кастомная анимация – создает уникальный пользовательский опыт и помогает узнаваемости бренда

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

Подпишитесь

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

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

Осторожно: под катом много тяжёлых гифок.

Оповещения о состоянии системы

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

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


Уведомите пользователей о результатах их действий. Изображение: Колин Гарвен (Colin Garven)

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


Простая анимация помогает пользователям понять, что происходит. Изображение: Ramotion

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


С помощью анимации можно начать взаимодействие с пользователем ещё до полной загрузки приложения. Изображение: UI8

Последовательность шагов в многоэтапных процессах

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

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

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

Представление новых элементов

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

С помощью анимации можно показать, откуда взялись объекты. Изображение: Вирджил Пана (Virgil Pana)

Навигация в приложении

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

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


Ориентационная анимация позволяет определить, где вы находитесь по отношению к тому, где вы были раньше. Изображение: Джэ Сон Чон (Jae-seong, Jeong)

В примере ниже плавающая кнопка (floating action button, FAB) превращается в элемент заголовка, что позволяет пользователю понять, как связаны эти два объекта.


Анимация визуализирует связи между элементами. Изображение: Аниш Чандран (Anish Chandran)

Минимизация когнитивной нагрузки

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

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

Почти в каждом приложении пользователю необходимо заполнить какие-либо формы. Во многих из них поля помечены подсказкой-заполнителем. Когда пользователь выбирает такое поле, подсказка пропадает. В результате становится трудно понять, какую информацию необходимо ввести. Всплывающие подсказки (floating label) позволяют пользователям не терять контекст и обеспечивают удобство при заполнении длинных форм.


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

Визуализация функциональных изменений

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

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


Анимация проигрывается при нажатии на кнопку, чтобы изменения были сразу заметны. Изображение: Юрре Хауткамп (Jurre Houtkamp)


Чётко покажите пользователям, что функция объекта изменилась. Изображение: Тамас Койо (Tamas Kojo)

Заключение

Главная задача анимации – объяснять логику приложения пользователю.


Анимации в мобильном приложении занимают все более важное место. UI/UX дизайнер Анатолий Нестеров делится своими представлениями об идеальной анимации в приложении.

Типы анимации в мобильном приложении

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

Визуальный фидбек

Функциональное изменение

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

На втором примере меняется как иконка, так и контент.

Ориентация в пространстве

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

На этом примере мы видим, как снизу экрана появляются дополнительные кнопки — там же, где находятся и другие опции.

Иерархия элементов и их взаимодействие

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

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

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

Визуальная подсказка

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

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

Состояние системы

Внутри вашего приложения всегда происходят некоторые процессы: информация загружается с сервера, производятся вычисления и так далее.

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

Забавные анимации

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

Создавая забавную анимацию нужно помнить о двух вещах: 1) убедитесь, что она не затмевает или скрывает функции приложения; 2) она не должна занимать много времени.

Главные принципы дизайна

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

1. Материал

Покажите из чего состоит ваш элемент: это что-то легкое или тяжелое, неподвижное или гибкое, плоское или объемное? Дайте пользователям понять, как этот UI элемент будет взаимодействовать с другими.

2. Траектория движения

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

3. Тайминг

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

4. Фокус анимации

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

5. Продолжение действия и наложение

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

Наложение означает, что второе действие начинается до завершения первого. Это удерживает интерес пользователя, поскольку между действиями нет никакой паузы.

6. Дополнительные действия

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

7. Плавное начало и конец

Это фундаментальный принцип дизайна, важный для анимации в целом и UI анимации в мобильной разработке в частности. Объекты в реальном мире не могут начать двигаться или остановиться мгновенно. Каждому из них нужно некоторое время на ускорение и торможение.

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

8. Ритм

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

9. Преувеличение

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


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

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

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

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

Legend

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

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

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

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

Достоинства:

  • Быстрое создание GIF.
  • Использование фото и видео.
  • Анимированный текст.
  • Большое количество шрифтов.
  • Есть эффекты и фильтры.
  • Много готовых шаблонов.
  • Простейший интерфейс.
  • Быстрая работа на слабых устройствах.
  • Использование видео для фона.
  • Поиск изображений на Flickr.
  • Совместимость с социальными сетями.

Недостатки:

Adobe Spark Post

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

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

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

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

Читайте также: