Kartlar, TV uygulamanızın temel yapı taşlarıdır.
![Kartların kapak resmi](https://developer.android.com/static/design/ui/tv/guides/components/images/covers/cover-cards.webp?authuser=5&hl=tr)
Kaynaklar
Tür | Bağlantı kur | Durum |
---|---|---|
Tasarım | Tasarım kaynağı (Figma) | Kullanılabilir |
Uygulama | Jetpack Compose | Kullanılabilir |
Öne çıkanlar
- Tek bir konuyla ilgili içeriği görüntülemek için kart kullanın.
- Metinler, düğmeler, listeler ve diğer kullanıcı arayüzü öğelerini destekleyen resimlerden başlıklara kadar her şeyi barındırabilir.
- Bir kart başka bir kartla birleştirilemez veya birden fazla karta bölünemez.
- Altı farklı kart türü vardır: standart, klasik, kompakt, iç içe, geniş standart ve geniş klasik.
Varyantlar
Her biri farklı kullanım alanına sahip beş tür kart vardır:
- Standart
- Klasik
- Kompakt
- Geniş standart
- Geniş klasik
![Standart Kart](https://developer.android.com/static/design/ui/tv/guides/components/images/cards/standard-card.webp?authuser=5&hl=tr)
![Klasik Kart](https://developer.android.com/static/design/ui/tv/guides/components/images/cards/classic-card.webp?authuser=5&hl=tr)
![Kompakt Kart](https://developer.android.com/static/design/ui/tv/guides/components/images/cards/compact-card.webp?authuser=5&hl=tr)
![Geniş Standart Kart](https://developer.android.com/static/design/ui/tv/guides/components/images/cards/wide-card.webp?authuser=5&hl=tr)
![Geniş Klasik Kart](https://developer.android.com/static/design/ui/tv/guides/components/images/cards/wide-classic.webp?authuser=5&hl=tr)
İçerik blokları
Bir kartın içeriği ayrı bloklar halinde düzenlenir. Vurgulama ile birlikte kartın görsel tasarımı hiyerarşiyi gösteriyor. Kartların düzeni, içerdikleri içerik türlerine uyum sağlar.
Anatomi
![İçerik](https://developer.android.com/static/design/ui/tv/guides/components/images/cards/content.webp?authuser=5&hl=tr)
- Başlık
- Alt başlık
- Açıklama
- Ek metin
Özellikler
Standart kart
Anatomi
- Resim
- İçerik engelleme
Eyaletler
Özellikler
Klasik kart
Anatomi
- Resim
- İçerik engelleme
Eyaletler
Özellikler
Kompakt kart
Anatomi
- Resim
- İçerik engelleme
Eyaletler
Özellikler
Geniş standart kart
Anatomi
- Resim
- İçerik engelleme
Eyaletler
Özellikler
Geniş klasik kart
Anatomi
- Resim
- İçerik engelleme
Eyaletler
Özellikler
Kullanım
Kartlar, çeşitli içerikleri görsel olarak çekici ve kullanıcı dostu bir şekilde görüntülemek için kullanılabilecek çok yönlü tasarım öğeleridir. Aşağıdaki bölümlerde, kartlar için tasarımla ilgili dikkat edilmesi gereken noktalar açıklanmaktadır.
En boy oranı
Kartlar için üç yaygın en boy oranı vardır: 16:9, 1:1 ve 2:3. Her en boy oranının kendine özgü güçlü özellikleri vardır. Bu nedenle, sizin için en uygun seçenek kendi ihtiyaçlarınıza bağlıdır.
- 16:9, kartlar için en yaygın en boy oranıdır. Resimleri ve videoları görüntülemek için çok uygun olan geniş bir en boy oranıdır.
- 1:1, kare en boy oranıdır. Oyuncular ve set ekibi, kanal logoları veya takım logoları gibi görsel olarak dengelenmesi gereken kartlar için iyi bir seçimdir.
- 2:3, daha uzun bir en boy oranıdır. Izgarayı bölmek ve reklama daha fazla vurgu yapmak istiyorsanız bu iyi bir seçimdir.
Sonuç olarak, kartlarınız için en boy oranı seçmenin en iyi yolu, farklı seçenekler denemek ve en iyi görünene bakmaktır.
Aşağıda, farklı en boy oranlarının kullanım örnekleri verilmiştir
1:1
Oyuncular ve Ekip
![En boy oranı 1:1, oyuncular ve ekip](https://developer.android.com/static/design/ui/tv/guides/components/images/cards/aspect-ratio-1-1.webp?authuser=5&hl=tr)
Spor takımları logoları
![En boy oranı 1:1, spor logoları](https://developer.android.com/static/design/ui/tv/guides/components/images/cards/aspect-ratio-1-1-team.webp?authuser=5&hl=tr)
2:3
Trend olan kitaplar
![En boy oranı 2:3, trend kitaplar](https://developer.android.com/static/design/ui/tv/guides/components/images/cards/aspect-ratio-2-3.webp?authuser=5&hl=tr)
16:9
Film kartları
![En boy oranı 16:9, ekran kartları](https://developer.android.com/static/design/ui/tv/guides/components/images/cards/aspect-ratio-16-9.webp?authuser=5&hl=tr)
Düzen ve boşluk
Ekranda görünen kart sayısına göre kart genişlikleri, 20 dp'lik bir aralıkla uygun bir üst üste ekleme işlemi uygulanarak değişebilir.
1 kart düzeni
Kartın genişliği: 844 dp
![1 kart düzeni](https://developer.android.com/static/design/ui/tv/guides/components/images/cards/1-card.webp?authuser=5&hl=tr)
2 kart düzeni
Kartın genişliği: 412 dp
![2 kart düzeni](https://developer.android.com/static/design/ui/tv/guides/components/images/cards/2-card.webp?authuser=5&hl=tr)
3 kart düzeni
Kartın genişliği: 268 dp
![3 kart düzeni](https://developer.android.com/static/design/ui/tv/guides/components/images/cards/3-card.webp?authuser=5&hl=tr)
4 kart düzeni
Kartın genişliği: 196 dp
![4 kart düzeni](https://developer.android.com/static/design/ui/tv/guides/components/images/cards/4-card.webp?authuser=5&hl=tr)
5 kart düzeni
Kartın genişliği: 124 dp
![5 kart düzeni](https://developer.android.com/static/design/ui/tv/guides/components/images/cards/5-card.webp?authuser=5&hl=tr)
İçerik engelleme
Bir karttaki içerik bloğunun genişliği, resim küçük resmiyle aynı genişlikte olmalıdır. İçerik bloğunda daha fazla metin görüntülemeniz gerekiyorsa geniş bir kart varyasyonu kullanın.
![](https://developer.android.com/static/design/ui/tv/guides/components/images/cards/card-content-do.webp?authuser=5&hl=tr)
Yapılması gerekenler
![](https://developer.android.com/static/design/ui/tv/guides/components/images/cards/card-content-dont.webp?authuser=5&hl=tr)
Yapılmaması gerekenler:
Kompakt kart
Kompakt kartlar kısa ve öz olmalı, daha kolay okunmalıdır. Arka plan resminden önceki içerik kısa ve öz olmalıdır. Uzun başlıklar, alt başlıklar veya açıklamalar kullanmaktan kaçının. Bu, kartlarınızı görsel olarak daha ilgi çekici ve taramayı daha kolay hale getirir.
Resimdeki metnin daha okunaklı olmasını sağlamak için yarı şeffaf siyah gradyan yer paylaşımı ekleyin. Bu işlem, resmi çok fazla kaplamadan arka planı koyulaştırarak metnin daha kolay görünmesini sağlar.
![](https://developer.android.com/static/design/ui/tv/guides/components/images/cards/compact-card-do.webp?authuser=5&hl=tr)
Yapılması gerekenler
![](https://developer.android.com/static/design/ui/tv/guides/components/images/cards/compact-card-dont.webp?authuser=5&hl=tr)