Düzen

Bu bölümde, çeşitli ekran boyutlarında ölçeklendirilebilen ekran düzenleri için tasarım yönergeleri verilmiştir.

Burada tanımlanan dolgu ve ana hat değeri Bileşenler, Medya spesifikasyonları, Bildirim Merkezi özellikleri ve Çevirici özellikleri'nde kullanılır.

Bir bakışta rehberlik (TL:DR):

  • Düzenleri uygun ekran boyutu kategorilerine göre belirleyin
  • Hizalama için 8 dp ızgara kullanın
  • Marj genişliklerini uygulama çalışma alanının% 12'sine ayarlayın
  • Kaydırma çubukları ve gezinme yardımlarını kenar boşluklarına yerleştirin
  • Öğeler arasında boşluk bırakmak için dolgu kullanın

Temel düzen kavramları

  • Uygulama çalışma alanı: Araba üreticisinin ve sistem kullanıcı arayüzünün özellikleri tarafından kaplanan ekran alanı hesaba katıldıktan sonra, uygulamanın kullanabileceği ekran alanı
  • Ekran boyutu kategorileri: 4 ekran genişliği aralığı (standart, geniş, ekstra geniş ve çok geniş) ve 3 ekran yüksekliği aralığı (kısa, standart ve uzun)
  • Dolgu: Düzendeki öğeler ile bileşenler arasında sabit dikey ve yatay aralığı belirten bir aralık değerleri grubu
  • Ana çizgiler: Kenar boşluğu veya bileşen kenarı ile düzendeki bir öğe arasındaki yatay alanı belirten değişken genişlikli boşluk değerleri grubu (genişlik kategorileriyle belirlenir)
  • Esnek alan: Bazen minimum veya maksimum değer atanan ve ekran boyutuna uyacak şekilde ölçeklendirilebilen bileşenin bir kısmı

Uygulama çalışma alanı

Bir uygulamanın çalışma alanı, araba üreticisi ve sistem kullanıcı arayüzü özelliklerinin kapladığı ekran alanı hesaba katıldıktan sonra kalan ekran alanıdır. Uygulama çalışma alanı, sol ve sağ kenar boşluklarının yanı sıra uygulamanın birincil içerik alanı olan uygulama tuvalini içerecek şekilde tasarlanmıştır.

Her kenar boşluğu, uygulama çalışma alanı genişliğinin% 12'sine eşit olmalıdır. Kenar boşlukları genellikle kaydırma çubukları ve uygulamanın gezinme olanaklarını içerir.

Uygulama çalışma alanı örnekleri
Çeşitli uygulama çalışma alanlarına örnekler

Ekran boyutları

Referans özellik düzenleri, uygulama çalışma alanının genişliğine ve yüksekliğine göre belirlenen ekran boyutu kategorilerinin temelini oluşturur.

Bu kurallar kapsamındaki spesifikasyonlarda bu kategorilere ad verilir. Örneğin "Geniş", 930dp ile 1279dp aralığındaki tüm ekran genişliklerini belirtir.

Ekran boyutu kategorileri aşağıdakilerle ilgili önerileri etkiler:

  • Bileşenlerde ve öğelerde ana hat boşluğu
  • Bileşen esnek alanları ölçeklendiriliyor
  • Küçültülmüş kontrol çubuğunda albüm resmi gibi isteğe bağlı öğelerin ne zaman gizleneceği veya gösterileceği

Genişlik kategorileri

Genişlik ayrılma noktaları görseli
Standart Geniş Çok geniş Süper geniş
Ekran genişliği aralığı 690 - 929 dp 930 - 1279 dp 1280 - 1919 dp ≥ 1.920 dp

Yükseklik kategorileri

Yükseklik ayrılma noktası görseli
Kısa Standart Yüksek
Ekran yüksekliği aralığı 0-609 dp 610 - 1.199 dp ≥ 1200dp

Boşluk

Referans spesifikasyon düzenleri, 8 dp'lik bir ızgarada yapılandırılır. Pratikte bu, kullanıcı arayüzündeki bileşenlerin ve spesifikasyonlardaki öğelerin, 8 dp'lik katlarla birbirinden ayrıldığı anlamına gelir.

İki tür aralık vardır:

  • Sabit genişlik ve sabit yükseklik aralıkları için dolgu

  • Değişken genişlikli boşluklar için ana çizgiler


Dolgu

Dolgu, referans spesifikasyon düzenindeki bileşenler arasında sabit genişlik ve sabit yükseklik aralıkları oluşturur. Bu işlev ayrıca, tuş takımı bileşenindeki bitişik sayı hedefleri arasındaki boşluk gibi bir bileşen içindeki öğeler arasında sabit aralık belirleyebilir. Genellikle, ilişki iki öğe arasında ne kadar yakın olursa aralarındaki dolgu daha dardır.

P0 - P8 olarak belirtilen 9 dolgu değeri vardır.

Dolgu değerleri ve boyutları aşağıda açıklanmıştır:

Dolgu değerleri referans spesifikasyonu
P0 P1 P2 P3 P4 P5 P6 S7 S8
4 gp 8 g 12dp 16dp 24dp 32dp 48dp 64dp 96dp

Ekran genişliği kategorilerine göre boşluk değerlerini değiştiren ana çizgilerden farklı olarak, dolgu değerleri sabit kalır. Örneğin, P1 her zaman 8 dp'dir. Bununla birlikte bazı durumlarda, belirli ekran bileşenleri veya öğeler arasındaki mesafe, referans ekran düzenlerinde farklı ekran boyutları için farklı dolgu değerlerine sahip olabilir. Örneğin, ızgara öğeleri arasında önerilen dikey aralık kısa ekranlar için P4, standart ve uzun ekranlar için P5'tir.


Ana hatlar

Ana hatlar, referans spesifikasyonundaki öğeler arasında dolgu belirtmek yerine bir öğenin en yakın kenar boşluğundan veya kenarından ne kadar uzakta olduğunu belirtir. Ana hatlar, değeri ekran genişliğine göre değiştirir. Düzenler, öğeler arasında yatay ve yatay aralık olmasına rağmen düzeni farklı ekran boyutlarına göre ölçeklendirmenin kullanışlı bir yoludur.

KL0 ile KL4 olarak tanımlanan 5 ana hattı vardır.

Aşağıda, her ekran genişliği için ana hat değerleri verilmiştir:

Ana hat değerleri referans spesifikasyonu
Ekran genişliği Standart Geniş Çok geniş Süper geniş
KL0 16dp 24dp 24dp 32dp
KL1 24dp 32dp 32dp 48dp
KL2 96dp 112dp 112dp 112dp
KL3 112dp 128dp 128dp 152dp
KL4 148dp 168dp 168dp 168dp

Ölçeklendirme stratejileri

Referans özellik düzenleri, uygulamaları farklı ekran boyutlarına ölçeklendirmek için yönergeler sağlar. Ölçeklendirmenin sorunsuz bir şekilde yapılmasına yardımcı olmak için teknik özellikler genellikle şunları içerir:

  • Araba üreticilerinin kendi ekran boyutlarına sığacak şekilde genişletmeleri veya daraltmaları gereken bir bileşenin parçası olan esnek alan
  • Esnek alan için istenmeyen bileşenlerin ölçeklendirilmesini önlemek amacıyla isteğe bağlı minimum ve maksimum genişlikler
  • Ekran genişliği kategorisine göre farklı şekilde ölçeklenen öğelerin orantılı, yatay aralığını korumak için kullanılan ana çizgiler
  • Bileşenler ve öğeler arasında sabit boşluk bırakmak için Dolgu

İsteğe bağlı olarak, bazı özellikler ekran genişliğine göre belirli öğelerin gizlenip gizlenmeyeceğini veya gösterilip gösterilmeyeceğini belirtir.

1. Örnek: Simge durumuna küçültülmüş kontrol çubuğu

Küçültülmüş kontrol çubuğu, referans spesifikasyon düzeninin bileşen genişliğini esnek hale getirmenizi ve çok önemli olmayan bir öğeyi daha küçük ekran boyutlarında gizlemenizi önerdiği bir bileşen örneğidir.

Minimum denetim çubuğu özellikleri
Küçültülmüş kontrol çubuğu özellikleri

Küçültülmüş kontrol çubuğu için spesifikasyon 2 ölçeklendirme kuralı içerir:

  1. Soldaki kare öğe (genellikle albüm resmi için kullanılır), yalnızca ekran genişliği 930 dp veya daha büyük olduğunda görünmelidir ve
  2. Ortadaki esnek genişlik bölümü hiçbir zaman 440 dp'den dar olmamalı ve tüm bileşen genişliği 1028 dp'yi aşmadığı sürece daha geniş ekranlara ölçeklenebilir.
Aşağıdaki animasyon, küçültülmüş kontrol çubuğunun, referans düzenlerdeki önerileri uygulayarak nasıl daha geniş ve dar ekranlara ölçeklenebileceğini gösterir.

Simge durumuna küçültülmüş kontrol çubuğu
Küçültülmüş kontrol çubuğu animasyonu

2. Örnek: Izgaralar

Izgaralar, bir düzendeki sütunlara ve satırlara yerleştirilebilen ve boyutlandırılabilen bileşenlere örnek olarak verilebilir.

Izgara uyarlanabilir özellikleri
Izgara uyarlanabilir özellikleri

Önerilen sütun sayısı (3'ü dar, 4'ü geniş ekran), ekran boyutuna bağlıdır. Izgaralar hiçbir zaman önerilen minimum genişliklerden az olmadığı sürece sütun genişliği ve satır yüksekliği bir ekran kategorisinde ayarlanabilir. Aşağıdaki animasyon, referans düzenlerdeki önerileri uygulayarak ızgaraların daha geniş ve dar ekranlara nasıl ölçeklenebileceğini gösterir.

Izgara uyarlanabilir animasyonu
Izgara uyarlanabilir animasyonu