Jeśli masz aplikację na Androida i chcesz zachować jej styl wizualny, możesz utrzymać ten język projektowania na Androidzie XR. 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.
Aplikacje mobilne 2D lub aplikacje na duże ekrany Androida mogą korzystać z funkcji Full Space z bardzo niewielkim dodatkowym nakładem pracy programistycznej. Aby uzyskać duży wpływ w XR, rozważ przestrzeń w panelach i tworzenie UI w przestrzeni. Aby ścieżki użytkowników były bardziej wciągające, rozważ dodanie modeli 3D i środowisk.
Jeśli masz aplikację Unity, Open XR lub WebXR lub ją tworzysz, możesz stosować dowolny język projektowania. Dzięki rekomendacjom dotyczącym projektowania zawartym w Material Design możesz stosować kolory, odstępy, skalę, przyciski i typografię.
Jak przetestować projekt graficzny aplikacji
Testowanie projektu wizualnego aplikacji jest kluczowe, aby zapewnić użytkownikom wygodne i dostępne wrażenia. Oto jak przeprowadzić testy na różnych platformach i w różnych środowiskach XR.
Używanie emulatorów, symulatorów i prawdziwych urządzeń
- Jeśli tworzysz aplikację na Androida, przetestuj ją w emulatorze Androida XR. Pomoże Ci to wykrywać potencjalne problemy i szybko iterować bez fizycznego urządzenia.
Lista kontrolna testowania projektu wizualnego
- Sprawdź, czy animacje i ruchy nie powodują choroby lokomocyjnej. Sprawdź, czy przejścia są płynne, a częstotliwość wyświetlania klatek jest stabilna i czy ruch jest przewidywalny.
- 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. Aby uzyskać pełny obraz, uwzględnij użytkowników o różnym doświadczeniu w zakresie XR i różnych zdolnościach wzrokowych.
Docelowe urządzenia 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ą precyzję, 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 piksele
- Aby zapewnić prawidłowe interakcje, cele kursora w różnych elementach 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, a szczególnie dla tych, którzy korzystają z 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 komponentami 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óżniać elementy interaktywne i unikać przypadkowego ich wybierania.
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 niespokrewne – oddzielić.
- 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 gęściej niż przyciski w oknie.
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 przelicznika 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ć optymalną wygodę, umieść główne treści w polu widzenia 41°, aby użytkownicy nie musieli ruszać głową, aby 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ć.
- Full Space: domyślnie aplikacje uruchamiają się w tej samej pozycji, w której były w aplikacji Home. Możesz użyć logiki przestrzennej, aby umieszczać panele na podstawie pozycji użytkownika, ale zalecamy odległość odpalania wynoszącą 1,75 metra.
Gdy aplikacja znajduje się w odległości 1,75 metra 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ę w 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 nadmiarową ilością szczegółów. 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 interfejs 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ż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 w XR
Czytelność czcionki ma kluczowe znaczenie dla komfortu użytkowników 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 dla zmiennych 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żywaj wskazówek głębi i skali, aby tworzyć 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 elastycznej typografii: panele mogą być zbyt blisko lub zbyt daleko od siebie, a także pod niewygodnymi kątami.
- Ogranicz tekst dołączony do obiektów ruchomych: może to wywołać chorobę lokomocyjną.
Dostępna typografia w XR
- Wybieranie czcionek pod kątem czytelności: nadawaj priorytet czcionkom, które mają czytelne kształty liter w małych rozmiarach i z dużej odległości.
- Używaj wielkości liter jak w zdaniu: tekst zapisany wielką literą jest łatwiejszy do czytania niż tekst zapisany tylko 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 ze ślepotą barw.
- Unikaj przepełnienia: zostaw tekstowi miejsce na oddech.
- Zezwalaj na skalowanie tekstu: użytkownicy mogą dostosować rozmiar tekstu do swoich potrzeb.