Listy to wizualna reprezentacja co najmniej jednego powiązanego elementu. Są zwykle używane do wyświetlania zbioru opcji.
Materiały
Typ | Link | Stan |
---|---|---|
Projektowanie | Źródło projektu (Figma) | Dostępna |
Implementacja | Jetpack Compose | Dostępna |
Najciekawsze
- Listy to ciągły zbiór tekstu lub obrazów.
- Listy powinny wydawać się naturalne i łatwo je przeglądać.
- Listy składają się z elementów zawierających dane podstawowe i dodatkowe czynności reprezentowane przez ikony i tekst.
Warianty
Istnieją 3 typy list: listy jednowierszowe, listy dwuwierszowe i do listy 3-wierszowej.
- Lista jednowierszowa: pojedynczy wiersz na każdy element. To proste aby każdy produkt wyraźnie różnił się od innych.
- Lista dwuwierszowa: wykorzystuje 2 równoległe linie do komunikowania się o każdym elemencie. Taka konstrukcja zapewnia naturalną czytelność i nie umożliwia poznawania funkcji poznawczych przeciążenie.
- Lista 3-wierszowa: każdy element jest przedstawiany na podstawie 3 równoległych linii. Taki dekoracyjny projekt sprawia, że reklama jest dobrze widoczna.
Anatomia
- Ikona: mała grafika przedstawiająca określony obiekt lub działanie, często umożliwiają wizualne przedstawienie koncepcji lub koncepcji.
- Nadtytuł: krótki wiersz tekstu wyświetlany nad tytułem lub podtytułem. często używane do nadania dodatkowego kontekstu lub uwydatnienia.
- Tytuł: długi, pogrubiony wiersz tekstu, który służy jako główny nagłówek do elementu lub strony projektu.
- Podtytuł: krótszy wiersz tekstu zawierający dodatkowe informacje. lub kontekst pod głównym tytułem.
- Kontrola: element interaktywny, który umożliwia użytkownikowi określenie decyzji.
Stany
Dane techniczne
Wykorzystanie
Listy to uporządkowane pionowo grupy tekstu i obrazów. Lista zoptymalizowana pod kątem czytania ze zrozumieniem zawiera 1 ciągła kolumna elementów. Pozycje listy mogą zawierać działania główne i dodatkowe, które są reprezentowane za pomocą ikon i tekstu.

Tak

Ostrzeżenie
Elementy wyboru
Steruje wyświetlaniem informacji i działań związanych z elementami listy. Można je wyrównywać na początku lub na końcu elementu listy.



- Pola wyboru: wybierz co najmniej jeden element listy.
- Przyciski opcji: wybierz tylko jeden. pozycji na liście.
- Przełączniki: włącz lub wyłącz element sterujący.

Tak

Nie

Nie
Ikony

Tak

Nie
Awatary i obrazy
Elementy listy mogą zawierać obrazy przycięte na planie koła, aby odzwierciedlić osoby lub podmiotu.