Дизайн лучше UX с переходами и анимацией Vue.js

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

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

И это будет предметом этого урока. Мы рассмотрим, как переходы и анимации могут эффективно взаимодействовать, и посмотрим, как их использовать в контексте Vue.js. Конечно, для применения принципов, обсуждаемых ниже, вы можете использовать любую другую библиотеку или фреймворк (например, React или Angular) или простые CSS-переходы и анимации.

Примечание: чтобы следовать этому руководству, вы должны иметь хотя бы некоторые базовые знания о Vue.js. Если вам нужно набрать скорость, попробуйте наш курс для начинающих, Get Started With Vue .

• 
  Vue.js
  Начни с Vue
  Лоуренс Тертон

Почему переходы и анимации так важны?

В реальном мире вещи не просто появляются и исчезают внезапно. Они двигаются плавно, они постепенно меняются. В доме мы видим, как люди входят или выходят из комнат. На дороге мы видим приближающиеся или отъезжающие машины. Даже на разных скоростях их движение непрерывно. Таким образом, чтобы сделать интерфейс знакомым и более легким для понимания, нам необходимо имитировать некоторые аспекты этого реального поведения на наших веб-сайтах и ​​в приложениях.

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

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

Что такое переходы и анимации?

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

Анимация — это серия переходов, расположенных в логическом порядке. Это означает, что у нас есть не только начальная и конечная точки, но и несколько промежуточных точек. С переходами мы просто переходим от А к В или от В к С и так далее. С анимациями, например, если мы хотим перейти от A к E, нам нужно также пройти через B, C и D. Таким образом, вся анимация от A до E фактически состоит из четырех переходов, создавая иллюзию непрерывного движения. ,

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

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

Гарри Маркс, отмеченный наградами дизайнер вещания, сказал:

Если у вас нет истории, никакие графические хитрости не сделают ее интересной.

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

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

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

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

• поддерживать контекст при изменении взглядов
• объясните, что только что произошло
• показать отношения между объектами
• сосредоточить внимание пользователя
• улучшить восприятие производительности
• создать иллюзию виртуального пространства

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

Начало работы с переходами и анимацией Vue.js

Работать с переходами и анимациями Vue.js легко. Vue.js предоставляет компонент <transition> который оборачивает элемент или компонент, который вы хотите анимировать. Он автоматически добавляет три входящих и три уходящих CSS-класса .

v-enter , v-enter-active и v-enter-to отвечают за переход ввода, когда компонент включен или вставлен.

v-leave , v-leave-active и v-leave-to ответственны за переход отпуска, когда компонент отключен или удален.

v-enter / v-leave и v-enter-to / v-leave-to определения начального и конечного состояний перехода. v-enter-active / v-leave-active определяет конфигурацию перехода, такую ​​как продолжительность, функция замедления и т. д.

Компонент <transition> может иметь свойство name . Если мы определим его, он заменит префикс по умолчанию v- во всех классах. Например, если имя установлено в «menu», класс v-enter станет menu-enter и так далее.

Давайте теперь перейдем к следующему разделу и посмотрим, как все это используется на практике.

Vue.js Примеры использования переходов и анимации

Ниже приведен ряд вариантов использования, которые иллюстрируют практическое применение переходов и анимации в Vue.js.

Примечание. Код CSS, не связанный с Vue.js, для краткости не показан в примерах. Чтобы увидеть полный код, перейдите по ссылке на CodePen в конце каждого примера.

Вариант использования 1: выпадающее меню

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

Давайте посмотрим это в действии. Сначала мы создаем наш HTML-шаблон:

Это создает меню навигационной панели с тремя кнопками. Третья кнопка откроет раскрывающееся меню, которое представляет собой неупорядоченный список, обернутый компонентом <transition> . Мы устанавливаем атрибут name для перехода в dropdown список. Когда свойство show имеет значение true , появится меню, и наоборот.

В части JavaScript мы создаем новый экземпляр Vue и первоначально устанавливаем для свойства show значение false . Таким образом, меню будет скрыто, пока мы не наведем на него курсор.

Далее мы используем классы перехода, созданные Vue, чтобы применить желаемый переход CSS:

В первом объявлении CSS мы делаем меню прозрачным и немного уменьшенным в начале перехода enter и в конце перехода exit.

В его видимом состоянии мы делаем его полностью непрозрачным и масштабируемым до его нормальных размеров. В последнем объявлении мы установили параметры перехода. Это будет длиться 0,3 секунды и будет включать функцию замедления замедления. Кроме того, мы устанавливаем источник transform-origin в top center чтобы меню начинало появляться прямо под выпадающей кнопкой с хорошим эффектом прокрутки вниз.

Вариант использования 2: перелистывание формы

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

Вот код шаблона:

Здесь мы хотим перейти между двумя элементами : формами входа и регистрации. Поскольку мы переключаемся между элементами с одинаковым именем тега (мы оборачиваем обе формы тегом <div> ), они должны иметь уникальные ключевые атрибуты. В противном случае Vue будет только заменять содержимое элемента.

Кроме того, поскольку по умолчанию вход и выход происходит одновременно, нам необходимо использовать атрибут mode . Мы установили для него значение out-in , поэтому текущий элемент будет сначала перемещаться, а затем, когда он будет завершен, другой элемент перейдет в.

В части скрипта мы устанавливаем свойство front в true . Таким образом, форма входа будет отображаться первой:

А теперь давайте перейдем к CSS-коду:

Мы делаем форму прозрачной и поворачиваемой на 90 градусов в начале входа и в конце выхода из перехода. Затем мы устанавливаем продолжительность перехода на 0,5 секунды.

Вариант использования 3: Модальное окно

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

Давайте начнем с шаблона снова:

В этом примере мы используем пользовательские классы перехода . Таким образом, мы можем использовать библиотеку анимации, такую ​​как animate.css . Мы помещаем пользовательские классы непосредственно в компонент <transition> и используем классы из библиотеки animate.css.

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

И вот классы CSS:

Класс .blur применяется, когда .blur открывается, и класс .clear когда он закрыт.

Вариант использования 4: Список дел

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

Вот шаблон:

В этом примере мы хотим анимировать несколько элементов, поэтому нам нужно использовать компонент <transition-group> . В отличие от <transition> , он отображает фактический элемент. По умолчанию это <span> . Но нам на самом деле нужен неупорядоченный список, поэтому нам нужно установить для атрибута tag значение ul .

В части скрипта мы помещаем некоторые исходные данные и создаем два метода, отвечающих за добавление и удаление элементов списка:

И вот классы CSS:

В CSS мы создаем анимацию add-item . Мы используем эту анимацию при вводе перехода. При переходе в отпуск мы используем ту же анимацию, но в обратном порядке. Это следует принципу симметрии взаимодействия.

Если вы попробуете приложение на этом этапе, элементы будут анимированы, но сам список просто переместится на новое место. Чтобы сделать его плавным, нам нужно сделать две вещи: сначала установить absolute position в выходном переходе, а затем добавить класс move который Vue предоставляет специально для переходов списка.

Лучшие практики для переходов и анимации

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

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

Вывод

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

Этот пост только поверхностно рассказывает о переходах и анимации Vue.js. Итак, вот несколько полезных ссылок для дальнейшего изучения:

• Вход / выход и список переходов
• Государственные переходы
• Создание переходов и анимации Vue.js
• Нативно-подобные анимации для переходов страниц в Интернете