Düzen, kullanıcının uygulamanızla (ör. etkinlikler) arayüzleşmesi 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 kesimleri, uçtan uca ekler, uç ekranlar, yazılım klavyeleri ve sistem çubukları gibi kullanıcı arayüzünün bölümlerini içeren cihaz güvenli alanlarına uyun.
Yapılması gerekenler: Kullanıcıların klavyeyle etkileşim kurabilmesi 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 önemli etkileşimleri erişilebilir bir ekran alanında tutun.
Şekil 1: Kayan işlem düğmeleri (FAB'ler), 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 kontrol altına alma özelliğini kullanın.
Şekil 2: İlgili işlemleri içeren içerikleri gruplandırmak için açık korumayı kullanan kartlar Benzer içerikler ile kullanıcı arayüzü öğeleri arasında tutarlı bir uyum sağlayın.
Yapılmaması gerekenler: Öğeler gibi tutarsız şekilde boşluk bırakarak okunabilirliği bozmayın. Bu durum, tasarımların rastgele görünmesine neden olabilir.
Yapılması gerekenler: Benzer öğeler arasında tutarlı bir boşluk bırakın.
Şekil 3: Okunabilirliği bozmayın 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 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. Resimlerin düzgün görüntülenmeleri için kapsayıcı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 (topluca sistem çubukları olarak bilinir), pil seviyesi, 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 hesaba katılmaları için tasarımlarınızın üst katmanı olarak ekleyin. Aksi takdirde, kullanıcılar yanlışlıkla amaçların onları gizlemek olduğunu varsayabilir, bunları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 simgelerini kullanın.
Gezinme bölgesi
Navigasyon, kullanıcının uygulamanızda gezinme, önemli işlemlere veya Android platformuna erişme olanağı sağlayan farklı özellikleri temsil eder.
Vücut bölgesi
Gövde bölgesi, ekran içeriğini barındırır. Gövde içeriği, ek gruplamalar ve düzen parametrelerinden oluşur. Gezinme ve sistem çubuğu bölgelerinin altında devam etmelidir.
Uçtan uca kümeler için WindowCompat.setDecorFitsSystemWindows(window, false) beyanını yapın.
Düzeninize uygun kompozisyon ve gezinme kalıplarını belirlemek için kullanıcıların içeriğinizle nasıl etkileşimde bulunduğ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ı hale getirmeye yönlendirebilir.
İçerik kompozisyonu 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ı korumalara sahip 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 olmasını sağlar. Kompakt boyutlandırma için standart kenar boşluğu değeri 16 dp'dir ancak kenar boşlukları büyük ekranlara uyum sağlayacak şekilde uyarlanmalıdır. Uygulamanızın gövde içeriği ve işlemleri, bu kenar boşluklarının dahilinde kalmalı ve uyumlu olmalıdır.
Bu adımda güvenli bölgelerin veya girişlerin içe doğru ayarlandığından da emin olabilirsiniz. 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 konusuna bakın.
Tutarlı 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 amacıyla sütunları kullanın. İçerik, ekranda sütunlar içeren alanlara yerleştirilir. Bu sütunlar düzeninize yapı kazandırarak öğelerin düzenlenmesi için uygun bir yapı sağlar.
İçeriği alttaki kılavuzla uyumlu hale getirmek ancak esnek boyutlandırmayı korumak için sütun ızgarası kullanın. Sütun ızgarası, belirli noktalarda ekran boyutuna göre sütun boyutlarını ve sütun sayısını değiştirerek farklı form faktörlerini barındırabilir ve aynı zamanda içeriğin ölçeklendirilmesini de sağlayabilir. Sütun ızgarasıyla çok ayrıntılı olmaktan kaçının. Referans ızgaranın amacı budur: Tutarlı boşluk birimleri sağlar.
Yönler ve form faktörleri arasında yatay içerik ölçeklendirmesini kısıtlayabileceğinden, eşlik eden bir satır ızgarası oluştururken dikkatli olun. Genellikle dolgu kuralları oluşturmak, gereken görsel tutarlılığı sağlar.
Öğeleri görsel olarak gruplandırmak için kapsayıcılığı kullanma
Kapsayıcılık, görsel bir gruplandırma oluşturmak için boşluk 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çerik veya işlevlere sahip öğeleri bir arada gruplayabilir 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.
Dolaylı sınırlama, 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 birlikte gruplandırmak için ayırıcı çizgiler ve kartlar gibi nesneleri kullanır.
Aşağıdaki şekilde, başlığı ve birincil metni 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ğin konumlandırması
Android'in yerçekimi, aralık ve ölçeklendirme dahil olmak üzere içerik öğelerini uygun şekilde konumlandırmalarına yardımcı olabilecek, ilgili kapsayıcılarında içerik öğelerini işlemek için birden çok yöntemi vardır.
Yerçekimi, belirli kullanım alanları için potansiyel olarak daha büyük bir kapsayıcıya nesne yerleştirme standardıdır. Aşağıdaki şekilde nesnelerin başlangıcına ve ortasına (1), üst ve orta yatay (2), sol alt (3) ve bitiş ve sağa (1) yerleştirme ö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, cihaz bağlamına rağmen ölçekleme ve konumla kapsayıcılarında nasıl gösterildiğine dikkat etmek önemlidir. Aksi takdirde, resmin birincil odağı kesilmiş görünebilir, resimler düzen için çok küçük veya büyük olabilir ya da diğer istenmeyen etkiler.
Belirtilmeyen içerikler beklediğinizden veya istediğinizden farklı görünebilir.
Sabitlenmiş içerik
Birçok öğenin etkileşimler, kaydırma ve konumlandırma, yuvalar veya yapılarla yerleşiktir. Kritik işlemleri barındıran kayan işlem düğmeleri (FAB'lar) gibi, bazı öğeler, kaydırmaya tepki vermek yerine sabit kalacak şekilde değiştirilebilir.
Hizalama
Üst düzenlerin alt öğelerini hizalamak ve konumlandırmak için kullanabileceği özel hizalama çizgileri oluşturmak için AlignmentLine aracını kullanın.
Yapılmaması gerekenler: Öğeler gibi tutarsız şekilde boşluk bırakarak okunabilirliği bozmayın. Bu durum, tasarımların rastgele görünmesine neden olabilir.
Yapılması gerekenler: Benzer öğeler arasında tutarlı bir boşluk bırakın.
Bileşen düzeni
3. Malzeme bileşenleri, etkileşim ve içerik için kendi yapılandırmalarını ve durumlarını sunar.
Compose, Materyal Bileşenleri'ni yaygın ekran desenlerinde birleştirmek için kullanışlı düzenler sağlar. Scaffold gibi kompozitler, ç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çmesi için 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şlemelerde zihinsel modellere zaten sahip olduğundan uygulamanız kullanıcılar için daha sezgisel olacaktır.
Düzen ve gezinme eşlemeleri
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ğu, aynı hiyerarşi düzeyinde üç ila beş gezinme hedefi içerebilir. Bu bileşen, büyük ekranlar için gezinme rafına karşılık gelir.
Gezinme çekmecesi beşten fazla gezinme hedefi barındırabilse de, kompakt boyutlarda üst çubuğa erişmek gerektiği için kalıp, gezinme çubuğu kadar ideal değildir.
3. Materyal Sekmeler ve alt uygulama çubuğu, birincil gezinmeyi tamamlamak veya çocuklara yönelik görünümlerde görünmek için kullanabileceğiniz ikincil gezinme kalıplarıdır.
Düzen işlemleri
Kullanıcıların işlem gerçekleştirmesine 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 aynı anda yalnızca bir işlem sağlayın. Bir FAB, birden fazla boyutta ve etiket içeren genişletilmiş bir biçimde görünebilir. FAB'i sabitlemek için Scaffold kullanın. Böylece, sayfayı kaydırdığınızda bile her zaman görünür olacaktır.
İkincil işlemleri üst çubuğa veya ilgili içeriğin yakınında gruplandırılmışsa sayfa içinde yerleştirebilirsiniz.
Hemen veya sık gerekli olmayan diğer işlemler için bu işlemleri bir taşma menüsüne ekleyin.
Standart düzenler
Başlangıç noktası olarak standart düzenleri kullanın. Kullanıma hazır kompozisyonlar, düzenlerin yaygın kullanım alanlarına ve ekran boyutlarına uyum sağlamasına yardımcı olur. Bu düzenler hem estetik hem de işlevseldir ve Materyal 3 rehberine göre türetilmiştir.
Android çerçevesi, Jetpack Compose veya Views API'lerini 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 başka tamamlayıcı bilgiler (öğe ayrıntısı) içeren öğe listelerini keşfetmelerine olanak tanır. Küçük ekran boyutlarında yalnızca liste veya ayrıntı görünümü gösterilir. İç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 ortaya çıkaran 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 doğrudan uygulamanızın kodunda 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.
Now in Android 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 özellikler hakkında daha fazla tasarım rehberliği için Materyal 3 Listelerini 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. Materyal yönergelerini inceleyin.) Feed'ler, genellikle kartlarda veya karolarda bulunan kompakt ekranlarda liste ya da ızgaraya dayalı 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şturulmuş satır ve sütunlardan oluşur. (Daha fazla bilgi için bu sayfadaki kapsayıcı bölümüne bakın.) Izgara düzeni, satır ve sütunları değiştirmek için daha sabit veya kademeli olarak uygulanabilir. Kullanıcıların kafasını karıştırmamak için her ikisi de tutarlı şekilde boşluk ve mantığa sahip olmalıdır. Feed'leri tasarlama hakkındaki 3. Materyal yönergelerini inceleyin.
Feed düzenini Geç listeler veya geç ızgaralarla Oluştur'da ya da RecyclerView veya CardView ile Görünümler'de uygulayabilirsiniz.
Destekleyici bölme düzeni
Mobil görüntüleme için, destekleyici içerik veya kontroller gerekebilir. Genellikle e-tablolar veya iletişim kutuları şeklinde, birincil görünümün odaklanmış ve karışık olmamasına yardımcı olurlar. 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 birbirlerine göre görünebilir veya bir üst kapsayıcıyla sınırlı olabilir. Düzenler daha özel olabilir, ancak gruplandırma, sütun ve boşlukları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. Dikey liste verileri içeren özel bir grafik de sunabilirsiniz.
Geç satırlar ve geç sütunlar içeren kayan satır ya da sütunlarda içerik sunabilirsiniz.
Oluşturma düzeniyle ilgili temel bilgiler ve kompozisyon öğelerinin 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şturma 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üzenleyiciyle XML'i düzenlemek yerine sürükleyip bırakarak tamamen oluşturmanıza 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, düzenleri belirli ayrılma noktalarına ve cihazlara uyum sağlayacak şekilde 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 Android, bağlamlarına daha iyi uyum sağlayan 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 Uyarlanabilir düzenler oluşturma geliştirici kılavuzunu ve M3 Düzeni Uygulama sayfasını okuyun. Büyük ekran düzenlerinden ilham almak ve bunları uygulamak için Android büyük ekran standart galerisine de göz atabilirsiniz.
Her uygulamanın her ekran boyutunda kullanılabilir olması gerekmese de, uygulama kullanıcılarınıza ergonomi, kullanılabilirlik ve uygulama kalitesi konusunda daha fazla özgürlük sunar.
- Önemli ekranlar tasarlayabilirsiniz (temel kavramları veya uygulamanızı anlatın) ve kılavuz olarak işlem yapmak için ayırma noktaları olarak sınıf boyutlarını kullanabilirsiniz.
- Veya içeriğin nasıl kısıtlanması, genişletilmesi veya yeniden düzenlenmesi gerektiğini belirterek duyarlı bir şekilde davranacak şekilde içerik 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ı gösteren bir görünümdür. Çoğu durumda, kullanıcıya içerik göndermek 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 amaçla tarayıcıyı çağırma kılavuzunu okuyun.