Düzenler

Düzenler, uygulamanız genelinde görsel tutarlılığı korumak için bir çerçeve sağlayan yapısal şablonlardır. Düzenler; görsel ızgaralar, boşluklar ve bölümler tanımlayarak bilgilerin ve kullanıcı arayüzü öğelerinin sunulması için uyumlu ve düzenli bir yapı oluşturur.

Düzenler için Kapak Resmi

Öne çıkanlar

  • Web veya mobil cihazların aksine TV'ler sabit ekran en boy oranı 16:9'dur.
  • Kullanım ve kontrol kolaylığı için düzenleri yatay ve dikey eksenler boyunca optimize edin.

İlkeler

TV düzenleri tasarlarken tasarımla ilgili kararlar almanıza yardımcı olacak yönergeler.

Büyük Ekranlar İçin Tasarlayın

Büyük ekranlar için tasarım yapın

HDTV'nin yaygınlaşmasından bu yana, en boy oranı 16:9 olan dikdörtgen TV'ler standart haline geldi. Televizyonlar geçmişte 4:3 veya 1, 33:1 en boy oranı olarak bilinen kare şeklinde üretilirdi.

Android İçin Tasarım

Android platformunda tasarım

Tasarım yaparken öğeleri, Android destekli diğer cihazlarda olduğu gibi farklı yoğunluklara sahip ekranlarda eşit şekilde görüntülemek için dp kullanın. Her zaman 960 * 540 piksel MDPI çözünürlükte tasarlayın.

MDPI 1 piksel = 1dp'de.

Öğeler 1080p'yi hedeflemelidir. Bu, Android sisteminin gerekirse düzen öğelerinin ölçeğini 720p'ye düşürmesine olanak tanır.

Görünürlüğü sağlama

Görünürlük ve aşırı tarama güvenliği sağlayın

Önemli öğelerin her zaman kullanıcılar tarafından görülebilmesini sağlayın. Bunu yapmak için öğeleri, düzenin sol ve sağ kenarlarında% 5'lik 48 dp, üst ve alt kenarlarında 27 dp kenar boşluğu olacak şekilde yerleştirin. Bu, düzenin ekran öğelerinin fazla tarama içinde olmasını sağlar.

Tam ekranı doldur

Tam ekranı doldur

Arka plan ekranı öğelerini, fazla taramaya karşı güvenli alana ayarlamayın veya kırpmayın. Bunun yerine, ekran dışı öğelerin kısmen görüntülenmesine izin verin. Bu, tüm ekranların arka plan ve ekran dışı öğeleri doğru bir şekilde görüntülemesini sağlar.

Eksenlerle optimize etme

Eksenlerle optimize etme

Kullanıcıların TV'leri ile uzaktan kumandayı nasıl kullandıklarını düşünün. TV arayüzünüzün uzaktan kumanda ile kolayca kullanılabildiğinden emin olun. Her yönü (yukarı, aşağı, sol, sağ), kullanıcıların büyük seçenek grupları arasında nasıl hareket edeceklerini anlamalarına yardımcı olacak net bir amaca ve gezinme düzenine sahip olacak şekilde tasarlayın.

Düzen

TV ekran boyutları cihazdan cihaza değişir. Modern bir TV'nin en boy oranı 16:9 olduğundan, uygulamanızı 960 x 540 piksel ekran boyutunda tasarlamanız önerilir. Bu, tüm öğelerin HD veya 4K ekranlar için orantılı olarak yeniden boyutlandırılabilmesini sağlar.

Düzen Kılavuzu

Fazla tarama kenar boşlukları

Fazla tarama kenar boşlukları, içerik ile ekranın sol ve sağ kenarları arasındaki boşluklardır.

960 * ~5% = 48dp
540 * ~5% = 27dp round off to 24dp

Bu kenarlık kenar boşlukları, birincil öğeleri olası fazla tarama sorunlarına karşı korur. İçeriğinizi ve bilgilerinizi güvende tutmak için% 5 kenar boşluğu düzeni (yanlarda 58 dp, üst ve alt kenarlarda 28 dp) kullanın.

Fazla tarama kenar boşlukları

Sütunlar ve oluklar

