XR ile Android uygulamanızı 3D'ye dönüştürme

Geçerli XR cihazlar

Bu kılavuz, bu tür XR cihazlar için deneyimler oluşturmanıza yardımcı olur.

XR cihaz türleri hakkında bilgi edinin →

XR Kulaklıklar

Kablolu XR Gözlükler

XR cihaz türleri hakkında bilgi edinin →

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 sürükleyici 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 hususlardan 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: XR için kullanıcı arayüzünüzü 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 bulunabilmesi 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'da uygulamanızın XR yayınlamadan hariç tutulmadığından emin olun.

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 dahil edilmesinin deneyimi iyileştireceği ve platformun benzersiz özelliklerinden yararlanılmasını sağlayacağı, 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üngeleri sınırlı kullanı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.
• Material Design ile geliştirme: Material Design bileşenlerinin ve uyarlanabilir düzenlerin en yeni alfa sürümüyle geliştirme yapıyorsanız uygulamanızda XR değişikliklerini etkinleştirmek için "EnableXrComponentOverrides" sarmalayıcısını ekleyebilirsiniz. Daha fazla bilgi edinmek için XR için Material Design dokümanlarımızı inceleyin.

XR için Jetpack Compose, XR geliştirmelerini yöneten yeni bileşenler sunar. Böylece sizin bu geliştirmeleri yönetmenize gerek kalmaz. Örneğin, 2 boyutlu 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()
}
SpatialDialog.kt

Pop-up'ı SpatialPopup'a dönüştürme

// Previous approach
Popup(onDismissRequest = onDismissRequest) {
    MyPopupContent()
}

// New XR differentiated approach
SpatialPopup(onDismissRequest = onDismissRequest) {
    MyPopupContent()
}
SpatialPopup.kt

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 yer alan bir seviyeye uygulamanızdaki tüm composable'ları yükseltmenize 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()
}
SpatialElevation.kt

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 orbiter'a nasıl 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()
}
Orbiter.kt

Yörünge araçları hakkında önemli noktalar

• Yörüngeler, mevcut kullanıcı arayüzü öğelerini bir uzamsal 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ü etkin değilken 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 desenlerden kaçınılacağını doğrulamak için Android XR uygulama tasarımıyla ilgili yönergeler 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 ortada 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öşe değerini 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 taşımak için SpatialPanel 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()
}
SpatialPanel.kt

2D kullanıcı arayüzünüzü birden fazla mekansal panele taşıma

Uygulamanızın kullanıcı arayüzü için tek bir mekansal panel kullanabilir veya 2D kullanıcı arayüzünüzü birden fazla mekansal 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ü 2D 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()
    }
}
SpatialRow.kt

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ız gerekmeden 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
SpatialCapabilities.kt

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ışı artırmaya 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.