Wybierz styl artystyczny

Wybór stylu artystycznego to proces planowania estetycznego kierunku dla elementów UI. Ważne jest, aby rozpocząć proces projektowania od stylu artystycznego, ponieważ style artystyczne dostarczają wizualnych zasad, do których możesz się odwołać, aby upewnić się, że Twoje UI intuicyjnie dostarcza graczom informacji o tym, co mogą robić w Twojej grze.

Korzystając z przykładowej gry w laser tag w pliku .rbxl jako odniesienia, ta sekcja programu nauczania interfejsu użytkownika pokazuje, jak podejmować znaczące decyzje dotyczące projektowania elementów UI zgodnie z gatunkiem Twojej gry, w tym wskazówki dotyczące:

• Identyfikacji niezbędnych elementów UI zgodnie z tym, co chcesz komunikować graczom w trakcie gry.
• Wybierania motywu kolorystycznego, który wzmacnia konwencje kolorystyczne specyficzne dla gatunku, które są intuicyjne dla Twojej publiczności.
• Zarysowywania prostych ikon, które są łatwe do zrozumienia na każdym rozmiarze ekranu.
• Ustalania kolejności przycisków, która odpowiada prawdopodobieństwu różnych przepływów pracy graczy.
• Określenia systemu tekstowego, który zapewnia czytelność na docelowych urządzeniach.

Po ukończeniu tej sekcji nauczysz się, jak zaprojektować strukturę i przepływ informacji, które chcesz komunikować graczom za pomocą UI w swojej grze.

Zidentyfikuj swoje elementy UI

Pierwszym krokiem w wyborze stylu artystycznego dla Twojego UI jest zidentyfikowanie, jakie elementy UI są potrzebne do różnych typów informacji, które chcesz komunikować swojej publiczności. Wykonanie tej pracy na początku procesu projektowania jest kluczowe, ponieważ pozwala na kategoryzację elementów UI według ich funkcji, podejmowanie decyzji semantycznych zgodnie z tym, gdzie i kiedy gracze będą wchodzić w interakcję z każdym elementem UI oraz planowanie, gdzie można ponownie wykorzystać elementy UI w całej grze.

Istnieje wiele różnych sposobów na burzę mózgów, które elementy UI są niezbędne do wymagań rozgrywki, ale zaleca się rozpoczęcie od wyobrażenia sobie, co gracz musi wiedzieć, gdy tylko dołączy do Twojej gry. Na przykład, gdy gracz otwiera przykładową grę w laser tag, może zadać sobie następujące pytania:

• Jaki jest cel gry?
• Jak mogę wiedzieć, kto jest w moim zespole?
• Jak mogę śledzić punkty mojego zespołu?
• Jak mogę wybrać blaster?
• Jak mogę wiedzieć, gdzie blaster strzela laserem?
• Jeśli jestem na urządzeniu mobilnym, jak mogę strzelać moim blasterem?
• Po strzeleniu lasera, kiedy mogę strzelić ponownie?
• Jak mogę wiedzieć, kiedy zaczynam rundę?
• Jak mogę wiedzieć, kiedy skutecznie oznaczam kogoś moim blasterem?
• Jak mogę wiedzieć, kiedy drużyna wroga skutecznie mnie oznacza?

Korzystając z tych pytań, aby zrozumieć, jakie informacje są niezbędne dla graczy, aby odnieśli sukces, możesz posortować potrzeby UI przykładowej gry w laser tag w trzy kategorie:

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

Sortowanie potrzeb UI Twojej gry w kategorie jest pomocne, ponieważ możesz sformułować swój styl artystyczny wokół każdej grupy, aby wzmocnić, jakie informacje każda kategoria musi przekazać graczom. Na przykład, jeśli chcesz, aby Twoje UI informowało graczy o działaniach, które mogą podjąć w związku ze stanem zdrowia ich postaci, możesz wybrać styl artystyczny z elementami UI, które priorytetowo traktują kolor zielony i/lub ikony plus, aby gracze mogli szybko rozpoznać ich funkcję.

