В виде сетки отображаются два или более столбца изображений, представляющих элементы контента, с кратким текстом под каждым изображением. Этот вид лучше всего подходит, когда пользователи при выборе в первую очередь полагаются на изображения.
Сетки прокручиваются по вертикали и могут различаться по размеру, интервалу и количеству столбцов. Содержимое сетки также можно сгруппировать по категориям.
Компонент списка элементов
Списки предоставляют альтернативный способ отображения контента, требующего большего пояснительного текста.
Анатомия
Сетки содержат текст и элементы управления пользовательского интерфейса. Поскольку пользователи должны на них реагировать, они никогда не должны быть закрыты другими элементами или краем экрана.
Элемент сетки
Первичный и вторичный текст
Сетка фон
Характеристики
Метки макета
Определения 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
Высота
Элемент
Цвет
ось Y
Размытие
Сетка плитки
Черный @ 22%
2
2
Примеры
Сетка приложений – день Сетка приложений – ночь
Сетка контента – день Сетка контента – ночь
Пользователь перетаскивает вверх или вниз для прокрутки содержимого.
[null,null,["Последнее обновление: 2024-10-30 UTC."],[[["Grid view displays content items as images with brief text, best for image-based selections, and can be vertically scrolled, categorized, and varied in size and spacing."],["Grids contain text and UI controls which should remain visible; they include a grid item, primary and secondary text, and a background."],["Layouts scale for various screen sizes, recommending a 3-column layout for wide screens or a 4-column layout with minimum tile size of 219dp, and adjusting vertical spacing for short screens."],["Grids have specific styles for typography, color (with day and night modes), sizing, and elevation, ensuring visual consistency and usability."],["Examples are provided for both app and content grids, demonstrating their appearance in day and night modes, and showcasing user interaction with scrolling."]]],[]]
