Android çok çeşitli cihazları, formları ve ekran boyutlarını kapsadığından belirli piksel açısından mükemmel düzenler için tasarım yapmak yalnızca etkisiz olmakla kalmaz, aynı zamanda kullanıcı deneyimini de olumsuz etkileyebilir. Bunun yerine, uyarlanabilir şekilde tasarlayın, geliştirin ve düşünün. Kısa süre önce, uyarlanabilir düzenler oluşturmaya yardımcı olmak için bazı tanıdık tasarım konseptlerini sunan yeni API'ler kullanıma sunduk.
Pawparazzi, bu kavramları gösteren örnek bir uygulamadır. Grid ve Flexbox gibi uyarlanabilir API'ler kullanarak uyarlanabilir tasarımı vurgulamak için tasarlanmış ve geliştirilmiştir.
Uyarlanabilir düşünmek yalnızca kesme noktalarıyla tasarım yapmakla ilgili değildir. Aynı zamanda içerikleri esnek kapsayıcılarda düşünmekle de ilgilidir.
Her şey bir ızgara!
İçeriği yapılandırmak için bir temel oluşturmak, iyi tasarım uygulamalarına yardımcı olur ve içeriğin nasıl uyarlanması gerektiğine karar vermenize yardımcı olabilir. Android'de, tüm içeriği mikro düzeyde hizalayabileceğimiz temel bir 8 dp'lik ızgara bulunur.
Pawparazzi, eşit modüler ızgara veya tek yönlü sütun ızgarası yerine hiyerarşik bir düzen ızgarası kullanır. Bu nedenle, sütunlar ve satırlar içerik hiyerarşisine göre belirlenir.
Izgara türüne karar verirken içeriği göz önünde bulundurmanız gerekir. Uygulama içeriğinizle başlayın ve içeriğin nasıl gruplandırıldığını düşünün. Bu, genel düzen yapısını belirlemeye yardımcı olur. Bölmeler halinde düşünme hakkında daha fazla bilgi için Izgaralar ve Birimler, İçerik yapısı ve masaüstünde kullanmaya başlama başlıklı makaleleri inceleyin.
Pawparazzi'da asıl amaç, ekibin evcil hayvanlarını çeşitli şekillerde görmekti. Bu amaçla, evcil hayvanlara genel bakış, evcil hayvan detayları ve sıralanmış evcil hayvanlar gibi özellikler eklendi. Bu durumda, evcil hayvan galerisi ana içerik bölmesini ve ızgaranın daha fazlasını kaplıyor, ardından gezinme ve filtre öğeleri geliyordu. Daha fazla alan olduğunda galeri daha fazla satır ve evcil hayvan içerecek şekilde genişleyebilir ve aynı anda evcil hayvan ayrıntılarını gösterebilir. Bu uyarlanabilir ilke, daha büyük düzenlerde daha fazla içerik gösterme anlamına gelen "gösterme"dir.
Uygulamanın temel amacına ve içeriğine bakarak düzen ızgarasının nasıl ve ne zaman uyarlanması gerektiği (hangi pencere sınıfı boyutları, menteşe yerleşimi ve cihaz yönleri) belirlendi.
Alt ızgaralar, düzen ızgarasında daha esnek içerik yapıları oluşturmaya yardımcı olur. Galeriler de bir ızgara şeklindedir. Kompakt boyutlarda 2'li ızgara kullanılır.
Izgaralar, iki yönlü bir düzen kavramıdır. Bu nedenle içerik hem yatay hem de dikey yönde akabilir.
Bu özellik, daha ilgi çekici düzenler oluşturmak veya daha net bir görsel hiyerarşi sağlamak için kullanılabilir. Örneğin, haftanın evcil hayvanı gibi bir düzen oluşturulabilir. Bu düzende, en üst sıralarda yer alan evcil hayvanları göstermek için ızgara kullanılır. Izgara 2x4 olabilir ancak en üstteki nokta 2 sütun ve satır boyunca uzanır.
Tüm bunlar Grid API ile gerçekleştirilir.
Bileşenleri esnetme
Grid, makro ve mikro içerik yapısını kapsarken Flexbox, içeriğine yanıt vermesi gereken bileşenlere yardımcı olur. Bu, yalnızca yatay veya dikey yönün belirlendiği tek yönlü içeriklerde kullanılır. Örneğin, filtre çipleri etiketlerine yanıt verebilir ve filtre alanı, filtre sayısına bağlı olarak genişleyebilir. Daha fazla filtreyi aynı anda göstermek için Reveal'ı büyük ekranlarda kullanın.
Ayrıntılı sorgular
Düzen ızgarası tasarlayarak ve ızgara ile flexbox kullanarak birden fazla ekranda uyarlanabilir bir düzen oluşturuyor, hatta katlanabilir cihazlar gibi benzersiz formları bile destekliyoruz. Peki farklı kullanıcı bağlamları? Android kullanıcıları ekrana bağlanabilir veya fare takabilir. MediaQuery, tüm bağlamlardaki kullanıcılara uyum sağlamak için ayrıntılı tasarım kararları almamıza olanak tanır.
Pawparazzi'de bu, daha küçük hedef alanlar ve daha yoğun içeriklerle hassas işaretçi girişlerinden yararlanmak anlamına geliyordu.
Android AdaptiveUI Örnekleri
Büyük ekranlı cihazlar için optimize edilmiş, ilham verici tasarımları keşfedin. Medya, yaratıcılık ve oyun gibi popüler uygulama kategorileri için UI/UX şablonlarına göz atın.