Po posortowaniu potrzeb UI Twojej gry w kategorie, możesz stworzyć listę elementów UI niezbędnych do spełnienia wymagań każdej kategorii. Aby to zobrazować, przykładowa gra w laser tag korzysta z poniższej tabeli elementów UI, aby odpowiedzieć na poprzednią listę potencjalnych pytań graczy. W miarę postępu w tym samouczku, program nauczania UI będzie nadal odnosił się do tej listy i podkreślał główne decyzje projektowe, które odnoszą się do każdej kategorii elementów UI.

Teraz, gdy masz listę elementów UI dla swojej gry, czas zacząć podejmować decyzje stylistyczne i semantyczne dla każdej grupy elementów UI, zaczynając od motywu kolorystycznego.

Wybierz motyw kolorystyczny

Motyw kolorystyczny, lub paleta kolorów, to wybór kolorów, które każda komunikują wiadomość poprzez konsekwentne zastosowanie w Twojej grze, na przykład używając jasnego koloru, aby wskazać, kiedy coś jest wybieralne. Zastosowanie motywu kolorystycznego do elementów UI jest ważne, szczególnie gdy polegasz na konwencjach kolorystycznych w obrębie gatunku Twojej gry, ponieważ pozwala to graczom szybko zrozumieć Twoje UI przy minimalnym wysiłku.

W Programie nauczania sztuki środowiskowej każda połowa środowiska laserowego jest kodowana kolorystycznie z widoku z góry, aby odróżnić, która część mapy znajduje się w pobliżu strefy spawnu każdego zespołu: miętowy dla zespołu, który zbiera się po lewej stronie mapy, oraz różowy goździk dla zespołu, który zbiera się po prawej stronie mapy. Te konkretne kolory są przydatne, ponieważ są komplementarne, co oznacza, że dobrze kontrastują ze sobą i umożliwiają graczom łatwe skanowanie otoczenia i orientowanie się, niezależnie od kierunku, w którym się znajdują w budynku.

Przykładowa gra w laser tag wykorzystuje ten sam motyw kolorystyczny w swoim UI, aby podkreślić informacje, które dotyczą każdego zespołu, takie jak wskaźnik zespołu każdego gracza w przestrzeni 3D lub tracker punktów zespołu, który nakłada się na ekran. Ta spójność pomaga graczom szybko zrozumieć informacje o celu gry podczas szybkiej rozgrywki w grze typu first-person shooter, szczególnie gdy gracze muszą podejmować szybkie decyzje podczas poruszania się po środowisku.

Wybierając motyw kolorystyczny dla własnej gry, rozważ następujące kwestie:

• Siła motywu kolorystycznego polega na pomaganiu graczom w szybkim kojarzeniu każdego koloru z jego funkcją. Z tego powodu ogranicz swój motyw kolorystyczny do podkreślenia tylko kluczowych informacji, które chcesz, aby gracze kojarzyli z elementami UI.
• Aby zapewnić, że gracze z daltonizmem mogą zrozumieć przekaz Twojego motywu kolorystycznego, nie polegaj tylko na kolorze do odróżnienia elementów UI. Zamiast tego, połącz kolory z ikonami, kształtami i/lub animacjami, aby upewnić się, że Twoje UI skutecznie komunikuje się z każdym graczem.
• Ważniejsze jest, aby Twoje UI było czytelne niż estetycznie przyjemne. Z tego powodu priorytetowo traktuj proste UI z kolorami, które pozostają czytelne zarówno na jasnych, jak i ciemnych elementach w świecie 3D.

