Эта страница переведена с помощью Cloud Translation API.

Сетки

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

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

Компонент списка элементов

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

Анатомия

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

Элемент сетки
Первичный и вторичный текст
Сетка фон

Характеристики

Метки макета

Определения E, M, KL, P, Flex

Компонент списка элементов

Спецификации, рекомендации по стилю и многое другое.

Сетка контента (3 или 4 столбца)

Сетка приложений (4 столбца)

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

Размещение значка индикатора в сетке

Масштабирование макетов

Эти эталонные макеты показывают, как адаптировать сетки для экранов различной ширины и высоты. (Категории ширины и высоты определяются в разделе «Макет» .) Обратите внимание, что все значения пикселей находятся в визуализированных пикселях до того, как произойдет какая-либо понижающая или повышающая дискретизация.

Макет

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

Метки макета

Определения E, M, KL, P, Flex

Экраны стандартной ширины

Широкие экраны

Для широких экранов рекомендуется размещение в 3 столбца. При использовании макета из 4 столбцов сохраняйте минимальный размер плитки 219 dp.

Сверхширокие и сверхширокие экраны

Вертикальное расположение сеток приложений на экранах разной высоты.

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

Стили

Рекомендации по типографике

Ссылки на масштаб и сетку, типографские примеры и многое другое.

Рекомендации по цвету

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

Типография

Тип стиля	Гарнитура	Масса	Размер (дп)
Тело 1	Робото	Обычный	32
Тело 2	Робото	Обычный	28
Тело 3	Робото	Обычный	24

Цвет

Элемент	Цвет (дневной режим)	Цвет (ночной режим)
Основной тип/значки	Белый	Белый @ 88%
Вторичный тип/значки	Белый @ 72%	Белый @ 60%
Разделительная линия	Белый @ 22%	Белый @ 12%
Сетка фон	Черный	Черный
Контент-скрим	Н/Д	Черный @ 22%
Градиентное усечение	Черный @ 0–100 % в 10 % текстового пространства.	Черный @ 0–100 % в 10 % текстового пространства.

Размеры

Элемент	Размер (дп)
Значок приложения	76
Минимальная ячейка приложения	135
Минимальная ячейка содержимого	158