Listy

Listy to kontenery elementów z wbudowanym przewijaniem i fokusowaniem.

Zasady

Przejrzysta organizacja: listy powinny zawierać informacje w przejrzystym, łatwym do przejrzenia układzie pionowym.

Spójna prezentacja elementów: elementy listy powinny mieć spójną strukturę wizualną.

Możliwość zaznaczenia i nawigacja: w interfejsach opartych na nawigacji kierunkowej listy muszą wyraźnie wskazywać zaznaczony element.

Interaktywność: elementy listy często reprezentują elementy, które można wybrać lub na których można wykonać działanie.

Użycie i umieszczenie

Listy mogą zawierać różne treści pokrewne z powtarzalnymi elementami. W przeciwieństwie do stosów listy wypełniają kontener widoku aplikacji.

Używaj półprzezroczystych nakładek, aby wskazywać przepełnienie treści Gdy lista zawiera więcej elementów, niż mieści się w widoku, w pobliżu jej granic używana jest czarna półprzezroczysta nakładka.

Listy mogą w razie potrzeby używać tytułu Aby zwiększyć przejrzystość, na liście można użyć statycznego lub przyklejonego tytułu.

cancel

Nie

mieć więcej niż 1 listę w widoku, co jest przytłaczające wizualnie i utrudnia skupienie się;

Używanie głębi do wskazywania ostrości

Elementy listy przesuwają się między głębokością 0 a +4 w przypadku stanu bez fokusu i z fokusem.

Elementy listy mogą być interaktywne

Elementy na liście mogą pełnić funkcję działań. Ogranicz działanie do elementu listy

Wyróżnij element sterujący, który zostanie aktywowany po kliknięciu, nawet jeśli możesz przewinąć coś innego. Jeśli listę lub kartę można przewinąć za inny element, skup się tylko na elemencie, który reaguje na kliknięcie.

check_circle

Tak

Podświetlaj tylko element, na którym obecnie skupia się uwaga. Dzięki temu użytkownicy mogą odkrywać elementy sterujące, na których można skupić uwagę.

cancel

Nie

Wyróżnianie wielu elementów interfejsu, na których można się skupić, ponieważ utrudnia to określenie, co jest powiązane z kliknięciem.

Anatomia

Lista składa się z kontenera z przewijaniem i równomiernie rozmieszczonych elementów listy. Listy powinny przewijać się w pionie z minimalnym przekroczeniem, gdy liczba elementów przekracza obszar widoczny.

A. Kontener – przewijany obszar

B. Pozycja na liście

C. Paski systemu

List Item: każdy element na liście.

A. Kształt

B. Obramowanie

C. Ikona główna

D. Zawartość tekstowa

E. Wskaźnik końcowy

Dostosowywanie

Większość dostosowań dotyczy elementów listy.