Материальный дизайн поверхность — часть 5 • Roman Volgasov

Материальный дизайн — поверхность (часть 5)

Атрибуты — поведение

Материальные поверхности могут вести себя определённым образом:

  • Жёсткие поверхности не меняют размер при любых взаимодействиях.
  • Растягиваемые поверхности могут расти или сжиматься вдоль одной или нескольких осей до предела размера, а затем вести себя как жёсткие поверхности.
  • Поверхности Pannable остаются одинаковыми по размеру во всех взаимодействиях. Они могут отображать дополнительный контент при прокрутке внутри области, пока не будет достигнут лимит контента. Когда этот предел достигнут, они ведут себя как жёсткие поверхности в этом направлении прокрутки.
жёсткие поверхности

Размер поверхности объекта зафиксирован видимым содержимым. Поверхность сохраняет этот размер во всех взаимодействиях.

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

Поверхности объекта — жёсткая, но контент прокручивается по поверхности, пока не будет достигнут лимит контента.

Композитные поверхности

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

На одной поверхности находится несколько других, таких как встроенная карта (1), которая перемещается независимо от прокручиваемого списка (2).

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

Растягиваемые поверхности

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

Как правило, взаимодействие пользователя с поверхностью растягивает её в одном направлении. Например, нажатие «подробнее» может растянуть карту по высоте и показать дополнительный контент.

Вертикальное направление растяжения объекта.

Горизонтальное направление растяжения объекта.

Направление растяжения объекта по осям X и Y.

Позиционирование и перемещение поверхности

Поверхность может быть в фиксированном положении на осях X и Y или перемещаться в любом направлении.

Движение поверхности может быть ограничено одной осью, разрешать одновременное движение по одной оси или разрешать движение вдоль обеих осей одновременно.

Верхняя панель приложения (1) остаётся в фиксированном положении, а карточки (2) прокручивается только вертикально за ней.

Поверхности (1,2) могут двигаться в любом направлении, хотя одновременное движение ограничено одной осью.

Поверхность может двигаться в любом направлении.

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

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

Поверхности могут двигаться независимо друг от друга.

Движение одной поверхности зависит от движения другой.

Прозрачность поверхности

Поверхности материала могут быть прозрачными, полупрозрачными или непрозрачными.

Для сохранения разборчивости на прозрачных и полупрозрачных поверхностях надо обработать фон.

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

  1. Для сохранения разборчивости на прозрачных и полупрозрачных поверхностях надо обработать фон.
  2. Изометрический вид.
  1. Прозрачные поверхности затрудняют идентификацию поверхности, на которой появляется содержимое. Верхняя панель — прозрачна, поэтому неясно, появляется ли текст на панели приложений или на поверхности позади неё.
  2. Изометрический вид.

Маскировочные сетки

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

Их можно наносить разными способами, в том числе:

  • Затемнение или осветление поверхности и содержимого.
  • Уменьшение прозрачности поверхности и содержимого.

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

маскировочные сетки

Внимание направлено от основного содержимого.

маскировочные сетки

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