Szkicowanie układów

Szkicowanie układów to proces projektowania struktury i przepływu informacji, które chcesz przekazać za pomocą interfejsu użytkownika w różnych przepływach pracy. Ten krytyczny krok w samouczku pozwala na iterację układu elementów interfejsu użytkownika, odkrywanie problemów i poprawę doświadczenia gracza, zanim zainwestujesz czas i zasoby w problematyczny projekt, który nie działa w twojej grze.

Korzystając z przykładowej gry w laserowy tag w pliku .rbxl jako odniesienia, ta sekcja programu nauczania interfejsu użytkownika pokazuje, jak zorganizować elementy interfejsu użytkownika na ekranie, w tym wskazówki dotyczące:

• Planowania wizualnej hierarchii dla twojego interfejsu użytkownika, która intuicyjnie prowadzi graczy do funkcji i informacji, które są im potrzebne, aby odnieść sukces w twojej grze.
• Blokowania elementów interfejsu użytkownika za pomocą podstawowych kształtów, aby przejrzeć kompozycję elementów interfejsu użytkownika obok podstawowego interfejsu użytkownika Roblox i kontrolerów dotykowych.
• Opracowywania 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ć swój interfejs użytkownika w Studio, który będzie zgodny z twoim stylem artystycznym i szkicami.

Zaplanuj wizualną hierarchię

Wizualna hierarchia to struktura organizacyjna, która podkreśla elementy interfejsu użytkownika według ich kolejności ważności. Planowanie wizualnej hierarchii dla różnych przepływów pracy w twojej grze jest ważne, ponieważ przygotowuje graczy do sukcesu w osiąganiu ich celów, co jest szczególnie istotne w szybkim tempie gier typu first-person shooter, w których cele zmieniają się z chwili na chwilę.

Skuteczne wizualne hierarchie prowadzą graczy przez funkcje i informacje, które są im potrzebne, aby spełnić wymagania dotyczące rozgrywki, zgodnie z tym, gdzie naturalnie patrzą na ekran, aby ukończyć przepływy pracy. Na przykład wizualna hierarchia przykładowej gry w laserowy tag musi prowadzić graczy przez następujące kategorie elementów interfejsu użytkownika, gdy nawigują po mapie i oznaczają graczy z drużyny przeciwnika:

1. Informacje o celu gry.
2. Informacje o blasterze.
3. Informacje o stanie gracza.

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

• Pierwsza kategoria znajduje się blisko góry, ponieważ zawiera elementy interfejsu użytkownika, które mają największe znaczenie dla wygrania gry.
• Druga kategoria zajmuje większość przestrzeni ekranu w środku, ponieważ działa jako punkt centralny, aby przyciągnąć uwagę graczy do akcji w przestrzeni 3D, i ma największe znaczenie dla grania w grę.
• Trzecia kategoria znajduje się blisko boków, ponieważ gracze mogą czytać te peryferyjne informacje, nie odwracając uwagi od rozgrywki.

W przypadku niektórych gatunków gier wystarczy wyświetlić jedną kategorię informacji na raz, ponieważ jest to jedyny typ informacji, który jest ważny dla gracza w danym przepływie pracy. Jednak w grach typu first-person shooter gracze muszą widzieć elementy interfejsu użytkownika z wielu kategorii jednocześnie, ponieważ wszystkie dostarczają informacji, które są potrzebne graczowi do odniesienia sukcesu, takich jak wynik ich drużyny, czas odnowienia dla ich blastera i czy zostali oznaczeni jako wyeliminowani z rundy.

Podczas planowania wizualnej hierarchii dla przepływów pracy w twojej grze, rozważ następujące kwestie:

• Jeśli grupujesz elementy interfejsu użytkownika z różnych kategorii razem na ekranie, gracze nie będą wiedzieć, gdzie szukać tego, czego potrzebują. Aby pomóc graczom w nawigacji w twojej grze, grupuj elementy interfejsu użytkownika z tej samej kategorii razem.
• Jeśli na ekranie jest zbyt wiele kategorii w tym samym czasie, gracze mogą nie wiedzieć, na jakie informacje powinni zwrócić uwagę. Aby uniknąć przytłoczenia graczy bałaganem, wyświetlaj elementy interfejsu użytkownika kontekstowo dla różnych przepływów pracy.
• Podobnie, jeśli jest zbyt wiele elementów interfejsu użytkownika w każdej kategorii, może to odwrócić uwagę graczy od zrozumienia, jak wykonać akcję lub proces. Z tego powodu ważne jest, aby używać swojego stylu artystycznego, aby zapewnić wizualny nacisk na idealne kolejności interakcji.

