Сетки представляют элементы в виде сетки.
Этот шаблон полезен, когда пользователи при выборе в первую очередь полагаются на изображения.
Этот шаблон можно внедрить в шаблон вкладки для обеспечения навигации по вкладкам.
Включает в себя:
- Заголовок с дополнительной полосой действий (полоса действий заменяется вкладками, когда этот шаблон встроен в шаблон вкладки )
- Элементы сетки (см. примечание ниже), каждый из которых содержит значок или изображение большого размера.
- Основной текст для каждого элемента сетки (обязательно)
- Дополнительный текст для каждого элемента сетки (необязательно)
- Дополнительная плавающая кнопка действия
Примеры шаблонов сетки
Следующие примеры Android Auto и Android Automotive OS (AAOS) были созданы с использованием шаблона Grid.
Сетка, в которой некоторые элементы содержат дополнительный текст (пример Android Auto)
Сетка, в которой значок одного элемента временно заменен индикатором загрузки, а основной текст другого элемента усечен, поскольку его длина превышает доступное пространство (пример AAOS).
Требования к UX шаблона сетки
Разработчики приложения:
| ДОЛЖЕН | Ограничьте длину основных и дополнительных текстовых строк, чтобы избежать усечения. |
| ДОЛЖЕН | С каждым элементом сетки связано действие (элементы, содержащие только информацию, не рекомендуется). |
| ДОЛЖЕН | Четко обозначайте состояние элемента (для элементов сетки, которые имеют несколько состояний, например выбранное и невыделенное) с помощью вариаций изображения, значка или текста. |
| НЕ ДОЛЖНА | Включите одновременно полосу действий и плавающую кнопку действия . |
| МОЖЕТ | Показывать индикатор загрузки вместо значка или изображения элемента сетки, когда выполняется действие, связанное с этим элементом. |