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.
Ö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 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 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ü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
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
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.
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.
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.
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.
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.
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.
Ç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
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
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.
Yapılması gerekenler
Yapılmaması gerekenler
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.
Yapılması gerekenler
Yapılmaması gerekenler
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.
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.
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.
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.
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.
İş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.
İç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.
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.
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.
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.
Kart sütunları
1 kart düzeni
Kart genişliği: 844 dp
2 kart düzeni
Kart genişliği: 412 dp
3 kart düzeni
Kart genişliği: 268 dp
4 kart düzeni
Kart genişliği: 196 dp
5 kart düzeni
Kart genişliği: 124 dp
