2D mobil veya büyük ekran Android uygulamanız varsayılan olarak Android XR'da çalışır ve 3D alanda 2D panel olarak gösterilir. Mevcut 2D Android uygulamanızı geliştirmek için sürükleyici XR özellikleri ekleyerek düz ekran deneyiminden dinamik, 3D ortama geçiş yapabilirsiniz.
Android uygulamanızı XR'a taşırken aşağıdaki önemli ilkeleri göz önünde bulundurun.
- Üç boyutlu özellikler: Android XR, uygulamanızda kullanabileceğiniz çeşitli üç boyutlu özellikler sunar ancak her özelliği uygulamanız gerekmez. Uygulamanızın görsel hiyerarşisini, düzenlerini ve kullanıcı yolculuklarını tamamlayan reklam biçimlerini stratejik olarak uygulayın. Gerçekten etkileyici bir deneyim oluşturmak için özel ortamlar ve birden fazla panel eklemeyi düşünebilirsiniz. Üç boyutlu öğelerin en uygun şekilde entegrasyonunu belirlemek için üç boyutlu kullanıcı arayüzü tasarım kılavuzuna bakın.
- Uyarlanabilir kullanıcı arayüzü: XR, sonsuz bir tuvale ve serbestçe yeniden boyutlandırılabilir pencerelere sorunsuz bir şekilde uyum sağlayan geniş bir kullanıcı arayüzü tasarlama esnekliği sunar. En önemli noktalardan biri, uygulamanızın düzenini bu geniş ortama göre optimize etmek için 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 ortamlardan yararlanabilirsiniz. Ancak büyük ekranlar için optimize edilmiş bir kullanıcı arayüzü, uygulamanızı Android XR için optimize etmenin en iyi yollarından biridir.
- 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ümleri kullanıyorsa görünümlerle çalışırken Compose birlikte çalışabilirliğinden yararlanma hakkında daha fazla bilgi edinmek için XR'da görünümlerle çalışma bölümünü inceleyin veya doğrudan Jetpack SceneCore kitaplığıyla çalışmayı değerlendirin.
- Google Play Store'da yayınlama: XR ile geliştirilmiş uygulamanızın Google Play Store'da bulunabilir olduğunu doğrulamak için:
- Gereksiz özellik şartlarını kaldırarak uygulamanızı daha basit hale getirebilirsiniz.
- Uygulamanızın Play Store arama sonuçlarından hariç tutulmasını önlemek için Google Play Console'dan uygulamanızın XR yayınlama kapsamı dışında kalmayı seçmediğini doğrulayın.
2D kullanıcı arayüzü bileşenlerini 3D'ye dönüştürme
Bu ipuçlarını uygulayarak uygulamanızın XR için optimize edilmiş gibi hissettirmesini sağlayabilirsiniz.
- Büyük ekran uyumluluğuna öncelik verin: Uygulamanızın kullanıcı arayüzünün, geniş XR ortamlarında metin ve içeriğin en iyi şekilde okunabilmesi için büyük ekran tasarım ilkelerine uygun olduğundan emin olun.
- Üç boyutlu özellikleri stratejik olarak kullanın: Uygulamanızın kullanıcı yolculuğunda, üç boyutlu özelliklerin deneyimi iyileştireceği ve platformun benzersiz özelliklerinden yararlanacağı önemli anları belirleyin.
- Üç boyutlu panelleri kullanıcı konforunu göz önünde bulundurarak yerleştirin: Düzeninizi üç boyutlu panellerle tasarlarken, kullanıcıyı bunaltmamak veya çok yakın hissettirmemek için panelleri kullanıcıdan rahat bir mesafeye yerleştirin.
- Üç boyutlu düzenler için uyarlanabilir kullanıcı arayüzü kullanın: Düzeninizi etkili bir şekilde birden fazla üç boyutlu panele ayırarak bilgi sunumunu optimize etmek için bölmeler ve aşamalı gösterim gibi uyarlanabilir kullanıcı arayüzü kavramlarından yararlanın.
- Kalıcı öğeler ve kalıplar için yörünge öğelerini kullanın: Yörünge öğelerini, gezinme ve kontroller gibi kalıcı ve bağlamsal kullanıcı deneyimi öğeleri için kullanın. Netliği korumak ve karmaşayı önlemek için yörünge öğelerinin kullanımını sınırlayın.
- Yükseklik özelliğini dikkatli kullanın: Sabit kalan ve içerikle birlikte kaydırılmayan geçici bileşenlere uzamsal yükseklik 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 bu geliştirmeleri sizin 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 tipik 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. Bunları 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 yükseltmek istediğinizde, uygulamanızdaki herhangi bir composable'ı SpatialElevationLevel ile ayarladığınız Z eksenindeki uzamsal panelin üzerinde bir seviyeye yükseltmenize olanak tanıyan SpatialElevation sağlarız.
Aşağıdaki örnekte gösterildiği gibi, 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ünge öğelerine taşıma
Yörünge öğeleri, genellikle kullanıcının etkileşimde bulunabileceği kontrolleri içeren kayan öğelerdir. Yörünge öğeleri, uzamsal panellere veya uzamsal düzenler gibi diğer öğelere sabitlenebilir. İçeriğe daha fazla alan açar ve ana içeriği engellemeden kullanıcılara özelliklere hızlı erişim imkanı sunar.
Üç boyutlu olmayan gezinme sütunu
Üç boyutlu (XR'a uyarlanmış) gezinme sütunu
Aşağıdaki örnek kodda, 2D kullanıcı arayüzü bileşenini yörüngeye nasıl taşıyabileceğiniz gösterilmektedir.
// Previous approach NavigationRail() // New XR differentiated approach Orbiter( position = OrbiterPosition.TopStart( horizontalEdgeAlignment = OrbiterPosition.EdgeAlignment.Outside, offset = DpVolumeOffset(x = dimensionResource(R.dimen.start_orbiter_padding)) ) ) { NavigationRail() }
Yörünge araçları hakkında önemli noktalar
- Orbiter'lar, mevcut kullanıcı arayüzü öğelerini uzamsal bir panele eklemek için tasarlanmış bileşenlerdir.
- Yörünge öğeleri için hangi öğelerin taşınacağını ve kaçınılması gereken kalıpları doğrulamak üzere Android XR uygulama tasarımı kılavuzumuzu inceleyin.
- Yalnızca gezinme rayı, üst uygulama çubuğu veya alt uygulama çubuğu gibi birkaç gezinme bileşenini uyarlamanızı öneririz.
- Yörünge öğeleri, uzamsal kullanıcı arayüzü etkinleştirilmediğinde gösterilmez. Örneğin, Ana Sayfa Alanı'nda veya telefon, tablet ve katlanabilir cihazlarda gösterilmez.
2D bileşenleri üç boyutlu 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 etkileyici 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 taşınacak öğeleri doğrulamak ve kaçınılması gereken kalıpları öğrenmek için Android XR uygulama tasarımı kılavuzuna bakın.
- Üç boyutlu panel yerleşimiyle ilgili en iyi uygulamaları takip edin:
- Paneller, kullanıcının gözlerinden 1,5 m uzaklıkta ortalanmış olarak görünmelidir.
- İçerik, kullanıcının görüş alanının ortasındaki 41 derecelik kısımda görünmelidir.
- Kullanıcı hareket ettikçe paneller yerinde kalır. Sabitleme yalnızca geçiş için kullanılabilir.
- Paneller için sistem tarafından önerilen 32 dp yuvarlak köşeleri kullanın.
- Dokunma hedefleri 56 dp olmalı ve 48 dp'den küçük olmamalıdır.
- Özellikle şeffaf arka planlar kullanıyorsanız okunabilirlik için kontrast oranlarını koruyun.
- Android tasarımındaki renk ilkelerini uygulayın ve uygulamanızda koyu ve açık temaları kullanmak için Materyal Tasarım renk sistemini kullanın.
- Mevcut kullanıcı arayüzü öğeleriyle Spatial Panels API'yi kullanma
2D kullanıcı arayüzünü tek bir uzamsal panele taşıma
Uygulamanız varsayılan olarak Home Space'te tek bir panelde gösterilir. Ana Sayfa Alanı ile Tam Ekran Alanı arasında nasıl geçiş yapacağınızı öğrenin. Bu içeriği Tam Ekran Alanı'na taşımak için SpatialPanel simgesini kullanabilirsiniz.
Bunu nasıl yapabileceğinize dair bir örnek aşağıda verilmiştir.
if (LocalSpatialCapabilities.current.isSpatialUiEnabled) { Subspace { SpatialPanel( modifier = SubspaceModifier.movable().resizable(), ) { 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ı tercih ederseniz panelleri konumlandırabilir ve döndürebilirsiniz (kullanıcı arayüzünüzü 2D olarak düzenlemeye benzer). Öncelikle ne yapmak istediğinize dair net bir tasarım vizyonuyla başlayacaksınız. Ardından, panelleri konumlandırmak ve döndürmek için Spatial UI Layout API'lerini (SpatialBox, SpatialRow, SpatialColumn, SpatialSpacer, SpatialAlignment) ve alt uzay değiştiricileri kullanabilirsiniz.
Birden fazla panel uygularken kaçınmanız gereken bazı önemli kalıplar vardır.
- Kullanıcının önemli bilgileri görmesini engelleyecek şekilde üst üste binen panellerden kaçının.
- Kullanıcıyı panellerle bunaltmaktan kaçının.
- Panelleri rahatsız edici veya fark edilmeyen yerlere yerleştirmekten kaçının. Ö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.
Üç boyutlu olmayan içerik
Yörünge aracında üç boyutlu (XR'ye uyarlanmış) medya kontrolleri ve birden fazla üç boyutlu 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() } }
Üç boyutlu özellikler ekleme
2D kullanıcı arayüzü bileşenlerinizi kavramsallaştırıp 3D'ye dönüştürmeye başladıktan sonra, Android XR için daha farklı bir deneyim oluşturmanıza yardımcı olmak üzere uygulamanıza ekleyebileceğiniz diğer uzamsal özelliklere de göz atabilirsiniz.
Uzamsal özellikleri kontrol etme
Belirli bir kullanıcı arayüzü öğesini gösterip göstermeyeceğinize karar verirken belirli XR cihazlarını veya modlarını kontrol etmeyin. Ö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 sürükleyicilik hissi yaratmak istediğinizde bunu ortamlarla yapabilirsiniz. Kodda ortam eklemek, uygulamanızın mevcut kullanıcı arayüzünü önemli ölçüde etkilemeden yapabileceğiniz basit bir değişikliktir. Ortamları ayarlama hakkında daha fazla bilgi için kılavuzumuzun tamamını inceleyin.
3D içerik ekleme
3D modeller ve üç boyutlu videolar gibi 3D içerikler, daha sürükleyici bir deneyim oluşturmaya ve üç boyutlu algılamayı geliştirmeye yardımcı olabilir. Uygulamanız yalnızca üç boyutlu özellikler mevcut olduğunda 3D içerik gösterebilir. Bu nedenle, önce üç boyutlu özelliklerin mevcut olup olmadığını kontrol etmeniz gerekir.
3D modeller, üç boyutlu video veya üç boyutlu ses eklemek için ilgili kılavuza bakın.