İçerik, ekranda sütunlar ve oluklar içeren alanlara yerleştirilir. Izgara sisteminde 12 sütun vardır. Oluklar, sütunlar arasındaki içeriğin bölünmesine yardımcı olan boşluklardır.

52 dp genişliğinde ve arasında 20 dp boşluk bulunan 12 sütun kullanın. Her iki tarafta 58 dp ve çizgiler arasında 4 dp dikey boşluk olmalıdır.

Sütun ve Oluklar

Düzen kalıpları

Amaca ve görüntüleme cihazınıza bağlı olarak kullanabileceğiniz üç düzen kalıbı vardır: Yatay Yığın Düzeni, Dikey Yığın Düzeni ve Izgara Düzeni.

Yatay Yığın Düzeni

Yatay Yığın Düzeni bileşenleri yatay olarak düzenler. Boyut, oran veya biçimde değişiklik gösterebilir. Bu düzen genellikle içerik ve bileşenleri gruplandırmak için kullanılır.

Yatay Yığın Düzeni

Dikey Yığın Düzeni

Dikey Yığın Düzeni bileşenleri dikey olarak düzenler, böylece boyut, oran ve biçim açısından esnektir. Yaygın olarak çeşitli metin türlerini, etkileşimli bileşenleri ve düzen kalıplarını birlikte gruplandırmak için kullanılır.

Dikey Yığın Düzeni

Izgara Düzeni

Izgara, kesişen sütun ve satırlardan oluşan bir koleksiyondur. Izgara Düzeni ise içeriği bu ızgarada görüntüler. İçeriği mantıklı bir şekilde düzenleyerek kullanıcıların gezinmesini ve göz atmasını kolaylaştırır.

Izgara Düzeni

Çakışmayı önlemek için öğeler arasındaki dolguyu ve odaklanılan durumların boyut artışını göz önünde bulundurmak önemlidir. Örneğin, odaklanılmış bir bileşen (kart gibi) vurgulandığında. Önerdiğimiz Izgara Düzeni'ni (52 dp'de 12 sütun, 20 dp'de bölmelerle) kullanıyorsanız önerilen bileşen düzenleri ve önizlemeleri için Kartlar bölümüne bakın.

Düzen yapıları

TV düzenlerini tasarlarken daha iyi kararlar almanıza yardımcı olacak bazı düzen yapılarını aşağıda bulabilirsiniz. TV ekranlarını yatay olarak bölerek farklı bileşen türlerini ayırmaya, bilgi hiyerarşisini ve gezinme mantığını iletmeye yardımcı olabilir. Bir bölme birden fazla birim sütunu içerebilir. Her panel, Yığın Düzeni ve Izgara Düzeni gibi farklı düzen kalıpları barındırabilir.

Tek bölmeli düzen Örneği

Tek bölmeli düzen

Tek bölmeli düzen, birincil içeriğe dikkat çekmeye yardımcı olabilir. İçerik odaklı deneyim ve kritik bilgi sayfalarında bu özelliği kullanın.

İki bölmeli düzen Örneği

İki bölmeli düzen

Sayfada hiyerarşik içerik gösterildiğinde 2 bölmeli düzen daha iyi performans gösterir. Göreve yönelik deneyimlerde yaygın olarak kullanılır.

Bilişsel aşırı yük

Karmaşık ve net olmayan içerikler; kafa karışıklığına, rahatsızlığa ve ilginin azalmasına neden olabilir. Tasarımınızı taranabilir, düzenli hale getirin ve yalnızca önemli bilgileri sunun.

İçerikleri gruplandırmak için çok fazla panel kullanmaktan kaçının. Bu da kullanıcılara gereksiz bir bilişsel yük ve hiyerarşi oluşturmaktadır.

İlgili içerikleri tek bir panele yerleştirin. Bu, kullanıcıların içerik gruplandırmasını anlamasına yardımcı olur.
İçerikleri gruplandırmak için çok fazla panel kullanmaktan kaçının. Bu durum, kullanıcılar için gereksiz bilişsel yük ve hiyerarşi oluşturur.

Ekspres hiyerarşi ve gezinme

