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

Дизайн на основе Motion

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

Почему имеет значение Motion?

Когда пользователи взаимодействуют с вашим продуктом, они могут задавать следующие вопросы:

«Что самое главное здесь?»

«Откуда я знаю, что делать дальше?»

«Откуда я знаю, что выполнил свою задачу?»

Подобные вопросы могут показать возможности использования Motion для улучшения опыта. Motion оптимизирует воспринимаемый UX и отвечает на вопросы:

Он привлекает внимание пользователя и подсказывает, что произойдет, если пользователь выполняет щелчок / жест.

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

Он обеспечивает визуальную обратную связь.

Кроме того, дизайн на основе Motion приносит еще одну важную вещь в UX: восторг.

Язык Motion

Motion позволяет нам лучше взаимодействовать, облегчая для пользователя их понимание. Элементы дизайна на основе Motion можно увидеть в самых разных формах, включая переходы, анимации и даже на текстуре, имитирующие 3D-глубину. Ниже приведены рекомендуемые места для интеграции motion-design в рабочий процесс UX:

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

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

Это делает пользовательский интерфейс пространственно логическим

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

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

Подтверждение действий

Motion усиливает действия, которые пользователь выполняет. Для каждого нажатия кнопки и перехода на экран есть возможность использовать motion-design. Визуальный ответ может увеличить вовлеченность и порадовать пользователя. Например, давайте посмотрим, как анимация может помочь при вводе неправильного пароля в iOS:

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

Приносит наслаждение

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

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

Но не забывайте, что главная задача Motion - сделать что-то, что не отвлекает пользователей от того, что они пытаются сделать.

Вывод

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

Источник: /uxplanet.org/