Aplikacja mobilna 2D lub aplikacja na Androida na duże ekrany działa domyślnie na Androidzie XR, wyświetlając się jako panel 2D w przestrzeni 3D. Możesz dodać do istniejącej aplikacji 2D na Androida funkcje XR, aby ulepszyć ją i przekształcić z płaskiego ekranu w dynamiczne środowisko 3D.
Podczas przenoszenia aplikacji na Androida do XR weź pod uwagę te ważne zasady.
- Funkcje przestrzenne: Android XR oferuje wiele funkcji przestrzennych dostępnych w aplikacji, ale nie musisz wdrażać wszystkich. Strategicznie wdrażaj te, które uzupełniają wizualną hierarchię, układy i ścieżki użytkownika w Twojej aplikacji. Aby stworzyć wciągające środowisko, możesz użyć niestandardowych środowisk i wielu paneli. Aby określić optymalną integrację elementów przestrzennych, zapoznaj się z wskazówkami dotyczącymi projektowania przestrzennego interfejsu.
- Adaptacyjny interfejs: XR zapewnia elastyczność projektowania przestronnego interfejsu, który bezproblemowo dostosowuje się do nieograniczonego obszaru roboczego i okien o dowolnej wielkości. Jednym z najważniejszych aspektów jest optymalizacja układu aplikacji pod kątem dużych ekranów. W tym celu skorzystaj z naszych wskazówek dotyczących projektowania na duże ekrany. Nawet jeśli Twoja aplikacja jest obecnie dostępna tylko na urządzenia mobilne, możesz wykorzystać atrakcyjne środowiska, aby poprawić komfort użytkowania. Jednak interfejs zoptymalizowany pod kątem dużych ekranów to jeden z najlepszych sposobów na dostosowanie aplikacji do Androida XR.
- Platforma interfejsu: zalecamy tworzenie interfejsu za pomocą Jetpack Compose na potrzeby XR. Jeśli Twoja aplikacja korzysta z widoków, zapoznaj się z artykułem Praca z widokami w XR, aby dowiedzieć się więcej o wykorzystywaniu interoperacyjności Compose podczas pracy z widokami, lub rozważ bezpośrednią pracę z biblioteką Jetpack SceneCore.
- Publikowanie w Sklepie Play: aby aplikacja z rozszerzoną rzeczywistością była widoczna w Sklepie Play:
- Rozważ uproszczenie aplikacji przez usunięcie niepotrzebnych wymagań dotyczących funkcji.
- Aby zapobiec wykluczeniu aplikacji z wyników wyszukiwania w Sklepie Play, upewnij się, że nie jest ona wyłączona z publikowania w XR w Konsoli Google Play.
Wskazówki dotyczące konwertowania komponentów interfejsu 2D na 3D
Stosowanie się do tych wskazówek może znacząco wpłynąć na to, czy aplikacja będzie sprawiać wrażenie zoptymalizowanej pod kątem XR.
- Priorytetowe traktowanie zgodności z dużymi ekranami: zadbaj o to, aby interfejs użytkownika aplikacji był zgodny z zasadami projektowania dla dużych ekranów. Dzięki temu tekst i treści będą optymalnie czytelne w rozległych środowiskach XR.
- Strategiczne wykorzystywanie funkcji przestrzennych: identyfikuj kluczowe momenty na ścieżce użytkownika w aplikacji, w których włączenie funkcji przestrzennych poprawi komfort korzystania z niej, i wykorzystuj unikalne możliwości platformy.
- Umieszczaj panele przestrzenne z myślą o komforcie użytkownika: projektując układ z panelami przestrzennymi, umieszczaj je w wygodnej odległości od użytkownika, aby nie przytłaczały go i nie wydawały się zbyt blisko.
- Używaj adaptacyjnego interfejsu w przestrzennych układach: korzystaj z koncepcji adaptacyjnego interfejsu, takich jak panele i stopniowe ujawnianie, aby skutecznie dzielić układ na wiele paneli przestrzennych i optymalizować prezentację informacji.
- Używaj orbiterów w przypadku trwałych elementów i wzorców: orbiterów używaj w przypadku trwałych i kontekstowych elementów UX, takich jak nawigacja i elementy sterujące. Ograniczaj użycie orbiterów, aby zachować przejrzystość i uniknąć bałaganu.
- Rozważnie korzystaj z wysokości: stosuj wysokość przestrzenną w przypadku tymczasowych komponentów, które pozostają nieruchome i nie przewijają się wraz z treścią. Unikaj podnoszenia dużych obszarów, aby zapobiec dyskomfortowi wizualnemu i zachować zrównoważoną hierarchię wizualną.
- Twórz aplikacje z użyciem Material Design: jeśli tworzysz aplikację z użyciem najnowszej wersji alfa komponentów Material Design i układów adaptacyjnych, możesz dodać otoczkę „EnableXrComponentOverrides”, aby włączyć w aplikacji zmiany dotyczące XR. Więcej informacji znajdziesz w dokumentacji Material Design dla XR.
Jetpack Compose na urządzenia XR wprowadza nowe komponenty, które zarządzają ulepszeniami XR, dzięki czemu nie musisz tego robić. Możesz na przykład użyć SpatialPopup i SpatialDialog zamiast ich odpowiedników 2D. Gdy interfejs przestrzenny nie jest dostępny, te komponenty wyświetlają się jako typowy interfejs 2D, a gdy jest dostępny, wyświetlają interfejs przestrzenny aplikacji. Korzystanie z nich jest proste – wystarczy wprowadzić jednolinijkową zmianę, aby zastąpić odpowiedni element interfejsu 2D.
Konwertowanie okna na SpatialDialog
// Previous approach Dialog( onDismissRequest = onDismissRequest ) { MyDialogContent() } // New XR differentiated approach SpatialDialog( onDismissRequest = onDismissRequest ) { MyDialogContent() }
Przekształcanie wyskakującego okienka w SpatialPopup
// Previous approach Popup(onDismissRequest = onDismissRequest) { MyPopupContent() } // New XR differentiated approach SpatialPopup(onDismissRequest = onDismissRequest) { MyPopupContent() }
Podnoszenie elementów interfejsu 2D
Jeśli chcesz ulepszyć interfejs za pomocą bardziej precyzyjnej kontroli, udostępniamy funkcję SpatialElevation, która pozwala przenieść dowolny komponent w aplikacji na poziom powyżej panelu przestrzennego na osi Z, który ustawiasz za pomocą funkcji SpatialElevationLevel.
Pomaga to przyciągnąć uwagę użytkownika, tworzy lepszą hierarchię i poprawia czytelność, jak w poniższym przykładzie.
// Elevate an otherwise 2D Composable (signified here by ComposableThatShouldElevateInXr). SpatialElevation(elevation = SpatialElevationLevel.Level4) { ComposableThatShouldElevateInXr() }
Najważniejsze informacje o kodzie
- Nie przestrzenizuj ani nie podnoś dużych obszarów i płaszczyzn, takich jak arkusze dolne i arkusze boczne.
- Nie podnoś elementów interfejsu, które można przewijać wraz z treścią.
Przenoszenie komponentów 2D do orbiterów
Elementy orbitujące to pływające elementy, które zwykle zawierają elementy sterujące, z którymi użytkownik może wchodzić w interakcję. Orbiter można przypiąć do paneli przestrzennych lub innych elementów, takich jak układy przestrzenne. Zapewniają one więcej miejsca na treści i umożliwiają użytkownikom szybki dostęp do funkcji bez zasłaniania głównych treści.
Kolumna nawigacji bez przestrzenności
Przestrzenna kolumna nawigacji (dostosowana do XR)
Poniższy przykładowy kod pokazuje, jak można przenieść komponent interfejsu 2D do orbitera.
// Previous approach NavigationRail() // New XR differentiated approach Orbiter( position = ContentEdge.Start, offset = dimensionResource(R.dimen.start_orbiter_padding), alignment = Alignment.Top ) { NavigationRail() }
Najważniejsze informacje o orbiterach
- Orbitery to komponenty zaprojektowane do dołączania istniejących elementów interfejsu do panelu przestrzennego.
- Zapoznaj się z naszymi wskazówkami dotyczącymi projektowania aplikacji na Androida XR, aby sprawdzić, które elementy należy przenieść w przypadku orbiterów, i jakich wzorców unikać.
- Zalecamy dostosowanie tylko kilku komponentów nawigacyjnych, takich jak panel nawigacyjny, górny pasek aplikacji lub dolny pasek aplikacji.
- Orbiter nie pojawia się, gdy interfejs przestrzenny jest wyłączony. Na przykład nie będą się one wyświetlać w przestrzeni domowej ani na urządzeniach takich jak telefony, tablety i urządzenia składane.
Migracja komponentów 2D do paneli przestrzennych
Panele przestrzenne to podstawowe elementy interfejsu aplikacji na Androida XR.
Panele służą jako kontenery elementów interfejsu, komponentów interaktywnych i treści immersywnych. Podczas projektowania możesz dodawać komponenty, takie jak orbitery, do sterowania przez użytkownika, a także przestrzennie podnosić elementy interfejsu, aby zwracać uwagę na określone interakcje.
Najważniejsze informacje o kodzie
- Więcej informacji o tym, które elementy przenieść do paneli, oraz o wzorcach, których należy unikać, znajdziesz w wytycznych dotyczących projektowania aplikacji na Androida XR.
- Postępuj zgodnie ze sprawdzonymi metodami dotyczącymi umieszczania paneli przestrzennych:
- Panele powinny pojawiać się na środku w odległości 1,5 m od oczu użytkownika.
- Treści powinny być wyświetlane w środkowej części pola widzenia użytkownika o kącie 41°.
- Panele pozostają na swoim miejscu, gdy użytkownik się przemieszcza. Zakotwiczenie jest dostępne tylko w przypadku przekazywania.
- W przypadku paneli używaj zalecanych przez system zaokrąglonych rogów o promieniu 32 dp.
- Docelowe elementy dotykowe powinny mieć 56 dp i nie mogą być mniejsze niż 48 dp.
- Zadbaj o odpowiedni kontrast, aby zwiększyć czytelność, zwłaszcza jeśli używasz przezroczystych teł.
- Postępuj zgodnie z zasadami dotyczącymi kolorów w Androidzie i używaj systemu kolorów Material Design, aby wdrożyć w aplikacji motywy jasny i ciemny.
- Używaj interfejsu Spatial Panels API z dotychczasowymi elementami interfejsu.
Przenoszenie interfejsu 2D do jednego panelu przestrzennego
Domyślnie aplikacja jest wyświetlana w przestrzeni domowej w postaci jednego panelu. Dowiedz się, jak przełączać się między przestrzenią domową a pełną Aby przenieść te treści do Full Space, możesz użyć SpatialPanel.
Oto przykład, jak to zrobić.
if (LocalSpatialCapabilities.current.isSpatialUiEnabled) { Subspace { SpatialPanel( dragPolicy = MovePolicy(), resizePolicy = ResizePolicy(), ) { AppContent() } } } else { AppContent() }
Przenoszenie interfejsu 2D na wiele paneli przestrzennych
Możesz użyć jednego panelu przestrzennego w interfejsie aplikacji lub przenieść interfejs 2D do wielu paneli przestrzennych. Jeśli zdecydujesz się użyć wielu paneli w interfejsie aplikacji, możesz je ustawiać i obracać (podobnie jak w przypadku układu interfejsu 2D). Zaczniesz od jasnej wizji projektu, a potem możesz użyć interfejsów API układu interfejsu przestrzennego (SpatialBox, SpatialRow, SpatialColumn, SpatialLayoutSpacer, SpatialAlignment) i modyfikatorów podprzestrzeni, aby ustawić i obrócić panele.
Podczas wdrażania wielu paneli warto unikać pewnych kluczowych wzorców.
- Unikaj nakładających się paneli, które uniemożliwiają użytkownikowi wyświetlanie ważnych informacji.
- Nie zasypuj użytkownika panelami.
- Unikaj umieszczania paneli w miejscach, w których użytkownicy nie będą się czuli komfortowo lub które będą niezauważalne. Przykład: panele umieszczone za użytkownikiem są trudne do zauważenia.
- Więcej informacji o tworzeniu interfejsu przestrzennego znajdziesz w naszych pełnych wskazówkach.
Treści bez przestrzenności
Przestrzenne (dostosowane do XR) elementy sterujące multimediami w orbiterze i treści podzielone na kilka paneli przestrzennych
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() } }
Sprawdzanie możliwości przestrzennych
Decydując, czy wyświetlić konkretny element interfejsu, unikaj sprawdzania konkretnych urządzeń lub trybów XR. Sprawdzanie urządzeń lub trybów zamiast możliwości może powodować problemy, gdy możliwości danego urządzenia zmieniają się z czasem. Zamiast tego użyj LocalSpatialCapabilities.current.isSpatialUiEnabled, aby bezpośrednio sprawdzić, czy są dostępne niezbędne funkcje przestrzenne, jak pokazano w przykładzie poniżej.
Dzięki temu Twoja aplikacja będzie prawidłowo dostosowywać się do szerokiej gamy środowisk XR bez konieczności aktualizowania jej za każdym razem, gdy pojawią się nowe urządzenia lub zmienią się możliwości.
if (LocalSpatialCapabilities.current.isSpatialUiEnabled) { SupportingInfoPanel() } else { ButtonToPresentInfoModal() } // Similar check for audio val spatialAudioEnabled = LocalSpatialCapabilities.current.isSpatialAudioEnabled
Używanie środowisk do zmiany otoczenia użytkownika
Jeśli chcesz stworzyć w aplikacji wrażenie zanurzenia w wirtualnym świecie, możesz to zrobić za pomocą środowisk. Dodanie środowiska w kodzie to prosta zmiana, którą możesz wprowadzić bez znaczącego wpływu na obecny interfejs aplikacji. Więcej informacji o konfigurowaniu środowisk znajdziesz w naszych pełnych wskazówkach.
Dodawanie treści 3D
Treści 3D, takie jak modele 3D i filmy przestrzenne, mogą pomóc w stworzeniu bardziej wciągającego środowiska i wzbogacić je o rozumienie przestrzenne. Aplikacja może wyświetlać treści 3D tylko wtedy, gdy dostępne są funkcje przestrzenne, więc najpierw sprawdź, czy są one dostępne.
Zapoznaj się z odpowiednim przewodnikiem, aby dowiedzieć się, jak dodać modele 3D, filmy przestrzenne lub dźwięk przestrzenny.