Материальный дизайн — интервалы

Интервалы применяются в сетках для определения шага линий, отступов, расстояния между контейнерами и площади касания.

Базовая сетка

По умолчанию все компоненты выровнены по базовой сетке интервалов с шагом 8dp.

Сетка с шагом 8dp

Иконки, шрифты и некоторые другие элементы могут быть выровнены по сетке с шагом в 4dp.

Сетка с шагом 4dp

Текст выровнен по линии с шагом в 4dp

При размещении текста в контейнере его можно не выравнивать по сетке 4dp, так как он выровнен по центру внутри компонента.

Интервалы

Keylines

Keylines следует использовать в сочетании с адаптивной сеткой макета для последовательного размещения объектов. Они задают расстояние от каждого элемента с шагом в 8dp.

  1. Адаптивная сетка.
  2. Отступ элемента с помощью базовых интервалов.

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

Отступы (padding)

Отступы следует использовать в сочетании с адаптивной сеткой макета для последовательного размещения объектов. Они задают расстояние от каждого элемента с шагом в 8dp, а для некоторых элементов с шагом в 4dp.

  1. Адаптивная сетка.
  2. Отступы.

Отступы используют как по вертикали, так и по горизонтали.

Высота измеряемая в интервалах

Высота стандартных элементов должна соответствовать шагу в 8dp.

  1. Строка состояния — 24dp.
  2. Панель приложения — 56dp.
  3. Элемент списка — 88dp.

Контейнеры и пропорции

Контейнеры

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

  1. Контейнер изображения.
  2. Контейнер иконки.
  3. Контейнер кнопки.

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

  1. Жёсткий контейнер. Обрезает часть изображения при изменении.
  2. Гибкий контейнер. Масштабирует изображение внутри себя при изменении формы.

Соотношение сторон

Соотношение сторон — это отношение ширины элемента к его высоте.

Материальный дизайн рекомендует следующие пропорции для интерфейсов:

16:9, 3:2, 4:3, 1:1, 3:4, 2:3

Гибкие (резиновые) соотношения сторон

Гибкое (адаптивное) соотношение сторон контейнера позволяет заполнять пространство более эффективно.

Ширина столбца задаёт ширину контейнера.

Адаптивное кадрирование

На разных контрольных точках кадрирование может:

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

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

Соотношение сторон изображения остаётся фиксированным в различных контрольных точках.

Соотношение сторон всегда соответствует 3:2

Адаптивное соотношение сторон

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

В зависимости от ширины экрана изображение меняет соотношение сторон от 1:1 к 16:9 

Фиксированная высота изображения

Высота изображения не изменяется в разных контрольных точках.

Высота — фиксированная, ширина — адаптивная

Область взаимодействия

Размер области взаимодействия задаётся к любым устройствам, сенсорным и не сенсорным. Область взаимодействия должна быть не менее 48×48dp и отступом от неё не менее 8dp.

Область взаимодействия 48dp

В не сенсорных интерфейсах область взаимодействия должна быть не менее 24×24dp и отступом от неё не менее 8dp.

Область взаимодействия 24dp