Aby uzyskać pełny przegląd wizualnej hierarchii dla przykładowej gry w laserowy tag, zobacz poniższą tabelę:

Blokowanie elementów interfejsu użytkownika

Teraz, gdy masz na uwadze wizualną hierarchię, możesz blokować poszczególne elementy interfejsu użytkownika za pomocą podstawowych kształtów, aby przejrzeć kompozycję swojego niestandardowego układu interfejsu użytkownika obok podstawowego interfejsu użytkownika Roblox na różnych urządzeniach. Ten proces pozwala zobaczyć, gdzie musisz zmodyfikować swój projekt, aby był skuteczny na wszystkich rozmiarach ekranów, które gracze mogą używać do uzyskania dostępu do twojej gry, takich jak na urządzeniach mobilnych, tabletach, laptopach i telewizorach.

Zanim zaczniesz, musisz ustalić, ile przestrzeni ekranowej jest dostępnej dla twoich niestandardowych elementów interfejsu użytkownika, uwzględniając podstawowy interfejs użytkownika Roblox. Na przykład, domyślnie Roblox wyświetla następujące elementy interfejsu użytkownika w każdej grze:

• Lista graczy w grze.
• Pasek zdrowia postaci.
• Plecak postaci.
• Okno czatu.
• Przycisk przechwytywania.
• Menu wyskakujące z emotkami postaci.

Możesz wyłączyć dowolne z tych elementów, które nie spełniają wymagań dotyczących rozgrywki w twojej grze, aby zaoszczędzić miejsce na ekranie dla twojego niestandardowego interfejsu użytkownika. Na przykład, przykładowa gra w laserowy tag nie wymaga plecaka, ponieważ gracze mają możliwość wyboru tylko jednego blastera. Jednak jeśli gracze mogliby wybierać wiele blasterów jednocześnie, gra mogłaby wyłączyć ten podstawowy interfejs użytkownika, aby zapewnić zawsze miejsce dla wyboru blastera, gdy gracze respawnują, a następnie zapewnić inne miejsce do wyboru z inwentarza.

Oprócz podstawowego interfejsu użytkownika Roblox, musisz również uwzględnić niezbędną przestrzeń ekranową dla domyślnych kontrolerów dotykowych Roblox. Na przykład, gdy gracze uzyskują dostęp do twojej gry za pomocą urządzenia mobilnego, w lewym dolnym rogu ekranu wyświetla się wirtualny joystick, a w prawym dolnym rogu ekranu wyświetla się przycisk skoku. Zapewnia to, że gracze zawsze mogą nawigować w twojej grze, nawet gdy nie mają dostępu do klawiatury lub kontrolera.

Uwzględniając zarówno elementy interfejsu użytkownika Roblox, które są niezbędne do rozgrywki w twojej grze, jak i możliwość kontrolerów dotykowych, możesz blokować swoje niestandardowe elementy interfejsu użytkownika w jednym projekcie, który jest adaptacyjny na różnych urządzeniach. Jest to ważne, ponieważ oznacza, że nie musisz utrzymywać oddzielnych wersji swojego interfejsu użytkownika podczas aktualizacji gry.

Aby zademonstrować tę metodę, przejrzyj poniższe dwa obrazy, jak przykładowa gra w laserowy tag blokuje niestandardowe elementy interfejsu użytkownika zarówno dla urządzeń mobilnych, jak i PC. Oba obrazy zawierają:

