Szkicowanie układów

Szkicowanie układów to proces projektowania struktury i przepływu informacji, które chcesz komunikować poprzez UI w różnych przepływach pracy. Ten krytyczny krok w poradniku pozwala na iterację w układzie elementów UI, odkrywanie punktów bólu i poprawę doświadczeń gracza, zanim zainwestujesz czas i zasoby w problematyczny projekt, który nie działa w Twoim doświadczeniu.

Używając przykładowego doświadczenia laser tag .rbxl jako odniesienia, ta część programu nauczania interfejsu użytkownika pokazuje, jak zorganizować swoje elementy UI na ekranie, w tym wskazówki dotyczące:

• Planowania hierarchii wizualnej dla swojego UI, która intuicyjnie prowadzi graczy do funkcji i informacji, które potrzebują, aby odnieść sukces w Twoim doświadczeniu.
• Blokowania elementów UI podstawowymi kształtami w celu przeglądu kompozycji elementów UI wraz z podstawowym UI Roblox i kontrolkami dotykowymi.
• Rozwijania przepływów użytkowników, aby uwzględnić niezbędne działania, które gracze muszą podjąć, aby osiągnąć swoje cele.

Po ukończeniu tej sekcji nauczysz się, jak skonstruować i skonfigurować swoje UI w Studio, które odpowiada Twojemu stylowi artystycznemu i szkieletom.

Zaplanuj hierarchię wizualną

Hierarchia wizualna to struktura organizacyjna, która podkreśla elementy UI według ich ważności. Planowanie hierarchii wizualnej dla różnych przepływów pracy w Twoim doświadczeniu jest ważne, ponieważ zapewnia graczom sukces w osiąganiu ich celów, co jest szczególnie istotne w szybkiej rozgrywce w doświadczeniach strzelanek pierwszoosobowych, w których cele zmieniają się z chwili na chwilę.

Efektywne hierarchie wizualne prowadzą graczy przez funkcje i informacje, które potrzebują, aby spełnić wymagania rozgrywki, zgodnie z tym, gdzie naturalnie patrzą na ekran, aby zakończyć przepływy pracy. Na przykład, hierarchia wizualna przykładowego doświadczenia laser tag musi prowadzić graczy przez następujące kategorie elementów UI podczas nawigacji po mapie i tagowania graczy z drużyny przeciwnika:

1. Informacje o celu doświadczenia.
2. Informacje o blasterze.
3. Informacje o stanie gracza.

Lokalizacja każdej z tych kategorii na ekranie w ostatecznym projekcie podkreśla ich ważność:

• Pierwsza kategoria jest blisko góry, ponieważ zawiera elementy UI, które mają największe znaczenie dla wygrania gry.
• Druga kategoria zajmuje większość miejsca na ekranie w środku, ponieważ działa jako punkt centralny, przyciągający uwagę graczy do akcji w przestrzeni 3D, i ma największe znaczenie dla gry.
• Trzecia kategoria jest blisko boków, ponieważ gracze mogą czytać te informacje peryferyjne, nie odwracając uwagi od rozgrywki.

Dla niektórych gatunków doświadczeń wystarczy wyświetlić jedną kategorię informacji na raz, ponieważ to jedyny rodzaj informacji ważny dla gracza w tym przepływie pracy. Jednak w doświadczeniach strzelanek pierwszoosobowych, gracze muszą widzieć elementy UI z wielu kategorii jednocześnie, ponieważ wszystkie one dostarczają informacji, które są potrzebne do odniesienia sukcesu, takie jak wynik drużyny, czas oczekiwania na blaster i czy zostali oznaczeni na runde.

Planując hierarchię wizualną dla przepływów pracy w swoim doświadczeniu, rozważ następujące:

• Jeśli grupujesz elementy UI z różnych kategorii razem w całym ekranie, gracze nie będą wiedzieć, gdzie patrzeć, aby znaleźć to, czego potrzebują. Aby pomóc graczom w nawigacji po Twoim doświadczeniu, grupuj elementy UI z tej samej kategorii razem.
• Jeśli masz zbyt wiele kategorii na ekranie jednocześnie, gracze mogą nie wiedzieć, na jakie informacje powinni zwrócić uwagę. Aby uniknąć przytłoczenia graczy bałaganem, wyświetlaj elementy UI kontekstowo dla różnych przepływów pracy.
• Podobnie, jeśli jest zbyt wiele elementów UI w jednej kategorii, może to rozproszyć uwagę graczy, co utrudni im zrozumienie, jak wykonać czynność lub proces. Z tego powodu ważne jest, aby wykorzystać swój styl artystyczny do podkreślenia idealnej kolejności interakcji.

