UXPUB 🇺🇦 Дизайн-спільнота

Cover image for Является ли анимация ключом к отличному дизайну продукта?
Редакція
Редакція

Опубліковано • Оновлено

Является ли анимация ключом к отличному дизайну продукта?

Наличие хороших визуальных эффектов и идеального до пикселя интерфейса недостаточно, чтобы выделиться среди множества приложений. Без анимации даже самые продуманные интерфейсы могут запутать пользователей и заставить их чувствовать, что они делают выбор без контекста. Хорошая анимация поднимает пользовательский опыт вашего дизайна на новый уровень, делая его приятным и плавным. Анимации, иногда в сочетании со звуковой и тактильной обратной связью (в случае мобильных приложений), делают абстрактный опыт использования приложения более тактильным и приближенным к реальности, что уменьшает когнитивную нагрузку, поскольку пользователь при использовании приложения может быстрее распознать контекст и все соединения. Цель этой статьи – собрать все ключевые принципы, которые необходимы при создании анимированных интерфейсов, независимо от того, какой инструмент, фреймворк или методы вы используете.

Все дело в сосредоточенности и внимании

Основные задачи любой анимации в вашем приложении – обеспечить контекст и направить внимание пользователя на управляемый и плавный опыт. [caption id="" align="alignnone" width="800"] Здесь вы можете увидеть, как анимация обеспечивает контекст и соединяет различные экраны в единый опыт (Дизайн Joshua Oluwagbemiga)[/caption] Анимация помогает подключать не связанные друг с другом экраны, поэтому пользователь при навигации и использовании вашего приложения или веб-сайта никогда не чувствует себя потерянным. Сдержанность является ключевым фактором, чтобы добиться от анимации наилучших результатов. Соблазнительно увлечься и анимировать всё на экране, но это в первую очередь сводит на нет основную ценность от добавления движения.

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

Одновременная анимация всех элементов в пользовательском интерфейсе выглядит так, как-будто все в комнате разговаривают одновременно. [caption id="" align="alignnone" width="800"] Когда вам нужно анимировать несколько элементов на экране, всегда используйте небольшую задержку между ними. Обязательно сохраняйте одинаковую плавность и длительность анимации, чтобы все выглядело согласованно. Для быстрой и плавной анимации старайтесь использовать задержку не более 20 мс между анимированными элементами. Для большего количества примеров ознакомьтесь с принципом хореографии в Material Motion .

Скорость – это ключ к хорошей анимации

Скорость анимации обычно контролируется путем изменения продолжительности анимации (как долго длится переход) и плавности (ускорение во времени). Продолжительность анимации может повлиять на весь пользовательский опыт. [caption id="" align="alignnone" width="600"] Анимация с правильно подобранными таймингами – это все. (Концепция Unsplash от Charles Patterson)[/caption] Как правило, старайтесь использовать анимацию длительностью 0,3 с-1 с. Анимации короче 0,3 секунды могут казаться почти несуществующими, поскольку переход легко проглядеть, а когда пользователь их замечает, эта скорость может вызвать у него стресс и замешательство. Длинные анимации ненамного лучше. Анимации длиннее 1 секунды будут казаться медленными и будут мешать взаимодействию с интерфейсом. Огромное преимущество использования более быстрой анимации состоит в том, что она может заставить ваше приложение работать быстрее; к сожалению, верно и обратное. Если ваша анимация запаздывает, ваше приложение будет казаться неработающим, как правило, медленным и неприятным в использовании. Скорость применима не только к продолжительности анимации, но и к задержке между жестом-триггером и началом анимации. Например, при пролистывании изображений, если между жестом пролистывания и началом анимации существует задержка, весь процесс разрушается, и быстрое перелистывание изображений будет казаться невозможной задачей.

Уважайте законы физики

В реальном мире ничто не начинается и не останавливается мгновенно. Вещи требуют времени для ускорения и замедления благодаря таким силам, как трение. Чем более естественно анимация ведет себя, тем меньше когнитивной нагрузки требуется от пользователя, чтобы привыкнуть к ней и понять ее назначение. [caption id="" align="alignnone" width="800"] Так должна работать пружинистая (Spring) анимация (GIF от Ehsan Rahimi)[/caption] Однако, помимо продолжительности анимации, обязательно ознакомьтесь с различными типами плавности (ускорение с течением времени). Типы плавности (easing), используемые в дизайне:

  • Линейное движение: анимация без какой-либо плавности. Это наиболее неестественный тип движения, поэтому используйте его с умом и только при необходимости.
  • Кривая ускорения: анимация начинается медленно, а заканчивается быстро.
  • Кривая замедления: анимация начинается быстро и замедляется в конце. Как правило, это лучший выбор, потому что быстрое начало дает чувство отзывчивости, в то же время обеспечивая естественное замедление в конце.
  • Стандартная кривая: заставляет объекты набирать скорость в начале, а затем медленно сбрасывает ее до нуля, подобно автомобилю. Обязательно используйте ее с более короткой анимацией (около 0,3-0,5 с); в противном случае она может казаться медленной.
  • Пружинистая анимация: Анимация, подпрыгивающая в конце. Часто используется в современных приложениях из-за своей игривости и отзывчивости.

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

Соедините анимации и взаимодействия

Анимации обычно запускаются в приложениях при двух сценариях: во время / после загрузки экрана и, когда пользователи взаимодействуют с интерфейсом с помощью жестов (свайп, касание или перетаскивание). Тип взаимодействия всегда определяет тип анимации, которая будет запущена. Например, если пользователь проведет пальцем вверх по экрану, анимация откроет новый элемент с анимацией скольжения вверх из нижней части экрана. Другой пример, когда новый экран скользит справа, пользователь будет ожидать, что возврат к предыдущему экрану будет возможен с помощью свайпа влево. [caption id="attachment_45604" align="aligncenter" width="600"] При разработке и применении анимации в первую очередь всегда думайте о различных взаимодействиях, которые будут вызывать эти анимации.

Используйте анимированные прототипы, чтобы донести свои идеи

Реализация анимаций, особенно кастомных анимаций, всегда является сложной задачей и требует дополнительных усилий как со стороны дизайнеров, так и разработчиков. Чтобы сделать этот процесс как можно более легким, многие дизайнеры используют высококачественные прототипы, которыми можно поделиться с разработчиками, которые могут проверять и копировать код анимации. Использование высококачественных анимированных прототипов – это самый эффективный способ для дизайнеров поделиться с разработчиками своими идеями, решениями и требованиями к анимации. [caption id="" align="alignnone" width="800"] Обязательно используйте анимацию согласованно, как и любой другой визуальный элемент. Интеграция анимации в вашу систему дизайна может изменить общий пользовательский опыт и процесс проектирования.

Вывод

Как вы можете видеть, анимация – это ключевой элемент создания отличного пользовательского опыта. Начните думать об анимации и взаимодействиях с самого начала, чтобы вы могли сосредоточиться на общем пользовательском опыте на протяжении всего процесса проектирования продукта. Эти принципы анимации вечны, и, если вы только знакомитесь с анимациями или вы уже всё знаете о них, эти ключевые правила всегда следует учитывать при разработке новых анимаций и взаимодействий. Я могу только рекомендовать вам начать экспериментировать с анимацией для приложений iOS / Android или для веб-проектов. Анимации – самая игривая часть продуктового дизайна! Надеемся, что с помощью этих методов вы сможете поднять пользовательский опыт вашего дизайна на новый уровень. Если вы хотите узнать больше об анимации, ознакомьтесь со следующими статьями и сайтами (на английском):


Перевод статьи Daniel Korpai

Найстарші коментарі (0)