Приятных визуальных эффектов и идеального пиксельного интерфейса недостаточно, чтобы выделиться в море приложений.
Без анимации даже самые продуманные интерфейсы могут запутать пользователей и заставить их чувствовать, что они делают выбор без контекста.
Хорошая анимация поднимает пользовательский опыт вашего дизайна на новый уровень, обеспечивая вашим пользователям восхитительный и удовлетворительный опыт.
Анимация, с сочетанием звуковых и тактильных обратных связей в случае мобильных приложений, делает опыт использования приложения более тактильным и ближе к реальности. С уменьшенной когнитивной нагрузкой, так как пользователь может быстрее распознавать все связи и контекст при использовании приложения.
Смысл этой статьи в том, чтобы собрать все ключевые принципы, которые необходимы при создании анимированных интерфейсов, независимо от того, какой инструмент, фреймворк или методы вы используете.
Все дело в сосредоточенности и внимании
Самые важные задачи любой анимации в вашем приложении-это обеспечить контекст и направить внимание пользователя на управляемый и плавный опыт его использования.
Анимация помогает подключать другие несвязанные между собой экраны, поэтому пользователь никогда не чувствует себя потерянным при навигации и использовании вашего приложения или веб-сайта.
Чтобы получить наилучшие результаты от ваших анимаций, сдержанность является ключевым фактором. Очень заманчиво увлечься анимацией и анимировать все на экране, но это разрушает основную ценность вовлечения в первую очередь.
Используйте последовательности, чтобы был порядок и иерархию в ваши анимации
Анимация каждого элемента сразу в пользовательском интерфейсе выглядит так, как будто все в комнате говорят одновременно.
Когда вам нужно анимировать несколько элементов на экране, всегда используйте короткую задержку между ними. Будьте уверены, чтобы сохранить то же самое ослабление и продолжительность анимации, так что все кажется последовательным. Для быстрой и плавной анимации постарайтесь использовать задержку между анимированными элементами не более 20 мс.
Проверьте принцип хореографии в движении материала для получения дополнительных примеров.
Скорость-это ключ к хорошей анимации
Скорость анимации обычно контролируется изменением длительности анимации (как долго длится переход) и ослаблением (ускорение с течением времени).
Продолжительность анимации может создавать или нарушать общий пользовательский интерфейс.
Как правило, старайтесь использовать анимацию с длительностью 0,3 с-1с.
Анимации короче 0,3 С могут казаться почти несуществующими, так как легко пропустить переход и, когда пользователь их замечает, эта скорость может вызвать стресс и замешательство у пользователя.
Однако длинные анимации не намного лучше; анимация дольше 1 секунды может казаться медленной и мешать взаимодействию с интерфейсом.
Огромное преимущество использования более быстрой анимации заключается в том, что она может заставить ваше приложение чувствовать себя быстрее; к сожалению, верно и обратное. Если ваши анимации отстают, ваше приложение будет чувствовать себя сломанным, как правило, медленным и неприятным в использовании.
Скорость применима не только к длительности анимации, но и к задержке между жестом запуска и началом анимации. Например, при пролистывании между изображениями, если есть задержка между жестом свайпа и началом анимации, весь процесс разрушается, и быстрое пролистывание между изображениями будет казаться невыполнимой задачей.
Уважайте законы физики
В реальном мире ничто не начинается и не останавливается мгновенно. Вещи требуют времени, чтобы ускориться и замедлиться, благодаря естественным силам, таким как трение.
Чем естественнее ведет себя анимация, тем меньше когнитивной нагрузки требуется от пользователя, чтобы привыкнуть к ней и понять ее назначение.
Однако за пределами продолжительности анимации обязательно познакомьтесь с различными типами ослабления (ускорения с течением времени).
Типы ослабления, используемые в дизайне:
Linear (линейный): анимация без какого-либо ослабления. Это самый неестественный вид послабления, поэтому используйте его с умом и только тогда, когда это необходимо.
Ease-in (Легкость в использовании): ускоренное ослабление. Анимация начинается медленно и быстро заканчивается.
Ease-out (Облегчение): замедленное ослабление. Анимация начинается быстро и замедляется в конце. Легкий выход, как правило, является лучшим выбором, потому что быстрый старт дает ощущение отзывчивости, но в то же время обеспечивает естественное замедление в конце.
Ease-in-out (Легкость въезда-выезда): ускоряется и замедляется, подобно тому, как движется автомобиль. Обязательно используйте его с более короткими анимациями (около 0,3-0,5 С); в противном случае он может казаться медленным.
Spring (Весна): анимация с подпрыгивающим концом. Часто используется в современных приложениях из-за своей игривости и отзывчивости.
При правильной анимации ваше приложение может чувствовать себя продолжением естественного мира, а не абстрактным, странным или несвязанным интерфейсом.
Подключение анимации к взаимодействиям
Анимация обычно запускается в двух сценариях внутри приложений: во время / после загрузки экрана и когда пользователи взаимодействуют с интерфейсом с помощью прокрутки, нажатия или перетаскивания.
Тип взаимодействия всегда определяет тип анимации, которая будет вызвана. Например, если пользователь проводит пальцем вверх по экрану, анимация покажет новый элемент с анимацией скольжения вверх из нижней части экрана. Другой пример — когда новый экран скользит справа, пользователь ожидает, что переход назад к предыдущему экрану будет возможен с помощью жеста свайпа влево.
При разработке и применении анимаций всегда думайте о различных взаимодействиях, которые в первую очередь вызовут эти анимации.
Используйте анимированные прототипы для передачи своих идей
Реализация анимации, особенно пользовательских анимаций, всегда является сложной задачей и требует дополнительных усилий как от дизайнеров, так и от разработчиков.
Чтобы сделать этот процесс максимально легким, многие дизайнеры используют высокоточные прототипы, которыми можно поделиться с разработчиками, которые могут проверять и копировать код анимации.
Использование высокоточных анимированных прототипов — это наиболее эффективный способ для дизайнеров донести свои анимационные идеи, решения и требования до разработчиков.
Обязательно используйте анимацию последовательно, как и любой другой визуальный элемент. Интеграция ваших анимаций в систему проектирования может стать решающим фактором для вашего общего пользовательского опыта и процесса проектирования.
Вывод
Как вы можете видеть, анимация-это ключевой элемент создания отличного пользовательского опыта, а не просто запоздалая мысль. Начните думать об анимации и взаимодействиях с самого начала, чтобы вы могли сосредоточиться на общем пользовательском опыте на протяжении всего процесса разработки продукта.
Эти принципы анимации вечны, и независимо от того, знакомитесь ли вы с анимацией или уже знаете о ней все, это некоторые ключевые правила, которые всегда стоит иметь в виду при разработке новых анимаций и взаимодействий.
Я могу только призвать всех начать экспериментировать с анимацией либо для iOS / Android-приложений, либо для веб-проектов. Анимация — это самая игривая часть дизайна продукта!
Надеюсь, что с помощью этих методов вы сможете поднять пользовательский опыт вашего дизайна на новый уровень.
Перевод: Academ-study.ru
Оригинал статьи: invisionapp.com