Pełny przegląd hierarchii wizualnej dla przykładowego doświadczenia laser tag przedstawia poniższa tabela:

Blokowanie elementów UI

Teraz, gdy masz na uwadze hierarchię wizualną, możesz zablokować poszczególne elementy UI przy użyciu podstawowych kształtów, aby przeglądać kompozycję swojego niestandardowego układu UI obok podstawowego UI Roblox na wielu urządzeniach. Ten proces pozwala zobaczyć, gdzie musisz zmodyfikować projekt, aby był efektywny na wszystkich rozmiarach ekranów, które gracze mogą używać do uzyskania dostępu do Twojego doświadczenia, takich jak urządzenia mobilne, tablety, laptopy i ekrany telewizorów.

Zanim zaczniesz, musisz dowiedzieć się, ile miejsca na ekranie jest dostępne dla Twoich niestandardowych elementów UI, biorąc pod uwagę podstawowe UI Roblox. Na przykład, domyślnie Roblox wyświetla następujące elementy UI w każdym doświadczeniu:

• Lista graczy w doświadczeniu.
• Pasek zdrowia postaci.
• Plecak postaci.
• Okno czatu.
• Przycisk przechwytywania.
• Menu popup emotek postaci.

Możesz wyłączyć dowolne z tych elementów, które nie spełniają wymagań rozgrywki Twojego doświadczenia, aby zaoszczędzić miejsce na ekranie dla Twojego niestandardowego UI. Na przykład, przykładowe doświadczenie laser tag nie wymaga plecaka, ponieważ gracze mają możliwość wyboru tylko jednego blastera. Jednak, jeśli gracze mogliby wybrać wiele blasterów jednocześnie, doświadczenie mogłoby wyłączyć to podstawowe UI, aby upewnić się, że jest zawsze miejsce na selektor blastera, gdy gracze respawnują, a następnie dostarczyć inne miejsce do wyboru z inwentarza.

Oprócz podstawowego UI Roblox, musisz również uwzględnić niezbędne miejsce na ekranie dla domyślnych kontrolek dotykowych Roblox. Na przykład, gdy gracze uzyskują dostęp do Twojego doświadczenia z urządzenia mobilnego, w lewym dolnym rogu ekranu wyświetla się wirtualny joystick, a w prawym dolnym rogu ekranu wyświetla się przycisk skoku. Umożliwia to graczom zawsze nawigowanie po Twoim doświadczeniu, nawet gdy nie mają dostępu do klawiatury lub kontrolera.

Uwzględniając zarówno niezbędne elementy UI podstawowego Roblox, jak i możliwość kontrolek dotykowych, możesz zablokować swoje niestandardowe elementy UI w jednym projekcie, który jest adaptacyjny na różnych urządzeniach. Jest to ważne, ponieważ oznacza, że nie musisz utrzymywać oddzielnych wersji UI podczas aktualizacji doświadczenia.

Aby zobrazować tę metodę, przeglądaj poniższe dwa obrazy przedstawiające, jak przykładowe doświadczenie laser tag blokuje niestandardowe elementy UI dla urządzeń mobilnych i PC. Oba obrazy zawierają:

• Podstawowe kształty, aby reprezentować niestandardowe UI, ponieważ pozwala to projektowi łatwo przejść przez kilka iteracji przed osiągnięciem ostatecznego projektu.
• Odcienie szarości, które umożliwiają oczom śledzenie informacji bez rozpraszania kolorowym tłem.
• Otwarty stan okna czatu i listę aktywnych graczy, aby zobaczyć, ile miejsca zajmują na ekranie.
• Miejsce dla elementów sterujących mobilnych, nawet jeśli nie są one konieczne dla urządzeń PC.

Kiedy projektujesz swoje układy w ten sposób, myśląc o tym, ile elementów UI może istnieć na ekranie w tym samym czasie, zabezpieczasz przyszłość dla wszystkich potencjalnych układów zgodnie z urządzeniami i przepływami pracy graczy.

Podczas blokowania elementów UI dla swoich układów, rozważ następujące:

• Gdzie i jak blokujesz swoje UI może mieć wpływ na kompozycję Twoich układów. Dąż do równowagi i symetrii w ilości i rozmiarze swoich niestandardowych elementów UI obok podstawowego UI Roblox.
• Interakcja z elementami UI, które są daleko od dolnych rogów niektórych urządzeń mobilnych i tabletów, jest niewygodna lub niemożliwa. Umieszczaj interaktywne elementy w łatwo dostępnych strefach blisko naturalnej pozycji odpoczynku dla kciuków.
• Kiedy gracze nawigują przez twoje środowisko, przestrzeń 3D może stać się rozpraszająca dla twojego UI na ekranie. Testuj swoje układy w różnych możliwych tle aby zapewnić, że twoje elementy UI pozostają przejrzyste i czytelne.

Rozwijaj przepływy użytkowników

Przepływ użytkowników to zbiór ścieżek, które gracze mogą podjąć w doświadczeniu, aby ukończyć zadanie, takie jak wybór broni, zakup przedmiotu lub wyleczenie postaci. Przepływy użytkowników zazwyczaj zaczynają się tam, gdzie spodziewasz się, że gracze rozpoczną zadanie, a kończą na ostatecznej akcji lub osiągnięciu, które gracze osiągają na końcu zadania. Dodatkowo, efektywne przepływy użytkowników uwzględniają również nietypowe ścieżki, które gracze mogą chcieć podjąć, aby osiągnąć ten sam cel.

Poniższy diagram przepływu przedstawia przepływ użytkownika gracza wchodzącego i grającego w przykładowe doświadczenie laser tag. Kiedy gracz otwiera doświadczenie, dołącza do lobby. Jeśli runda jeszcze się nie rozpoczęła, czeka, aż rozpocznie się pętla rundy, w przeciwnym razie dołącza do drużyny, która obecnie gra w grę. Jeśli nie została spełniona końcowa warunek, taki jak osiągnięcie limitu czasowego lub oznaczenie 10 graczy z drużyny, gracze wybierają swój blaster i doświadczeni główną rozgrywkę oznaczania lub bycia oznaczanym przez drużynę przeciwnika, wyposażając nowy blaster w arenie lub respawnując po tym, jak zostaną oznaczeni. Po spełnieniu warunku końcowego gracze kończą rundę i ponownie dołączają do lobby.

Ważne jest, aby rozwijać przepływy użytkowników dla wszystkiego, co gracze mogą zrobić w Twoim doświadczeniu, ponieważ pozwala to ocenić, gdzie i jak chcesz, aby ukończyli zadania, oraz przewidzieć, gdzie możesz złagodzić punkty bólu dla każdego, kto podąża własną ścieżką. Na przykład, jeśli miałbyś opracować dodatkowe przepływy użytkowników dla przykładowego doświadczenia laser tag, co się stanie, gdy gracze:

• Zrezygnują z rundy przed spełnieniem warunku końcowego?
• Opuszczą doświadczenie podczas dołączania do drużyny?
• Otrzymają telefon w trakcie rundy?
• Stracą połączenie z rundą na mniej niż 15 sekund?

Wizualizując wszystkie potencjalne działania, które gracze mogą podjąć lub scenariusze, które mogą wystąpić, podczas ukończenia zadań, możesz lepiej określić, jak układ swoich elementów UI negatywnie wpływa na ich doświadczenie, a następnie wprowadzić zmiany przed wdrożeniem swoich projektów w Studio. Jeśli zadania wydają się intuicyjne, nieintruzywne i wygodne, gracze są bardziej skłonni spędzać czas w Twoim doświadczeniu i wracać w późniejszym czasie.

Podczas rozwijania przepływów użytkowników dla swojego doświadczenia rozważ następujące:

• To, co chcesz, aby gracze robili w Twoim doświadczeniu, może być zupełnie inne od tego, co oni chcą robić. Najlepiej jest testować swoje układy z różnymi typami graczy, aby zrozumieć ścieżki, które chcą podjąć, aby osiągnąć swoje cele.
• Diagramy przepływu mogą stać się trudne do przeczytania i nieskuteczne, jeśli próbują uchwycić wiele scenariuszy jednocześnie w diagramie. Aby skupić swoją uwagę na każdym zadaniu, ogranicz diagramy przepływu do jednego głównego zadania na raz.
• Wzory interakcji różnią się w zależności od tego, czy gracze używają kontrolek dotykowych, gamepadów, czy myszek komputerowych do interakcji z Twoim doświadczeniem. Jeśli projektujesz dla wielu urządzeń, opracuj unikalne przepływy użytkowników dla każdego urządzenia, aby zidentyfikować punkty bólu i uprościć przepływy pracy.

Po sfinalizowaniu projektu swoich szkieletów nadszedł czas, aby przejść do Studio i ożywić swoje UI.