Karty to podstawowe elementy aplikacji telewizyjnej.
![Zdjęcie okładki kart](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/covers/cover-cards.webp?authuser=8&hl=pl)
Materiały
Typ | Link | Stan |
---|---|---|
Design | Źródło projektu (Figma) | Dostępna |
Implementacja | Jetpack Compose | Dostępna |
W skrócie
- Użyj karty, aby wyświetlić treści na określony temat.
- Karta może zawierać wszystko, od obrazów po nagłówki, tekst, przyciski, listy i inne elementy interfejsu.
- Karty nie można łączyć z inną kartą ani dzielić na kilka kart.
- Dostępnych jest 6 wersji kart: standardowe, klasyczne, kompaktowe, wstawiane, szerokie i klasyczne.
Warianty
Istnieje 5 typów kart, a każda z nich służy do innych zastosowań:
- Abonament standardowy
- Tryb klasyczny
- Compact
- Szeroki standard
- Szeroki klasyk
![Karta standardowa](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/standard-card.webp?authuser=8&hl=pl)
![Klasyczna karta](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/classic-card.webp?authuser=8&hl=pl)
![Karta kompaktowa](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/compact-card.webp?authuser=8&hl=pl)
![Wide Standard](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/wide-card.webp?authuser=8&hl=pl)
![Klasyczna karta szerokie](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/wide-classic.webp?authuser=8&hl=pl)
Bloki treści
Zawartość karty jest ułożona w oddzielnych blokach. Projekt wizualny karty, w tym wyróżnienie, określa hierarchię. Układ kart pozwala dostosować się do rodzaju treści.
Anatomia
![Treści](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/content.webp?authuser=8&hl=pl)
- tytuł;
- Podtytuł
- Opis
- Dodatkowy tekst
Dane techniczne
Karta standardowa
Anatomia
- Obraz
- Blokada treści
Stany
Dane techniczne
Klasyczna karta
Anatomia
- Obraz
- Blokada treści
Stany
Dane techniczne
Karta kompaktowa
Anatomia
- Obraz
- Blokada treści
Stany
Dane techniczne
Karta standardowa w szerokim formacie
Anatomia
- Obraz
- Blokada treści
Stany
Dane techniczne
Klasyczna karta w szerokim widoku
Anatomia
- Obraz
- Blokada treści
Stany
Dane techniczne
Wykorzystanie
Karty to uniwersalne elementy, które można wykorzystać do wyświetlania różnorodnych treści w sposób atrakcyjny wizualnie i przyjazny dla użytkownika. W sekcjach poniżej omawiamy kwestie projektowania kart.
Format obrazu
Są 3 typowe formaty obrazu kart: 16:9, 1:1 i 2:3. Każdy format obrazu ma swoje mocne strony, więc najlepszy wybór zależy od Twoich konkretnych potrzeb.
- Najczęściej używany jest format 16:9. Ten szeroki format obrazu pasuje do wyświetlania obrazów i filmów.
- 1:1 to kwadratowy format obrazu. To dobry wybór w przypadku kart, które muszą być wyważone pod względem wizualnym, jak na przykład obsada i ekipa, logo kanału lub logo zespołu.
- Format 2:3 jest wyższy. To dobry wybór, gdy chcesz podbić siatkę i uwydatnić reklamę.
Ostatecznie najlepszym sposobem na wybranie formatu obrazu dla kart jest eksperymentowanie z różnymi opcjami, aby zobaczyć, który wygląda najlepiej.
Oto kilka przykładów użycia różnych formatów obrazu
1:1
Obsada i ekipa
![Format obrazu 1:1, obsada i ekipa](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/aspect-ratio-1-1.webp?authuser=8&hl=pl)
Logo drużyn sportowych
![Format obrazu 1:1, logo sportowe](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/aspect-ratio-1-1-team.webp?authuser=8&hl=pl)
2:3
Książki zyskujące popularność
![Format obrazu 2:3, książki zyskujące popularność](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/aspect-ratio-2-3.webp?authuser=8&hl=pl)
16:9
Karty filmowe
![Format obrazu 16:9, karty animowane](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/aspect-ratio-16-9.webp?authuser=8&hl=pl)
Układ i odstępy
Aby zmienić szerokość kart w zależności od liczby kart widocznych na ekranie, należy zastosować odpowiednie wartości szczytowe z odstępem wynoszącym 20 dp.
Układ z 1 kartą
Szerokość karty – 844 dp
![1 układ karty](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/1-card.webp?authuser=8&hl=pl)
Układ z 2 kartami
Szerokość karty – 412 dp
![Układ 2 kart](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/2-card.webp?authuser=8&hl=pl)
Układ z 3 kartami
Szerokość karty – 268 dp
![Układ 3 kart](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/3-card.webp?authuser=8&hl=pl)
Układ 4-kartowy
Szerokość karty – 196 dp
![Układ 4 kart](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/4-card.webp?authuser=8&hl=pl)
Układ 5-kartowy
Szerokość karty – 124 dp
![Układ 5 kart](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/5-card.webp?authuser=8&hl=pl)
Blokada treści
Szerokość bloku treści na karcie powinna być taka sama jak szerokość miniatury obrazu. Jeśli chcesz wyświetlić więcej tekstu w bloku treści, użyj szerokiej odmiany karty.
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/card-content-do.webp?authuser=8&hl=pl)
Tak
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/card-content-dont.webp?authuser=8&hl=pl)
Nie wolno
Karta kompaktowa
Karty kompaktowe powinny być zwięzłe i czytelne. Treść poprzedzająca obraz tła powinna być zwięzła i konkretna. Unikaj długich tytułów, podtytułów i opisów. Dzięki temu karty będą bardziej atrakcyjne wizualnie i łatwiejsze do ich zeskanowania.
Aby tekst na obrazie był bardziej czytelny, dodaj półprzezroczystą czarną nakładkę gradientową. Powoduje to przyciemnienie tła i nie zasłanianie obrazu zbyt mocno, dzięki czemu tekst jest lepiej widoczny.
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/compact-card-do.webp?authuser=8&hl=pl)
Tak
![](https://developer.android.google.cn/static/design/ui/tv/guides/components/images/cards/compact-card-dont.webp?authuser=8&hl=pl)