Aby podkreślić wskazówki w ostatnim punkcie, przykładowa gra w laser tag wykorzystuje neutralne kolory czerni i bieli dla prawie każdego innego elementu UI, który nakłada się na ekran 2D. Czerń i biel dobrze kontrastują ze sobą i są łatwe do odczytania, gdy reszta ekranu wyświetla w przeciwnym razie kolorowe środowisko 3D.

Zarysuj proste ikony

Ikona to symbol, który reprezentuje akcję, obiekt lub koncepcję w grze. Zarysowanie ikon, które są proste i intuicyjne, jest ważne, ponieważ końcowy rezultat umożliwia graczom łatwe rozpoznanie, co mogą zrobić i co chcesz im przekazać za pomocą swojego UI bez użycia tekstu, który może zagracać ekran i odciągać uwagę od istotnych treści. Proces ten jest jeszcze bardziej kluczowy, jeśli Twoja publiczność korzysta z gry na małym ekranie urządzeń mobilnych.

Proste ikony idealnie mają wyraźny styl od Twoich elementów 3D, a jednocześnie uzupełniają ogólny świat Twojej gry. Na przykład, w końcowym środowisku Programu nauczania sztuki środowiskowej, zarówno modułowe, jak i propowe zasoby 3D mają czysty, nowoczesny styl artystyczny, który wykorzystuje prostokątne formy z miękkimi, zaokrąglonymi krawędziami. Od fazowanych paneli wzdłuż podłogi po prawie okrągłe okna w suficie, nic nie ma ostrych krawędzi.

Aby uzupełnić ten styl artystyczny, a jednocześnie pozostać unikalnym, wszystkie elementy UI, które nauczysz się tworzyć później w tym samouczku, mają futurystyczną estetykę i zaokrąglone kąty, nie pasując do języka kształtów zasobów 3D w środowisku. To utrzymuje znaczenie każdej ikony w odrębności od innych informacji zarówno w przestrzeni 2D, jak i 3D.

Aby zobrazować ten koncept, zobacz poniższe dwa obrazy z przykładowej gry w laser tag przedstawiające celownik, który informuje graczy, gdzie ich blaster strzela na ekranie, oraz przycisk, który pozwala graczom strzelać ich blasterem na urządzeniach mobilnych. Obie ikony mają miękkie kąty, aby być spójnymi z ogólnym światem, ale ich heksagonalne i okrągłe kształty odróżniają je od czegokolwiek, co gracz mógłby skojarzyć z ikonami w grze.

Podczas zarysowywania prostych ikon dla własnej gry, rozważ następujące kwestie:

• Proste ikony są czytelne nawet gdy są małe. Z tego powodu ogranicz szczegóły na swoich ikonach, które stałyby się nierozpoznawalne na ekranach urządzeń mobilnych.
• Ikony są potężne, ponieważ mogą komunikować wiadomość niezależnie od języka gracza. Tak długo, jak nie wpływa to na zrozumienie UI przez gracza, zastąp zbędny tekst ikonami, aby poprawić wysiłki lokalizacyjne.
• Wiele gier tego samego gatunku używa ikon, które są stylistycznie podobne, takich jak ikona miecza, która reprezentuje siłę, lub kolba, która reprezentuje magię. Wykorzystaj symbolikę w obrębie gatunku swojej gry, aby gracze mogli zrozumieć Twoje ikony bez dodatkowych wskazówek.

Jeśli nie wiesz, jakie typy ikon są powszechne w gatunku Twojej gry, sprawdź Bazę danych UI gier. To darmowe narzędzie dla projektantów UI zawiera zrzuty ekranu z setek gier różnych gatunków, które możesz wykorzystać podczas swojego procesu projektowania.

Ustal kolejność interakcji

Kolejność interakcji to sekwencja interakcji, jakie gracze mogą mieć z Twoim UI. Ponieważ często na ekranie znajduje się wiele interaktywnych elementów UI, ważne jest ustalenie intuicyjnej kolejności interakcji, aby pomóc graczom podejmować decyzje podczas nawigacji w różnych przepływach pracy.

