Ölçek, boyutlar ve görsel tasarım

OpenXR, yerel Android API'leri veya WebXR'yi kullanarak Android XR uygulamaları oluşturabilirsiniz. Bu sayfada özetlenen görsel tasarım önerileri, hangi platformu seçtiğinizden bağımsız olarak geçerlidir.

  • Unity, OpenXR veya WebXR uygulamaları için: İstediğiniz tasarım dilini kullanabilirsiniz. Material Design kitaplığına yalnızca Android uygulamaları erişebilmektedir. Yine de renk, boşluk, ölçek, düğme ve yazı tipi uygulamanıza yardımcı olması için kitaplığın tasarım önerilerini takip edebilirsiniz.

  • Android uygulamaları için: 2D mobil veya büyük ekran Android uygulamaları, çok az ek geliştirme çalışmasıyla Tam Alan özelliklerinden yararlanabilir. Yüksek XR etkisi için uzamsal kullanıcı arayüzü kullanabilirsiniz. Daha sürükleyici bir uygulama deneyimi oluşturmak için uygulamanıza 3D modeller ve ortamlar da ekleyebilirsiniz.

    Android XR'de mevcut Android uygulamalarının tasarım dilini koruyabilirsiniz. Yeni uygulamalar veya yeniden tasarlanan uygulamalar için kullanıcı arayüzü boyutu, erişilebilirlik, yazı tipi, renk şemaları ve bileşenler ile ilgili Materyal Tasarım yönergelerini uygulayabilirsiniz. Bu yönergeler, uygulamanıza Android'in tanıdık, kanıtlanmış tasarımının ve kullanılabilirliğinin avantajlarını sunar.

    Android uygulamanızı Material Design 3 kitaplığını kullanarak oluşturursanız bileşenlerine ve uyarlanabilir düzenlerine kolayca mekansal kullanıcı arayüzü davranışları ekleyebilirsiniz.

Uygulamanızın görsel tasarımını test etme

Rahat ve erişilebilir bir kullanıcı deneyimi sunmak için uygulamanızın görsel tasarımını test etmek çok önemlidir. Farklı XR platformlarında ve ortamlarında test yapma hakkında bilgi edinin.

Emülatörleri, simülasyon araçlarını ve gerçek cihazları kullanma

  • Android uygulaması geliştiriyorsanız uygulamanızı Android XR emülatöründe test edin. Bu sayede olası sorunları belirleyebilir ve fiziksel bir cihaz olmadan hızlıca iterasyon yapabilirsiniz.

Görsel tasarım testi yapılacaklar listesi

  • Hareket veya animasyonların hareket hastalığını tetiklemediğinden emin olmak için bunları test edin. Sorunsuz geçişler, kararlı kare hızları ve tahmin edilebilir hareket olup olmadığını kontrol edin.
  • Sanal öğelerin fiziksel çevreyle uyumlu olmasını sağlamak için gerçek dünyadaki ayarlarda geçişi deneyin.
  • Uygulamanızı parlak ve loş ortamlar da dahil olmak üzere farklı ışık koşullarında test edin.
  • Farklı mesafe ve açılardan metnin okunabilirliğini kontrol edin.
  • Erişilebilirlik ve konfor açısından renk düzenini değerlendirin.

Kullanıcı geri bildirimi toplama

İyileştirilebilecek alanları belirlemek için kullanıcı testi yapın. Kapsamlı bir bakış açısı için farklı düzeylerde XR deneyimi ve görsel yetenekleri olan kullanıcıları dahil edin.

Android XR'de hedefler

Bir XR uygulamasında hedef, kullanıcıların etkileşimde bulunduğu dokunulabilir veya işaretlenebilir alandır. Daha büyük hedefler, hassasiyeti, rahatlığı ve kullanılabilirliği artırır. Uygulamanızı erişilebilir hale getirmek için Materyal Tasarım hedef yönergelerini uygulayın. Bu API'ler Android, Unity, OpenXR ve WebXR uygulamalarıyla çalışır. Uygulamanız zaten Materyal Tasarım önerilerine uyuyorsa hedef boyutlarınız minimum boyutu karşılar ancak 56 dp en uygun boyuttur.

Önerilen 56 dp'lik bir hedefi ve 4 dp'lik bir kolaylaştırmayı gösteren örnek simge.

