Wytyczne dotyczące projektowania adaptacyjnego

Projektowanie adaptacyjne zapewnia, że Twoje gry Roblox wyglądają i działają świetnie na różnych rozmiarach ekranów, orientacjach i typach wejścia. Wykraczając poza tradycyjne kategorie urządzeń, takie jak urządzenia mobilne, stacjonarne i konsole, dzisiejsze urządzenia mają znacznie bardziej dynamiczne możliwości, umożliwiając płynne przejście między różnymi wejściami i wyświetlaczami. Wyobraź sobie tablet, który obsługuje wiele orientacji (pozioma i pionowa), wiele typów wejścia (dotyk, gamepad, mysz i klawiatura) oraz różne rozmiary wyświetlaczy (wyświetlacz natywny oraz rozciągający się na duży telewizor).

Te wytyczne pomogą Ci dostarczyć gry klasy premium, które inteligentnie dostosowują się do dowolnego urządzenia i typu wejścia, aby dotrzeć do szerokiej publiczności. Więcej szczegółów na temat przepływów pracy i interfejsów API, które mogą pomóc w implementacji tych wytycznych, znajdziesz w przewodniku rozwoju międzyplatformowego.

Zasady podstawowe

Każda gra jest wyjątkowa, ale przestrzeganie kilku kluczowych zasad pomoże Ci dostarczyć intuicyjną i dopracowaną grę dla każdego gracza na każdym urządzeniu.

1. Płynność wejścia — Upewnij się, że Twój interfejs użytkownika działa z różnymi typami wejścia, takimi jak gamepad, dotyk, klawiatura i kontrolery VR. Obejmuje to zmianę układu UI i dostarczanie pomocniczych wskazówek w zależności od rodzaju wejścia.
2. Responsywny układ — Zprojektuj układy interfejsu użytkownika, które automatycznie dostosowują się do różnych rozmiarów ekranów i orientacji.
3. Dynamiczne rozmiarowanie — Skaluje elementy UI w razie potrzeby, aby dopasować je do różnych wymiarów ekranu.
4. Czytelność i wizualna klarowność — Upewnij się, że wszystkie komponenty UI, w tym tekst i przyciski, są łatwe do przeczytania i wizualnie klarowne.

Płynność wejścia

Upewnij się, że Twoja gra sprawia wrażenie naturalnej na różnych urządzeniach wejściowych, w tym gamepadach, myszach/klawiaturach, dotyku i VR.

• Zaprojektuj kontrolery i skróty dla wielu wejść — Upewnij się, że każda akcja w Twojej grze może być uruchamiana za pomocą przycisków gamepada/klawiszy kierunkowych, skrótów klawiaturowych i dotyku. Kontrolki powinny być wizualnie i funkcjonalnie skupione na nawigacji za pomocą kierunkowego pada lub gałki. Przetestuj każdy tryb wejścia, aby kluczowa rozgrywka, menu i UI były dostępne i naturalne, niezależnie od urządzenia.
• Zapewnij wizualne informacje zwrotne w zależności od typu wejścia — Aktualizuj etykiety UI, monity i podpowiedzi, aby odzwierciedlić aktywną metodę wejścia, na przykład pokazując Naciśnij A na gamepadzie, Skręć na dotyku lub ShiftA na klawiaturze. Używaj ikon i języka znanych graczom z każdej platformy.

Responsywny układ

Układ UI Twojej gry powinien dostosowywać się do różnych rozmiarów ekranów i orientacji. Na dużym monitorze komputerowym masz dużo przestrzeni, aby pokazać wszystkie przyciski na raz. Na małym ekranie telefonu wszystkie te przyciski będą wyglądać na zagracone i bałaganiarskie.

• Dostosuj układy do rozmiaru i orientacji ekranu — Używaj responsywnych wzorców, aby Twój interfejs użytkownika przeorganizowywał się lub kondensował odpowiednio. Na przykład przenieś mniej ważne przyciski do zwijanego menu ("hamburger"/przycisk menu) na małych ekranach, podczas gdy na komputerach stacjonarnych pokaż je w pełni. Twój interfejs użytkownika powinien płynnie dostosowywać się do orientacji poziomej i pionowej, jeśli je obsługuje.
• Implementuj komponenty układu, które reagują na rozmiar rodzica — Buduj panele UI i widgety, które dostosowują rozmiar lub położenie na podstawie ich kontenera rodzic. Na przykład, używaj układów podzielonego widoku, w których boczne panele zwijają się na wąskich ekranach, ale rozszerzają na szerszych.

Dynamiczne rozmiarowanie

To dotyczy rozmiaru Twoich elementów UI, a nie tylko ich położenia. Twój interfejs użytkownika powinien się powiększać lub pomniejszać w zależności od ekranu, aby wszystko pozostało odpowiedniego rozmiaru i zawsze było łatwe do interakcji.

• Wspieraj rozmiaranie oparte na zawartości i automatyczne zawijanie — Zaimplementuj zachowania automatycznego rozmiarowania: pozwól, aby pola tekstowe rosną lub kurczyły się wraz z zawartością, oraz wspieraj automatyczne zawijanie linii, aby etykiety nie wychodziły poza ekran ani nie stawały się nieczytelne w miarę zmiany rozmiaru ekranu.
• Umożliwiaj i respektuj preferencje użytkowników / dostępność — Pozwól, aby Twój interfejs użytkownika reagował na preferencje dotyczące skalowania tekstu lub interfejsu użytkownika określone przez użytkowników, łącząc te ustawienia bezpośrednio z rozmiarami elementów UI, aby zwiększone preferencje dostępności zawsze przekładały się na większy, bardziej czytelny interfejs użytkownika.

Czytelność i wizualna klarowność

Czy gracze mogą właściwie przeczytać Twój tekst na małym ekranie telefonu lub dużym telewizorze, który jest daleko od nich? Czy Twoje przyciski są łatwe do zauważenia na tle Twojego świata 3D?

• Wybieraj rozmiary i style czcionek dla małych ekranów — Zawsze wybieraj rozmiary czcionek, które są czytelne na urządzeniach mobilnych, a nie tylko na komputerach stacjonarnych. Testuj na rzeczywistych urządzeniach i upewnij się, że tekst jest czytelny w najmniejszym oczekiwanym rozmiarze. Unikaj nadmiernie dekoracyjnych lub cienkich czcionek.
• Zabezpiecz wysoki kontrast i wyraźną hierarchię wizualną — Używaj kolorów dla tekstu i tła, które zapewniają wystarczający kontrast, aby były czytelne w różnych warunkach oświetleniowych w grze. Stosuj silną hierarchię wizualną i spraw, aby kluczowe działania i etykiety wyróżniały się poprzez rozmiar, kolor lub położenie.

Ostateczne myśli

Adaptacyjność polega na spotkaniu graczy tam, gdzie są, czy to w ich rękach, na biurku, czy na dużym ekranie. Twórcy Roblox, którzy tworzą zgodnie z tymi wytycznymi, dostarczają znaczące, dostępne i zabawne gry międzyplatformowe. Zacznij adaptować już dziś i pozwól swoim kreacjom rozwijać się!