• Podstawowe kształty, aby reprezentować niestandardowy interfejs użytkownika, ponieważ pozwala to na łatwe przechodzenie przez kilka iteracji przed osiągnięciem ostatecznego projektu.
• Szaro-skalowe kolory, które umożliwiają oku śledzenie informacji bez rozpraszania kolorowym tłem.
• Otwarty stan okna czatu i lista aktywnych graczy oraz okno czatu, aby zobaczyć, ile miejsca zajmują na ekranie.
• Miejsce na kontrolery mobilne, 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 interfejsu użytkownika może istnieć na ekranie w tym samym czasie, zabezpieczasz się na przyszłość dla wszystkich potencjalnych układów zgodnie z urządzeniami i przepływami pracy graczy.

Podczas blokowania elementów interfejsu użytkownika w swoich układach, rozważ następujące kwestie:

• Gdzie i jak blokujesz swój interfejs użytkownika może wpłynąć na kompozycję twoich układów. Dąż do równowagi i symetrii w ilości i rozmiarze swoich niestandardowych elementów interfejsu użytkownika obok podstawowego interfejsu użytkownika Roblox.
• Interakcja z interfejsem użytkownika, który znajduje się daleko od dolnych rogów niektórych urządzeń mobilnych i tabletów, jest niewygodna lub niemożliwa. Umieść interaktywne elementy w łatwo dostępnych strefach blisko naturalnej pozycji odpoczynku dla kciuków.
• Gdy gracze nawigują w swoim otoczeniu, przestrzeń 3D może odwracać uwagę od twojego interfejsu użytkownika na ekranie. Testuj swoje układy w różnych możliwych tle, aby upewnić się, że elementy interfejsu użytkownika na ekranie pozostają wyraźne i czytelne.

Opracuj przepływy użytkowników

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

Poniższy diagram przepływu przedstawia przepływ użytkownika gracza wchodzącego i grającego w przykładową grę w laserowy tag. Gdy gracz otwiera grę, 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 aktualnie gra w grę. Jeśli warunek końcowy nie został spełniony, na przykład osiągnięcie limitu czasowego lub wyeliminowanie 10 graczy z drużyny, gracze wybierają swój blaster i doświadczają głównej rozgrywki polegającej na oznaczaniu lub byciu oznaczonym przez drużynę przeciwnika, wyposażając nowy blaster w arenie lub respawnując po tym, jak zostaną oznaczeni. Gdy gracze spełnią warunek końcowy, kończą rundę i ponownie dołączają do lobby.

Ważne jest, aby opracować przepływy użytkowników dla wszystkiego, co gracze mogą zrobić w twojej grze, ponieważ pozwala to ocenić, gdzie i jak chcesz, aby ukończyli zadania, oraz przewidzieć, gdzie możesz złagodzić problemy dla każdego, kto podąża swoją własną ścieżką. Na przykład, jeśli miałbyś opracować dodatkowe przepływy użytkowników dla przykładowej gry w laserowy tag, co się stanie, gdy gracze:

• Zrezygnują z rundy przed spełnieniem warunku końcowego?
• Opuści grę 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ą się zdarzyć graczom podczas wykonywania zadań, możesz lepiej określić, jak układ twoich elementów interfejsu użytkownika negatywnie wpływa na ich doświadczenie, a następnie wprowadzić poprawki przed wdrożeniem swoich projektów w Studio. Jeśli zadania wydają się intuicyjne, nieinwazyjne i wygodne, gracze są bardziej skłonni spędzać czas w twojej grze i wracać w późniejszym terminie.

Podczas opracowywania przepływów użytkowników dla swojej gry, rozważ następujące kwestie:

• To, co chcesz, aby gracze robili w twojej grze, a to, co oni chcą robić, może być całkowicie różne. Najlepiej testować swoje układy z wieloma typami graczy, aby zrozumieć ścieżki, które chcą podjąć, aby osiągnąć swoje cele.
• Diagramy przepływu mogą stać się trudne do odczytania 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.
• Wzorce interakcji różnią się w zależności od tego, czy gracze używają kontrolerów dotykowych, gamepadów, czy myszy komputerowych do interakcji z twoją grą. Jeśli projektujesz dla wielu urządzeń, opracuj unikalne przepływy użytkowników dla każdego urządzenia, aby zidentyfikować problemy i uprościć przepływy pracy.

Po sfinalizowaniu projektu swoich szkiców, czas przejść do Studio i ożywić swój interfejs użytkownika.