Listy to wizualna reprezentacja co najmniej jednego powiązanego elementu. Są zwykle używane do wyświetlania zbioru opcji.
Materiały
| Typ | Link | Stan |
|---|---|---|
| Design | Źródło projektu (Figma) | Dostępna |
| Implementacja | Jetpack Compose | Już wkrótce |
W skrócie
- 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 główne i dodatkowe działania reprezentowane przez ikony i tekst.
Warianty
Istnieją 3 typy list: listy jednowierszowe, listy dwuwierszowe i listy trzywierszowe.
- Lista jednowierszowa: pojedynczy wiersz na każdy element. Dzięki takiej prostej strukturze każdy produkt będzie się wyraźnie odróżniał od innych.
- Lista dwuwierszowa: wykorzystuje 2 równoległe linie do komunikowania się o każdym elemencie. Taka konstrukcja zapewnia naturalną czytelność i unika przeciążenia funkcji poznawczych.
- 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, która reprezentuje określony obiekt lub działanie, często używana do wizualnego przedstawienia koncepcji lub koncepcji.
- Nadtytuł: krótka linia tekstu wyświetlana nad tytułem lub podtytułem, służąca często do podania dodatkowego kontekstu lub podkreślenia.
- Tytuł: duży, pogrubiony wiersz tekstu, który służy jako główny nagłówek elementu projektu lub strony.
- Podtytuł: krótszy wiersz tekstu, który pod głównym tytułem zawiera dodatkowe informacje lub kontekst.
- 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 jest zoptymalizowana pod kątem czytania ze zrozumieniem i zawiera jedną ciągłą kolumnę z elementami. Pozycje list mogą zawierać działania główne i dodatkowe reprezentowane przez ikony i tekst.
Tak
Elementy listy nie są przyciskami. Produkty nie mają kontenerów. Elementy listy są domyślnie niezaznaczone i niezaznaczone.
Ostrzeżenie
Używaj tła kontenera dla elementów list tylko wtedy, gdy jest to konieczne.
Elementy wyboru
Steruje wyświetlaniem informacji i działań związanych z elementami listy. Można je wyrównać do początkowej lub końcowej krawędzi elementu listy.
- Pola wyboru: wybierz co najmniej jeden element listy.
- Opcje: wybierz dokładnie 1 element na liście.
- Przełączniki: włącz lub wyłącz element sterujący.
Tak
Użyj wskaźnika wyboru ikony, aby wyraźnie wskazać element na liście. Dzięki temu użytkownicy będą mogli łatwo zorientować się, który produkt wybrać, i zapewni im lepsze wrażenia.
Nie wolno
Unikaj polegania wyłącznie na kolorze tła podczas oznaczania elementów na liście.
Nie wolno
Unikaj umieszczania przycisków wewnątrz elementu listy, ponieważ może to powodować niejasności co do tego, który element jest obecnie zaznaczony.
Ikony
Tak
Jeśli pokazujesz na liście ten sam rodzaj treści, pomiń ikony, aby ograniczyć szum wizualne i zapewnić użytkownikom lepsze wrażenia. Unikaj używania na liście ikon, które nie służą do żadnych celów ani nie dostarczają dodatkowych informacji.
Nie wolno
Unikaj używania tej samej ikony dla wszystkich elementów na liście. Może to być przytłaczające i dezorientujące dla użytkowników. Ikony należy używać tylko wtedy, gdy stanowią wartość dodaną lub zawierają dodatkowe informacje.
Awatary i obrazy
Elementy listy mogą zawierać obrazy przycięte tak, aby reprezentowały osobę lub podmiot.
