Материальный дизайн — Объекты в трехмерном пространстве
Перевод раздела Objects in 3D space официальной документации Google: http://www.google.com/design/spec/material-design/.
Между организацией объектов в реальном мире и в их расположении в материальном пространстве существуют параллели. В реальном мире объекты могут накладываться друг на друга, но не могут проходить сквозь друг друга. Объекты могут отбрасывать тени и отражать свет.
Эти свойства применимы и к объектам в материальном дизайне. Они помогают создать пространственную модель, которая может повсеместно применяться в приложениях знакомыми пользователям способами.
Высота
Высота – это относительное положение объекта на оси z его родителя. Высота – это относительная величина между родительским и дочерним объектом.
Высота измеряется в тех же единицах, что и оси x и y: обычно в не зависящих от плотности пикселях (density independent pixels, dp). Поскольку стандартная толщина материала составляет 1 dp, все высоты рассчитываются, как разность расстояний от одной верхней плоскости до другой.
![whatismaterial_3d_elevation1](http://css-live.ru/Primer/Material-design/images/whatismaterial_3d_elevation1.png)
Высота в состоянии покоя
Все материальные объекты имеют высоту в состоянии покоя, независимо от того, является ли объект небольшим компонентом или листом, занимающим весь экран.
![whatismaterial_3d_elevation2](http://css-live.ru/Primer/Material-design/images/whatismaterial_3d_elevation2.png)
Примеры типовых высот компонентов в состоянии покоя.
В статичном положении высота объекта в состоянии покоя не изменяется. Она едина для всего приложения. Если высота объекта изменяется, он должен как можно быстрее вернуться на свою высоту в состоянии покоя.
![whatismaterial_3d_elevation3](http://css-live.ru/Primer/Material-design/images/whatismaterial_3d_elevation3.png)
Высота в состоянии покоя для заданного типа компонентов является единой для всех приложений платформы. Однако, один и тот же тип компонентов может иметь различную высоту в состоянии покоя на разных платформах, в зависимости от глубины среды (например, телевизор обладает большей глубиной, чем мобильный телефон или ПК).
![whatismaterial_3d_elevation4](http://css-live.ru/Primer/Material-design/images/whatismaterial_3d_elevation4.png)
Отзывчивая высота и динамические сдвиги по высоте
Компоненты некоторых видов имеют отзывчивую высоту, то есть их высота изменяется в ответ на ввод данных пользователем или на системные события. Различные состояния компонентов (например, нормальное, нажатое, в центре внимания) могут вызывать различные изменения высоты, которые реализуются согласованно с помощью динамических сдвигов по высоте.
Динамические сдвиги по высоте происходят относительно положения компонента в состоянии покоя, и выступают в роли цели, к которой должен передвинуться компонент в том или ином своем состоянии. Кроме того, они обеспечивают постоянство изменений для заданного действия соответствующего типа компонентов. К примеру, у всех компонентов, которые поднимаются при нажатии, происходит одинаковое изменение высоты, относительно их текущей высоты / высоты в состоянии покоя.
После завершения события ввода или в случае его отмены компонент возвращается на свою высоту в состоянии покоя.
![whatismaterial_3d_elevation5](http://css-live.ru/Primer/Material-design/images/whatismaterial_3d_elevation5.png)
Функциональные тени
Тени предоставляют несколько важных визуальных подсказок о расположении объектов в пространстве. Тени являются единственным визуальным средством, указывающим на величину расстояния между поверхностями. Высота объекта определяет визуальный облик его тени.
![whatismaterial_3d_elevation_shadow1](http://css-live.ru/Primer/Material-design/images/whatismaterial_3d_elevation_shadow1.png)
Без тени ничто не может указать, что поверхность свободно подвешенной кнопки действия расположена отдельно от поверхности фона.
![whatismaterial_3d_elevation_shadow2](http://css-live.ru/Primer/Material-design/images/whatismaterial_3d_elevation_shadow2.png)
Резкие тени указывают, что подвешенная кнопка действия и панель приложения являются отдельными поверхностями, расположенными очень близко к фоновой поверхности.
![whatismaterial_3d_elevation_shadow3](http://css-live.ru/Primer/Material-design/images/whatismaterial_3d_elevation_shadow3.png)
Более мягкая и крупная тень указывает, что свободно подвешенная кнопка имеет большую высоту, чем панель приложения.
При движении тени также предоставляют подсказки о направлении движения объекта. Это еще один полезный инструмент, позволяющий определить, уменьшается или увеличивается расстояние между поверхностями.
![whatismaterial_3d_elevation_shadow4](http://css-live.ru/Primer/Material-design/images/whatismaterial_3d_elevation_shadow4.png)
Без тени, указывающей высоту, становится неясно, изменяет ли эта окружность свои размеры, находясь на одной высоте, либо она просто увеличивает свою высоту.
![whatismaterial_3d_elevation_shadow5](http://css-live.ru/Primer/Material-design/images/whatismaterial_3d_elevation_shadow5.png)
Тень увеличивается в размерах и становится мягче с увеличением высоты объекта. Она становится четче и меньше в размерах при уменьшении высоты.
![whatismaterial_3d_elevation_shadow6](http://css-live.ru/Primer/Material-design/images/whatismaterial_3d_elevation_shadow6.png)
В данном случае постоянство тени позволяет пользователю понять, что объект изменяет свою форму, а не высоту.
Связи между объектами
Способ организации объектов в приложении определяет характер перемещения объектов или коллекций объектов по отношению друг к другу. Объекты могут двигаться независимо друг от друга, либо их движение может быть ограничено и зависеть от содержащего их элемента. Контейнеры и объекты, которые они содержат, имеют связь «родительский элемент – дочерний элемент». У каждого объекта есть один родитель, и он может иметь либо не иметь потомков.
Дочерние элементы наследуют от своих родителей характеристики трансформаций, такие как положение, поворот и высота. Например, в случае прокрутки коллекции карточек, все карточки двигаются вместе. Карточки являются соседями, и все они являются дочерними элементами контейнера коллекции карточек, который выполняет движение прокрутки.
Иерархия родительских и дочерних элементов определяет способ взаимодействия объектов и групп объектов друг с другом. К примеру, дочерние элементы имеют минимальную разницу в расстоянии по оси z со своими родителями. Ни один посторонний объект не может быть помещен между родительским и дочерним объектом.
![whatismaterial_3d_relationship1](http://css-live.ru/Primer/Material-design/images/whatismaterial_3d_relationship1.png)
Приподнятая кнопка (дочерний элемент) уходит за пределы экрана при прокрутке содержимого ее родителя.
![whatismaterial_3d_relationship2](http://css-live.ru/Primer/Material-design/images/whatismaterial_3d_relationship2.png)
Карточки (соседи и дочерние элементы коллекции карточек) уходят за пределы экрана, а свободно подвешенная кнопка (свой собственный родитель) остается на своем месте.
P.S. Это тоже может быть интересно:
None Found