Aplikacje na Androida XR możesz tworzyć za pomocą OpenXR, natywnych interfejsów API Androida lub WebXR. Rekomendacje dotyczące projektu graficznego opisane na tej stronie mają zastosowanie niezależnie od wybranej platformy.
W przypadku aplikacji Unity, OpenXR lub WebXR: możesz stosować dowolny język projektowania. Chociaż biblioteka Material Design jest dostępna tylko dla aplikacji na Androida, możesz stosować się do jej zaleceń dotyczących projektowania, aby stosować odpowiednie kolory, odstępy, skalę, przyciski i typografię.
Aplikacje na Androida: 2D aplikacje mobilne lub aplikacje na duże ekrany Androida mogą korzystać z funkcji Full Space z bardzo niewielką dodatkową pracą programistyczną. Aby uzyskać duży wpływ na XR, rozważ użycie interfejsu przestrzennego. Aby stworzyć bardziej wciągającą aplikację, możesz też dodać do niej modele 3D i środowiska.
W Androidzie XR możesz zachować język projektowania dotychczasowych aplikacji na Androida. W przypadku nowych aplikacji lub ich odświeżeń warto przestrzegać wytycznych Material Design dotyczących rozmiaru interfejsu, ułatwień dostępu, typografii, schematów kolorów i komponentów. Dzięki temu Twoja aplikacja będzie korzystać z zalet znanego i sprawdzonego interfejsu Androida oraz z łatwej obsługi.
Jeśli aplikację na Androida tworzysz za pomocą biblioteki Material Design 3, możesz łatwo dodawać przestrzenne zachowania interfejsu użytkownika do jej komponentów i układów dostosowujących się do ekranu.
Jak przetestować projekt graficzny aplikacji
Testowanie projektu wizualnego aplikacji jest kluczowe, aby zapewnić użytkownikom wygodne i dostępne wrażenia. Oto jak testować na różnych platformach i w różnych środowiskach XR.
Używanie emulatorów, symulatorów i prawdziwych urządzeń
- Jeśli opracowujesz aplikację na Androida, przetestuj ją na emulatorze Androida XR. Pomoże Ci to wykrywać potencjalne problemy i szybko wprowadzać zmiany bez konieczności korzystania z fizycznego urządzenia.
Lista kontrolna testowania projektu wizualnego
- Sprawdź wszystkie ruchy i animacje, aby upewnić się, że nie powodują choroby lokomocyjnej. Sprawdź, czy przejścia są płynne, a tempo wyświetlania obrazu jest stabilne.
- Wypróbuj przepuszczanie w rzeczywistych ustawieniach, aby upewnić się, że elementy wirtualne będą dobrze współgrać z fizycznym otoczeniem.
- Przetestuj aplikację w różnych warunkach oświetleniowych, w tym w jasnych i ciemnych pomieszczeniach.
- Sprawdź czytelność tekstu z różnych odległości i pod różnymi kątami.
- Sprawdź, czy schemat kolorów jest przyjazny dla osób z utrudnieniami i czy jest wygodny w użyciu.
Zbieranie opinii użytkowników
Przeprowadź testy z udziałem użytkowników, aby określić obszary wymagające poprawy. Uwzględnij użytkowników o różnym doświadczeniu w zakresie XR i różnych zdolnościach wzrokowych, aby uzyskać pełny obraz.
Docelowe w Androidzie XR
W aplikacji XR docel to obszar, który można dotknąć lub wskazać, z którym użytkownicy mogą wchodzić w interakcje. Większe cele zwiększają dokładność, wygodę i użyteczność. Aby zapewnić dostępność aplikacji, postępuj zgodnie z wytycznymi dotyczącymi ułatwień dostępu w Material Design. Będą one działać z aplikacjami na Androida, Unity, OpenXR i WebXR. Jeśli Twoja aplikacja już stosuje zalecenia dotyczące Material Design, jej docelowe rozmiary są zgodne z minimalnymi wymaganiami, choć 56 dp jest optymalne.
W przypadku wszystkich interaktywnych elementów interfejsu należy wziąć pod uwagę:
- Zalecana wielkość: 56 x 56 pikseli lub większa
- Wizualne możliwości: 48 x 48 pikseli lub więcej
- Odstęp między celem a elementem wizualnym: 4 dp
- Aby zapewnić dokładne interakcje, obszary docelowe kursora różnych elementów interfejsu nie powinny się na siebie nakładać.
Dodaj stany kursora.
Aby ułatwić dostępność, uwzględnij stany kursora i fokusa oprócz podstawowych stanów interakcji w przypadku komponentów interaktywnych. Stany kursora mogą być przydatne dla wszystkich użytkowników, ale są szczególnie ważne dla osób, które używają wskaźnika do wybierania elementów interfejsu.
Stany najechania kursorem odgrywają ważną rolę w umożliwianiu śledzenia wzroku w systemie. Jednak gdy śledzenie wzroku jest włączone, aplikacja nie ma dostępu do stanów najechania kursorem, aby chronić prywatność użytkowników i zapobiegać udostępnianiu danych. System będzie wyświetlać tylko dla użytkownika stan podświetlenia, aby pokazać, z którymi elementami interfejsu można wchodzić w interakcję.
Odległość między celami
Materiałowa architektura zaleca pozostawienie co najmniej 8 dp wolnego miejsca między elementami docelowymi, w tym przyciskami. Dzięki temu użytkownicy mogą łatwo odróżnić elementy interaktywne i uniknąć przypadkowego ich wybrania.
Odległość między przyciskami może się różnić w zależności od kontekstu i rozmiaru. Oto kilka czynników, które warto wziąć pod uwagę:
- Rozmiar przycisków: większe przyciski mogą wymagać większej przestrzeni między nimi, aby zachować przejrzystość wizualną.
- Grupowanie przycisków: przyciski o bardzo podobnych funkcjach można zgrupować bliżej siebie, a przyciski niemające ze sobą nic wspólnego powinny być bardziej oddalone.
- Układ: ogólny układ ekranu może wpływać na odstępy między przyciskami. Na przykład przyciski na pasku narzędzi mogą być rozmieszczone bliżej siebie niż przyciski w dialogu.
Rozmiar i skalowanie panelu
Android XR został zaprojektowany tak, aby Twoja aplikacja była wygodna, czytelna i dostępna dla szerokiego grona odbiorców. Aby zapewnić optymalne działanie, Android XR używa współczynnika 0,868 dp/dmm.
Jeśli używasz paneli, aplikacja XR będzie prawdopodobnie dalej od użytkownika niż ekran fizyczny. Użytkownik ma na sobie zestaw słuchawkowy. Aby zapewnić użytkownikom większy komfort, umieść główne treści w polu widzenia o zakresie 41°, aby nie musieli ruszać głową, aby móc z nimi wchodzić w interakcje.
Zalecenia
- Panele mają zaokrąglone rogi o 32 dp. Możesz zmienić to ustawienie domyślne.
Zachowania dotyczące głębokości panelu
- Przestrzeń domowa: aplikacje uruchamiają się w odległości 1, 75 metra od użytkownika.Deweloperzy nie mogą tego zmienić.
- Pełna przestrzeń: domyślnie aplikacje uruchamiają się w tej samej pozycji, w której były w obszarze Home. Możesz użyć logiki przestrzennej, aby umieszczać panele na podstawie pozycji użytkownika, ale zalecamy ustawienie odległości odpalenia na poziomie 1,75 metra.
Gdy aplikacja znajduje się w odległości 1,75 m od użytkownika:
- 1024 dp jest postrzegane jako 1556,24 mm
- 720 dp to 1093,66 mm
- 1 metr w rzeczywistości = 1 metr w XR
Przyciski i ikony
Jeśli masz już aplikację na Androida, nie musisz projektować specjalnych komponentów na potrzeby Androida XR. Stosuj wytyczne Material Design dotyczące przycisków i ikon. Jeśli masz aplikację Unity, OpenXR lub WebXR, możesz zachować przyciski i ikony w obecnej formie lub zainspirować się Material Design.
Jeśli zdecydujesz się na samodzielne tworzenie przycisków lub ikon, wybierz proste formy, czyste linie, podstawowe kształty i ograniczoną paletę kolorów. Unikaj projektów z zbyt wieloma szczegółami. Upewnij się, że są one skalowalne i czytelne w różnych rozdzielczościach i odległościach od ekranu. Ze względu na ułatwienia dostępu należy zadbać o wystarczający kontrast między elementem a tłem oraz zapewnić opisy tekstowe lub etykiety dla użytkowników korzystających z czytników ekranu lub innych technologii wspomagających.
Kolory
Android XR stosuje system kolorów Material Design, aby zapewnić spójny i atrakcyjny wizualnie interfejs. Aby stworzyć wciągający styl wizualny dostosowany do XR, zaprojektuj go z wystarczającym kontrastem, wybierz zrównoważoną paletę, używaj kolorów dostępnych dla osób z niedostatkiem widzenia kolorów i unikaj rażących kombinacji, które mogą powodować zmęczenie oczu lub dezorientację.
Ciemny i jasny motyw w XR
Używaj ciemnego i jasnego motywu tak samo jak w przypadku aplikacji mobilnej na Androida. Użytkownicy mogą przełączać się między ciemnym i jasnym motywem w Androidzie XR, wybierając styl wizualny, który najlepiej odpowiada ich indywidualnym preferencjom.
Więcej informacji o schematach kolorów w Material Design
Typografia XR
Czytelność czcionki ma kluczowe znaczenie dla komfortu użytkownika w środowiskach XR. Zalecamy używanie opcji typescale z rozmiarem czcionki 14 dp lub większym oraz wagą czcionki normal lub wyższą, aby poprawić czytelność.
Aby utworzyć aplikację, która jest łatwa w użyciu, warto postępować zgodnie ze wskazówkami dotyczącymi typografii w Material Design.
Sprawdzone metody dotyczące typografii w XR
- Rozmiar w zależności od odległości: pamiętaj, że użytkownicy będą się poruszać i oglądać tekst z różnych miejsc. Upewnij się, że czcionki są wystarczająco duże, aby można je było odczytać z pewnej odległości.
- Umieszczaj tekst w naturalnym polu widzenia użytkownika: dzięki temu unikniesz nadmiernego ruchu głową i obciążania szyi.
- Weź pod uwagę głębię i skalę: użyj wskazówek dotyczących głębi i skali, aby utworzyć hierarchię w przestrzeni 3D.
- Upewnij się, że tekst jest czytelny na tle: im większa waga, tym większy kontrast. Dostosowywanie w zależności od kolorów, oświetlenia i złożoności otoczenia.
- Używaj czcionek dostosowujących się do ekranu: panele mogą być za blisko lub za daleko oraz pod niewygodnymi kątami.
- Ogranicz tekst dołączony do obiektów ruchomych: może to wywołać chorobę lokomocy.
Dostępna typografia w XR
- Wybierać czcionki pod kątem czytelności: nadawać priorytet czcionkom z czytelnymi formami liter w małych rozmiarach i z dużej odległości.
- Używaj wielkości liter jak w zdaniu: tekst zapisany wielkością liter jak w zdaniu jest łatwiejszy do czytania niż tekst zapisany wielkimi literami.
- Ogranicz długość wiersza: staraj się, aby wiersze były krótsze, co zwiększy czytelność.
- Wybieranie kolorów dostępnych: używaj kombinacji kolorów, które są czytelne dla użytkowników z zaburzeniem rozpoznawania barw.
- Unikaj przepełnienia: zostaw tekstowi wystarczająco dużo miejsca.
- Zezwalaj na skalowanie tekstu: użytkownicy mogą dostosować rozmiar tekstu do swoich potrzeb.