Материальный дизайн — адаптивная сетка

В материальной дизайне макет адаптируется к размеру экрана и его ориентации.

Столбцы, отступы, края

Компоновка сетки состоит из трёх элементов: столбец, отступ и край поля.

1 — столбец, 2 — отступ, 3 — край поля.

Столбцы

Контент размещается в областях, которые содержат столбцы.

Чтобы позволить контенту гибко адаптироваться к любому размеру экрана, ширина столбца задаётся в процентах, а не в фиксированных значениях. Количество столбцов задаётся контрольными точками (диапазон определённых размеров экрана, будь то точка останова для мобильного телефона, планшета или другого размера).

Мобильное устройство в контрольной точке 360dp эта сетка использует 4 столбца.

Планшет в контрольной точке 600dp в этой сетке используется 8 столбцов.

Отступы

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

Мобильное устройство в контрольной точке 360dp, эта сетка использует отступ 16dp.

Планшет в контрольной точке 600dp в этой сетке используется отступ 24dp.

Края поля

Ширина края поля — фиксированное значение для каждого диапазона контрольной точки. Чтобы лучше адаптироваться к экрану, ширина края поля может меняться в разных точках останова. Более широкие отступы на краях подходят для больших экранов, так как они создают больше пустого пространства по всему периметру контента.

Мобильное устройство в контрольной точке 360dp, эта сетка использует край поля 16dp.

Планшет в контрольной точке 600dp в этой сетке используется край поля 24dp.

Настройка сетки

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

Настройка отступов

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

Эта сетка использует 8dp для отступов. Такой узкий интервал может указывать на то, что изображения тесно связаны друг с другом, поэтому они воспринимаются как часть галереи.

В этой сетке используются более крупные отступы в 32dp. Дополнительное пространство помогает каждому элементу восприниматься как отдельная сущность в галереи.

Слишком большими отступы — в размер ширины столбцов, занимают слишком много полезного места в интерфейсе и выглядит разобщённым.

Настройка краёв поля

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

Идеальная длина для разборчивого чтения основного текста — 40-60 символов в строке.

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

В этой сетке используется большие поля в 64dp для ограничения ширины текста.

Здесь явно не хватает места для контента.

Края и отступы

В пределах одной и той же контрольной точки ширина отступов и краёв могут отличаться друг от друга.

  1. Размер края — 32dp
  2. Размер отступов —  8dp

Горизонтальная ориентация сетки

Сетка макета в Material Design может быть настроена для сенсорных интерфейсов, которые прокручиваются горизонтально. Столбцы, отступы и края поля расположены горизонтально, а не вертикально. Высота экрана определяет количество рядов в горизонтальной ориентации сетки.

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

В этой сетке используется четыре горизонтальных столбца для общей высоты макета 400dp.

  1. Ряды.
  2. Отступы.
  3. Края.

Горизонтальные сетки могут резервировать место для панели управления или других элементов интерфейса в верхней части.

Эта сетка начинается под компонентом «Top AppBar» и использует четыре горизонтальных столбца на высоте 316dp.

Контрольные точки (точки останова)

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

Система контрольных точек

Макеты используют сетки с 4, 8 и 12 столбцами в зависимости от разрешения экрана, устройства и его ориентации. Каждый диапазон контрольных точек определяет количество столбцов, рекомендуемые размеры отступов от колонок и отступов от края экрана. Material Design предоставляет адаптивные макеты на основе следующих контрольных точек. 

Диапазон контрольной точки (dp)Количество столбцовРазмеры отступов* (dp)
0-359
4

16

360-399
4

16

400-479
4

16

480-599
4

16

600-719
8

16

720-839
8

24

840-959
12

24

960-1023
12

24

1024-1279
12

24

1280-1439
12

24

1440-1599
12

24

1600-1919
12

24

1920+
12

24

*размеры отступов гибкие и не должны быть одинакового размера

Поведение сетки

Гибкая сетка

Гибкая сетка используют масштабирование столбцов и изменяет размер содержимого при увеличении размера экрана.

Фиксированная сетка

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

Области интерфейса

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

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

Адаптация макета на экранах с разным размером

Область с фиксированным расположением интерфейса

Область с фиксированным расположением интерфейса отображаются за пределами адаптивной сетки.

При соответствующей ширине экрана фиксированная область показывает контент всегда.

Область с плавающем расположением интерфейса

Область с плавающем расположением интерфейса отображаются по команде пользователя, а в остальное время находятся скрытой за передел интерфейса. В момент появления она конденсирует как контент, так и сетку.

При появлении плавающая область сжимает сетку и её содержимое.

Область с временным расположением интерфейса

Такая область при взаимодействии не влияет на адаптивную сетку. И когда она активна с другими элементами интерфейса взаимодействовать нельзя.

При появлении временная область не влияет на сетку и её содержимое.

Whiteframes

Whiteframes — структурируют макеты и обеспечивают согласованный подход к дизайну.

  1. Мобильные устройства.
  2. Компьютеры.
  1. Мобильные устройства.
  2. Компьютеры.