Материальный дизайн — Осмысленные переходы

Перевод раздела Meaningful transitions официальной документации Google: http://www.google.com/design/spec/material-design/.

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

Визуальная целостность

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

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

Важные аспекты

Создавая анимации, учитывайте следующие моменты:

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

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

Неправильно.

Резкие переходы вызывают раздражение и заставляют пользователя выполнить всю работу по восприятию перехода.

Иерархическая синхронизация по времени

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

Однако это не просто формула, по которой самая важная вещь начинает движение первой, а наименее важная – последней. Временная синхронизация элементов перехода должна происходит плавно и не допускать возникновения ощущения разрозненности.

Правильно.

Использование перекликающихся движений для направления внимания пользователя.

Неправильно.

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

Единая хореография

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

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

Правильно.

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

Неправильно.

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

Передовые методы

  • Избегайте прямолинейных пространственных маршрутов, за исключением случаев, когда движение ограничивается одной осью или направлено к конкретной точке/от конкретной точки и согласовано с другими элементами.
  • Проследите, чтобы направление, в котором двигаются элементы, было согласованным на протяжении всего перехода. Избегайте сталкивающихся движений и накладывающихся друг на друга маршрутов.
  • Помните о глубине: что проходит под чем и почему?
  • Если бы все движущиеся элементы оставили на экране след от своего маршрута, насколько красивым и организованным он бы получился? Создаёт ли он четкую картину, куда должно быть обращено внимание?
  • Поддерживайте пространственные отношения, согласовывая движение входящих и исходящих элементов.

P.S. Это тоже может быть интересно:

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

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