Анимация интерфейса. Сила Motion

Анимация интерфейса. Сила Motion

13.07.2018 Motion дизайн

 

Анимация интерфейса. Сила Motion

Даже в древние времена люди знали о великой силе движения. Литература, искусство, фольклор, технологии свидетельствуют о многочисленных попытках людей объяснить движение, как одну из самых ярких черт жизни. Вероятно, именно поэтому латинский афоризм «Semper in motu» (всегда в движении) по-прежнему остается одним из самых популярных выражений, которые часто становятся девизом активных людей и команд, способных обеспечить отличные результаты.

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

Суть анимации

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

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

Типы анимации интерфейса

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

  • анимация, обеспечивающая микроинтерпретацию
  • анимация, показывающая путь процесса
  • пояснительная анимация
  • декоративная анимация

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

Анимация для микроинтерференции

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

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

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

Анимация, показывающая процесс

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

Пояснительная анимация

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

Преимущества и недостатки

Среди основных преимуществ анимации интерфейса мы хотели бы упомянуть:

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

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

  • получение большого ресурса трафика для загрузки

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

  • перегрузка экрана / страницы

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

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

  • отвлечение

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

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

Источник: medium.com



Написать нам в