ryan stone 1178247 unsplash 1160x620 - Является ли анимация ключом к отличному дизайну продукта?

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

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

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

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

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

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

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

Является ли анимация ключом к отличному дизайну продукта?
Здесь вы можете увидеть, как анимация обеспечивает контекст и соединяет различные экраны в единый опыт (Дизайн Joshua Oluwagbemiga)

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

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

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

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

Является ли анимация ключом к отличному дизайну продукта?
Видите, как движутся все эти панели? (GIF от Anton Tkachev)

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

Для большего количества примеров ознакомьтесь с принципом хореографии в Material Motion .

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

Скорость анимации обычно контролируется путем изменения продолжительности анимации (как долго длится переход) и плавности (ускорение во времени).

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

Является ли анимация ключом к отличному дизайну продукта?
Анимация с правильно подобранными таймингами – это все. (Концепция Unsplash от Charles Patterson)

Как правило, старайтесь использовать анимацию длительностью 0,3 с-1 с.

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

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

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

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

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

В реальном мире ничто не начинается и не останавливается мгновенно. Вещи требуют времени для ускорения и замедления благодаря таким силам, как трение.

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

Является ли анимация ключом к отличному дизайну продукта?
Так должна работать пружинистая (Spring) анимация (GIF от Ehsan Rahimi)

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

Типы плавности (easing), используемые в дизайне:

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

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

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

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

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

Является ли анимация ключом к отличному дизайну продукта?
Вот как мы связываем сенсорные взаимодействия с анимацией (Масштабируемый календарь от Martha Bergmann)

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

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

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

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

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

Является ли анимация ключом к отличному дизайну продукта?
Посмотрите, как может быть важна анимация на вашем языке дизайна? Взаимодействие от Jakub Antalik)

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

Вывод

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

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

Я могу только рекомендовать вам начать экспериментировать с анимацией для приложений iOS / Android или для веб-проектов. Анимации – самая игривая часть продуктового дизайна!

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

Если вы хотите узнать больше об анимации, ознакомьтесь со следующими статьями и сайтами (на английском):

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Создание iOS-приложения в Sketch и Xcode, публикация его в App Store

Создание приложения в Sketch и Xcode еще никогда не было таким простым. Sketch…

Анимация интерфейсов. Микровзаимодействия для макрорезультата

Микровзаимодействие – один из ключевых моментов в UI/UX-дизайне. Это, наверное, лучшее доказательство того, что внимание к мелким деталям может дать большой и мощный результат.

Обучение Swift и Xcode для дизайнера. Создание своего приложения на Swift

В прошлом году я писал Главу 3 под Objective-C и Xcode 5. С тех пор многое кардинально изменилось. Код Swift существенно упростился, из-за чего он стал одним из самых популярных языков для разработки приложений. Xcode 6 представил ряд новых инструментов, включая Playground, Vector Assets и Designable Views. Кроме того, Адаптивные макеты стали невероятно востребованы в связи с выходом iPhone 6 и 6 Plus. Часть 2 Часть 3 Часть 4