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
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ó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
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
Unikaj polegania wyłącznie na kolorze tła podczas oznaczania elementów na liście.
Nie
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
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 na planie koła, aby odzwierciedlić osoby lub podmiotu.
