Wciągające aplikacje na Androida XR możesz tworzyć za pomocą OpenXR, natywnych interfejsów API Androida lub WebXR. Rekomendacje dotyczące projektu wizualnego opisane na tej stronie obowiązują niezależnie od wybranej platformy.
W przypadku aplikacji Unity, OpenXR lub WebXR: możesz stosować dowolny język projektowania. Biblioteka Material Design jest dostępna tylko dla aplikacji na Androida, ale możesz korzystać z jej zaleceń dotyczących projektowania, aby stosować kolory, odstępy, skalę, przyciski i typografię.
W przypadku aplikacji na Androida: aplikacje 2D na urządzenia mobilne lub duże ekrany z Androidem mogą korzystać z funkcji pełnej przestrzeni przy niewielkim nakładzie pracy programistycznej. Aby uzyskać duży wpływ XR, rozważ użycie przestrzennego interfejsu. Aby zapewnić użytkownikom bardziej wciągające wrażenia, możesz też dodać do aplikacji modele 3D i środowiska.
W Androidzie XR możesz zachować język projektowania istniejących aplikacji na Androida. W przypadku nowych aplikacji lub zmian w ich wyglądzie warto stosować wytyczne Material Design dotyczące rozmiaru interfejsu, ułatwień dostępu, typografii, schematów kolorów i komponentów. Dzięki temu Twoja aplikacja będzie korzystać ze znanego i sprawdzonego projektu Androida oraz jego użyteczności.
Jeśli tworzysz aplikację na Androida przy użyciu biblioteki Material Design 3, możesz łatwo dodać do jej komponentów przestrzenne zachowania interfejsu i układy adaptacyjne.
Jak przetestować projekt graficzny aplikacji
Testowanie wyglądu aplikacji jest kluczowe, aby zapewnić użytkownikom wygodę i dostępność. Dowiedz się, jak testować na różnych platformach XR i w różnych środowiskach.
Korzystanie z emulatorów, symulatorów i prawdziwych urządzeń
- Jeśli tworzysz aplikację na Androida, przetestuj ją na emulatorze Androida XR. Pomoże Ci to identyfikować potencjalne problemy i szybko wprowadzać zmiany bez użycia fizycznego urządzenia.
Lista kontrolna testowania projektu wizualnego
- Sprawdź, czy ruchy i animacje nie wywołują choroby lokomocyjnej. Sprawdź płynność przejść, stabilność liczby klatek i przewidywalność ruchu.
- Wypróbuj widok otoczenia w rzeczywistych warunkach, aby sprawdzić, czy elementy wirtualne dobrze komponują się z otoczeniem.
- Przetestuj aplikację w różnych warunkach oświetleniowych, w tym w jasnym i słabym oświetleniu.
- Sprawdź czytelność tekstu z różnych odległości i pod różnymi kątami.
- Oceń schemat kolorów pod kątem dostępności i wygody.
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 poziomie doświadczenia w zakresie XR i różnych możliwościach wizualnych, aby uzyskać kompleksową perspektywę.
Cele w Androidzie XR
W aplikacji XR element docelowy to obszar, w który użytkownicy mogą kliknąć lub w który mogą wycelować. Większe cele zwiększają precyzję, wygodę i użyteczność. Aby aplikacja była dostępna, postępuj zgodnie z wytycznymi dotyczącymi ułatwień dostępu w interfejsie Material Design. Będą one działać z aplikacjami na Androida, Unity, OpenXR i WebXR. Jeśli Twoja aplikacja jest już zgodna z zaleceniami Material Design, rozmiary docelowe spełniają minimalne wymagania, choć optymalny rozmiar to 56 dp.
W przypadku wszystkich interaktywnych elementów interfejsu należy wziąć pod uwagę:
- Zalecany rozmiar: co najmniej 56 dp × 56 dp
- Wskazówka wizualna (ikona): co najmniej 48 dp x 48 dp.
- Odległość między elementem docelowym a elementem wizualnym: 4 dp
- Aby interakcje były dokładne, obszary wskaźnika różnych elementów interfejsu nie powinny się nakładać.
- Element docelowy i ikona są w razie potrzeby skalowane wraz z kontenerem nadrzędnym lub etykietą.
Pamiętaj o dodaniu stanów najechania kursorem
Aby zwiększyć dostępność, oprócz podstawowych stanów interaktywnych w przypadku komponentów interaktywnych uwzględnij stany najechania kursorem i skupienia. Stany najechania mogą być przydatne dla wszystkich, a szczególnie ważne dla użytkowników, którzy do wybierania elementów interfejsu korzystają z wskaźnika.
Stany najechania odgrywają ważną rolę w umożliwianiu działania funkcji śledzenia wzroku w systemie. Gdy śledzenie wzroku jest włączone, stany najechania są niedostępne dla aplikacji, aby chronić prywatność użytkownika i zapobiegać udostępnianiu danych. System będzie rysować stan podświetlenia widoczny tylko dla użytkownika, aby wskazywać, które komponenty interfejsu można obsługiwać.
Odległość między celami
Zgodnie z wytycznymi Material Design minimalna odległość między elementami docelowymi, w tym przyciskami, powinna wynosić 8 dp. Dzięki temu użytkownicy mogą łatwo odróżnić elementy interaktywne i uniknąć przypadkowych wyborów.
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 przycisku: większe przyciski mogą wymagać większej przestrzeni między nimi, aby zachować przejrzystość wizualną.
- Grupowanie przycisków: przyciski, które są ze sobą ściśle powiązane funkcjonalnie, można grupować bliżej siebie, a niepowiązane przyciski 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 oknie dialogowym.
Rozmiar i skala panelu
Android XR został zaprojektowany tak, aby aplikacja była wygodna w użyciu, czytelna i dostępna dla szerokiego grona odbiorców. Aby zapewnić optymalne działanie, Android XR używa współczynnika 0,868 dp na dmm.
Jeśli używasz paneli, aplikacja XR będzie prawdopodobnie dalej od użytkownika niż ekran fizyczny. Załóż, że użytkownik ma na sobie słuchawki. Aby zapewnić optymalny komfort, umieść główne treści w polu widzenia o kącie 41°, dzięki czemu użytkownicy nie będą musieli poruszać głową, aby wejść w interakcję.
Zalecenia
- Panele mają zaokrąglone rogi o promieniu 32 dp. Możesz zastąpić to ustawienie domyślne.
Działanie głębokości panelu
- Przestrzeń domowa: aplikacje uruchamiają się w odległości 1,75 m od użytkownika, a deweloperzy nie mogą tego zmienić.
- Pełna przestrzeń: domyślnie aplikacje uruchamiają się w tym samym miejscu, w którym były w przestrzeni bazowej. Możesz użyć logiki przestrzennej, aby umieszczać panele na podstawie pozycji użytkownika, ale zalecamy odległość uruchomienia wynoszącą 1,75 m.
Gdy aplikacja znajduje się w odległości 1,75 m od użytkownika:
- 1024 dp to 1556,24 milimetra.
- 720 dp jest postrzegane jako 1093,66 mm
- 1 metr w rzeczywistości fizycznej = 1 metr w XR
Przyciski i ikony
Jeśli masz już aplikację na Androida, nie musisz projektować specjalnych komponentów na Androida XR. Postępuj zgodnie z wytycznymi Material Design dotyczącymi przycisków i ikon. Jeśli masz aplikację Unity, OpenXR lub WebXR, możesz pozostawić przyciski i ikony bez zmian lub zainspirować się Material Design.
Jeśli zdecydujesz się utworzyć własne przyciski lub ikony, wybierz proste formy, czyste linie, podstawowe kształty i ograniczoną paletę kolorów. Unikaj zbyt szczegółowych projektów. Zadbaj o to, aby były skalowalne i czytelne w różnych rozdzielczościach i odległościach od ekranu. Aby zapewnić dostępność, zadbaj o wystarczający kontrast między komponentem a jego tłem oraz udostępnij opisy tekstowe lub etykietki dla użytkowników czytników ekranu lub innych technologii wspomagających.
Kolory
Android XR korzysta z systemu kolorów Material Design, aby zapewnić spójny i atrakcyjny wizualnie interfejs. Aby stworzyć wciągający styl wizualny dostosowany do XR, projektuj z wystarczającym kontrastem, wybieraj zrównoważoną paletę, używaj kolorów dostępnych dla osób z zaburzeniami widzenia barw i unikaj rażących kombinacji, które mogą powodować zmęczenie oczu lub dezorientację.
Optymalizacja kolorów pod kątem różnic w wyświetlaniu
Wyświetlacz przewodowych okularów XR działa inaczej niż ekran gogli XR. Zamiast jednolitego ekranu, który zasłania widok, wyobraź sobie przewodowe gogle XR jako projektor wyświetlający światło na przezroczystą soczewkę.
- Gogle zastępują świat: za pomocą kamer rejestrują pomieszczenie i wyświetlają je na nieprzezroczystym ekranie. Jeśli aplikacja chce wyświetlić kolor czarny, wyłącza piksele, tworząc prawdziwie ciemny punkt, który zasłania świat za nim.
- Okulary XR z przewodem nakładają się na świat: pozwalają zobaczyć pomieszczenie bezpośrednio przez szkło. Wyświetlacz dodaje światło do tego widoku. Chociaż piksele nie mogą wyświetlać „ciemności”, przyciemnianie sprzętowe może przyciemnić soczewki, aby odciąć Cię od świata zewnętrznego.
Projektowanie z myślą o przejrzystości
Wyświetlacz przewodowych okularów XR działa na zasadzie addytywnej syntezy barw, więc wybór kolorów ma bezpośredni wpływ na to, jak solidny lub przezroczysty będzie interfejs.
- Czerń jest renderowana jako przezroczysta: nie można wyświetlić czystej czerni. Całkowicie czarne piksele są po prostu wyłączone, co oznacza, że użytkownik widzi rzeczywistość bezpośrednio przez tę część okularów.
- Jasność poprawia widoczność: jaśniejsze kolory wydają się bardziej jednolite. Ciemniejsze kolory emitują mniej światła i wyglądają na bardziej przezroczyste. Dodanie bieli poprawia widoczność, ale unikaj nadmiernej jasności, aby nie męczyć wzroku.
- Mieszanie z otoczeniem: kolory interfejsu będą wizualnie mieszać się z rzeczywistym światem. Używanie jasnych kolorów o wysokim kontraście pomaga wyróżnić interfejs na tle nieprzewidywalnych środowisk.
- Przyciemnianie soczewek zwiększa solidność: im ciemniejsze soczewki, tym mniej przejrzyste i bardziej solidne wydają się treści cyfrowe. Zwiększenie przyciemniania elektrochromatycznego blokuje więcej światła tła, dzięki czemu kolory wyglądają jednolicie, a ciemne elementy są bardziej widoczne.
Motywy ciemny i jasny w XR
Używaj ciemnego i jasnego motywu tak samo jak w 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 preferencjom.
Więcej informacji o schematach kolorów w Material Design
Typografia XR
Czytelność czcionki ma kluczowe znaczenie dla wygody użytkowników XR. Zalecamy używanie opcji skali typograficznej z rozmiarem czcionki co najmniej 14 dp i wagą czcionki normalną lub większą, aby poprawić czytelność.
Aby utworzyć aplikację, która jest łatwa w użyciu, zapoznaj się z wytycznymi dotyczącymi typografii w Material Design.
Sprawdzone metody dotyczące typografii w XR
- Rozmiar przy zmiennych odległościach: pamiętaj, że użytkownicy będą się poruszać i wyświetlać tekst z różnych lokalizacji. Zadbaj o to, aby rozmiary czcionek były wystarczająco duże, aby można je było odczytać z odległości.
- Umieszczaj tekst w naturalnym polu widzenia użytkownika: pozwala to uniknąć nadmiernych ruchów głowy i napięcia szyi.
- Zwróć uwagę na głębię i skalę: używaj wskazówek dotyczących głębi i skali, aby tworzyć hierarchię w przestrzeni 3D.
- Zadbaj o to, aby tekst był czytelny na tle użytkownika: grubsze kroje pisma zapewniają większy kontrast. Dostosuj je do kolorów, oświetlenia i złożoności otoczenia. Pamiętaj, że jaśniejsze wartości tekstu pomagają zachować czytelność na przewodowych okularach XR.
- Używaj adaptacyjnej typografii: panele mogą być zbyt blisko, zbyt daleko lub pod niewygodnym kątem widzenia dla użytkownika.
- Ogranicz tekst dołączony do poruszających się obiektów: może to powodować chorobę lokomocyjną.
Dostępna typografia w XR
- Wybieraj czcionki, które są czytelne: wybieraj czcionki z wyraźnymi kształtami liter przy małych rozmiarach i z dużej odległości.
- Używaj tekstu z wielkością liter jak w zdaniu: tekst z wielkością liter jak w zdaniu jest łatwiejszy do odczytania niż tekst pisany wielkimi literami.
- Ogranicz długość wiersza: staraj się, aby wiersze były krótsze, co poprawi czytelność.
- Wybieranie kolorów zapewniających dostępność: używaj kombinacji kolorów, które są czytelne dla użytkowników z zaburzeniami widzenia barw.
- Unikaj przeładowania: pozostaw dużo miejsca wokół tekstu.
- Zezwalaj na skalowanie tekstu: umożliwia użytkownikom dostosowywanie rozmiaru tekstu do ich indywidualnych potrzeb.
OpenXR™ i logo OpenXR są znakami towarowymi należącymi do The Khronos Group Inc. i są zarejestrowane jako znaki towarowe w Chinach, Unii Europejskiej, Japonii i Wielkiej Brytanii.