Düzenler, öğeleri korumak için bir çerçeve sağlayan yapısal şablonlardır. uygulamanız genelinde görsel tutarlılık sağlar. Görsel ızgaraları, boşlukları, düzenler, her bölüm için uyumlu ve düzenli bir yapı bilgi ve kullanıcı arayüzü öğelerinin sunumu için geçerlidir.
Öne çıkanlar
- Web veya mobil cihazların aksine TV'lerin ekran en boy oranı 16:9'dur.
- Kullanım kolaylığı için yatay ve dikey eksenlerdeki düzenleri optimize edin ve kontrol.
İlkeler
TV düzenleri tasarlarken tasarım kararları almanıza yardımcı olacak yönergeler.
Büyük ekranlara yönelik tasarım
HDTV'nin popüler hale gelmesinden bu yana, en boy oranı 16:9 olan dikdörtgen TV'ler standart hale geldi. Geçmişte televizyonlar 4:3 veya 1, 33'e 1 en boy oranı olarak bilinen kare bir biçimde üretiliyordu.
Android platformunda tasarım
Diğer Android destekli cihazlarda olduğu gibi, tasarım yaparken öğeleri farklı yoğunluklara sahip ekranlarda eşit şekilde görüntülemek için dp kullanın. Her zaman 960 piksel * 540 piksel MDPI çözünürlüğünde tasarım yapın.
MDPI'da 1 piksel = 1 dp.
Öğelerin 1080p'yi hedeflemesi gerekir. Bu, Android sisteminin gerekirse düzen öğelerini 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ülebildiğinden emin olun. Bunu yapmak için öğeleri, sol ve sağ taraflarda% 58 dp, düzenin üst ve alt tarafında 27 dp kenar boşluğuyla konumlandırın. Bu, düzenin ekran öğelerinin aşırı tarama içinde olmasını sağlar.
Tam ekranı doldur
Arka plan ekranı öğelerini fazla tarama güvenli alanına ayarlamayın veya kırpmayın. Bunun yerine, ekran dışı öğelerin kısmi görüntülenmesine izin verin. Bu, tüm ekranlarda arka plan ve ekran dışı öğelerin doğru şekilde gösterilmesini sağlar.
Eksenlerle optimizasyon
Kullanıcıların TV'lerinde uzaktan kumandayı nasıl kullandıklarını düşünün. TV arayüzünüzün uzaktan kumandayla kolayca kullanılabildiğinden emin olun. Her yönü (yukarı, aşağı, sol, sağ) net bir amacınız ve gezinme kalıbınız olacak şekilde tasarlayın. Böylece, kullanıcıların büyük seçenek grupları arasında nasıl hareket edeceklerini anlamasına yardımcı olabilirsiniz.
Düzen
TV ekran boyutları cihazdan cihaza farklılık gösterir. Modern bir TV'nin en boy oranı 16:9 ise uygulamanızı 960 piksel x 540 piksel ekran boyutu. Bu, tüm öğelerin HD veya 4K ekranlar için orantılı olarak yeniden boyutlandırılır.
Fazla tarama kenar boşlukları
Fazla tarama kenar boşlukları, içerik ve sağ ve sol kenarlarına dokunun.
960 * ~5% = 48dp
540 * ~5% = 27dp round off to 24dp
Bu kenarlık kenar boşlukları, birincil öğeleri olası aşırı tarama sorunlarına karşı korur. İçeriğinizi ve bilgilerinizi güvende tutmak için% 5 kenar boşluğu düzeni kullanın (Yanlardan 58 dp, üst ve alt kenarlardan 28 dp).
Sütunlar ve oluklar
İçerik, ekranda sütunlar ve oluklar bulunan alanlara yerleştirilir. Izgara sisteminde 12 sütun vardır. Oluklar, projenin içeriği bölmeye yardımcı olan sütunlara yer verir.
Aralarında 20 dp boşluk bulunan, 52 dp genişliğinde 12 sütun kullanın. Her iki tarafta 58 dp ve dikey 4 dp alan olmalıdır satır aralığı.
Düzen kalıpları
Amacınıza bağlı olarak kullanabileceğiniz üç düzen kalıbı vardır amaç ve görüntüleme cihazı: 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österebilirler. 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, Böylece esnek bir boyut, oran ve biçim sağlar. Genellikle çeşitli metin türlerini, etkileşimli bileşenleri ve bir araya getirir.
Izgara Düzeni
Izgara, kesişen sütunlar ve satırlardan oluşan bir koleksiyondur ve ızgara Düzen, içeriği bu ızgarada gösterir. İçerikleri mantıksal ve Böylece, kullanıcıların gezinmesi ve göz atması kolaylaşır.
Çakışmayı önlemek için aralarındaki dolgunun odaklanılan durumların boyut artışını sağladığını görebilirsiniz. Örneğin, bileşeni (kart gibi) vurgulanır. Önerdiğimiz Izgara Düzeni (52 dp'de 12 sütun, 20 dp'de oluklar), önerilen bileşen düzenleri ve önizlemelerini içerir.
Düzen yapıları
Aşağıda, daha iyi hale getirmenize yardımcı olacak bazı düzen yapıları verilmiştir karar vermenize yardımcı olacaktır. TV ekranlarını yatay olarak bölerek farklı bileşen türlerini ayırmaya, bilgileri iletmeye mantığıyla başlayalım. Bir bölme birden fazla birim sütunu içerebilir. Her panel, Yığın Düzeni gibi farklı düzen kalıplarını barındırabilir ve Izgara Düzeni.
Tek bölmeli düzen
Tek bölmeli sayfa düzeni, birincil içeriğe dikkat çekmeye yardımcı olabilir. İçeriğe yönlendirme deneyimi ve kritik bilgi sayfalarında kullanın.
İki bölmeli düzen
2 bölmeli düzen, sayfada hiyerarşik içerik gösterdiğinde daha iyi performans gösterir. Görev odaklı deneyimlerde yaygın olarak kullanılır.
Bilişsel aşırı yükleme
Karmaşık ve net olmayan içerikler kafa karışıklığına, rahatsızlığa ve en iyi yollarını bulmaya çalışırsınız. Tasarımınızı taranabilir, düzenli ve kesintisiz hale getirin yalnızca gerekli bilgileri sağlar.
İçerikleri gruplandırmak için çok fazla panel kullanmaktan kaçının. Bu da kullanıcılara gereksiz bilişsel yük ve hiyerarşik olarak sunar.
Yapılması gerekenler
Yapılmaması gerekenler:
Ekspres hiyerarşi ve gezinme
Paneller, içeriği görsel olarak ayırır ve düzenler. Kullanıcıları yönlendirmek, 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 tanıdıklığı destekler. Tasarım nerede olduğunu net bir şekilde ileten rahat bir kullanıcı arayüzü deneyimi nereye gidebilecekleri hakkında bilgi edinmeniz önemlidir.
Göz at
Tarayıcı şablonu medya içeriği "kümelerini" gösteriyor satır üst üste ekleyebilirsiniz. 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 gider.
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 öğelerini veya üzerinde işlem yapabileceğiniz öğeleri gösterir.
Sağ yer paylaşımı
Sağ yer paylaşımı şablonu, ekranın sağ tarafında bir yer paylaşımı paneli gösterir. Genellikle arka plandaki içerikten bağımsız olarak işlem yaptığınız öğeleri öne çıkarır.
Ortaya yer paylaşımı
Ortadaki yer paylaşımı şablonu, mevcut görünümün üzerine yer paylaşımlı bir kalıcı öğe gösterir. Acil bilgileri iletmek veya karara varmak için kullanılır.
Alt yer paylaşımı
Alttaki yer paylaşımı şablonu, alt sayfalar için yaygın olarak kullanılır. Alt sayfalar, ekranın alt kısmına sabitlenmiş tamamlayıcı içeriklerin bulunduğu yüzeylerdir. Bulunduğunuz sayfanın bağlamını kaybetmeden mini akışlar oluşturmanıza olanak verir.
İşlemler
İşlem şablonunun sol tarafında başlık ve alt başlık, sağ tarafta ise seçenekler veya işlemler yer alır. Kullanıcılardan genellikle bu şablonla bir seçenek sunmaları veya bir işlem yapmaları istenir.
İçerik Ayrıntıları
İçerik ayrıntısı şablonu, içeriği Yatay Yığılmış Düzen'de gösterir. İçerik genellikle başlık, meta veri, kısa açıklama, hızlı işlemler ve ilgili bilgi kümelerini içerir.
Derleme
Derleme şablonu, ekranın sol tarafındaki bir öğenin (podcast gibi) ayrıntılarını sağ panelde öğeleri (ör. bölümleri) ile birlikte gösterir.
Izgara
Izgara şablonu, içerik koleksiyonlarını düzenli bir ızgarada görüntüler. Net bir uzaktan gezinme mantığı ve optimum göz atma deneyimiyle içerikleri öne çıkarır.
Uyarı
Uyarı şablonunda tam ekran mesaj gösterilir. Genellikle uyarının engellemesini kaldırıp önceki ekrana dönmek için bir işlem yapmanız 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
