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 implementować wszystkich. Strategicznie wdrażaj te, które uzupełniają wizualną hierarchię, układy i ścieżki użytkownika w 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 interfejsu przestrzennego.
- 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 zwiększyć 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.
- Framework 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 sprawdzić, czy aplikacja z funkcjami XR jest widoczna w Sklepie Play:
- Rozważ uproszczenie aplikacji przez usunięcie niepotrzebnych wymagań dotyczących funkcji.
- Sprawdź, czy w Google Play Console nie masz wyłączonej publikacji aplikacji w XR, aby nie była ona wykluczona z wyników wyszukiwania w Sklepie 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 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: określ kluczowe momenty w ścieżce użytkownika aplikacji, w których włączenie funkcji przestrzennych poprawi wrażenia i wykorzystaj 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 elementów orbitujących w przypadku trwałych elementów i wzorców: rezerwuj elementy orbitujące dla 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 utrzymać zrównoważoną hierarchię wizualną.
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 dwuwymiarowych odpowiedników. Gdy interfejs przestrzenny jest niedostę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 jak wprowadzenie jednolinijkowej zmiany, która 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 użytkownika, zapewniając sobie większą kontrolę, 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 pokazano na 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 przeznaczone 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 nie jest włą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
- W wskazówkach dotyczących projektowania aplikacji na Androida XR znajdziesz informacje o tym, które elementy należy przenieść do paneli, oraz wzorce, których należy unikać.
- 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 współczynniki kontrastu, aby zapewnić 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 dla interfejsu 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 Spatial UI Layout API (SpatialBox, SpatialRow, SpatialColumn, SpatialLayoutSpacer, SpatialAlignment) i modyfikatorów podprzestrzeni, aby ustawić i obrócić panele.
Podczas wdrażania wielu paneli należy unikać pewnych kluczowych wzorców.
- Unikaj nakładających się paneli, które uniemożliwiają użytkownikowi wyświetlanie ważnych informacji.
- Unikaj przytłaczania użytkownika panelami.
- Unikaj umieszczania paneli w miejscach, w których są niewygodne lub 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 immersji, zmieniając otoczenie użytkownika, 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 zapewnić zrozumienie przestrzeni. 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.