Wireframe Twoje layouty

Wireframing your layouts to proces projektowania struktury i przepływu informacji, które chcesz komunikować poprzez UI w różnych workflows. Ten krytyczny krok tutorialu pozwala ci na powtarzanie układu elementów UI, odkrywanie punktów bólu i poprawę doświadczenia gracza, zanim inwestujesz czas i zasoby w problematyczny projekt, który nie działa dla twojego doświadczenia.

Używając do referencji świąteczki laserowej.rbxl pliku jako przykładu, ta sekcja kursu interfejsu użytkownika pokazuje, jak strukturyzować elementy UI na ekranie, w tym kierunki:

• Planowanie wizualnej hierarchii dla twojej interfejsu, która intuicyjnie prowadzi graczy do funkcji i informacji, których potrzebują, aby odnieść sukces w twoim doświadczeniu.
• Zablokowanie w elementach UI z podstawowymi kształtami, aby przeglądać kompozycję swoich elementów UI wraz z podstawowymi sterowaniami elementy sterujące.
• Rozwój użytkowników przepływów, aby uwzględnić niezbędne działania graczy, aby osiągnąć ich cele.

Po zakończeniu tej sekcji dowiesz się, jak konstruować i skonfigurować swoją interfejs użytkownika w Studio, który poszanuje twój styl artystyczny i ramy.

Planuj Hierarchię Wizualną

Hierarchia wizualna to struktura organizacyjna, która podkreśla elementy interfejsu według ich kolejności ważności. Planowanie hierarchii wizualnej dla różnych workflows w Twoim doświadczeniu jest ważne, ponieważ ustawia graczy na sukces w osiąganiu ich celów, co jest szczególnie niezbędne dla szybkiego gameplay'u w grach strzelankowych w pierwszej osobie, w których cele zmieniają się z chwili na chwilę.

Skuteczne hierarchie wizualne przewodzą graczom przez funkcje i informacje, które potrzebują, aby spełnić wymagania Twojego gameplay'u zgodnie z tym, gdzie naturalnie wyglądają na ekranie, aby ukończyć workflows. Na przykład wizualna hierarchia doświadczenia laserowego musi przewodzić graczom poprzez następujące kategorie elementów UI, gdy nawigują po mapie i oznaczają graczy na zespoie wrogim:

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

Lokalizacja każdej z tych kategorii na ekranie w końcowym podsumowaniu designu pokazuje ich kolejność ważności:

• Pierwsza kategoria jest bliska górnej , ponieważ zawiera elementy interfejsu, które mają największe znaczenie dla tego, jak wygrać grę.
• Druga kategoria zajmuje większość miejsca na ekranie w pobliżu środka , ponieważ działa jako punkt fokusowy, aby przyciągnąć uwagę graczy na akcję w przestrzeni 3D, a ma ona największe znaczenie dla gry.
• Trzecia kategoria jest bliska stronom , ponieważ gracze mogą czytać tę peryferalną informację bez odwracania uwagi od rozgrywka.

Dla niektórych gatunków doświadczeń tylko musisz wyświetlić jedną kategorię informacji na raz, ponieważ jest to jedyny rodzaj informacji, który jest ważny dla gracza podczas tego workflow. Ale dla doświadczeń strzelających w pierwszej osobie gracze muszą widzieć elementy interfejsu użytkownika z wielu kategorii jednocześnie, ponieważ w

Planując wizualną hierarchię dla workflowów w własnym doświadczeniu, zastanów się nad obserwujekwestiami:

