Karolar, bazı temel tasarım öğelerini paylaşır. Uygulamanız için benzersiz karolar oluşturmak için parça şablonlarını ve bileşenlerini kullanın.
Temel unsurlar
Aşağıdaki tabloda temel karo tasarım öğeleri açıklanmaktadır.
|
|
|
|
|
|
Uygulama simgesiUygulama simgeleri uygulama geliştirici tarafından sağlanır ve ekranda geçici olarak gösterilir. |
Tasarım alanıHer parça şablonunun, birincil içerik alanıyla ilgili kendi kuralları vardır. Düzen kılavuzunu incelediğinizden emin olun. |
Alttaki düğmeKutuda ikincil işlemleri etkinleştirmek için düğmeler önemlidir. Düğmeleri ekranın alt kısmından% 6,3 yukarıya yerleştirin. |
Uygulama simgesi
Wear, kullanıcı karo bandında gezinirken uygulama simgesini otomatik olarak görüntüler. Uygulama simgesi şeffaf değildir ve kartın içine uygulanmamalıdır. Uygulama simgeleri oluşturma hakkında daha fazla bilgi için Ürün simgeleri konusuna bakın.
Şekil 1. Uygulama simgesi örnekleri
Wear, uygulama simgenizi otomatik olarak gösterir
Yapılması gerekenler
Yapılmaması gerekenler:
Düğme
Düğmeleriniz için kısa metin seçin. Harekete geçirici mesajın bulunduğu eyleme ve hedefine özgü bir metin kullanın. Düğme metni çevirisinin karakter sayısına uygun olduğundan emin olun. Çevrilmiş düğme metni çok uzunsa düğmenizi Diğer şeklinde ayarlayın.
|
|
|
Yerleşim |
Düğme Özellikleri |
Tür |
| Kadranınız kadranındaysa düğmenizi alttan% 6,3 oranında olacak şekilde yerleştirin. | Her iki tarafta 12dp dolgu bırakın. | Yazı tipi boyutları ölçeklendirilemez. En az dokuz yazı tipi boyutu belirleyin. Latin alfabesi kullanılmayan diller için en az yedi yazı tipi boyutu kullanın. |
Şablonlar
Kullanabileceğiniz dört tür parça şablonu vardır. Örnekleri görmek ve bu şablonu kullanma deneyiminiz hakkında geri bildirim sağlamak için Karo Tasarım Kiti'ni (Figma) indirin.
Metin odaklı
Metin tabanlı karo şablonu; en son haberler, yaklaşan etkinlikler ve hatırlatıcılar gibi kartlarda metin görüntülemek için tasarlanmıştır. Kullanıcıları neler olduğu hakkında bilgilendirmek ve net bir harekete geçirici mesaj sunmak için genellikle oturum açma, hata ve kurulum durumlarında kullanılır.
Düğme odaklı
Düğme merkezli parça şablonu, en fazla beş birincil işlem içeren bloklar için tasarlanmıştır. Belirli görevlere hızlıca başlamak için bu şablonu kullanın.
Bilgi odaklı
Bilgi odaklı karo şablonu üst düzey metrikleri ve ilerleme durumunu gösterir. Bu, özellikle sağlık ve fitness ile ilgili karolar için yararlıdır. İçerik görüntüleme için esnek seçenekler sağlar. Bir bakışta göze çarpmasını sağlamak için önemli verilere öncelik verin ve şablonda aşırı yoğunluktan kaçının.
Veri odaklı
Veri merkezli parça şablonu, dönemsel bilgileri özetleyen grafikler ve grafik öğeleri görüntülemek için tasarlanmış çok yönlü bir şablondur. Veri görselleştirmede esneklik sağlar ve görsel boş durumlar oluşturmak için yararlıdır. Karonun görünür kalmasını sağlamak için basit grafik öğelerine sahip olmak çok önemlidir.
Renk
Kartlara göz atabilmeniz için üç renkle sınırlayın.
Yapılması gerekenler
Yapılmaması gerekenler:
Yazı biçimi
Wear OS'te birincil yazı tipi olarak Roboto'yu kullanın. Varsayılan ve en küçük yazı tipi boyutu olarak Gövde 2'yi, en büyük yazı tipi boyutu olarak Görüntülü Reklam 2'yi kullanın.
Yazı tipi, ağırlık ve boyut hakkında daha fazla bilgi için Yazı biçimi bölümünü inceleyin.
Bileşenler
Karolarınızı oluşturmak için bileşenleri kullanın. Wear Materyal Teması Oluşturma yönergelerini izleyerek, markanızı ifade etmek için bileşenin renklerini özelleştirin.
Bileşen örneklerini görmek için Karo Tasarım Kiti'ni (Figma) indirin.
| Bileşen | Varyant | Örnek |
| Düğme | Standart düğme | Kullanılabilir boyutlar: Standard, Large ve Extra Large  |
| Düğme | Standart metin düğmesi | Kullanılabilir boyutlar: Standard, Large ve Extra Large  |
| Çip | Birincil standart çip |
 |
| Çip | İkincil standart çip |
 |
| Çip | Küçük avatar çipi |
 |
| Çip | Büyük avatar çipi |
 |
| Çip | Kompakt (alt) çip |
 |
| İlerleme göstergesi | Standart ilerleme göstergesi |
 |
| İlerleme göstergesi | Boşluklu ilerleme göstergesi |
 |
Kaynaklar
Daha fazla bilgi için Kart tasarımı yönergeleri konusuna bakın.