Zazwyczaj istnieją trzy typy interakcji w przepływie pracy:

• Interakcja główna – Akcja, którą gracz najprawdopodobniej wykona.
• Interakcja drugorzędna – Akcja, którą gracz prawdopodobnie wykona jako alternatywę dla akcji głównej.
• Interakcja trzeciorzędna – Akcja, którą gracz najrzadziej wykona.

Każdy typ interakcji musi mieć inny poziom wizualnego nacisku w zależności od prawdopodobieństwa, że gracz wykona daną akcję. Aby zilustrować ten koncept, przyjrzyj się poniższemu obrazowi kolejności interakcji dla przepływu pracy wyboru blastera w przykładowej grze w laser tag, w której A reprezentuje interakcję główną, B reprezentuje interakcję drugorzędną, a C reprezentuje interakcję trzeciorzędną.

W tym przepływie pracy, akcją, którą gracz najprawdopodobniej wykona, jest wybór między dwoma różnymi typami blasterów, więc przyciski blastera są znacznie większe niż jakikolwiek inny interaktywny element w projekcie. Ten poziom wizualnego nacisku przyciąga uwagę gracza i kieruje ich wzrok na środek ogólnego elementu UI. Po podjęciu decyzji przez gracza, logicznym krokiem w przepływie pracy jest potwierdzenie wyboru i rozpoczęcie rundy. Z tego powodu przycisk WYBIERZ znajduje się bezpośrednio poniżej interakcji głównej.

Chociaż mało prawdopodobne, że gracz nie wie, że może wybrać jeden z przycisków blastera, aby zakomunikować, który blaster chce użyć. Aby pomóc w tej sytuacji, istnieją dwa przyciski strzałek trzeciorzędnych, które gracz może wykorzystać do cyklicznego przełączania między swoimi wyborami. Te przyciski są subtelne i znacznie mniejsze niż elementy interakcji głównej i drugorzędnej, ale są również dostrzegalne dla gracza, który potrzebuje wskazówek dotyczących działań, które może wykonać.

Gdybyś umieścił te interakcje główne, drugorzędne i trzeciorzędne w innej kolejności interakcji, na przykład zamieniając przycisk WYBIERZ z lewym przyciskiem strzałki, gracze nie mieliby jasnych wskazówek dotyczących sekwencji wyborów, które muszą podjąć. Z tego powodu, oprócz wizualnego nacisku kolejności przycisków, skuteczne przepływy pracy podążają za hierarchią wizualną, która prowadzi graczy przez idealną kolejność decyzji zgodnie z kierunkiem, w którym prawdopodobnie skanują informacje, na przykład od góry do dołu i od lewej do prawej.

Ustalając kolejność interakcji dla przepływów pracy w swojej grze, rozważ następujące kwestie:

• Gracze muszą mieć jasne zrozumienie, kiedy mogą wchodzić w interakcję z Twoim UI, aby wykonać akcje. Z tego powodu zaleca się zapewnienie przynajmniej jednej formy wizualnej informacji zwrotnej dla interaktywnych elementów UI, takich jak wyświetlanie konturu lub zmiana rozmiaru, koloru lub animacji przycisku, gdy jest w fokusie.
• Jeśli etykiety na interaktywnych elementach UI są niejasne lub podobne do siebie w tym samym przepływie pracy, gracze mogą źle zrozumieć, jak wykonać akcję lub proces. Aby uniknąć negatywnego doświadczenia gracza, twórz etykiety, które są jasne, zwięzłe i różnią się od siebie.
• Jeśli interaktywne elementy UI są zbyt duże, mogą odciągać uwagę od innych ważnych informacji na ekranie. Z drugiej strony, jeśli są zbyt małe, mogą być trudne do odczytania lub trudne do wybrania, szczególnie jeśli są blisko siebie na urządzeniach mobilnych. Z tego powodu ważne jest, aby sprawdzić rozmiar swoich interaktywnych elementów UI na różnych rozmiarach ekranów.

