Siatki prezentują elementy w układzie siatki.
Ten szablon jest przydatny, gdy użytkownicy dokonują wyboru głównie na podstawie obrazów.
Ten szablon można umieścić w szablonie karty, aby umożliwić nawigację po kartach.
W skład zestawu wchodzą:
- Nagłówek z opcjonalnym paskiem działań (pasek działań jest zastępowany kartami, gdy ten szablon jest umieszczony w szablonie karty)
- Elementy siatki (zobacz uwagę poniżej), z których każdy zawiera ikonę lub obraz w dużym rozmiarze
- Tekst główny każdego elementu siatki (wymagany)
- Tekst dodatkowy dla każdego elementu siatki (opcjonalnie)
- Opcjonalny pływający przycisk polecenia
Przykłady szablonów siatki
W poniższych przykładach systemu operacyjnego Android Auto i Android Automotive (AAOS) wykorzystano szablon siatki.
Siatka, w której niektóre elementy mają tekst dodatkowy (przykład w Androidzie Auto)
Siatka z ikoną jednego elementu tymczasowo zastąpiona wskaźnikiem wczytywania i obciętym głównym tekstem innego elementu, ponieważ jego długość przekracza dostępne miejsce (przykład AAOS)
Wymagania UX szablonu siatki
Deweloperzy aplikacji:
| POTRZEBNE | Ogranicz długość podstawowych i dodatkowych ciągów tekstowych, aby uniknąć obcięcia. |
| POTRZEBNE | Z każdym elementem siatki powiązane jest działanie (niezalecane są elementy zawierające tylko informacje). |
| POTRZEBNE | Wyraźnie wskaż stan elementu (w przypadku elementów siatki, które mają kilka stanów, np. wybrany lub odznaczony) za pomocą obrazu, ikony lub tekstu. |
| NIE POWINNO | Dodaj jednocześnie pasek działań i pływający przycisk polecenia. |
| MAJ | Gdy wykonywana jest czynność powiązana z elementem siatki, zamiast ikony lub obrazu elementu siatki pokazuje wskaźnik ładowania. |