Tasarım önerileri

Android, çok çeşitli cihaz ekran boyutlarında ve form faktörlerinde sorunsuz çalışan bir uygulama geliştirmenize yardımcı olur. Bu geniş uyumluluk, hedeflediğiniz tüm cihazlara yaygın olarak dağıtabileceğiniz tek bir uygulama tasarlamanıza yardımcı olur.

Ancak kullanıcılarınıza her ekran yapılandırmasında mümkün olan en iyi deneyimi sunmak için düzenlerinizi ve diğer kullanıcı arayüzü bileşenlerinizi farklı boyutlara göre optimize etmeniz gerekir. ChromeOS'te kullanıcı arayüzünüzü optimize ederek ek ekran alanından tam olarak yararlanabilir, yeni özellikler sunabilir, yeni içerikler gösterebilir veya kullanıcı etkileşimini artırmak için deneyimi iyileştirebilirsiniz.

Daha büyük ekranlar için düzenler

Uygulamanızı cep telefonları için geliştirdiyseniz ve ChromeOS ile diğer büyük ekranlı form faktörlerindeki tasarımınızı iyileştirmek istiyorsanız düzenlerinizde, yazı tiplerinizde ve aralıklarınızda küçük ayarlamalar yaparak başlayın. 7 inçlik tabletler veya büyük bir tuvale sahip oyunlar için bu ayarlamalar yeterli olabilir.

Daha büyük ekranlarda, kullanıcı arayüzünüzün bazı bölümlerini yeniden tasarlayarak "uzatılmış" bir kullanıcı arayüzünü verimli bir çok panelli kullanıcı arayüzü, daha basit gezinme ve ek içeriklerle değiştirebilirsiniz. Materyal Tasarım ekibinin Materyal Çalışmaları, bunun nasıl görünebileceğine dair örnekler sunar. Örneğin, Yanıtla'nın farklı ekran boyutlarına nasıl uyum sağladığını görün.

Aşağıda bazı öneriler sunulmuştur:

• Bu büyük ekranlar için özel düzenler sağlayın. Bunu, ekranın en kısa boyutunu veya mevcut minimum genişlik ve yüksekliği kullanarak yapabilirsiniz.
• Kullanıcı deneyiminizin ve düzenlerinizin ChromeOS gibi öncelikle yatay yönlendirme için tasarlanmış bir ortamda nasıl çalıştığını hayal edin. Düzenlerinizi pencere boyutuna göre bu yönlerde iyi görünecek ve iyi performans gösterecek şekilde uyarlayın veya land kaynak niteleyicisini kullanarak belirli yatay düzenler sağlayın. Dinamik pencere yeniden boyutlandırma ve büyük ekranlarla ilgili diğer hususlar hakkında daha fazla bilgiyi Pencere yönetimi sayfasında bulabilirsiniz.
• Uygulamanız genişletildiğinde alt gezinme çubukları iyi ölçeklenmiyor. Gezinme menünüzü daha erişilebilir ve daha fazla seçenek gösterebileceği sol taraftaki bir menüye taşımayı düşünebilirsiniz. Yanıt örneği bunu iyi bir şekilde gösteriyor.
• Alan kullanımını ve içerik okunabilirliğini iyileştirmek için en azından daha büyük ekranlarda yazı tipi boyutları, kenar boşlukları ve aralık gibi boyutları özelleştirin. Kullanıcılar cihazdan (ör. ChromeOS cihaz veya diğer masaüstü ortamları) biraz daha uzaktayken her şeyin nasıl görünebileceğini göz önünde bulundurun.
• Kullanıcı arayüzü kontrollerinin konumunu, fare kullanırken veya tablet tutarken erişilebilir olacak şekilde ayarlayın (ör. kenarlara doğru ve merkezden uzağa).
• Kullanıcı arayüzü öğelerinin dolgusu, ChromeOS ve diğer büyük ekranlı cihazlarda genellikle cep telefonlarına göre daha büyük olmalıdır. Farklı ekran boyutlarına geçtikçe kenar boşluklarınız ve oluklarınızın tümü uyum sağlamalıdır.
• Metin içeriğini, ekran kenarlarıyla doğrudan hizalanmayacak şekilde yeterince doldurun. Ekran kenarlarına yakın içeriklerin etrafında en az 16 dp dolgu kullanın.

Özellikle düzenlerinizin ekranda "gerilmiş" görünmediğinden emin olun:

• Metin satırları çok uzun olmamalıdır. Satır başına en fazla 100 karakter olacak şekilde optimize edin. En iyi sonuçlar 50 ila 75 karakter arasında elde edilir.
• Listeler ve menüler tam ekran genişliğini kullanmamalıdır.
• Ekrandaki öğelerin genişliklerini yönetmek için dolguyu kullanın veya daha büyük ekranlı cihazlarda çok panelli bir kullanıcı arayüzüne geçin (sonraki bölüme bakın).

Ekran alanından yararlanma

ChromeOS cihazlar, uygulamanız için önemli ölçüde daha fazla ekran alanı sağlar. Uygulamanızın kullanıcı arayüzünü daha büyük ekranlar için tasarlarken bu ekstra alandan tam olarak yararlanın.

