Uyarlanabilir tasarım, belirli kesme noktalarına ve cihazlara uyum sağlayan düzenler tasarlama uygulamasıdır.
Uyarlanabilir düzenleri etkili bir şekilde uygulamak için:
Öncelikle düzen değişikliklerini belirlemek için cihazın pencere sınıfı genişliğini göz önünde bulundurun, ardından yüksekliği ayarlayın. Farklı ekran boyutlarını destekleme.
Android, web geliştirmeye benzer şekilde duyarlı tasarım kavramlarından yararlanır. Bağlamına etkili bir şekilde yanıt veren düzenler oluşturmak için esnek ızgaralar ve resimler kullanır.
Düzenlerin, uyarlanabilir yöntemlerle çeşitli boyutlara yanıt vermesine izin verin: yeniden akıtma, gösterme, sunum değişikliği.
Uygulamanızı yalnızca dikey modda kullanılabilecek şekilde kilitlemeyin. Bu durum, uygulamanız yeniden boyutlandırıldığında mektup kutusu efekti oluşturur.
Yapılmaması gerekenler:
Düzenleri genişletilmiş ekran boyutlarına uyarlama ile ilgili tasarım yönergeleri için Compose'daki Farklı ekran boyutlarını destekleme geliştirici kılavuzunu ve M3'teki Düzen Uygulama sayfasını inceleyin. İlham almak ve büyük ekran düzenlerini uygulamak için Android büyük ekran standart galerisine de göz atabilirsiniz.
Uyarlanabilir düşünün
Uygulamanızı tasarlarken varsayılan olarak uyarlanabilir düzeni kullanmalısınız. Android mobil pazarı sürekli geliştiği için mobil cihazları yalnızca cep telefonları olarak düşünemezsiniz. Bunun yerine, cep telefonları, katlanabilir cihazlar, tabletler ve bunların arasındaki her şey dahil edilmelidir.
Bazı özellikler ve kullanım alanları her ekran boyutunda veya form faktöründe mantıklı olmayabilir. Uyarlanabilir tasarım, kullanıcılarınıza ergonomi, kullanılabilirlik ve uygulama kalitesi konusunda daha fazla özgürlük tanır.
Yöntemler ve kalite
Uygulamanızın geri kalanında yönerge olarak kullanılacak, sınıf boyutlarının kesme noktası olarak belirlendiği temel ekranları (temel kavramları veya uygulamanızı iletin) tasarlayarak başlayabilirsiniz. Bu önemli deneyimler, farklılaştırılmış uyarlanabilir ve form faktörü özelliklerini vurgulayabilir. Alternatif olarak, içeriğin nasıl sınırlandırılması, genişletilmesi veya yeniden akıtılması gerektiğini belirterek içeriği temel düzeyde duyarlı olacak şekilde tasarlayabilirsiniz.
Bu örnekte, gezinme ve içerik, daha iyi ergonomik gezinme için yeniden akıtılıyor, esnetiliyor ve ölçeklendiriliyor. Düzen ızgarası, dikey yönlendirmeden çok sütunlu düzene genişletilir. Uygulama çubuğundaki adres ve filtreler, düzen ızgarasına sığacak şekilde yeniden akar ve esner.
Yapılması gerekenler
Yapılmaması gerekenler:
Yapılması gerekenler
Yapılması gerekenler
Yapılmaması gerekenler:
Girişlerin ve düğmelerin genişletilmediğinden emin olun.
Kapsama ve bölmeler açısından düşünün.
Uyarlanabilir düzenler için içerikleri gruplandırmak üzere bölmelerin kapsama konseptini kullanın. Örneğin, kullanılan örnek bir ayrıntı ekranıdır. Bu ekran, liste-ayrıntı düzeninde gösterilebilecek bir bölmedir.
Kompakt boyutlar tek bölmeli düzende olmalıdır.
Orta boyutta 1-2 bölmeli düzenler kullanılabilir.
Büyük ve ekstra büyük ekranlarda birden fazla bölme düzeni kullanılabilir.
Öğeleri birlikte gruplandırmak için yerleşik ve görsel kapsayıcıları kullanın. Paneller hareket edebilir, gizlenebilir, genişletilebilir, sınırlandırılabilir veya açılabilir. Panellerle düşünmek, tüm mobil cihazlarda tasarım yapmayı kolaylaştırır.
Bölmeler büyük ekranlarda zorunlu olmasa da esneklik için içerikleri kapsama grupları halinde düşünmeye devam etmelisiniz.
Öğelerin ızgaraya nasıl uyum sağladığına odaklanarak öğelerin kaymasına ve yeniden düzenlenmesine izin verin. Öğeler için dikey değişikliği göz önünde bulundurun ve kısıtlamalarla birlikte sunum değişikliklerini birleştirin.
Gösterilen içeriğin ölçeğini ve miktarını göz önünde bulundurun.
Telefondaki küçük video ızgarası, tablette dar ve bunaltıcı hale geliyor. Kullanıcı arayüzü öğesinin ölçeğini ekran boyutuna, yoğunluğuna ve girişe göre güncelleyin.
Yüksek kaliteli bir uygulama, temel uygulama ve büyük ekran kalitesi yönergelerindeki farklı katmanları karşılamalıdır.
Düzenler hakkında daha fazla bilgi için Materyal Tasarım 3 (M3) Düzeni Anlama sayfasını inceleyin.
Benzersiz form faktörü boyutlarından yararlanın.
Android telefonların farklı boyutlarda olduğunu ve katlanabilir cihazlarda uygulamanızı gösterebilecek küçük bir kapak ekranı bulunabileceğini göz önünde bulundurarak daha küçük ekran boyutlarını ve farklı en-boy oranlarını da unutmayın.
Medya oynatıcılar gibi kontrol tabanlı düzenlerde, kontrollerin yeniden akmasına ve içeriğin görünmesine izin verin.
Kullanıcıların alışmasına yardımcı olmak için içerik etrafındaki öğeleri uyarlamak üzere büyük bir oynatma düğmesi gibi bir bağlantı öğesi kullanın. Böylece, kapak ekranında arka plan olarak ana resim gösterilir.
Boyut sınıflarının ötesinde
Pencere boyutu, uyarlanabilir tasarım için yaygın bir faktör olsa da uygulamanızın, kullanıcıların monitör ve giriş cihazı takmasına, çeşitli mesafelerden görüntülemesine ve cihazlarının duruşunu değiştirmesine de hazır olması gerekir. Bu değişiklikleri mediaQuery API'yi kullanarak kontrol edebilirsiniz. Bu API, uygulamanızın belirli kullanıcı arayüzü öğelerini belirli kullanım alanlarına nasıl uyarlayacağını tasarlarken ayrıntı eklemenize olanak tanır. Uygulamanızın tasarımını, tüm ekranları boyuta, girişe, form faktörüne ve duruşa göre tasarlamak yerine bileşen veya bölme düzeyinde uyarlayın.
Giriş etkileşimi hakkında daha fazla bilgi için masaüstü deneyimi etkileşimi kılavuzlarına göz atın.
En yeni uyarlanabilir API'ler ve tasarım kılavuzlarıyla oluşturulup tasarlanan örnek bir başarılı olay olan Pawparrazzi'ye göz atın.
