Wear OS ekosistemi, çok çeşitli ekran boyutlarına sahip cihazlardan oluşur. Tüm kullanıcılara en yüksek kaliteli deneyimi sunmak için uyarlanabilir kullanıcı arayüzü ilkelerinden yararlanmak çok önemlidir.
Uyarlanabilir kullanıcı arayüzü nedir?
Uyarlanabilir kullanıcı arayüzleri, oluşturuldukları ekranın boyutundan bağımsız olarak mevcut tüm ekran alanını en iyi şekilde kullanmak için uzar ve değişir.
Uyumlu kullanıcı arayüzleri, doğrudan düzen mantığına yerleştirilmiş bileşenleri ve yöntemleri kullanarak duyarlı bir şekilde değişir. Bu düzenler, kullanıcılara daha da zengin bir deneyim sunmak için ekran boyutu eşiklerinden de yararlanır. Bu sayede farklı ekran boyutlarında farklı tasarımlar uygulanır.
Temel ekran boyutları

Yeni deneyimler tasarlarken göz önünde bulundurmanız gereken temel referans boyutları hakkında bilgi edinin
Düzen türleri
Yuvarlak ekranda uyarlanabilir düzenler için tasarım yaparken kaydırmalı ve kaydırmasız görünümlerin her birinin kullanıcı arayüzü öğelerini ölçeklendirme ve dengeli bir düzen ve kompozisyon sürdürme konusunda benzersiz gereksinimleri vardır.

Kırpmayı önlemek ve öğelerin orantılı ölçeklendirilmesini sağlamak için tüm üst, alt ve yan kenar boşlukları yüzde olarak tanımlanmalıdır.

Tüm kenar boşlukları yüzde olarak tanımlanmalı ve dikey kısıtlamalar, ortada bulunan ana içeriğin mevcut alanı dolduracak şekilde genişleyebileceği şekilde tanımlanmalıdır.
Uyarlanabilir düzenler ve tasarım uygulamaları aracılığıyla değer katın
Yuvarlak ekranda uyarlanabilir düzenler için tasarım yaparken, kaydırmalı ve kaydırmayan görünümlerin her birinin kullanıcı arayüzü öğelerini ölçeklendirme ve dengeli bir düzen ve kompozisyon sürdürme konusunda benzersiz gereksinimleri vardır.
Aşağıdaki resimler genel önerilerdir. Örnekler yalnızca açıklama amaçlıdır. Ayrıntılı, bağlama dayalı ve duyarlı rehberlik için her bileşeni veya yüzey sayfasını görüntüleyin.

Duyarlı düzenler, tek bir ekrana daha fazla çip, kart, metin satırı ve düğme sığdırmanıza olanak tanır

Mümkün olduğunda yeni içeriğin kullanıma sunulmasına olanak tanımak ve kullanıcıya daha büyük ekran boyutlarına sahip cihazlarda ek değer sağlamak için tanımlanmış ekran boyutu kesme noktalarında uygulanan yeni düzenleri kullanın.

Daha büyük kapsayıcılar, daha büyük metinler, daha kalın halkalar ve daha ayrıntılı veri görselleştirmeleri sunmak için ekstra ekran alanı kullanın. Böylece kullanıcılar daha kolay göz atabilir.

Arayüzlerle etkileşimi daha kolay ve daha rahat hale getirmek için daha büyük dokunma hedefleri, daha iyi görsel hiyerarşi ve içerik öğeleri arasında ek alan sağlamak amacıyla fazladan ekran alanı kullanın.

Tüm ekran boyutlarında kullanıcı arayüzlerimize daha iyi bir görünüm ve tarz kazandırmak için güncellenmiş bileşen ve şablonlarımızdan yararlanın.
Uygulama kalitesi

Kalite yönergelerimiz üç düzeyde düzenlenmiştir. Üç katmandaki yönergeleri karşılayarak kullanıcılarınıza mümkün olan en iyi deneyimi sunun.
Tüm ekran boyutlarına hazır |
Duyarlı ve optimize edilmiş |
Uyarlanabilir ve farklı |
Standart kanon düzenlerinden yararlanma

Kullanıcı arayüzlerinizin çeşitli cihaz boyutlarına sorunsuz bir şekilde uyum sağlamasına yardımcı olmak için yerleşik standart düzenleri kullanın.
Standart düzenlerimiz, tüm ekran boyutlarında yüksek kaliteli bir deneyim sunmak için özenle geliştirilmiştir.