Paneller, içeriği görsel olarak ayırır ve düzenler. Bunlar kullanıcılara yol gösterir ve deneyimi geliştiren daha sezgisel bir arayüz oluşturabilir.

İçerikleri kullanıcının okuma yoluna göre gruplandırın. Odak yolunun hiyerarşiyle veya karar verme mantığıyla uyumlu olduğundan emin olun.
Kullanıcıların dikkatini paneller arasında gidip tutmayın. Bu durum, kullanıcı okuma alışkanlıklarına uygun olmayan, doğal olmayan bir odaklanma yolları oluşturur.

Düzen şablonları

Düzen şablonları düzeni, tutarlılığı ve aşinalığı teşvik eder. Tasarım, kullanıcının nerede olduğunu ve nereye gidebileceğini net bir şekilde açıklayan rahat bir kullanıcı arayüzü deneyimi oluşturuyor.

Göz atın

Tarayıcı şablonu, medya içeriği "kümelerini" veya satırları dikey yığın halinde görüntüler. Kullanıcılar satırlara göz atmak için yukarı ve aşağı, belirli bir satırın içeriğine göz atmak için sağa ve sola gidebilir.

Göz atın

Sol yer paylaşımı

Sol gezinme şablonu, ekranın sol tarafında bir yer paylaşımı paneli gösterir. Genellikle arka planda içerikle alakalı gezinme seçeneklerini veya üzerinde işlem yapabileceğiniz öğeleri gösterir.

Sol Yer Paylaşımı

Sağ yer paylaşımı

Sağdaki yer paylaşımı şablonunda, ekranın sağ tarafında bir yer paylaşımı paneli gösterilmektedir. Genellikle arka planda içerikten bağımsız olarak işlem yaptığınız öğeleri gösterir.

Sağ yer paylaşımı

Ortala yer paylaşımı

Ortadaki yer paylaşımı şablonu, mevcut bir görünümün üzerine yer paylaşımlı olarak yerleştirilen kalıcı bir öğe göstermektedir. Acil bilgileri iletmek veya bir karar verilmesini istemek için kullanılır.

Ortala yer paylaşımı

Alt yer paylaşımı

Alt yer paylaşımı şablonu, genellikle alt sayfalar için kullanılır. Alt sayfalar, ekranın altına sabitlenmiş tamamlayıcı içerik barındıran yüzeylerdir. Geçerli sayfanın bağlamını kaybetmeden mini akışlar oluşturmanızı sağlar.

Alt yer paylaşımı

İşlemler

İşlem şablonunun sol tarafında başlık ve alt başlık, sağ tarafında seçenekler veya işlemler yer alıyor. Kullanıcılardan genellikle bu şablonla bir seçenek belirlemeleri veya bir işlem yapmaları istenir.

İşlemler

İçerik Ayrıntıları

İçerik ayrıntıları şablonu, içeriği Yatay Yığılmış Düzen'de gösterir. İçerik genellikle başlık, meta veriler, kısa açıklama, hızlı işlemler ve ilgili bilgi kümelerini içerir.

İçerik Ayrıntıları

Derleme

Derleme şablonu, ekranın sol tarafında bir öğenin (podcast gibi) ayrıntılarını, sağ panelde ise öğeleri (ör. bölümleri) ile birlikte gösterir.

Derleme

Tablo

Izgara şablonu, içerik koleksiyonlarını düzenli bir ızgarada görüntüler. Net bir uzaktan gezinme mantığı ve optimum tarama deneyimiyle içerik sunar.

Tablo

Uyarı

Uyarı şablonu tam ekran mesaj görüntüler. Uyarının engellemesinin kaldırılması ve önceki ekrana geri dönmek için genellikle bir işlem yapılması gerekir.

Uyarı

Kart sütunları

1 kart düzeni

Kart genişliği: 844 dp

1 kart düzeni

2 kart düzeni

Kart genişliği: 412 dp

2 kart düzeni

3 kart düzeni

Kart genişliği: 268 dp

3 kart düzeni

4 kart düzeni

Kart genişliği: 196 dp

4 kart düzeni

5 kart düzeni

Kart genişliği: 124 dp

5 kart düzeni