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

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

Принципы

Сканирование

Высокая плотность улучшает восприятие большого объёма контента.

Приоритет

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

Всегда на виду

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

Когда использовать высокую плотность

Это просто определить по тому, как пользователи взаимодействуют с компонентом.

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

  1. Плотность по умолчанию — 48dp
  2. Высокая плотность — 32dp
  1. Плотность по умолчанию — 56dp
  2. Высокая плотность — 44dp

Применяйте высокую плотность не только к самому компоненту, но вложенным в него элементам.

  1. Плотность по умолчанию. Высота строки — 40dp, область действия — 36dp
  2. Высокая плотность. Высота строки — 32dp, область действия — 24dp

Когда не использовать высокую плотность

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

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

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

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

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

Раскладка

Сетка и плотность компонентов

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

Чем выше плотность компонентов, тем больше должны быть их поля и ширина отступов.

Широкие столбцы, отступы и края у компонента с высокой плотностью.

Высокий ряд, узкие отступы и края у компонента с низкой плотностью.

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

Плотность и область действия

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

Область действия 48×48dp

Бывают исключения, когда размер области нажатия должна быть меньше рекомендуемого минимума 48dp.

  • Уменьшенная область действия для ссылок в абзаце.
  • Уменьшенная область действия для выбора даты.

Плотность элементов списка по умолчанию.

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

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