Bu standart düzenler, daha büyük ekran boyutlarına sahip cihazlarda optimum kullanıcı deneyimi sağlayan, başarısı kanıtlanmış, çok yönlü uygulama düzenleridir.
Karo
Kutular, kullanıcıların yapmak için ihtiyaç duyduğu bilgilere ve işlemlere hızlı erişim sağlar. Kullanıcılar, kadrandan bir kaydırma hareketiyle fitness hedeflerine doğru nasıl ilerlediklerini görebilir, hava durumunu kontrol edebilir ve daha pek çok şey yapabilir. Bir uygulamayı başlatın veya karolardan önemli görevleri hızlıca tamamlayın.
Bileşenlerimizi ve stilimizi kullanarak özelleştirme
Markanızın stilini belirli bileşenlere uygulayabilirsiniz. Birincil renk, uygulama simgesi, yazı tipi, simgeler ve karonunuzun deneyimi için geçerli olan tüm görsel öğeler buna dahildir.
Duyarlı düzenler (sabit yükseklik ekranları ve yüzde kenar boşlukları) için oluşturun
Kod ve tasarım düzenlerimizi daha büyük ekran boyutlarına uyarlamak amacıyla bunları, yüzdeye dayalı kenar boşlukları ve dolgu da dahil olmak üzere yerleşik duyarlı davranışa sahip olacak şekilde güncelledik. Şablonlarımızı kullanıyorsanız bu güncellemeleri Tiles API'si aracılığıyla otomatik olarak devralabilirsiniz ve düzenleri yalnızca bir ekran boyutu ayrılma noktasından sonra ek içerik veya bileşen eklediğiniz yerlerde sağlamanız gerekir. Daha büyük ekran boyutundan nasıl yararlanacağınıza ilişkin tam rehberlik ve öneriler için Karolara göz atın.
Tüm şablonlar iki varsayılan ekran boyutu ayrılma noktasıyla oluşturulmuştur: 192 dp ve 225 dp. Kenar boşlukları, satırların mevcut alanı doldurması ancak çok fazla genişlememesi ve üstteki ve alttaki kavisli ekran tarafından kırpılması için ekran boyutuna bağlı olarak yüzde değerlerine ayarlandı. Karoların ekran yüksekliği sabit olduğundan, istenmeyen kırpmalar oluşturmadan sınırlı ekran alanını en üst düzeye çıkarmak için dolguyu düzenledik.
İki ana şablonun (Birincil Düzen ve Uç İçerik Düzeni (ilerleme halkasıyla)) farklı kenar boşlukları vardır ancak tüm tasarım düzenleri bunlardan biriyle eşlenecek şekilde oluşturulmuştur. Her karo için üç ana bölüm ve bunların her birine ayrılan alanlar vardır. Bazı durumlarda içeriğin bir bakışta görülebilen, dengeli tasarımını korurken mevcut alanı doldurmasına yardımcı olmak için ek yerleşik kenar boşlukları ve dolgu olabilir.
Farklılaştırılmış deneyimler oluşturun
80'den fazla permütasyon içeren dört ana standart düzene sahip olmak, neredeyse sınırsız özelleştirme olanağı sunar. Karolar, slot tabanlı bir sistem üzerine kuruludur. Böylece standart düzendeki bir alanı, istediğiniz içerikle değiştirebilirsiniz. Bu durumda, duyarlı biçimde davranın ve tasarım önerilerimizi uygulayın.
Bu özelleştirmeler sınırlı olmalı ve parça şablonunun yapısını bozmamalıdır. Bunun amacı, kullanıcılar Wear OS cihazlarında karolar bandında kaydırma yaparken tutarlılığı korumaktır.
Daha büyük ekran boyutlarında boyut ayrılma noktasından sonra değer ekle
Ek alanı daha büyük ekran boyutlarında en iyi şekilde kullanmak için 225 dp'de bir boyut ayrılma noktası ekleyin. Bu ayrılma noktası, ek içeriklerin ortaya çıkarılmasını, daha fazla düğme veya verinin dahil edilmesini ya da düzeni, büyük ekrana daha uygun olacak şekilde değiştirmeyi mümkün kılar.
Kayan ve kaydırılmayan uygulama düzenleri
Yuvarlak bir ekranda uyarlanabilir düzenler tasarlarken, kaydırılan ve kaydırılmayan görünümlerin her birinin, kullanıcı arayüzü öğelerini ölçeklendirmek ve dengeli bir düzen ile kompozisyonu korumak için benzersiz gereksinimleri vardır.
Kaydırılmayan uygulama düzenleri
Standart düzenler ve tam ekran bileşenler (medya ve fitness dahil)
Kaydırılmayan uygulama görünümü düzenleri arasında medya oynatıcılar, onay iletişim kutuları, seçiciler, değiştiriciler ve ilerleme göstergesinin kullanıldığı özel fitness veya izleme ekranları bulunur. Herhangi bir ekranın yüksekliğini kısıtlayabilirsiniz. Böylece, kullanıcı seçenekler listesine göz atmak yerine tek bir göreve veya kontrol grubuna odaklanır. Daha küçük ekran boyutlarına sahip cihazlara uyum sağlamak için tasarım yaparken sınırlı boyutu göz önünde bulundurun, bir bakışta görülebilmeyi sağlayın ve uygun olduğu durumlarda yuvarlak ekranı kullanın.
Yanıtlanabilirlikle ilgili kurallar (yüzde kenar boşlukları)
Tüm kenar boşluklarını yüzde cinsinden tanımlayın ve ortadaki ana içeriğin mevcut görüntüleme alanını dolduracak şekilde genişletilebileceği dikey kısıtlamalar tanımlayın.
Tasarım sırasında kaydırılmayan bir ekranı üst, orta ve alt bölüme bölmek en iyisidir. Böylece, kırpmayı önlemek için üst ve alt bölüme iç kenar boşlukları ekleyebilir ancak orta bölümünüzün ekranın tam genişliğinden yararlanmasına izin verebilirsiniz. Tek başına dokunma etkileşimi en iyi deneyimi sağlamayabileceğinden ekran öğelerini boyutu sınırlıyken kontrol etmek için çevirmeli kaydırma düğmesini kullanmayı düşünün.
Farklılaştırılmış deneyimler oluşturun
Kaydırılmayan düzenler özelleştirilebilir, ancak ekrana ne kadar içerik eklenebileceği ve hangi bileşenlerin en iyi şekilde çalıştığı konusunda daha sınırlıdır. Çipler yerine IconButton'ların kullanılması, sınırlı alanın daha iyi kullanılmasını sağlar. İlerleme Göstergeleri ve büyük veri noktaları gibi görsel grafikler, temel bilgilerin grafiksel bir şekilde aktarılmasına yardımcı olur.
Ekranın çerçevesini tutan tüm öğeler, ekran boyutuyla otomatik olarak büyür ve daha da etkili hale gelir.
Daha büyük ekran boyutlarında ayrılma noktasından sonra değer ekleme
Daha büyük ekran boyutları için duyarlı bir tasarım oluştururken, kaydırma yapmayan uygulama düzenleri, ek ekran alanından en iyi şekilde yararlanır. Mevcut öğeler ek alanı dolduracak şekilde büyüyebilir ve kullanılabilirliği iyileştirebilir. Bileşenler ve içerikler, ekran boyutu ayrılma noktasından sonra görünebilir.
Aşağıdaki listede bu davranışın birkaç örneği verilmiştir:
- Medya oynatıcılar ek düğmeler veya daha büyük denetimler elde edebilir.
- Onay iletişim kutuları bir resim veya daha fazla bilgi alabilir.
- Fitness ekranları daha fazla metrik alabilir ve öğelerin boyutları büyüyebilir.
Kayan uygulama düzenleri
Standart düzenler
Kayan uygulama görünümü düzenlerinde listeler (ScalingLazyColumn) ve iletişim kutuları bulunur. Uygulama ekranlarının çoğunu oluşturan bu düzenler, daha büyük ekran boyutlarına uyum sağlaması gereken bileşen gruplarını temsil eder.
Bileşenlerin duyarlı olduğundan, yani ekran yüksekliği daha fazla kullanılabilir olduğunda mevcut genişliği doldurduklarından ve ScalingLazyColumn ayarlamalarını uyguladığından emin olun. Bu düzenler hâlihazırda duyarlı şekilde derlenmiştir. Genişletilmiş mülkten daha iyi yararlanmak için bazı ek önerilerimiz de vardır.
Yanıtlanabilirlikle ilgili kurallar (yüzde kenar boşlukları)
Tüm üst, alt ve yan kenar boşlukları, kaymayı önlemek ve öğelerin orantısal ölçeklenmesini sağlamak için yüzde cinsinden tanımlanmalıdır. Kullanıcı ekranı kaydırdığında Konum Göstergesi'nin göründüğünü ve boyutu ne olursa olsun ekranın çerçevesine otomatik olarak sarıldığını göz önünde bulundurun.
Farklılaştırılmış deneyimler oluşturun
Kaydırma görünümleri son derece özelleştirilebilirdir ve bileşen kombinasyonlarını dilediğiniz sırayla ekleme olanağı sunar.
Üst ve alt kenar boşlukları, hangi bileşenlerin üstte ve altta bulunduğuna bağlı olarak değişebilir. Bunun amacı, içeriğin ekranın büyüyen eğrisi tarafından kırpılmasını önlemektir.
Büyük ekranlarda ayrılma noktasından sonra değer ekleme
Kaydırma düzenleri, daha önce ekranın alt kısmında gizlenmiş olanların daha fazlasını otomatik olarak gösterdiğinden, değer katmak için yapmanız gereken fazla bir şey yoktur. Her bir bileşen mevcut genişliği doldurur ve bazı durumlarda, bir bileşen ek metin satırları (kartlar gibi) veya mevcut genişliği dolduracak şekilde genişletilen bileşenler (simge düğmeleri gibi) elde edebilir.