W Wdrażaniu w Studio nauczysz się, jak używać obiektów UIAspectRatioConstraint, aby zapewnić, że elementy UI zachowują określony współczynnik proporcji, niezależnie od tego, jakie urządzenie gracze używają do uzyskania dostępu do Twojej gry. Oprócz ułatwienia procesu projektowania, ta technika może również pomóc Ci spełnić zalecenia dotyczące Rozmiaru i odstępów celów dotykowych w Wytycznych dotyczących dostępności treści w sieci, aby stworzyć strefę dotykową dla interaktywnych elementów UI, która ma co najmniej 9x9 mm na urządzeniach mobilnych.

Określ system tekstowy

System tekstowy to zestaw zasad dotyczących czcionek i stylu dla wszystkich słów w Twoim UI, takich jak "zawsze pogrubiaj nagłówki" lub "używaj zielonej czcionki, gdy odnosisz się do statystyki zdrowia". Określenie systemu tekstowego na wczesnym etapie procesu projektowania pozwala na stworzenie struktury, którą można konsekwentnie stosować w całej grze, aby gracze wiedzieli, czego się spodziewać, gdy będą szukać potrzebnych informacji.

Chociaż systemy tekstowe mogą się różnić w zależności od gatunku gry lub wymagań świata 3D, najważniejszą zasadą, którą muszą przestrzegać wszystkie systemy tekstowe, jest zapewnienie, że cały tekst UI jest jasny i łatwy do odczytania. Używając tej zasady jako podstawy dla wszystkich decyzji związanych z Twoim systemem tekstowym, możesz poprawić dostępność i doświadczenie użytkownika dla graczy czytających Twoje UI, biorąc pod uwagę różne sposoby, w jakie gracze mogą wchodzić w interakcję z Twoim tekstem, takie jak:

• Urządzenie, z którego gracze mogą korzystać, aby uzyskać dostęp do Twojej gry.
• Język, w którym gracze mogą czytać Twój zlokalizowany tekst.
• Możliwe tło za tekstem na ekranie.

Na przykład, poniższy projekt odpowiedzi na ekranie, gdy gracz zostaje oznaczony, skaluje się do mniejszego lub większego rozmiaru czcionki w zależności od urządzenia gracza, zawiera wystarczająco dużo miejsca po obu stronach tekstu angielskiego dla języków z dłuższymi tłumaczeniami i zawiera kontrastujące tło, aby gracze mogli czytać tekst niezależnie od koloru w tle.

Określając system tekstowy dla własnej gry, rozważ następujące kwestie:

• Tekst jest trudny do odczytania, gdy zlewa się z tłem. Aby poprawić czytelność swojego UI, wyświetlaj tekst na tle kontrastującym lub z konturem.
• Jeśli nie skalujesz swojego tekstu dla różnych urządzeń, tekst zajmie zbyt dużo miejsca lub stanie się mały i nieczytelny na ekranie gracza. Aby wychwycić niezgodności w swoim tekście, testuj swój projekt na wielu urządzeniach w trakcie procesu projektowania.
• Słowa mogą wykraczać poza Twój pierwotny projekt, gdy lokalizujesz je na inne języki. Aby poprawić kompozycję swojego projektu, odnies się do największej przestrzeni, jaką Twój tekst może zająć na ekranie.
• Chociaż niektóre czcionki mogą pasować do estetyki Twojej gry, mogą być trudne do odczytania w dużych ilościach. Z tego powodu używaj stylizowanego tekstu oszczędnie, na przykład w tytułach lub tekstach powiadomień.

Gdy masz plan dotyczący stylu artystycznego swojego UI, możesz przejść do następnej sekcji samouczka, aby nauczyć się, jak stworzyć szkic układu każdego elementu w różnych przepływach pracy graczy.