Yanıtla ve Rally örneklerinde, uygulamalar artan ekran boyutunu kullanma konusunda farklı yaklaşımlar sergiliyor. Yanıt, daha temiz bir görünüm için alan eklerken Toplantı Talebi, kaydırma ve dokunma sayısını azaltmak için daha fazla veri gösterir.

Kullanıcıdan gizlenmiş olabilecek öğeleri ve bunları nasıl görünür hâle getirebileceğinizi inceleyerek başlayabilirsiniz. Örneğin, bir öğe hakkında daha fazla bilgi gösterebilir, sağ tıklama veya uzun basma ile gizlenmiş olabilecek menüleri görünür hale getirebilir ya da artık daha büyük bir sol taraftaki gezinme alanınız olduğundan farklı veya daha ayrıntılı gezinme seçenekleri gösterebilir. Bunlar, mevcut deneyimi tamamen yeniden tasarlamadan kullanıcı deneyiminizi iyileştirebilecek ve uygulamanıza masaüstü benzeri bir görünüm kazandırabilecek büyük kullanılabilirlik avantajlarıdır.

Uygulamanızla ilgili bazı öneriler:

• Markanız, bu farklı ekran boyutları hakkında düşünürken hangi yöne gitmeniz gerektiğini belirler. Hangi öğelere öncelik verileceğine ve kullanıcılara hangi öğelerin gösterileceğine, mevcut kullanıcı yolculuklarının türüne ve en sık kullanılan özelliklere göre karar verilir. İlham almak için Material Studies'e göz atın ve her ürünün daha büyük bir ekrana nasıl farklı yanıt verdiğini inceleyin.
• Duyarlı bir ızgara sistemi kullanarak uygulamanızın tasarımının nasıl davranması gerektiğini ve daha fazla ekran alanı elde ettikçe içerik, gezinme ve seçeneklerin nasıl hareket etmesi gerektiğini düşünün.
• Hangi ekran boyutlarında farklı bir düzen kullanacağınıza karar verin, ardından farklı düzenleri uygun pencere boyutu gruplarında (ör. büyük/çok büyük) veya minimum pencere genişliklerinde (ör. sw600dp/sw720) sağlayın. Bu düzenlere geçerken kullanıcının bulunduğu genel bağlamın değişmemesi gerektiğini ve düzenler arasında geçiş yaparken tüm kullanıcı durumunu (kaydırma konumu, yazılan metin vb.) korumaya çalışmanız gerektiğini unutmayın.

Daha yüksek yoğunluklu ve daha büyük ekranlar için tasarlanmış öğeler kullanın

Uygulamanızın en iyi şekilde görünmesi için ChromeOS'in yaygın olarak desteklediği aralıktaki her yoğunluk için simgeler ve diğer bit eşlem öğeleri sağlayın. Özellikle, uygulama çubuğu, bildirimler ve başlatıcı için simgelerinizi ikonografi kurallarına göre tasarlamalı ve uygulamanızın görüneceği farklı ekranlarda sorunsuz şekilde ölçeklenebilmeleri için bunları vektör biçimlerinde sağlamalısınız.

Android'de VectorDrawable'lar ve vektör öğeleri hakkında daha fazla bilgi için Nick Butcher'ın blog yayınını inceleyin.

Yazı tipi boyutlarını ve dokunma hedeflerini ayarlama

Uygulamanızın ChromeOS'te ve daha yüksek yoğunluklu ekranlarda kullanılabilmesi için hedeflediğiniz tüm ekran yapılandırmaları için kullanıcı arayüzünüzdeki yazı tipi boyutlarını ve dokunma hedeflerini ayarlayın. Yazı tipi boyutlarını stil verilebilen özellikler veya boyut kaynakları aracılığıyla ayarlayabilirsiniz. Dokunma hedeflerini ise daha önce bahsedildiği gibi düzenler ve bit eşlem çizilebilir öğeler aracılığıyla ayarlayabilirsiniz.

Göz önünde bulundurmanız gereken bazı noktalar:

• Metin, daha büyük ekran boyutlarında ve yoğunluklarda aşırı büyük veya küçük olmamalıdır. Etiketlerin, karşılık geldikleri kullanıcı arayüzü öğeleri için uygun boyutta olduğundan ve etiketlerde, başlıklarda ve diğer öğelerde uygunsuz satır sonları olmadığından emin olun.
• Ekrandaki öğeler için önerilen dokunma hedefi boyutu 48 dp'dir. Daha büyük ekranlı kullanıcı arayüzünüzde bazı ayarlamalar yapmanız gerekebilir. Ekran boyutları değiştikçe dokunma hedefleri ve öğeler arasındaki boşluk hakkında bilgi edinmek için Boşluk Yöntemleri hakkında daha fazla bilgi edinin. Bu öneriler, minimum erişilebilirlik yönergelerini de karşılar.
• Mümkün olduğunda, daha küçük simgeler için TouchDelegate kullanarak veya yalnızca simgeyi şeffaf düğme içinde ortalayarak dokunulabilir alanı 48 dp'den fazla olacak şekilde genişletin.