Bu bölümde, çeşitli ekran boyutlarına göre ölçeklendirilebilecek ekran düzenleri için tasarım yönergeleri sunulmaktadır.
Burada tanımlanan dolgu ve ana hat değerleri Bileşenler, Medya özellikleri, Bildirim Merkezi özellikleri ve Çevirici teknik özellikleri'nde kullanılır.
Bir bakışta rehberlik (TL:DR):
- Düzenleri uygun ekran boyutu kategorilerine göre düzenleyin
- Hizalama için 8dp ızgara kullanın
- Kenar boşluğu genişliklerini, uygulama çalışma alanının% 12'sine ayarlayın
- Kenar boşluklarına kaydırma çubukları ve gezinme yardımcıları yerleştirme
- Öğeler arasında sabit boşluk sağlamak için dolgu kullanın
Temel düzen kavramları
- Uygulama çalışma alanı: Araba üreticisi ve sistem kullanıcı arayüzü özelliklerinin kapladığı 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: Bir düzendeki öğeler ile bileşenler arasında sabit dikey ve yatay boşluğu belirten bir dizi boşluk değeri
- Ana hatlar: Bir kenar boşluğu veya bileşen kenarı ile düzendeki bir öğe arasındaki yatay alanı belirten, genişlik kategorileri tarafından belirlenen ve değişken genişlikte aralıklandırma değerleri kümesi
- Esnek alan: Bir bileşenin, ekran boyutuna sığacak şekilde ölçeklendirilebilen ve bazen minimum veya maksimum değer atanan parçası.
Uygulama çalışma alanı
Bir uygulamanın çalışma alanı, araba üreticisi ve sistem kullanıcı arayüzü özellikleri tarafından kullanılan ekran alanı dikkate alındıktan sonra kalan kullanılabilir ekran alanıdır. Uygulama çalışma alanının sol ve sağ kenar boşlukları ile uygulamanın birincil içerik alanı olan uygulama tuvalini içermesi amaçlanmış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 uygulamanın kaydırma çubukları ve gezinme olanaklarını içerir.
Ekran boyutları
Referans spesifikasyonu düzenleri, uygulama çalışma alanının genişliğine ve yüksekliğine bağlı olarak bir dizi ekran boyutu kategorisiyle belirlenir.
Bu yönergelerde yer alan spesifikasyonlarda, bu kategorilere adlarıyla atıfta bulunulur. Örneğin "Geniş", 930 dp ile 1279 dp aralığındaki tüm ekran genişliklerini belirtir.
Ekran boyutu kategorileri aşağıdakilerle ilgili önerileri etkiler:
- Bileşenlerde ve öğelerde ana hat aralığı
- Bileşen esnek alanlarının ölçeklendirilmesi
- Küçültülmüş kontrol çubuğunda albüm kapağı gibi isteğe bağlı öğelerin ne zaman gizleneceği veya gösterileceği zaman
Genişlik kategorileri
| Standart | Geniş | Çok geniş | Çok geniş | |
|---|---|---|---|---|
| Ekran genişliği aralığı | 690 - 929 dp | 930 - 1279 dp | 1280 - 1919 dp | ≥ 1.920 dp |
Yükseklik kategorileri
| Kısa | Standart | Uzun | |
|---|---|---|---|
| Ekran yüksekliği aralığı | 0 - 609 dp | 610 - 1199 dp | ≥ 1.200 dp |
Boşluk
Referans spesifikasyonu düzenleri 8 dp ızgara üzerinde yapılandırılır. Pratikte bu, spesifikasyonlardaki kullanıcı arayüzü bileşenleri ve öğelerinin 8 dp katlarıyla birbirinden ayrılması anlamına gelir.
İki tür boşluk vardır:
Dolgu (sabit genişlikli ve sabit yükseklikli aralık için)
Değişken genişlikli boşluklar için ana hatlar
Dolgu
Dolgu, referans spesifikasyonu düzeninde bileşenler arasında sabit genişlik ve sabit yükseklik sağlar. Ayrıca, bir bileşen içindeki öğeler arasındaki sabit boşlukları (örneğin, tuş takımı bileşeninde bulunan bitişik sayı hedeflerinin arasındaki boşluk) da belirtebilir. Tipik olarak, iki öğe arasındaki ilişki ne kadar yakın olursa, aralarındaki dolgu da o kadar dar olur.
P0 - P8 olarak belirlenmiş 9 dolgu değeri vardır.
Dolgu değerleri ve karşılık gelen boyutları şöyledir:
| P0 | P1 | P2 | P3 | P4 | P5 | P6 | P7 | P8 |
|---|---|---|---|---|---|---|---|---|
| 4dp | 8dp | 12dp | 16dp | 24dp | 32dp | 48dp | 64dp | 96dp |
Ekran genişliği kategorilerine göre aralık değerlerini değiştiren keylines aksine dolgu değerleri sabit kalır. Örneğin, P1 her zaman 8 dp'dir. Bununla birlikte bazı durumlarda, belirli bir bileşen veya öğe grubu arasındaki mesafe, farklı ekran boyutları için referans özelliği düzenlerinde farklı dolgu değerlerine sahip olabilir. Örneğin, ızgara öğeleri arasında önerilen dikey boşluk, kısa ekranlar için P4, standart ve uzun ekranlar için P5'tir.
Ana hatlar
Ana hatlar, bir referans spesifikasyonunda öğeler arasındaki dolguyu belirtmek yerine bir öğenin en yakın kenar boşluğundan veya bileşenin kenarından ne kadar uzakta olduğunu belirtir. Ana hatlar, değeri ekran genişliğine göre değiştirir. Bir düzeni farklı ekran boyutlarına göre ölçeklendirmenin kullanışlı bir yolunu sunarlar. Bu sırada öğeler arasında orantılı ve yatay boşluklar olmasını sağlarlar.
KL0'den KL4'e kadar atanmış 5 ana hat var.
Her bir ekran genişliği için ana hat değerleri şunlardır:
| Ekran genişliği | Standart | Geniş | Çok geniş | Çok 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 spesifikasyonu düzenleri, uygulamaları farklı ekran boyutlarına göre ölçeklendirmeyle ilgili yönergeler sağlar. Sorunsuz ölçeklendirmeye yardımcı olmak için teknik özellikler genellikle şunlardır:
- Otomobil üreticilerinin belirli ekran boyutlarına sığacak şekilde genişletmeleri veya daraltmaları gereken bileşenin bir parçası olan esnek alan
- Esnek alan için önerilen minimum ve maksimum genişlikler. Bu değerler, bileşenlerin istenmeyen boyutlara ölçeklenmesini önlemek içindir
- Ekran genişliği kategorisine göre farklı şekilde ölçeklenen, öğeler arasında orantılı ve yatay aralıkları korumak için kullanılan ana hatlar
- Bileşenler ve öğeler arasında sabit aralık belirtmek için doldurma
İsteğe bağlı olarak bazı özellikler, ekran genişliğine göre belirli öğelerin gizlenip gizlenmeyeceğini belirtir.
1. Örnek: Simge durumuna küçültülmüş kontrol çubuğu
Küçültülmüş kontrol çubuğu, referans spesifikasyonu düzeninin, bileşen genişliğini esnetmeyi ve gerekli olmayan bir öğeyi daha küçük ekran boyutlarında gizlemeyi önerdiği bir bileşen örneğidir.
Küçültülmüş kontrol çubuğu spesifikasyonunda 2 ölçeklendirme kuralı bulunur:
- Soldaki kare öğe (genellikle albüm kapağı için kullanılır) yalnızca ekran genişliği 930 dp veya daha büyük olduğunda görünmelidir ve
- Ortadaki esnek genişlik bölümü hiçbir zaman 440 dp'den dar olmamalıdır ve bileşen genişliğinin tamamı 1028 dp'yi aşmadığı sürece daha geniş ekranlar için ölçeklendirilebilir.
2. Örnek: Izgaralar
Izgaralar, bir düzen içindeki sütunlara ve satırlara yerleştirilip boyutlandırılabilen bileşenlere örnektir.
Önerilen sütun sayısı (daha dar ekranlarda 3, geniş ekranlarda 4) ekran boyutuna bağlıdır. Izgaralar önerilen minimum genişliklerden asla az olmadığı sürece, bir ekran kategorisinde sütun genişliği ve satır yüksekliği ayarlanabilir. Aşağıdaki animasyonda, referans düzenlerdeki öneriler uygulanarak ızgaraların daha geniş ve dar ekranlar için nasıl ölçeklendirilebileceği gösterilmektedir.
