Kutular, kullanıcıların yapmak için ihtiyaç duyduğu bilgilere ve işlemlere hızlı erişim sağlar. Kullanıcı, kadranında hızlıca kaydırma yaptıktan sonra fitness hedeflerine ulaşma yolunda nasıl ilerlediğini görebilir, hava durumunu kontrol edebilir ve daha pek çok şey yapabilir. Ayrıca kullanıcılar uygulamaları başlatabilir ve kartlardan temel görevleri hızlıca tamamlayabilirler.
Kullanıcılar, Wear OS cihazlarında hangi kartları görmek istediklerini hem cihazın kendisinden hem de tamamlayıcı uygulamadan seçebilirler.
UX tasarım ilkeleri
Sistem tarafından sağlanan kutular tutarlı bir tasarım dili kullandığından kullanıcılar karoların aşağıdakilerin her biri olmasını bekler:
- Anlık: Kutular, kullanıcıların sık yapılan görevleri hızlı bir şekilde tamamlamasına yardımcı olmak için tasarlanmıştır. Kullanıcıların karonun içeriğini anlayabilmesi için önemli içeriği net bir bilgi hiyerarşisinde görüntüleyin.
- Tahmin edilebilir: Her kutudaki içerik her zaman kullanıcıya yönelik bir göreve odaklanmalıdır. Bu, kullanıcıların karoda hangi bilgileri görebileceklerini tahmin etmelerine yardımcı olarak geri çağırmayı iyileştirir.
- Alakalı: Kullanıcılar Wear OS cihazlarını her yere götürür. Kutudaki içeriğin kullanıcının mevcut durumu ve bağlamıyla ne kadar alakalı olduğunu düşünün.
Uygulama simgesi
Ekranın üst kısmında görünebilecek uygulama simgesi, sistem tarafından başlatıcı simgesinden otomatik olarak oluşturulur. Bu simgeyi karo düzeninin bir parçası yapmayın.
Yapılması gerekenler
Yapılmaması gerekenler
Tasarım rehberliği
Kart oluştururken aşağıdaki kuralları göz önünde bulundurun.
Tek bir göreve odaklanma
Yapılması gerekenler
Yapılmaması gerekenler
Her görev için ayrı kutular oluşturun
Uygulamanız birden fazla görevi destekliyorsa uygulamanızın desteklediği her görev için birden fazla kutu oluşturmayı düşünün. Örneğin, bir fitness uygulamasında hem hedef hem de antrenman kutusu olabilir.
Grafiklerin bir bakışta temsillerini gösterir
Yapılması gerekenler
Yapılmaması gerekenler
En son veri güncellemelerini belirtin
Kutuya ait verilerin ne kadar yeni olduğunu kullanıcılara açıkça gösterin. Önbelleğe alınan verileri gösteriyorsanız en son ne zaman güncellendiğini belirtin.
Uygun bir veri yenileme hızı kullanın
Cihazın pil ömrü üzerindeki etkisini göz önünde bulundurarak kartlarınız için uygun bir güncelleme oranı seçin. Nabız ve adım sayısı gibi platform veri kaynakları kullanıyorsanız güncelleme hızını Wear OS sizin yerinize kontrol eder.
Boş durumlar
Karoların iki tür boş durumu vardır. Her ikisi için de PrimaryLayout kullanın.
Hatalar veya izin
Kullanıcıya, karodan ayarlarını veya tercihlerini güncellemeleri gerektiğini söyleyin.
Oturum açma
Oturum açma kutucuğunda net bir harekete geçirici mesaj sağlayın.
Devam eden etkinlikleri göster
Bir uygulama, antrenman izleme veya müzik çalma gibi uzun süreli bir aktivite gerçekleştirdiğinde, devam eden aktivitenin ilerlemesini birden fazla kartta göstermelidir.
Uygulamanız, kullanıcıların bu etkinlikleri başlatmasına olanak tanıyan kartları da destekliyorsa kullanıcıların kafasını karıştırmak için aşağıdakileri yapın:
- Devam eden bir etkinliğin devam etmekte olduğunu belirtir.
- Kullanıcı böyle bir kutuya dokunursa uygulamanızı başlatın ve devam etmekte olan etkinliği gösterin. Devam eden bir etkinliğin yeni bir örneğini başlatmayın.
Gerekli öğeler
- Birincil veriler: Etkinliği açıklayan ana içerik.
- Etiket: Etkinliğin durumunu gösterir.
İsteğe bağlı öğeler
- Simge veya grafik: Animasyon veya statik resim olabilir.
- Alt kısımdaki küçük çip: Harekete geçirici mesaj içerir.
Karolarda hareket
Karolara animasyon eklediğinizde kullanıcıların değişiklikleri anlamasına yardımcı olun:
Yapılması gerekenler
Yapılmaması gerekenler
Önizlemeler
Kullanıcınızın Wear OS veya avuç içi cihazındaki kart yöneticisinde hangi içeriğin gösterildiğini görmesine yardımcı olmak için kart önizlemesi ekleyin. Her parçanın temsili bir önizleme resmi olabilir. Bu resim aşağıdaki koşulları karşılamalıdır:
 |
Şartlar
|
 |
 |
| Wear OS cihazdaki Kart Yöneticisi'nde gösterilen karo önizlemesi. | Telefondaki Kart Yöneticisi'nde görüntülenen karo önizlemesi. |
Yapılması gerekenler
Yapılmaması gerekenler
Daha büyük ekran boyutları
ProtoLayout Material düzen şablonları ve Figma tasarım düzenleri, çeşitli Wear ekran boyutlarına uyum sağlamak için duyarlı davranışa sahiptir. Böylece alanlar otomatik olarak uyarlanır. Slotlar, mevcut genişliği dolduracak şekilde tasarlanmıştır. Ana içerik ve ikincil etiket alanları içeriği kaplar ancak bunları barındıran kapsayıcı, mevcut yüksekliği doldurur. Kenar boşlukları yüzde olarak ayarlanır. Ek iç kenar boşlukları, ekranın alt ve üst kısmındaki alanlara eklenir. Büyüdükçe ekranın eğrisinde oluşan dalgalanmalar hesaba katılır.
Kullanıcıların ek bilgiye veya seçeneklere erişmesine izin vererek daha büyük ekran boyutunu en üst düzeye çıkarmak için bu ek alanı kullanarak daha fazla değer sağlayın. Bu düzenlere ulaşmak, yerleşik duyarlı davranışın ötesinde daha fazla özelleştirme gerektirir. Örneğin, daha fazla içeriğe sahip ek düzen oluşturabilir veya ayrılma noktasından sonra daha önce gizlenmiş alanları görüntüleyebilirsiniz.
Önerilen ayrılma noktasının 225 dp ekran boyutunda ayarlandığını unutmayın.
Daha büyük ekran boyutu için tasarım örnekleri
Düğme ekle
Zaman aralığı ve içerik ekleme
Metin ekleyin
