Вторник , 6 Декабрь 2016
Главная > Без рубрики > 7 видов анимации для вашего мобильного приложения
Google Play Market

7 видов анимации для вашего мобильного приложения

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

Далее мы кратко представим обзор основных видов анимации.

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

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

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

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

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

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

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

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

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

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

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

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

Примером анимации состояния системы можно назвать элемент «потянуть, чтобы обновить».

Развлекательная анимация

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

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

  • Материал

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

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

Необходимо определить характер движений и следовать этому принципу.

  • Отсчет времени

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

  • Сфокусированная анимацию

Сконцентрируйтесь на определенной области экрана для выделения какого-то одного элемента.

  • Доведение до конца и перекрытие

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

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

Принцип второстепенного действия аналогичен принципу действия доведения до конца и перекрытия.

  • Постепенное начало и окончание движения

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

  • Ожидание

Принцип ожидания применяется к таким визуальным элементам как подсказки.

  • Ритм

Ритм в анимации выполняет такую же функцию как в музыке или в танце; он формирует структуру движения.

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

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

Источник: https://yalantis.com

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

Samsung Galaxy S6 и S6 Edge

Красивые номера телефонов: что, где, как?

Использование сотовой связи на сегодняшний день стало повсеместной и она незаметно вошла в личную жизнь …