2D mobil veya büyük ekran Android uygulamanız, varsayılan olarak Android XR'da çalışır ve 3D alanında 2D panel olarak gösterilir. Mevcut 2D Android uygulamanızı geliştirmek için sürükleyici XR özellikleri ekleyebilir, böylece uygulamanızı düz ekran deneyiminden dinamik bir 3D ortama dönüştürebilirsiniz.
Android uygulamanızı XR'a taşırken şu önemli ilkeleri göz önünde bulundurun.
- Üç boyutlu özellikler: Android XR, uygulamanızda kullanabileceğiniz çeşitli üç boyutlu özellikler sunar ancak bu özelliklerin tamamını uygulamanız gerekmez. Uygulamanızın görsel hiyerarşisini, düzenlerini ve kullanıcı yolculuklarını tamamlayanları stratejik olarak uygulayın. Gerçekten etkileyici bir deneyim oluşturmak için özel ortamlar ve birden fazla panel ekleyebilirsiniz. Mekansal öğelerin en iyi şekilde entegrasyonunu belirlemek için mekansal kullanıcı arayüzü tasarım yönergelerine bakın.
- Uyarlanabilir kullanıcı arayüzü: XR, sonsuz bir tuvale sorunsuz bir şekilde uyum sağlayan ve serbestçe yeniden boyutlandırılabilen pencerelerle geniş bir kullanıcı arayüzü tasarlama esnekliği sunar. En önemli noktalardan biri, uygulamanızın düzenini bu geniş ortam için optimize etmek amacıyla büyük ekran tasarım kılavuzumuzu kullanmaktır. Uygulamanız şu anda yalnızca mobil cihazlarda kullanılabiliyor olsa bile kullanıcı deneyimini iyileştirmek için ilgi çekici ortamlar kullanabilirsiniz. Ancak uygulamanızı Android XR için optimize etmenin en iyi yollarından biri, büyük ekranlar için optimize edilmiş bir kullanıcı arayüzü kullanmaktır.
- Kullanıcı arayüzü çerçevesi: Kullanıcı arayüzünüzü XR için Jetpack Compose ile oluşturmanızı öneririz. Uygulamanız Görünümler'i kullanıyorsa Görünümler ile çalışırken Compose birlikte çalışabilirliğinden yararlanma hakkında daha fazla bilgi edinmek için XR'de Görünümler ile çalışma başlıklı makaleyi inceleyin veya doğrudan Jetpack SceneCore kitaplığıyla çalışmayı değerlendirin.
- Play Store'da yayınlama: XR özellikli uygulamanızın Play Store'da bulunabilir olduğunu doğrulamak için:
- Gereksiz özellik şartlarını kaldırarak uygulamanızı basitleştirebilirsiniz.
- Uygulamanızın Play Store arama sonuçlarından hariç tutulmasını önlemek için Google Play Console'dan uygulamanızın XR yayıncılığını devre dışı bırakmadığınızı doğrulayın.
2D kullanıcı arayüzü bileşenlerini 3D'ye dönüştürmeyle ilgili ipuçları
Bu ipuçlarını uygulamak, uygulamanızın XR için optimize edilmiş gibi görünmesinde büyük fark yaratabilir.
- Büyük ekran uyumluluğuna öncelik verin: Uygulamanızın kullanıcı arayüzünün, geniş XR ortamlarında metin ve içeriklerin optimum okunabilirliğini sağlamak için büyük ekran tasarım ilkelerine uygun olduğundan emin olun.
- Mekansal özellikleri stratejik olarak kullanın: Mekansal özelliklerin deneyimi iyileştireceği ve platformun benzersiz özelliklerinden yararlanabileceğiniz, uygulamanızın kullanıcı yolculuğundaki önemli anları belirleyin.
- Kullanıcı rahatlığını göz önünde bulundurarak mekansal paneller yerleştirin: Mekansal panellerle düzeninizi tasarlarken panelleri kullanıcıdan rahat bir mesafede konumlandırın. Böylece kullanıcılar panellerden bunalmaz veya panellerin çok yakınında olduğunu hissetmez.
- Uzamsal düzenler için uyarlanabilir kullanıcı arayüzü kullanma: Düzeninizi etkili bir şekilde birden fazla uzamsal panele ayırmak ve bilgi sunumunu optimize etmek için bölmeler ve kademeli gösterme gibi uyarlanabilir kullanıcı arayüzü kavramlarından yararlanın.
- Sabit öğeler ve desenler için yörüngeler kullanın: Yörüngeleri gezinme ve kontroller gibi sabit ve bağlamsal kullanıcı deneyimi öğeleri için ayırın. Netliği korumak ve karmaşayı önlemek için yörüngelerin kullanımını sınırlayın.
- Yükseltmeyi dikkatli kullanın: Sabit kalan ve içerikle birlikte kaymayan geçici bileşenlere uzamsal yükseltme uygulayın. Görsel rahatsızlığı önlemek ve dengeli bir görsel hiyerarşi sağlamak için geniş alanları yükseltmekten kaçının.
XR için Jetpack Compose, XR geliştirmelerini yöneten yeni bileşenler sunar. Böylece sizin bu bileşenleri yönetmeniz gerekmez. Örneğin, 2D karşılıklarının yerine SpatialPopup ve SpatialDialog kullanabilirsiniz. Bu bileşenler, uzamsal kullanıcı arayüzü kullanılamadığında normal 2D kullanıcı arayüzü olarak görünür ve mümkün olduğunda uygulamanızın uzamsal kullanıcı arayüzünü gösterir. Bu öğeleri kullanmak, ilgili 2D kullanıcı arayüzü öğesini değiştirmek için tek satırlık bir değişiklik yapmak kadar kolaydır.
İletişim kutusunu SpatialDialog'a dönüştürme
// Previous approach Dialog( onDismissRequest = onDismissRequest ) { MyDialogContent() } // New XR differentiated approach SpatialDialog( onDismissRequest = onDismissRequest ) { MyDialogContent() }
Pop-up'ı SpatialPopup'a dönüştürme
// Previous approach Popup(onDismissRequest = onDismissRequest) { MyPopupContent() } // New XR differentiated approach SpatialPopup(onDismissRequest = onDismissRequest) { MyPopupContent() }
2D kullanıcı arayüzü öğelerini yükseltme
Kullanıcı arayüzünü daha ayrıntılı kontrolle geliştirmek istediğinizde, SpatialElevation ile ayarladığınız Z eksenindeki uzamsal panelin üzerinde, uygulamanızdaki tüm composable'ları bir seviye yukarı taşımanıza olanak tanır.SpatialElevationLevel
Bu sayede, kullanıcının dikkatini çekebilir, daha iyi bir hiyerarşi oluşturabilir ve okunabilirliği artırabilirsiniz.
// Elevate an otherwise 2D Composable (signified here by ComposableThatShouldElevateInXr). SpatialElevation(elevation = SpatialElevationLevel.Level4) { ComposableThatShouldElevateInXr() }
Kodla ilgili önemli noktalar
- Alt sayfalar ve yan sayfalar gibi büyük alanları ve düzlemleri uzamsallaştırmayın veya yükseltmeyin.
- İçerikle birlikte kaydırılabilen kullanıcı arayüzü öğelerini yükseltmeyin.
2D bileşenleri yörüngeye taşıma
Yörüngeler, genellikle kullanıcının etkileşimde bulunabileceği kontrolleri içeren kayan öğelerdir. Yörüngeler, uzamsal panellere veya uzamsal düzenler gibi diğer öğelere sabitlenebilir. Bu reklamlar, içeriğin daha fazla yer kaplamasına olanak tanır ve kullanıcıların ana içeriği engellemeden özelliklere hızlı bir şekilde erişmesini sağlar.
Uzamsallaştırılmamış gezinme sütunu
Uzamsallaştırılmış (XR'ye uyarlanmış) gezinme sütunu
Aşağıdaki örnek kodda, 2D kullanıcı arayüzü bileşeninin nasıl yörüngeye taşınabileceği gösterilmektedir.
// Previous approach NavigationRail() // New XR differentiated approach Orbiter( position = ContentEdge.Start, offset = dimensionResource(R.dimen.start_orbiter_padding), alignment = Alignment.Top ) { NavigationRail() }
Yörünge uyduları hakkında önemli noktalar
- Orbiter'ler, mevcut kullanıcı arayüzü öğelerini uzamsal bir panele eklemek için tasarlanmış bileşenlerdir.
- Hangi öğelerin yörünge uyduları için taşınacağını ve hangi desenlerden kaçınılacağını doğrulamak için Android XR uygulama tasarım kılavuzumuza bakın.
- Yalnızca gezinme çubuğu, üst uygulama çubuğu veya alt uygulama çubuğu gibi birkaç gezinme bileşenini uyarlamanızı öneririz.
- Uzamsal kullanıcı arayüzü etkinleştirilmediğinde yörüngeler gösterilmez. Örneğin, Ana Sayfa Alanı'nda veya telefon, tablet ve katlanabilir cihazlarda gösterilmezler.
2D bileşenleri Spatial panellere taşıma
Üç boyutlu paneller, Android XR uygulamalarının kullanıcı arayüzünün temel yapı taşlarıdır.
Paneller, kullanıcı arayüzü öğeleri, etkileşimli bileşenler ve sürükleyici içerikler için kapsayıcı görevi görür. Tasarım yaparken kullanıcı kontrolleri için yörünge gibi bileşenler ekleyebilir ve belirli etkileşimlere dikkat çekmek için kullanıcı arayüzü öğelerini uzamsal olarak yükseltebilirsiniz.
Kodla ilgili önemli noktalar
- Panellere hangi öğelerin taşınacağını ve hangi kalıplardan kaçınılacağını doğrulamak için Android XR uygulama tasarımıyla ilgili rehber başlıklı makaleyi inceleyin.
- Mekansal panel yerleşimiyle ilgili en iyi uygulamaları takip edin:
- Paneller, kullanıcının gözlerinden 1,5 metre uzaklıkta ortalanarak oluşturulmalıdır.
- İçerik, kullanıcının görüş alanının merkezinde 41°'lik bir açıyla görünmelidir.
- Paneller, kullanıcı hareket ettikçe yerinde kalır. Sabitleme yalnızca geçiş için kullanılabilir.
- Paneller için sistemin önerdiği 32 dp yuvarlatılmış köşeleri kullanın.
- Dokunma hedefleri 56 dp olmalı ve 48 dp'den küçük olmamalıdır.
- Okunabilirlik için kontrast oranlarını koruyun. Özellikle şeffaf arka planlar kullanıyorsanız bu önemlidir.
- Android tasarımının renk ilkelerine uyun ve uygulamanızda koyu ve açık temaları uygulamak için Materyal Tasarım renk sistemini kullanın.
- Mevcut kullanıcı arayüzü öğeleriyle Spatial Panels API'yi kullanın.
2D kullanıcı arayüzünü tek bir uzamsal panele taşıma
Uygulamanız, varsayılan olarak Home Space'te tek bir panel halinde gösterilir. Ev alanı ve tam alan arasında geçiş yapmayı öğrenin. Bu içeriği Full Space'e aktarmak için SpatialPanel'i kullanabilirsiniz.
Bunu nasıl yapabileceğinize dair bir örneği aşağıda bulabilirsiniz.
if (LocalSpatialCapabilities.current.isSpatialUiEnabled) { Subspace { SpatialPanel( dragPolicy = MovePolicy(), resizePolicy = ResizePolicy(), ) { AppContent() } } } else { AppContent() }
2D kullanıcı arayüzünüzü birden fazla uzamsal panele taşıma
Uygulamanızın kullanıcı arayüzü için tek bir uzamsal panel kullanabilir veya 2D kullanıcı arayüzünüzü birden fazla uzamsal panele taşıyabilirsiniz. Uygulamanızın kullanıcı arayüzü için birden fazla panel kullanmayı seçerseniz panelleri konumlandırabilir ve döndürebilirsiniz (kullanıcı arayüzünüzü 2 boyutlu olarak düzenlemeye benzer). Ne yapmak istediğinize dair net bir tasarım vizyonuyla başlayıp panelleri konumlandırmak ve döndürmek için Spatial UI Layout API'lerini (SpatialBox, SpatialRow, SpatialColumn, SpatialLayoutSpacer, SpatialAlignment) ve alt alan değiştiricilerini kullanabilirsiniz.
Birden fazla panel uygularken kaçınmanız gereken bazı temel kalıplar vardır.
- Kullanıcının önemli bilgileri görmesini engelleyecek şekilde panellerin üst üste gelmesinden kaçının.
- Kullanıcıyı panellerle bunaltmayın.
- Panelleri rahatsız edici veya fark edilmeyen yerleşimlere yerleştirmeyin. Örnek: Kullanıcının arkasına yerleştirilen panellerin fark edilmesi zordur.
- Uzamsal kullanıcı arayüzünüzü geliştirme hakkında daha fazla bilgi için kılavuzumuzun tamamını inceleyin.
Uzamsallaştırılmamış içerik
Bir yörünge aracı içinde uzamsallaştırılmış (XR'ye uyarlanmış) medya kontrolleri ve birden fazla uzamsal panele bölünmüş içerik
SpatialRow { SpatialPanel( SubspaceModifier .width(384.dp) .height(592.dp) ) { StartSupportingPanelContent() } SpatialPanel( SubspaceModifier .height(824.dp) .width(1400.dp) ) { App() } SpatialPanel( SubspaceModifier .width(288.dp) .height(480.dp) ) { EndSupportingPanelContent() } }
Uzamsal özellikleri kontrol etme
Belirli bir kullanıcı arayüzü öğesini görüntüleyip görüntülemeyeceğinize karar verirken belirli XR cihazlarını veya modlarını kontrol etmekten kaçının. Özellikler yerine cihazları veya modları kontrol etmek, belirli bir cihazdaki özellikler zaman içinde değiştiğinde sorunlara neden olabilir. Bunun yerine, aşağıdaki örnekte gösterildiği gibi gerekli uzamsallaştırma özelliklerini doğrudan kontrol etmek için LocalSpatialCapabilities.current.isSpatialUiEnabled kullanın.
Bu yaklaşım, yeni cihazlar çıktığında veya özellikler değiştiğinde her seferinde güncelleme yapmanıza gerek kalmadan uygulamanızın çok çeşitli XR deneyimlerine doğru şekilde uyum sağlamasını sağlar.
if (LocalSpatialCapabilities.current.isSpatialUiEnabled) { SupportingInfoPanel() } else { ButtonToPresentInfoModal() } // Similar check for audio val spatialAudioEnabled = LocalSpatialCapabilities.current.isSpatialAudioEnabled
Kullanıcının çevresini değiştirmek için ortamları kullanma
Kullanıcınızın çevresini değiştirerek uygulamanızda bir etkileyicilik hissi yaratmak istediğinizde bunu ortamlarla yapabilirsiniz. Koda ortam eklemek, uygulamanızın mevcut kullanıcı arayüzünü önemli ölçüde etkilemeden yapabileceğiniz basit bir değişikliktir. Ortam ayarlama hakkında daha fazla bilgi için kılavuzumuzun tamamını inceleyin.
3D içerik ekleme
3D modeller ve uzamsal videolar gibi 3D içerikler, daha sürükleyici bir deneyim oluşturmaya ve uzamsal anlayışa katkıda bulunmaya yardımcı olabilir. Uygulamanız yalnızca uzamsal özellikler kullanılabildiğinde 3D içerik gösterebilir. Bu nedenle, önce uzamsal özelliklerin kullanılıp kullanılamadığını kontrol etmeniz gerekir.
3D modeller, üç boyutlu video veya üç boyutlu ses ekleme hakkında bilgi edinmek için ilgili kılavuza bakın.