Noveo

Наш блог I like to move it: анимация элементов интерфейса

I like to move it: анимация элементов интерфейса

Сегодня мы поговорим про то, что обычно кажется естественным, незаметным, однако является очень важным для нашего правильного восприятия визуальной составляющей интерфейса, — про анимацию. Слово нашему PR-менеджеру Марии (она же наша Маша) — по зову души и долгу службы она много работает с видео- и моушн-роликами и не понаслышке знает, как грамотно привлечь внимание зрителя, облегчить восприятие и при этом не перестараться.

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

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

Aga Kozak

Микровзаимодействия, или как узнать, что все получилось

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

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

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

Что Дисней подарил UI/UX-дизайну, или физика в творчестве

А вы знали, что термин «анимация», столь популярный в различных сферах человеческой деятельности, имеет древнее и, можно сказать, философское происхождение? Латинское слово anima означает «воздух, душа» и в большинстве случаев определяет процесс одушевления и оживления объектов посредством движения.

Гораздо позднее греческих философов, размышляющих о душе, в США в 1981 году вышла книга двух гениальных аниматоров студии Дисней Олли Джонстона и Фрэнка Томаса  “Иллюзия жизни: анимация Диснея”, в которой были описаны 12 принципов анимации, помогающие вложить жизнь в движущийся рисунок.

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

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

Принцип 1. Сжатие и растяжение

“Все в мире подчиняется физическим законам” (Нил Деграсс Тайсон). Каждый объект имеет форму, вес и определенные свойства. Резиновый и стеклянный мяч при падении ведут себя совершенно по-разному, и при анимации это необходимо учитывать, чтобы создать реалистичность происходящего на экране. При падении резиновый мяч сжимается под действием гравитации, а затем растягивается, улетая с ускорением вверх.

Часто “сжатие и растяжение” можно видеть при анимаци круглых кнопок — так они выглядят более привычными и срабатывает положительная ассоциация. Действие “взять и потянуть” при обновлении ленты также подчиняется этому принципу.

Принцип 2. Подготовка, или упреждение

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

Принцип 3. Сценичность

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

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

Принцип 4. Захлест действия

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

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

Принцип 5. Смягчение начала и завершения движения

Ускорение и замедление — самые яркие представители физических законов в анимации. Взгляните на два этих движущихся квадрата:

 

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

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

Принцип 6. Дуги

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

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

Принцип 7. Тайминг

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

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

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

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

НазадПредыдущий пост ВпередСледующий пост

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: