CSS-live.ru

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

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

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

Физические свойства

Материал обладает изменяющимися размерами по осям x и y (измеряются в dps) и единой толщиной (1dp). Толщина материала не может быть равной 0.

whatismaterial_materialproperties_physicalproperties_thickness_01_yes
Правильно

Высота и ширина материала могут изменяться.

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

Толщина материала всегда равна 1dp.

Материал отбрасывает тени.

Тени возникают естественным образом из-за разницы высот (z-положения) элементов материала.

Правильно.

Материал отбрасывает тени.

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

При использовании материала тени никогда не вычисляются приблизительно.

Контент отображается на материале и может иметь любую форму и цвет. Контент не влияет на толщину материала.

Правильно.

Любые формы и цвета могут быть отображены на материале.

Поведение контента может быть отделено от поведения материала. При этом границы материала могут ограничивать отображение контента.

Правильно.

Материал — единое целое.

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

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

Несколько элементов материала не могут одновременно занимать одну и ту же точку в пространстве.

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

Материал не может проходить сквозь другой материал.

К примеру, один лист материала не может пройти сквозь другой лист при изменении его высоты.

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

Трансформация материала

Материал может менять свою форму.

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

Правильно.

Материал не сгибается и не складывается.

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

Несколько листов материала могут быть объединены в один лист.

В случае разделения материал может восстанавливаться. К примеру, если вы удалите часть листа материала, он снова станет целым.

Движение материала

Материал может быть спонтанно сгенерирован и уничтожен в любой точке среды.

Материал может перемещаться вдоль любой из осей.

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

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

    None Found

13 комментариев

  1. "Материал может перемещаться вдоль любой из осей." — а почему источник света меняет своё положение?

      1. Там тень то слева, то справа, как будто источник света находится сверху по центру
         

        1. Пересмотрел ролики. Где она то слева, то справа? оО Может, это оптическая иллюзия? Тень должна быть равномерной справа и слева. 

          Вначале примерно 0 2px 5px 0 rgba(0, 0, 0, 0.26), а при :active примерно 0 8px 17px 0 rgba(0, 0, 0, 0.2) но никакого движения по горизонтали нет.

          Показатели box-shadow взяты отсюда.

          1. Насколько я понимаю, речь про положение тени на 0:03 и 0:04 в предпоследнем ролике статьи (после «Материал может перемещаться вдоль любой из осей»). Для меня тоже тень в первом случае отчетливо выдается вправо, а во втором — влево, как будто точечный источник света висит где-то над серединой верхней стороны видео, и на оптическую иллюзию это не похоже.

    1. Буквально там «Делайте (так, как на картинке)» и «Не делайте (так, как на картинке)». Что, по-моему, по смыслу вполне эквивалентно привычным для подобных примеров на русском «(Делать так) правильно» и «(Делать так) неправильно», соответственно. В варианте «так» и «не надо», на мой взгляд, менее заметно противопоставление, и вообще они требуют больше усилий для понимания, хотя буквального соответствия оригиналу он особо не добавляет.

      Но можем попытаться общими усилиями подобрать еще более удачный перевод, если получится:)

      1. Чуть выше я случайно подобрал вполне хороший, на мой взгляд, вариант: "Хорошо" и "Плохо". Более дружелюбный, противопоставление на лицо и уж что может быть понятней?)

        1. Этот вариант неплох, согласен, но по-моему разница между ним и текущим — на грани вкусовщины. Для кого-то «Хорошо» и вправду может показаться дружелюбнее, чем «Правильно», для кого-то «Плохо» будет выглядеть слишком «по-детски». Может, сделать голосование?

          1. Не стоит. Это действительно вкусовщина. Вот если бы вся инструкция по гугл материалу была репозиторием на гитхабе (вообще без намёков), и была бы стилизована точь-в-точь как у гугла, и имела бы версионность, и это была бы какая-то публичная работа, а не индивидуальная, тогда я бы прислал ишью. Здесь же — не тот случай :)

  2. Не могу понять, что все таки значит материал применимо к веб-разработкам — элементы дизайна, блоки с динамикой?

Добавить комментарий для SelenIT Отменить ответ

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

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