Секреты создания анимации в интерфейсах мобильных приложений

Сегодня редкое приложение обходится без использования анимаций. Даже самые простые и не сразу заметные пользователю анимированные элементы позволяют буквально «потрогать» приложение.

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

Концепция Material design, представленная Google на конференции Google I/O 2014, продолжает активно развиваться и набирать обороты в дизайне мобильных приложений. В основе material design заложены понятная и правильная физика движения объектов и отзывчивая анимация.

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

[Tweet «Хорошая мобильная анимация – разумная анимация»]

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

Проверьте наш чек-лист с основными параметрами правильно сделанной анимации:

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

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

Совет от разработчика:

Не надо изобретать велосипед. Пользователи любой из мобильных платформ (и iOS, и Android, и Windows Phone) успели привыкнуть к определенной логике действий, заложенной в устройствах на базе этих платформ. Поэтому начните с решения тех задач анимации, в которых можно использовать привычные пользователю приёмы.

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

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

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

Пример 1:

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

Пример 2:

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

Совет от разработчика:

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

3. Анимация должна быть осмысленной и целенаправленной

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

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

Пример:

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

Совет от разработчика:

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

4. Анимация должна быть пластичной и выполняться в едином ритме для всего приложения

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

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

Пример:

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

Совет от разработчика:

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

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