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

Перевод раздела 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. Это тоже может быть интересно:

13 Комментарии

  1. NMitra

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

    1. Андрей Гурылёв

      Не меняет же. Размер и размытость тени так себя и ведёт в случае приближения листочка к столу.

      1. NMitra

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

        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. SelenIT

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

            1. Андрей Гурылёв

              Оу, это я упустил. И вправду — это странно.

  2. Андрей Гурылёв

    В оригинале у примеров было "Хорошо" и "Плохо". По-моему, так лучше, чем "Правильно" и "Неправильно".

  3. Андрей Гурылёв

    Верней там даже не так. Там "Так" и "Не надо" 

    1. SelenIT

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

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

      1. Андрей Гурылёв

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

        1. SelenIT

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

          1. Андрей Гурылёв

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

  4. amelice

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

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

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

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

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