Tüm etkileşimli kullanıcı arayüzü öğelerinde aşağıdakiler dikkate alınmalıdır:

  • Önerilen hedef: 56 dp x 56 dp veya daha büyük
  • Görsel kolaylık: 48 dp x 48 dp veya daha büyük
  • Hedef ile görsel kolaylık arasındaki ofset: 4 dp
  • Doğru etkileşimler için farklı kullanıcı arayüzü öğelerinin işaretçi hedefleri örtüşmemelidir.

Fareyle üzerine gelme durumlarını eklediğinizden emin olun

Etkileşimli bileşenler için temel etkileşimli durumlara ek olarak fareyle üzerine gelme ve odak durumları da erişilebilirliği artırmak için dahil edin. Fareyle üzerine gelme durumları herkes için yararlı olabilir ve özellikle kullanıcı arayüzü öğelerini seçmek için işaretçi girişlerine güvenen kullanıcılar için çok önemlidir.

Üzerine gelme durumları, sistemde göz izleme işlevini etkinleştirmede önemli bir rol oynar. Ancak göz izleme etkinleştirildiğinde, kullanıcı gizliliğini korumak ve veri paylaşımını önlemek için uygulama, fareyle üzerine gelme durumlarını erişemez. Sistem, hangi kullanıcı arayüzü bileşenlerinin etkileşime açık olduğunu belirtmek için yalnızca kullanıcı tarafından görülebilen bir vurgu durumu çizer.

Hedefler arasındaki mesafe

Material Design, düğmeler dahil olmak üzere hedefler arasında en az 8 dp boşluk bırakılmasını önerir. Bu boşluk, kullanıcıların etkileşimli öğeleri kolayca ayırt etmesini ve yanlışlıkla seçim yapmamasını sağlar.

Düğmeler arasındaki mesafe, bağlamlarına ve boyutlarına göre değişebilir. Göz önünde bulundurulması gereken bazı faktörler:

  • Düğme boyutu: Görsel netliği korumak için büyük düğmeler arasında daha fazla alan gerekebilir.
  • Düğme gruplandırma: İşlevsel olarak birbirine yakın düğmeler daha yakın gruplandırılabilir. Birbirine alakasız düğmeler ise daha uzakta olmalıdır.
  • Düzen: Ekranın genel düzeni, düğmeler arasındaki boşluğu etkileyebilir. Örneğin, araç çubuğundaki düğmeler, iletişim kutusundaki düğmelere kıyasla daha yakın aralıklarla yerleştirilebilir.

Panel boyutu ve ölçeği

Android XR, uygulamanızı geniş bir kitle için rahat, okunaklı ve erişilebilir hale getirmek üzere tasarlanmıştır. Android XR, en iyi deneyim için 0,868 dp/dmm kullanır.

1024 dp x 720 dp panel boyutu ve 32 dp yuvarlatılmış köşeleri olan bir XR uygulamasından 1,75 metre uzaklıktaki bir kullanıcının görselleştirmesi.

Panel kullanıyorsanız XR uygulamanız büyük olasılıkla kullanıcıdan fiziksel ekrandan daha uzakta olacaktır. Kullanıcının kulaklık taktığını varsayalım. Kullanıcıların etkileşime geçmek için kafalarını hareket ettirmek zorunda kalmaması amacıyla, birincil içeriği 41° görüş alanına yerleştirerek en iyi konforu sağlayın.

Öneriler

  • Panellerin köşeleri 32 dp yuvarlatılmıştır. Bu varsayılan ayarı geçersiz kılabilirsiniz.

Panel derinliği davranışları

  • Ev Alanı: Uygulamalar, kullanıcıdan 1,75 metre uzaklıkta açılır ve geliştiriciler bu ayarı geçersiz kılamaz.
  • Tam Alan: Varsayılan olarak uygulamalar, Ana Alan'daki konumlarında açılır. Panelleri kullanıcının konumuna göre yerleştirmek için mekansal mantığı kullanabilirsiniz.Ancak 1, 75 metrelik bir başlatma mesafesi kullanmanızı öneririz.

Bir uygulama kullanıcıdan 1,75 metre uzaktayken:

  • 1024 dp, 1.556,24 milimetre olarak algılanır.
  • 720 dp, 1093,66 milimetre olarak algılanır.
  • Fiziksel gerçeklikte 1 metre = XR'de 1 metre

Düğmeler ve simgeler

Mevcut bir Android uygulamanız varsa Android XR için özel bileşenler tasarlamanıza gerek yoktur. Düğmeler ve simgeler ile ilgili Materyal Tasarım yönergelerini uygulayın. Unity, OpenXR veya WebXR uygulamanız varsa düğmelerinizi ve simgelerinizi olduğu gibi bırakabilir veya Material Design'dan ilham alabilirsiniz.

