Наши с вами требования к современным девайсам с каждым годом меняются. Мы становимся более придирчивы и хотим иметь более качественный продукт. Чаще всего, это касается мобильных приложений.
Ежедневно мы используем целый ряд разнообразных приложений, где вшиты необычные анимации, без которых мы бы относились к этим разработкам на порядок хуже.
Сборные (нестандартные) анимации – это хороший шанс для разработчика, он может экспериментировать в развитии своего приложения. Эта статья ознакомит вас с популярными проблемами дизайнеров и разработчиков. Пожалуй, рассмотрим эти проблемы на примере программы iFunny.
Разберем основу
В основе всегда лежит документация. Начнем мы с теории. Следующие документы помогут нам более ясно понимать, что именно представляют собой анимации в мобильных разработках:
От Google, Material Design. В этом месте испытывают анимации с точки зрения математики и инженерии. Такой документ является базовым для дизайнеров. В нем вы найдете множество различных рекомендаций по обычным значениям, вроде скорости или ускорения, базовые движения для объектов и многое другое.
От Apple, Human Interfaces Guidelines. В этом же документе анимация рассматривается уже с точки зрения эмоций. Имеется в виду, что производят анализ, какие именно эмоции должна вызывать та или иная анимация.
И, наверное, самый популярный, это 12 принципов анимации от Диснея. Мультипликаторы этой студии, еще в 1981 году опубликовали книгу «Иллюзия жизни: анимация Диснея», эта книга поведает о 12 принципах реалистичной анимации. Даже несмотря на то, что такие принципы были рассчитаны для мультипликаций, их часто используют в мобильных интерфейсах.
Предназначение.
Любая анимация имеет свое назначение и всегда должна использоваться в области своего функционала. Потому, перед началом проведения работ с анимацией, узнайте точно, к какому типу ваша разработка относится.
Абстрактно можно разделить анимации на 3 больших раздела:
Вспомогательные. Это большая группа, которая упрощает навигацию, к тому же помогает определить положение того или иного объекта в данной системе, может показать вам иерархию объектов в приложении, также делает акцент на объектах в приложении, таким образом интерфейс становится более понятным для потребителя.
Могу привести пример, плавно выезжающая картинка из галереи, тут как раз задействован этот принцип, он увеличивает картинку, когда мы ее выбираем, чтобы взглянуть поближе.
Обратная связь с клиентом. Основная функция этой анимации в том, чтобы показать потребителю, где он именно находится, в каком состоянии приложение или для того, чтобы получить реакцию от приложения на это действие. Например – загрузочное кольцо во время обновления статуса.
Интертеймент. Данные анимации были созданы для самых обычных развлечений. Такие анимации обычно появляются, когда вы оцениваете или репостите запись. Такая анимация не требует огромных усилий, если анимация будет уж очень сложной, пользователь ее отключит или будет намеренно реже нажимать на пальцы «верх» и «вниз».
Продолжительность. Android предлагает разработчику несколько сроков длительности для анимации, то есть это:
- 200 миллисекунд, короткая;
- 400 миллисекунд, средняя;
- 500 миллисекунд, это будет долго, естественно.
Эти рамки на самом деле ничего не значат, вы вправе сами выбирать любую длительность. Поскольку приложение, это ваше произведение, вы сами выбираете какая длина тут будет идеальной, для каждой анимации в отдельности.
Но все же, речь о рекомендуемом хронометраже, потому рамки от 100 до 700 миллисекунд, будут приемлемо для вашего пользователя. Эти данные собирались при помощи исследования, потому их можно считать достоверными.
Ускорение объектов. Линейные значения скорости, какими бы они не были, всегда выглядят неестественно, это очень сильно раздражает пользователя. Потому мы рассмотрим основные виды для кривых ускорения, которые используются в сфере мобильных разработок.
картинка.
Движение объекта с равномерной скоростью или Linear. Такая анимация всегда вызывает отторжение, поскольку выглядит крайне ненатурально, объекты двигаются с неравномерным ускорением.
Такой вид ускорения как «медленное начало и быстрое завершение», называется Ease-in. Такая кривая используется редко разработчиками в интерфейсах, поскольку разгон в анимации довольно длительный, потому это выглядит достаточно заторможено.
Анимация со скоростью Ease-out, если понятнее, то «быстрое начало и торможение», используется очень часто. Плавное торможение имитирует физику в реальном мире, потому кажется натуральным и не действует на ваши нервы. Рекомендуется использовать такой вид ускорения чаще.
Последний вид ускорения, это Ease, ease-in-out, то есть медленное начало, разгон и торможение. Такие кривые используются почти всегда, они выглядят аккуратно и в соответствии со стандартами Диснея (плавное начало и плавное завершение), они подходят.
Запомните, если вы используете ease, ease-in-out в программе After Effects, то вам необходимо менять форму этой кривой очень осторожно, поскольку анимация может стать слишком резкой и, вы все испортите.
Практика. На теории мы разобрали принцип работы анимации, стоит перейти к практике на примере iFunny. Рассмотрим сложности, которые встречались разработчикам и попробуем разобраться.
Главное меню. В проекте iFunny решили отказаться от обычного нам меню, где все элементы друг на друге, они решили эту проблему нестандартно.
Первый прототип главного меню имел такой вид:
Этот прототип был успешным, в нем все хорошо сочеталось: плавный выезд и хорошо проработали хореографию объектов. Они использовали кривую ускорения ease-in-out, такая анимация была очень плавной и время работы составил 700 миллисекунд.
Любое решение должно быть взвешенным, как в анимации, так и в дизайне. Увы, не все так гладко, количество элементов главного меню увеличивалось, а это означало, что и время для анимации тоже.
Попытка сделать анимацию более быстрой, все испортила, поскольку выезд меню стал слишком резким и неприятным для пользователя.
Подумав над этой проблемой, вспомнили, в чем суть анимации. Вызов меню – происходит буквально более сотни раз в день, то есть должен быстро предоставлять потребителю все нужные ключи для работы с программой и обеспечивать комфортную навигацию.
Пришли к выводу, что лучше всего – упростить данную анимацию. Итог прототипа был примерно вот таким:
Итак, плавное движение сменилось на последовательное появление объектов из невидимого меню. Так как сама анимация «выпадения» меню сохранилось, то фон сзади был по максимуму упрощен, он появляется, как и все пункты из меню через альфу.
Итоговый вариант имел такой же принцип, это позволило сократить время анимации с 700 миллисекунд, до 200. Вариант всех устраивал, анимация была приятной, выполняла все свои функции и задачи.
Галерея. Мы все очень любим смешные картинки, мы их сохраняем ежедневно десятками и отправляем всем своим друзьям и родственникам. Забавные коты, новые мемы и отсылки, за всем этим кроится кропотливая работа дизайнеров и разработчиков. Все для того, чтобы вам удобно было смотреть свои сохраненные картинки.
Одна из основных функций в программе iFunny – это прокрутка картинок. Общая концепция этого функционала состояла в его многослойности.
Первая версия была такой:
К сожалению, во время прокрутки картинок в галерее, элементы друг на друга накладывались, что очень сильно мешало любителям мемов. К тому же, обычному пользователю было неудобно использовать такую галерею, так как это не совсем ее обычный вид. Обычный вид галереи – вертикальный или же горизонтальный.
В этом варианте складывалось такое ощущение, что картинки образовывали какую-то стопку и возврат к предыдущей был не таким натуральным, нежели свайп влево или вправо, при котором картинка плавно двигалась за пальцем.
Эти погрешности пофиксили, вернули галерее ее более классический вид, еще немного уменьшили масштаб уезжающей картинки.
Стоит отметить, что сама анимация никак не стала проще, ее не меняли, просто уменьшили масштаб уходящей картинки, что придало анимации легкость, опрятность и сохранило вид, который больше знаком потребителям.
Другие анимации.
Во время разработки мобильного приложения, создается огромное количество различных анимаций. Большое количество времени дизайнер тратит не на ключевые элементы в программе, а на какие-то мелочи, которых просто много, и они все важны. Эти мелкие анимации, в целом, и формируют общее впечатление от использования приложения.
Приведу пример, последовательное появление картинок при переходе в вертикальную галерею, именно оно проводит взгляд сверху вниз, задавая линию просмотра последующего движения.
Удаление комментария или ответа на него. Эта простая анимация, пример того, как много их в приложениях. После удаления комментария, взгляд пользователя возвращается на предыдущее место, до вызова меню.
При просмотре личного профиля, ник пользователя располагается под аватаркой, но как только вы скроллите вниз, для просмотра ленты, ник остается в панели инструментов. Такая встроенная функция всегда может дать пользователю знать, чей профиль он просматривает.
Кстати, эта функция была введена у Twitter, но мне кажется, что нет ничего плохо в том, чтобы позаимствовать некоторые удачные функционалы.
Вкладки. Чтобы сохранять аккуратность профиля пользователя, было предусмотрено скрывать неактивные вкладки, а их названия можно просмотреть только в активном статусе.
Работа дизайнеров никогда не заканчивается на расчете анимации или описании принципов работы объекта. Иногда же цель состоит в том, чтобы составить некоторые алгоритмы, которые помогут элементам корректно работать. К примеру, раскрытие контекстного меню перед ответом.
Однозначно, анимации в мобильных разработках – это одна из важнейших частей дизайна. Хорошо продуманная анимация уменьшает потребление контента, положительно влияет на отношение к компании в целом и увеличивает количество проведенного времени в приложении пользователем. Развитие в этой сфере – признак сильной и современной команды.
