Виды анимации приложения

 (голосов: 0)

Описание:

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


Типы анимации:


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


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


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


Смена функции


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


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


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


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


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


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


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


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


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


Анимация для развлечения


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


Для такой анимации существует два основных правила: 1) не мешать основным функциям приложения 2) не длиться слишком долго.


 


Основные принципы дизайна


Теперь обратим внимание на 9 принципов анимации, выделенные Уолтом Диснеем, которые более чем применимы для дизайна интерфейса приложений.


 Материал.


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


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


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


Время.


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


Привлечение внимания.


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


Завершение и наложение.


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


Второстепенные действия.


Суть второстепенных действий в двух словах: сопровождая основное действие, они делают интерфейс живее.


Плавность.


Плавность – это основной принцип дизайна. Постепенное ускорение и замедление анимации делает интерфейс естественнее.


Ожидание.


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


Ритм.


Как и в танце, в анимации ритм структурирует движение.


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


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


Вот пять главных пунктов, которые нужно запомнить:



  1. Думайте о целевой аудитории: дизайн приложения должен решать ее проблемы.

  2. Следите, чтобы каждый анимированный элемент был обоснованным

  3. Стремитесь к естественной анимации, имитирующей реальные движения.

  4. На всех этапах проекта советуйтесь с разработчиками.

  5. Не жадничайте и поделитесь своими разработками на GitHub.


Источник: https://yalantis.com/blog/-seven-types-of-animations-for-mobile-apps/


Цена: Бесплатно



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

Рекомендуем посмотреть:


QR-код страницы

Добавить комментарий:

Комментарии из социальных сетей
Комментарии пользователей AndroidLife.ru
Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.

Войти с помощью: 




Новости сайта в формате RSS