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.
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
| 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
| 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:
| 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:
| 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.
Küçültülmüş kontrol çubuğu için spesifikasyon 2 ölçeklendirme kuralı içerir:
- 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
- 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.
2. Örnek: Izgaralar
Izgaralar, bir düzendeki sütunlara ve satırlara yerleştirilebilen ve boyutlandırılabilen bileşenlere örnek olarak verilebilir.
Ö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.