Kendi düğmelerinizi veya simgelerinizi oluşturmaya karar verirseniz basit formlar, net çizgiler, temel şekiller ve sınırlı bir renk paleti kullanın. Aşırı ayrıntılı tasarımlardan kaçının. Bunları farklı çözünürlüklerde ve izleme mesafelerinde ölçeklenebilir ve okunaklı hale getirin. Erişilebilirlik için bileşen ile arka planı arasında yeterli kontrast olduğundan emin olun ve ekran okuyucu veya diğer yardımcı teknolojileri kullanan kullanıcılar için metin açıklamaları ya da ipuçları sağlayın.

Renkler

Android XR, tutarlı ve görsel açıdan ilgi çekici bir arayüz sağlamak için Materyal Tasarım'ın renk sistemini kullanır. XR'ye özel, etkileyici bir görsel stil oluşturmak için yeterli kontrasta sahip bir tasarım yapın, dengeli bir palet seçin, renk körlüğü olan kullanıcılar için erişilebilir renkler kullanın ve göz yorgunluğuna veya yön kaybına neden olabilecek rahatsız edici kombinasyonlardan kaçının.

Material Design sistemi, tüm renkleri üç boyut kullanarak tanımlayan HCT adlı bir renk alanı kullanır: ton, renk yoğunluğu ve ton.

XR'de koyu ve açık temalar

Android mobil uygulamasında olduğu gibi koyu ve açık temaları kullanın. Kullanıcılar, Android XR'de koyu ve açık temalar arasında geçiş yaparak kendi tercihlerine en uygun görsel stili seçebilir.

Materyal Tasarım renk şemaları hakkında daha fazla bilgi edinin.

XR yazı biçimi

XR'de rahat bir kullanıcı deneyimi için yazı tipi okunaklılığı önemlidir. Daha iyi okunabilirlik için 14 dp veya daha büyük yazı tipi boyutu ve normal veya daha yüksek yazı tipi kalınlığıyla yazı tipi ölçeği seçeneklerini kullanmanızı öneririz.

Kullanımı kolay bir uygulama oluşturmak için Materyal Tasarım'ın yazım kılavuzundan yararlanabilirsiniz.

Alt kısmında yazı biçimli sayılar bulunan büyük bir R ve o harfinin yakın çekimi. Koyu mor harfler açık mor arka planla net bir kontrast oluşturuyor.

XR'de yazımla ilgili en iyi uygulamalar

  • Değişken mesafeler için boyut: Kullanıcıların hareket edeceğini ve metni farklı konumlardan görüntüleyeceğini unutmayın. Yazı tipi boyutlarının uzaktan okunabilecek kadar büyük olduğundan emin olun.
  • Metni kullanıcının doğal görüş alanına yerleştirin: Bu sayede aşırı baş hareketi ve boyun ağrısı önlenir.
  • Derinlik ve ölçeği göz önünde bulundurun: 3D alanda hiyerarşi oluşturmak için derinlik ipuçları ve ölçek kullanın.
  • Metnin, kullanıcının arka planına karşı okunaklı olduğundan emin olun: Daha kalın yazı tipleri daha fazla kontrast sunar. Ortamdaki renklere, ışığa ve karmaşıklığa göre ayarlayın.
  • Uyarlanabilir yazı tipleri kullanın: Paneller kullanıcıya çok yakın, çok uzak ve garip görüntüleme açılarında olabilir.
  • Hareket eden nesnelere eklenen metni sınırlayın: Bu, hareket hastalığına neden olabilir.

XR'de erişilebilir yazı tipi

  • Okunaklı yazı tipleri seçin: Küçük boyutlarda ve uzak mesafelerde net harf biçimlerine sahip yazı tiplerine öncelik verin.
  • Normal cümle düzeni kullanın: Normal cümle düzeni, büyük harf düzeninden daha kolay okunur.
  • Satır uzunluğunu sınırlayın: Okunabilirliği artırmak için daha kısa satır uzunlukları kullanın.
  • Erişilebilir renkler seçin: Renk görme farklılıkları olan kullanıcılar için okunaklı renk kombinasyonları kullanın.
  • Yer daraltıcı öğelerden kaçının: Metne yeterli alan bırakın.
  • Metin ölçeklendirmeye izin ver: Kullanıcıların metin boyutunu kendi ihtiyaçlarına göre ayarlamalarına izin verin.