Interaktywna lista

Pełna lista to połączenie wiersza treści i podglądu wybranego elementu. Zawiera treści w większym widocznym obszarze.

Cover utworu

Materiały

Typ Link Stan
Design Źródło projektu (Figma) Dostępna
Implementacja Jetpack Compose Dostępna

W skrócie

  • Podgląd zawartości dynamicznej. Gdy użytkownik porusza się po wierszu treści, obszar podglądu jest automatycznie aktualizowany i wyświetla obecnie aktywny element.
  • Komponent Lista przewijana ma większy widoczny obszar do wyświetlania treści, co ułatwia użytkownikom przeglądanie i docenianie wizualnych szczegółów zaznaczonego elementu.
  • Wirtualne listy dostarczają istotnych i kontekstowych informacji o wybranym elemencie, pomagając użytkownikom podejmować świadome decyzje bez konieczności wychodzenia z przeglądarki.
  • Komponent Lista immersyjnej wykorzystuje progresywne ujawnianie informacji, aby ujawniać więcej szczegółów na temat treści w miarę poruszania się użytkowników, zmniejszając obciążenie poznawcze i utrzymując zaangażowanie użytkowników.
  • Komponent listy immersyjnej umożliwia spójne interakcje w aplikacji, dzięki czemu wrażenia użytkowników są znajome i przewidywalne.

Anatomia

Anatomia

  1. Tło obrazu
  2. Blokada treści
  3. Karta na ostrości
  4. Siatka treści

Anatomia obrazu

  1. Kryminalna grafika
  2. Plakat
  3. Kolor tła

Dane techniczne

Dane techniczne

Działanie

Podczas poruszania się między kartami na liście Immersive szczegółowe informacje na temat wybranej karty stopniowo ujawniają się w tle.

Gdy lista przewija się, jej wysokość zwiększa się, pokazując dodatkowe informacje, takie jak tytuł i opis tła, jak widać na tym filmie.

Wykorzystanie

Korzystaj z karuzeli, gdy chcesz zwrócić uwagę na polecane lub promowane treści, takie jak nowości, popularne programy lub wyjątkowe tytuły. Większy widoczny obszar i dynamiczny podgląd to atrakcyjny sposób na zaprezentowanie tych elementów o wysokim priorytecie.

Wyświetlanie obrazu

Dane techniczne

  1. Skoncentrowany na karcie: gdy użytkownik porusza się po karuzeli, wyróżniona karta jest skalowana o 1, 1, skalowana za pomocą obramowania i innych wizualnych wskazówek jako wysokości, aby wskazać jej wybór. Upewnij się, że tytuły treści w miniaturze zaznaczonej karty są wyraźnie widoczne i czytelne.
  2. Obraz tła: gdy karta jest aktywna, w większym widocznym obszarze pojawia się odpowiedni obraz tła. Zalecamy ten obraz tła, ponieważ ma on wysoką jakość i jest atrakcyjny wizualnie, ponieważ zapewnia realistyczne i angażujące tło treści.

Kompozycja

Skaluj obiekt i wyrównaj go do prawego górnego rogu, aby uzyskać efekt filmowy.
Unikaj korzystania z funkcji przycinania pełnoekranowego, która spowoduje obcięcie obiektu znajdującego się pod treścią.

Aby mieć pewność, że obrazy używane jako tła w komponencie Immersive Lista będą dobrze wyglądać, przeskaluj je odpowiednio, aby nie były rozmyte ani zniekształcone.

Format obrazu

Gdy tylko jest to możliwe, stosuj proporcje 16:9, aby uzyskać atrakcyjny wizualnie i spójny układ.

Dane techniczne