CSS-live.ru

Материальный дизайн — Достоверное движение

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

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

Масса и вес

Физические объекты имеют массу и движутся только в случае воздействия на них сторонних сил. Следовательно, объекты не могут мгновенно начинать или прекращать движение. Анимация, в которой движения начинаются или прекращаются внезапно, а направление движения резко изменяется, выглядит неестественной и может сбить пользователя с толку.

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

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

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

Правильно.

Движение с быстрым ускорением и плавным замедлением кажется естественным и дарит спокойствие.

Резкое изменение скорости движения в начале и в конце кривой анимации означает, что объект резко стартует и резко останавливается, что выглядит нереалистично.

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

Прямолинейное движение кажется механическим.

Особые случаи: Вход и выход из кадра

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

Правильно.

Входить и выходить из кадра на пиковой скорости. Шар входит и выходит из кадра на пиковой скорости, создавая четкий переход.

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

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

Внесение поправок

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

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

    None Found

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

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

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