Что такое Motion UI?

Опубликовано: 2 Марта, 2022

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

Один из способов представить эти переходы и анимацию в Интернете - это ZURB Studios. ZURB уже довольно давно занимается созданием классного программного обеспечения для веб-дизайна, и одно из самых распространенных программ называется Motion UI. Motion UI - это собственная библиотека Sass ZURB, которая не предоставляет ничего, кроме динамических переходов и анимации для вашей платформы. Оба этих эффекта специально включены в пользовательский интерфейс движения, и это помогает сделать процесс анимации невероятно быстрым и эффективным по времени.

Motion UI is a Sass library for quickly creating flexible UI transitions and animations. It is a stand-alone library that controls the transformation effects included in a variety of Foundation components, including Toggler, Reveal and Orbit.

Начиная

Вы можете использовать npm или bower для установки библиотеки Motion UI в свой проект. Если пакет включает файл CSS с набором предварительно созданных переходов и анимаций, а также исходные файлы Sass, которые позволяют создавать свои собственные.

 npm установить motion-ui --save-dev
  bower установить motion-ui --save-dev

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

Вы можете добавить путь к библиотеке Motion UI в Compass, используя config.rb, как показано ниже:

 add_import_path 'node_modules / motion-ui / src'

Вы можете использовать следующие строки кода, чтобы включить путь в gulp-sass :

 gulp.src ('./ src / scss / app.scss')
  .pipe (sass ({
    includePaths: ['node_modules / motion-ui / src']
  }));

Наконец, вы можете импортировать библиотеку Motion UI в файл SASS, используя приведенный ниже код:

 @import 'motion-ui'
@include motion-ui-transitions;
@include motion-ui-animations;

Переходы

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

Встроенные переходы

Foundation предоставляет эффекты перехода за счет использования классов перехода, которые создаются библиотекой Motion UI, которая включает более двух десятков встроенных классов перехода.

Их можно включить, добавив следующий код в ваш файл Sass после того, как вы импортировали библиотеку:

 @include motion-ui-transitions;

Пользовательские переходы

Вы можете установить пользовательские классы перехода с помощью библиотеки миксинов Motion UI.

Например, функция mui-fade () используется для создания плавного перехода, регулируя непрозрачность элемента.

 @include mui-fade (
  $ состояние: в,
  $ от: in,
  $ to: out,
  $ duration: 0,5 с,
  $ time: easyInOut
);

Анимации

Вы также можете использовать эффекты перехода пользовательского интерфейса движения для создания анимации CSS. Библиотека также позволяет создавать эффекты серии с анимацией для нескольких элементов, находящихся в очереди. Все эти анимации создаются с помощью mui-animation () миксина, где она используется для создания анимации ключевых кадров CSS.

Сериалы Анимации

Наряду со стандартной одноразовой анимацией Motion UI также позволяет анимировать несколько элементов в указанной серии. Вы можете начать свою серию с mui-series (), а внутри этого миксина вы можете прикреплять анимацию к классам с помощью миксина mui-queue ().

Есть много действий, где можно реализовать Motion UI:

Очень важно правильно применить Motion UI на своем веб-сайте и в своих приложениях. Во многих случаях это может быть достигнуто, как описано ниже:

Приветствие пользователей: в некоторых случаях приложения и веб-сайты будут приветствовать пользователей приятным приветственным сообщением. Хорошее приветствие оказывает положительное влияние на клиентов. Кто может пропустить мобильный телефон Nokia с логотипом встречи двух рук? Приятный экран приветствия в приложениях и на веб-сайтах улучшает впечатления пользователя. Вам нужно применять движение только тогда, когда это необходимо, и иметь конкретное намерение по той же причине. Если возможно, это должно быть реализовано только в том случае, если загрузка приложений и веб-сайта задерживается на определенный период.
Информируйте о действиях: пользователи должны знать о том, как они будут работать на вашем веб-сайте. Это руководство улучшит UX и внесет вклад в улучшение веб-сайта и приложений. Также необходимо иметь в виду, что реализованные движения должны дополнять и улучшать пользовательский опыт приложения, а также должны помогать удерживать внимание пользователей и с помощью таких элементов, как отскок и скорость.
Подтверждение действий: в большинстве случаев различные действия, такие как удаление почты, отправка почты, удаление приложений, переход по некоторым ссылкам, удаление данных и т. Д., И другие подобные элементы требуют подтверждения. Он используется при различных необратимых действиях. Во многих случаях процесс подтверждения будет анимирован, чтобы привлечь больше внимания пользователей и гарантировать, что они не сделают при этом никаких ошибок.
Добавьте забавные элементы: существует множество приложений и веб-сайтов, которые вводят забавные элементы и стали действительно популярными. Это упрощает навигацию по приложениям и веб-сайту, что упрощает посещение пользователями снова и снова. Поэтому забавные элементы нужно правильно добавлять на сайт. Могут быть добавлены различные забавные элементы, такие как увеличение, уменьшение, скольжение и т. Д., Чтобы сделать отображение и контент более простыми и приятными.
Цикл обратной связи: в большинстве случаев пользователи взаимодействуют с приложениями и веб-сайтами. В таких ситуациях обратная связь помогает улучшить взаимодействие с пользователем. Предположим, вы пытаетесь создать ответ, когда пользователь хочет войти в приложение или на веб-сайт и ввести неправильный пароль. В этом случае цикл обратной связи оказывается очень полезным и помогает пользователям войти в систему для уведомления в таких случаях. Его также можно использовать для просмотра некоторых анимаций на веб-сайтах. Они доступны в широком спектре приложений и могут быть просмотрены на экране блокировки веб-сайтов.
Обновить контент: содержание веб-сайтов и приложений социальных сетей обновляется очень часто. В таких случаях контент может быть быстро обновлен, чтобы пользователи могли получить лучший пользовательский опыт, а также получить контент по прибытии. В этом случае вы можете сдвинуть экран вниз и оставить его для обновления содержимого в Twitter, Instagram, Facebook и других подобных приложениях. Помимо этого, вы также можете нажать на доступную кнопку, чтобы просмотреть новые обновления.

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

Продвинутая компьютерная тематика