Düzen, kullanıcının uygulamanızla arayüz oluşturması (ör. bir etkinlikte) için görsel yapıyı tanımlar. Android, içeriği görüntülemek ve konumlandırmak için çeşitli kitaplıklar, standart başlangıç noktaları ve teknikler sağlar.
Çalmalar
Ekran kesitleri, uçtan uca ekler, kenar ekranları, yazılım klavyeleri ve sistem çubukları gibi kullanıcı arayüzünün bazı bölümlerini içeren cihaz güvenli alanlarına özen gösterin.
Yapılması gerekenler: Kullanıcıların klavyeyle etkileşim kurması için esnek bir düzen sağlayın.
1. video: Kullanıcıların etkileşim kurması için esnek bir düzen sunma
Birincil gezinme gibi gerekli etkileşimleri erişilebilir bir ekran alanında tutun.
Şekil 1: Kayan işlem düğmeleri (FAB'lar) belirgin ve erişilebilir bir etkileşim noktası sağlar Kullanıcıyı içerik ve işlemler konusunda yönlendirmek amacıyla ilgili içerikleri gruplandırmak için kapsama özelliğini kullanın.
Şekil 2: İlgili işlemlerle içeriği gruplandırmak için açık kapsama alanı kullanan kartlar Benzer içerikler ile kullanıcı arayüzü öğeleri arasında tutarlı bir uyum sağlayın.
Yapılmaması gerekenler: Öğeler gibi boşluklarda tutarsız bir şekilde boşluk bırakarak okunabilirliği bozmayın. Bu, tasarımların gelişigüzel görünmesine neden olabilir.
Yapılması gerekenler: Benzer öğeler arasında tutarlı boşluk bırakın.
Şekil 3: Okunabilirliği olumsuz etkileme Dikey veya idealleştirilmiş bir düzene bağlı kalmayın: Kullanıcıların karşılaşabileceği farklı en boy oranlarını, boyut sınıflarını ve çözünürlükleri göz önünde bulundurun.
Görüntüleme başına çok fazla sayıda işlemle kullanıcınızı bunaltmayın.
Özel düzenler oluştururken hizalama, kısıtlamalar veya yerçekimi terimlerini kullanarak içeriğin düzen içinde nasıl olması gerektiğini not edin. Düzgün görüntülenmeleri için görüntülerin, container'larına nasıl tepki vermesi gerektiğini belirtin.
Tipik bir Android uygulama ekranının bölümleri
Çoğu Android uygulaması, sistem çubukları, gezinme alanı ve gövde olarak adlandırılan bölgelerden oluşur.
Sistem çubukları
Durum çubuğu ve gezinme çubuğu (toplu olarak sistem çubukları olarak bilinir), pil düzeyi, saat ve bildirim uyarıları gibi önemli bilgileri gösterir ve her yerden doğrudan cihaz etkileşimi sağlar. Sistem çubukları hakkında daha fazla bilgi edinin.
Sistem çubukları, cihaz arayüzünün ayrılmaz bir parçasıdır. Bunları, ekran düzeninde dikkate alınmasını sağlamak için tasarımlarınızın üst katmanı olarak ekleyin. Aksi takdirde, kullanıcılar yanlışlıkla onları gizlemek olduğunu sanabilir ve bu reklamların stilini belirlemezsiniz ve boşluklar kaybolabilir.
Çubukları bir üst katman olarak ekleyin. Uygulamanızın temasındaki sistem çubuklarına renk uygulamak için android:navigationBarColor ve android:statusBarColor öğelerini kullanın.
Navigasyon bölgesi
Navigasyon, kullanıcının uygulamanızda gezinmesine, önemli işlemlere veya Android platformunda gezinmesine olanak tanıyan farklı olanakları temsil eder.
Vücut bölgesi
Gövde bölgesi, ekran içeriğini barındırır. Gövde içeriği, ek gruplamalardan ve düzen parametrelerinden oluşur. Gezinme ve sistem çubuğu bölgeleri altında devam etmelidir.
Uçtan uca kümeler için WindowCompat.setDecorFitsSystemWindows(window, false) bildiriminde bulunun.
Düzeninize uygun beste ve gezinme kalıplarını belirlemek için kullanıcıların içeriğinizle nasıl etkileşim kurduğunu ve uygulamanızın bilgi mimarisinde nasıl gezindiklerini anlamaya çalışın. Bu anlayış, kullanıcıların işlem yapabileceği bir kullanıcı arayüzü oluşturarak tasarımınızı daha kullanıcı odaklı olmaya yönlendirebilir.
İçerik bileşimi ve yapısı
İçeriğiniz için bir yapı ve kontrol altına alma yöntemleri ile esnek bir akış ve ritim oluşturun.
Temel yapı: Görsel korumalar için kenar boşlukları ve sütunlar kullanın
Tutarlı koruma önlemleriyle sağlam bir yapı oluşturmaya başlamak için düzenlerinize kenar boşlukları ve sütunlar ekleyin.
Kenar boşlukları, ekranın ve içeriğin sol ve sağ kenarlarında boşluk bırakır. Kompakt boyutlandırma için standart kenar boşluğu değeri 16 dp'dir ancak kenar boşlukları büyük ekranlara göre uyarlanmalıdır. Uygulamanızın gövde içeriği ve işlemleri, bu sınırlar içinde kalmalı ve bu sınırlara uygun olmalıdır.
Bu adımda güvenli bölgelerin veya veri setlerinin içe doğru aktarılmasını da sağlayabilirsiniz. Sistem çubuğu ekleri, önemli işlemlerin sistem çubuklarının altına düşmesini önler. Ayrıntılar için İçeriğinizi sistem çubuklarının arkasına çizme bölümüne bakın.
Tutarlı bir hizalama için esnek bir ızgara yapısı oluşturmak ve içeriği gövde alanı içinde bölerek bir düzene dikey tanım sağlamak için sütunları kullanın. İçerik, ekranda sütunlar içeren alanlara yerleştirilir. Bu sütunlar, düzeninize katkı sağlayarak öğelerin düzenlenmesi için kullanışlı bir yapı sunar.
İçeriği alttaki kılavuzla hizalamak ancak esnek boyutları korumak için sütun ızgarası kullanın. Sütun ızgarası, belirli noktalarda ekran boyutunun gerektirdiği sütun boyutlarını ve sütun sayısını değiştirerek farklı form faktörlerini barındırabilir ve içeriğin ölçeklendirilmesine de izin verir. Sütun ızgarasında çok ayrıntılı olmaktan kaçının. Temel ızgaranın amacı budur: Tutarlı boşluk birimleri sağlamak.
Yön ve form faktörlerinde yatay içerik ölçeklendirmesini kısıtlayabileceğinden, eşlik eden bir satır ızgarası oluşturmaya özen gösterin. Genellikle dolgu kuralları oluşturmak, gereken görsel tutarlılığı sağlar.
Öğeleri görsel olarak gruplandırmak için kapsama özelliğini kullanın
Kapsama, görsel bir gruplandırma oluşturmak için boşlukların ve görünür öğelerin birlikte kullanılmasını ifade eder. Kapsayıcı, kapalı bir alanı temsil eden bir şekildir. Tek bir düzende, benzer içeriğe veya işlevlere sahip öğeleri bir arada gruplandırabilir ve açık alan, tipografi ve ayırıcıları kullanarak bunları diğer öğelerden ayırabilirsiniz.
Kullanıcıyı içerikte yönlendirmeye yardımcı olması için benzer öğeleri boşluk veya görünür bölümle birlikte gruplandırabilirsiniz.
Örtülü kapsama, kapsayıcı sınırları oluşturmak amacıyla içeriği görsel olarak gruplandırmak için beyaz boşluk kullanır. Açık kapsama ise içeriği gruplandırmak için ayırıcı çizgiler ve kartlar gibi nesneleri kullanır.
Aşağıdaki şekilde, başlığı ve birincil kopyayı içermek için örtülü sınırlamanın kullanılmasına ilişkin bir örnek gösterilmektedir. Sütun ızgarası, gruplamaları hizalamak ve oluşturmak için kullanılır. Öne çıkanlar, kartların içinde açıkça yer alır. Görsel ayrım için ikonografi ve tür hiyerarşisini kullanma.
İçeriği konumlandırma
Android, içerik öğelerini ilgili container'larında işlemek için yerçekimi, boşluk ve ölçeklendirme dahil olmak üzere bunları uygun şekilde konumlandırmaya yardımcı olabilecek birçok yönteme sahiptir.
Yerçekimi, belirli kullanım alanları için potansiyel olarak daha büyük bir container'ın içine nesne yerleştirme standardıdır. Aşağıdaki şekilde nesnelerin başlangıç ve orta (1), üst ve orta yatay (2), sol alt (3) ve bitiş ve sağa (1) konumlandırma örnekleri gösterilmektedir.
Ölçeklendirme
Ölçeklendirme, dinamik içeriğe, cihaz yönüne ve ekran boyutlarına uyum sağlamak için çok önemlidir. Öğeler sabit kalabilir veya ölçeklendirilebilir.
Resimlerin ölçekleme ve konum ile kapsayıcılarında nasıl gösterildiğine dikkat etmek, cihaz bağlamına rağmen resmin istediğiniz gibi görünmesini sağlamak açısından önemlidir. Aksi takdirde, resmin birincil odağı kesilmiş gibi görünebilir, resimler düzen için çok küçük veya büyük olabilir ya da başka istenmeyen efektler olabilir.
Not belirtilmeyen içerik, beklediğinizden veya istediğinizden farklı görünebilir.
Sabitlenmiş içerik
Birçok öğe, slotlar veya iskelelerle etkileşimler, kaydırma ve konumlandırmaya sahiptir. Bazı öğeler, kritik işlemleri barındıran kayan işlem düğmeleri (FAB'lar) gibi, kaydırmaya tepki vermek yerine sabit kalacak şekilde değiştirilebilir.
Hizalama
AlignmentLine kullanarak üst düzenlerin alt öğelerini hizalamak ve konumlandırmak için kullanabileceği özel hizalama çizgileri oluşturabilirsiniz.
Yapılmaması gerekenler: Öğeler gibi tutarsız boşluklar bırakarak okunabilirliği bozmayın. Bu, tasarımların gelişigüzel görünmesine neden olabilir.
Yapılması gerekenler: Benzer öğeler arasında tutarlı boşluk bırakın.
Bileşen düzeni
Materyal 3 bileşenleri etkileşim ve içerik için kendi yapılandırmalarını ve durumlarını sunar.
Compose, Materyal Bileşenleri'ni genel ekran kalıplarında birleştirmek için kullanışlı düzenler sağlar. Scaffold gibi composable'lar çeşitli bileşenler ve diğer ekran öğeleri için alanlar sağlar. Malzeme Bileşenleri ve Düzen hakkında daha fazla bilgi edinin.
Düzenler ve gezinme kalıpları
Uygulamanızda, kullanıcıların geçiş yapabileceği birden fazla hedef varsa diğer uygulamalar tarafından yaygın olarak kullanılan düzen ve gezinme eşlemelerini kullanmanızı öneririz. Birçok kullanıcı bu eşleştirmeler için zihinsel modellere zaten sahip olduğundan uygulamanız onlar için daha sezgisel olacaktır.
Düzen ve gezinme eşleştirmeleri
Gezinme çubuğu ve kalıcı gezinme çekmecesi, üst düzen görünümleri ve birincil gezinme hedefleri için birincil gezinme kalıpları olarak kullanılır.
Gezinme çubuğunda, aynı hiyerarşi düzeyinde üç ila beş gezinme hedefi yer alabilir. Bu bileşen, büyük ekranlar için gezinme çubuğuna karşılık gelir.
Gezinme çekmecesi beşten fazla gezinme hedefi barındırabilse de, kompakt boyutlarda üst çubuğa erişme ihtiyacı nedeniyle bu model, gezinme çubuğu kadar ideal değildir.
Materyal 3 Sekmeleri ve alt uygulama çubuğu, birincil gezinme deneyimini tamamlamak veya çocuk görünümlerinde görünmek için kullanabileceğiniz ikincil gezinme kalıplarıdır.
Düzen işlemleri
Kullanıcıların işlem yapmasına olanak tanıyan kontroller sağlayın. Yaygın kalıplar arasında üst çubuk işlemleri, kayan işlem düğmesi (FAB) ve menüler bulunur.
En yüksek öneme sahip işlemler için FAB, kullanıcıya büyük ve belirgin bir düğme sağlar. Bu düzeyde bir defada yalnızca bir işlem sağlayın. FAB, birden fazla boyutta ve etiket içeren genişletilmiş bir biçimde görünebilir. Sayfa kaydırıldığında bile her zaman görünür olduğundan emin olmak için FAB'ları sabitlemek için Scaffold aracını kullanın.
Üst çubuğa veya ilgili içeriğin yakınında gruplandırılmışsa sayfa içine ikincil işlemler yerleştirebilirsiniz.
Hemen veya sık ihtiyaç duyulmayan ek işlemler için bu işlemleri bir taşma menüsüne ekleyin.
Standart düzenler
Standart düzenlerden başlangıç noktası olarak, düzenlerin yaygın kullanım alanlarına ve ekran boyutlarına uyum sağlamasına yardımcı olan kullanıma hazır besteler kullanın. Estetik ve işlevsel olan bu düzenler, Materyal 3 kılavuzundan türetilmiştir.
Android çerçevesi, Jetpack Compose veya Views API'lerinden birini kullanarak düzenlerin uygulanmasını basit ve güvenilir hale getiren özel bileşenler içerir.
Liste ayrıntısı düzeni
Liste ayrıntısı düzeni, kullanıcıların açıklayıcı, açıklayıcı veya diğer tamamlayıcı bilgilere (öğe ayrıntısı) sahip öğe listelerini keşfetmesini sağlar. Kompakt ekran boyutlarında yalnızca liste veya ayrıntı görünümü görünür. İçerik koleksiyonunu satıra dayalı bir düzende görüntüleyen listeler, uygulamalar için en yaygın düzen biçimini oluşturur. List-detail mesajlaşma uygulamaları, kişi yöneticileri, dosya tarayıcıları veya içeriğin ek bilgileri gösteren bir öğe listesi şeklinde düzenlenebildiği tüm uygulamalar için idealdir.
İçerik statik veya dinamik olabilir.
- Dinamik içerik, uygulamanızın anında sunduğu içeriktir ve kullanıcı tarafından oluşturulan içeriği göstermek veya kullanıcının tercihlerini ya da işlemlerini yansıtmak için idealdir. Örneğin, her kullanıcı için benzersiz olan ve kullanıcı daha fazla resim yükledikçe değişen, kullanıcı tarafından oluşturulan fotoğrafların yer aldığı kaydırılabilir bir listeye sahip bir fotoğraf uygulaması düşünün. Bu resimler dinamik içeriktir.
- Statik içerik, yalnızca uygulamanızın kodunda doğrudan değişiklik yapılarak değiştirilebilir. Sabit kodlu içeriği temsil eder. Statik içeriğe örnek olarak, her kullanıcının görebileceği resim ve metinler verilebilir.
Android'de Now Figma dosyası birden fazla düzen örneği sağlar. Aşağıdaki örnekte tek boyutlu bir içerik koleksiyonu gösterilmektedir.
Liste bileşenleri ve teknik özelliklerle ilgili tasarım rehberliği için Materyal 3 Listeleri'ni inceleyin.
Feed düzeni
Feed düzeni, eşdeğer içerik öğelerini büyük miktarda içeriğin hızlı ve kolay bir şekilde görüntülenmesi için yapılandırılabilir bir ızgarada düzenler. (Koleksiyonda kartları kullanmayla ilgili 3. malzeme yönergelerine bakın.) Feed'ler, kompakt ekranlarda (genellikle kartlarda veya karolarda) liste veya ızgara tabanlı yapılandırma olabilir. İçerik dinamik olabilir. Diğer bir deyişle, API gibi dinamik bir harici kaynaktan "beslenir".
Izgara düzeni, örtülü veya açık kapsama ilkeleriyle oluşturulan satır ve sütunlardan oluşur. (Daha fazla bilgi için bu sayfadaki içeriğe bakın.) Izgara düzeni, satır ve sütunları değiştirmek için daha katı bir şekilde uygulanabilir veya kademeli olarak ayarlanabilir. Kullanıcıların kafasını karıştırmamak için her ikisi de tutarlı boşluk ve mantık uygulamasına sahip olmalıdır. Feed tasarımıyla ilgili 3. Materyal yönergelerini inceleyin.
Oluşturma'da Geç listeler veya geç ızgaralar ile Görünümler'de RecyclerView veya CardView ile feed düzeni uygulayabilirsiniz.
Destekleyici bölme düzeni
Mobil bir görüntüleme, destekleyici içerik veya kontrol gerektirebilir. Genellikle e-tablo veya iletişim kutusu biçimlerinde birincil görünümün odaklı ve düzenli kalmasına yardımcı olabilirler. Destekleyici bölme standart düzenini kullanma hakkında M3 kılavuzuna bakın.
Alt sayfalar için M3 kılavuzu hakkında bilgi edinin.
Göreli düzenler
Girişler, içerik veya diğer işlemler birbirine göre görünebilir veya bir üst kapsayıcıyla sınırlı olabilir. Düzenler daha özel olabilir, ancak gruplama, sütun ve aralıklandırmanın tutarlı olmasına dikkat edin.
Düzenler, düzen türlerinin bir kombinasyonunu da kullanabilir. Örneğin, bir bant veya yatay kaydırmayı dikey kartlarla eşleyebilirsiniz. Alternatif olarak, dikey liste verileri içeren özel bir grafik sunabilirsiniz.
Geç satırlar ve geç sütunlar içeren kayan satır veya sütunlarda içerik sunabilirsiniz.
Oluşturma düzeniyle ilgili temel bilgiler ve composable'ın bileşenleri hakkında daha fazla bilgi edinin.
Kimlik doğrulama, aşağıdaki şekilde gösterildiği gibi genel bir göreli düzendir.
Tam ekran düzeni, yoğun içerik modunda kullanılan diğer bir yaygın düzendir.
Oluştur yerine Görünümler ile çalışıyorsanız görünümleri kardeş görünümler ile üst düzen arasındaki ilişkilere göre düzenleyerek büyük ve karmaşık düzenlere olanak tanımak için ConstraintLayout kullanabilirsiniz.
ConstraintLayout, düzen düzenleyiciyi kullanarak XML'i düzenlemek yerine sürükleyip bırakarak tamamen derlemenize olanak tanır. Düzen Düzenleyici ile kullanıcı arayüzü oluşturma hakkında daha fazla bilgi edinin.
Düzenleri uyarlayın
Uyarlanabilir tasarım, belirli ayrılma noktalarına ve cihazlara uyum sağlayan düzenler tasarlama uygulamasıdır. Düzenin nerede değişeceğini veya uyarlanacağını belirlemek için genellikle cihazın genişliğini göz önünde bulundururuz. Hem web hem de Android, bağlamlarına daha iyi yanıt veren düzenler oluşturmak için esnek ızgaralar ve resimler gibi duyarlı tasarım kavramlarını kullanır.
Düzenleri genişletilmiş ekran boyutlarına uyarlamayla ilgili tasarım yönergeleri için Oluşturma sayfasındaki Farklı ekran boyutlarını destekleme geliştirici kılavuzunu ve M3 Düzeni Uygulama sayfasını okuyun. Büyük ekran düzenleri konusunda ilham almak ve bu düzenleri uygulamak için Android büyük ekran standart galerisine de göz atabilirsiniz.
Her uygulamanın her ekran boyutunda kullanılabilir olması gerekmez. Ancak bu, kullanıcılarınıza ergonomi, kullanılabilirlik ve uygulama kalitesi konusunda daha fazla özgürlük sağlar.
- Önemli ekranlar tasarlayabilirsiniz (temel kavramları veya uygulamanızı anlatabilir), sınıf boyutlarını ise kılavuz görevi görecek ayrılma noktaları olarak kullanabilirsiniz.
- Veya içeriğin nasıl kısıtlanması, genişlemesi veya yeniden düzenlenmesi gerektiğini belirterek içeriği yanıt verecek şekilde tasarlayın.
Düzenler hakkında daha fazla bilgi için Materyal Tasarım 3 (M3) Düzeni anlama sayfasına göz atın.
Web Görünümleri
Web Görünümü, uygulama içi web sayfalarının görüntülendiği bir görünümdür. Çoğu durumda, kullanıcıya içerik sunmak için Chrome gibi standart bir web tarayıcısı kullanmanızı öneririz. Web tarayıcıları hakkında daha fazla bilgi edinmek için bunun amacına sahip bir tarayıcıyı çağırma kılavuzunu okuyun.