• Jeśli połączysz elementy interfejsu użytkownika z różnych kategorii na całym ekranie, gracze nie będą wiedzieć, gdzie szukać tego, czego potrzebują. Aby pomóc graczom w przeglądaniu swojego doświadczenia, połącz elementy interfejsu użytkownika z tej samej kategorii .
• Jeśli masz zbyt wiele kategorii na ekranie w jednym momencie, gracze mogą nie wiedzieć, na co zwrócić uwagę. Aby uniknąć przytłaczającej graczy przez okropny kłopot, wyświetlaj elementy interfejsu użytkownika kontekstowo dla różnych workflowów .
• Podobnie, jeśli jest zbyt wiele elementów interfejsu per kategoria, może to odwrócić graczy od zrozumienia, jak zakończyć akcję lub proces. Z tego powodu ważne jest, aby użyć swojego stylu artystycznego, aby zapewnić wizualne akcenty dla twoich ideałowych zleceń interakcji .

Aby uzyskać pełen przegląd wizualnej hierarchii dla doświadczenia laserowego tagu próbkowego, zobacz następujący tabela:

Zablokuj w elementach UI

Teraz, gdy masz wizualną hierarchię na uwadze, możesz blokować pojedyncze elementy interfejsu używając Robloxkształtów, aby przeglądać kompozycję swojego niestandardowego interfejsu użytkownika wraz z głównym interfejsem użytkownika na wielu urządzeniach. Ten proces pozwala ci zobaczyć, gdzie musisz zmienić swój projekt, aby był skuteczny na wszyst

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

• Lista graczy w doświadczeniu.
• Barwa zdrowia znaku.
• Torebka znaku.
• Okienko czatu.
• Przycisk zrzutu.
• Wyskakujące menu emotikon postaci.

Możesz wyłączyć dowolne z tych elementów, które nie spełniają wymagań gameplay'owych własnego doświadczenia, aby zaoszczędzić miejsce na ekranie dla swojego wyposażenieużytkownika. Na przykład, doświadczenie laserowe samplera wymaga tylko plecaka, ponieważ gracze mają tylko możliwość wy

Oprócz głównego interfejsu użytkownika Roblox, musisz również rozważyć konieczną przestrzeń elementy sterującedla ekranu domyślnych sterowania dotykowego. Na przykład, gdy gracze uzyskują dostęp do swojego doświadczenia za pomocą urządzeniemobilnego, ekran w dolnym lewym rogu ekranu wyświetla wirtualny joystick, a przycisk skoku znaj

Poprzez uwzględnienie zarówno głównych elementów interfejsu użytkownika Roblox, które są niezbędne do gry w twojej własnej wersji, jak i możliwości elementy sterującedotykowymi, możesz zablokować w swoich własnych elementach interfejsu w jednym projekcie , który jest adaptacyjny w przypadku urządzeń. To ważne, ponieważ oznacza, że nie musisz utrzymywać osobnych wers

Aby pokazać ten metodę, zobacz następujące dwa obrazy tego, jak próbka laserowa tag doświadcza bloków w niestandardowych elementach interfejsu użytkownika dla obu urządzeń mobilnych i PC. Obie obrazy zawierają:

• Podstawowe kształty do przedstawienia niestandardowej interfejsu, ponieważ umożliwia projektowi łatwo przejść przez kilka cykli przed osiągnięciem ostatecznego projektu.
• Koloryzacja wielokolorowa, która umożliwia okowi śledzenie informacji bez dystrakcji przez kolorowy środowisko
• Otwarty stan okienka czatu i listy aktywnych graczy, aby zobaczyć, ile miejsca zajmuje ekran.
• Przestrzeń na sterowanie mobilne, nawet jeśli nie są one niezbędne dla urządzeń PC.

Gdy projektujesz swoje układy w ten sposób, myśląc o tym, ile elementów interfejsu może istnieć na ekranie jednocześnie, zabezpieczasz wszystkie potencjalne układy zgodnie z urządzonymi przez graczy urządziami i workflowami.

Gdy blokujesz elementy UI dla swoich układów, zastanów się nad obserwujekwestiami:

• Gdzie i jak blokujesz w swoim interfejsie użytkownika, może mieć wpływ na kompozycję swoich układów. Celebruj równowagę i symetrię w ilości i rozmiarze elementów interfejsu użytkownika wraz z rdzeniowym interfejsem użytkownika Roblox.
• Interakcja z UI, która jest daleka od kątów dolnych niektórych urządzeń mobilnych i tabletowych, jest niekomfortowa lub niemożliwa. Umieszczaj interaktywne elementy w łatwo dostępnych obszarach w pobliżu naturalnej pozycji odpoczynkowej dla palców.
• Gdy gracze przeglądają twoje środowisko, przestrzeń 3D może stać się rozpraszającą od twojej interfejsu użytkownika na ekranie. Testuj swoje układy przeciwko różnym możliwym tła , aby upewnić się, że twoje elementy interfejsu użytkownika na ekranie pozostaną czyste i legible.

Dla więcej informacji na temat tego, co należy rozważyć podczas projektowania i blokowania w swoich elementach interfejsu użytkownika dla wielu urządzeń, zobacz Pozycjonowanie i rozmiarowanie - czynniki krzyżowe.

Rozwój użytkowników

Flux użytkownika to zbiór ścieżek, które gracze mogą przejść w doświadczeniu, aby ukończyć zadanie, takie jak wybór broni, zakup przedmiotu lub uzdrowienie postaci. Używane płynne przepływy zwykle rozpoczynają się tam, gdzie oczekujesz, że gracze zaczną zadanie, i kończą się wraz z ostateczną akcją lub osiągnięciem grac

Poniższy rysunek przepływu pokazuje użytkownik przepływu użytkownika wchodzącego i grającego w doświadczenie laser tag. Gdy użytkownik otwiera doświadczenie, dołącza do lobby.

Ważne jest, aby rozwijać użytkownik przepływów dla wszystkiego, co gracze mogą zrobić w swoim doświadczeniu, ponieważ pozwala to na ocenę, gdzie i jak chcesz, aby ukończyć zadania, a przewidzieć, gdzie możesz zmniejszyć bólowe punkty dla każdego, kto podąża za swoją drogą. Na przykład, jeśli rozwój dodatkowych użytkownik przepływów dla doświadc

• Opuść rundę przed spełnieniem warunku końcowego?
• Opuścić grę podczas dołączania do zespołu?
• Otrzymać wezwanie telefoniczne w środku rundy?
• Stracić połączenie z rundy przez mniej niż 15 sekund?

Wizualizując wszystkie potencjalne działania graczy może podejmować lub scenariusze, które mogą się zdarzyć graczom podczas ukończenia zadań, możesz lepiej zrozumieć, jak układ swoich elementów UI negatywnie wpływa na ich doświadczenie, a następnie dokonaj dostosowań przed wdrożeniem swoich projektów w Studio. Jeśli zadania czują się intuicyjne, nie ingerujące i wygodne, gracze są bardziej prawd

Rozważając kierowanie użytkownikami dla własnego doświadczenia, zastanów się nad obserwujekwestiami:

• To, co chcesz, aby gracze zrobili w swoim doświadczeniu, a co chcą zrobić, może być całkowicie różni. Lepiej jest testować swoje układy z wieloma rodzajami graczy , aby uzyskać zrozumienie tego, jakie drogi chcą przejść, aby osiągnąć swoje cele.
• Rysunki przepływu mogą stać się trudne do czytania i nieefektywne, jeśli próbują one uwiecznić wiele scenariuszy w jednym diagramie. Aby skupić uwagę na każdym zadaniu, ograniczaj rysunki przepływu do jednego głównego zadania w każdym czasie .
• Wzory interakcji różnią się w zależności od tego, czy gracze używają elementy sterującedotykowego, gamepadów lub myszek komputerowych, aby wejść w interakcję z Twoim doświadczeniem. Jeśli projektujesz dla wielu urządzeń, rozwinąć unikalne użyteczne przepływy dla każdego urządzenia , aby możesz zidentyfikować punkty bólu i uproszczyć przepływy pracy.

Po zakończeniu projektowania swoich wireframe'ów nadszedł czas, aby przenieść się do Studio i stworzyć swoją UI.