Wybierz swój styl artystyczny

Wybór stylu artystycznego jest procesem planowania estetycznej kierunku dla Twoich elementów UI. W重要ne jest, aby rozpocząć swój proces projektowania z artystycznym stylem, ponieważ style artystyczne dostarczaj? wizualne zasady pod?eziemi, na kt?re mo?esz odnie? si?, aby u?wi?om?, ?e Twoja interfejsy UI oferuj? interaktywne informacje o tym, co mo?esz zrobi? w swoim do?wi?czonej.

Używając do referencji świąteczki laserowej.rbxl plik, ta sekcja kursu interfejsu użytkownika pokazuje, jak podejmować znaczące decyzje w sprawie zaprojektowania elementów UI zgodnie ze stylem swojego doświadczenia, w tym kierunki na:

• Określanie niezbędnych elementów interfejsu zgodnie z tym, co chcesz komunikować graczom w całym swoim doświadczeniem.
• Wybór koloru, który wzmacnia konwencje kolorów, które są intuicyjne dla Twojego widza.
• Oznaczanie prostych ikonek, które są łatwe do odczytania na dowolnym rozmiarze ekranu.
• Ustanowienie porządku przycisków, który odpowiada prawdopodobieństwu różnych pracowników.
• Określenie systemu tekstowego zapewniającego legibility na urządzeniach docelowych.

Po zakończeniu tej sekcji dowiesz się, jak zaprojektować strukturę i przepływ informacji, które chcesz przekazać graczom poprzez UI w swoim doświadczeniu.

Zidentyfikuj swoje elementy interfejsu

Pierwszym krokiem w wybieraniu stylu artystycznego dla swojego interfejsu jest zidentyfikowanie elementów UI, które potrzebujesz do różnych rodzajów informacji, które chcesz przekazać swojemu widzowi. Robienie tego w początkowym etapie procesu projektowania jest kluczowe, ponieważ pozwala to na kategoryzację elementów UI według ich celu funkcjonalnego, podejmowanie decyzji semantycznych

Istnieje wiele różnych sposobów na zbieranie pomysłów, które elementy interfejsu są niezbędne do wymagań twojego gry, ale zaleca się zacząć od wyobrażenia sobie, co gracz potrzebuje wiedzieć, gdy dołącza do twojego doświadczenia. Na przykład, gdy gracz otwiera doświadczenie laserowe próbki, może zadać sobie pytanie:

• Jaki jest cel doświadczenia?
• Jak mogę wiedzieć, kto jest w moim zespole?
• Jak mogę śledzić punkty mojego zespołu?
• Jak wybierać blaster?
• Jak mogę wiedzieć, gdzie laser strzela?
• Jeśli jestem na urządzeniemobilnym, jak strzelać moim blasterem?
• Po tym, jak strzelę laserem, ile mogę strzelać ponownie?
• Jak mogę wiedzieć, gdy rozpoczynam rundę?
• Jak mogę wiedzieć, kiedy kogoś z powodzeniem oznaczę moim laserem?
• Jak mogę wiedzieć, kiedy zespół wrogi z sukcesem oznacza mnie?

Używając tych pytań, aby zrozumieć, które informacje są niezbędne dla graczy, aby odnieść sukces, możesz podzielić samplową przejście doświadczenia laserowego na trzy kategorie:

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

Sortowanie interfejsu użytkownika swojego doświadczenia w kategorie jest pomocne, ponieważ możesz formułować swój styl artystyczny wokół każdej grupy, aby wzmocnić to, co informacje każdej kategorii muszą uczyć graczy. Na przykład, jeśli chcesz, aby Twoja UI powiadała graczom, co można zrobić w odniesieniu do ich zdrowia statusu, możesz wybrać

Po uporządkowaniu UI swojego doświadczenia w kategoriach możesz stworzyć listę elementów UI niezbędnych do spełnienia wymagań każdej kategorii. Aby to pokazać, przykładowy tag laserowy używa następującej tabeli elementów UI, aby zaspokoić poprzednią listę potencjalnych pytań gracza. Podczas gdy pracujesz przez ten samouczek, kurs nauki UI będzie nadal odnosił się do tej listy

Teraz, gdy masz listę elementów UI dla swojego doświadczenia, jest czas, aby zacząć dokonywać stylistycznych i semantycznych wyborów dla każdej grupy elementów UI, zaczynając od tematu koloru.

Wybierz Motyw Koloru

motyw kolorowy lub paleta kolorów, to wybór kolorów, które każde komunikują się za pomocą spójnego zastosowania w twoim doświadczeniu, takiego jak używanie jasnego koloru, aby zidentyfikować, gdy coś jest do wyboru. Stosowanie motywu kolorowego do elementów UI jest ważne, szczególnie gdy opierasz się na zasadach kolorowych w gatunku twojego doświad

W Kursie Artystycznym Środowiska, każda połowa laser tag środowisko jest kolor-kodowane z góry do dołu w celu odróżnienia która obszar mapy jest blisko każdej drużyny własnego

Efekt laserowy wykorzystuje ten sam motyw koloru w swoim interfejsie, aby podkreślić informacje dotyczące każdej drużyny, takie jak wskaźnik zespołu każdego gracza w przestrzeni 3D lub tracker punktu zespołu, który pokrywa ekran. Ta spójność pomaga graczom zrozumieć szybko cel doświadczenia, szczególnie podczas szybk

Podczas wybierania motywu koloru dla własnego doświadczenia, zastanów się nad obserwujekwestiami:

• Siła motywu koloru opiera się na pomocy graczom w szybkim utożsamieniu każdego koloru i jego funkcji. Dlatego właśnie ograniczaj swój motyw koloru tylko do podkreślenia kluczowych informacji, które chcesz, aby gracze powiązali z elementami UI.
• Aby upewnić się, że gracze z niedostateczną widocznością kolorów mogą zrozumieć wiadomość o swoim motywie kolorów, nie zawsze polegać na samym kolorze , aby rozróżnić elementy UI. Zamiast tego połącz kolory z ikonami, kształtami i/lub animacjami, aby zapewnić, że twoja interfejs użytkownika komunikuje się skutecznie z każdym graczem.
• Ważniejsze jest, aby Twoja interfejs był czytelny niż estetycznie przyjemny. Z tego powodu prioruj prostą interfejs z kolorem, który pozostaje czytelny zarówno na jasnych, jak i ciemnych elementach w świecie 3D.

Aby podkreślić przewodnik w ostatnim punkcie, doświadczenie laserowego tagu próbkowego wykorzystuje neutralne kolory czarnego i białego dla prawie każdego innego elementu interfejsu, który połącza się z ekranem 2D. Czarny i biały kontrast do siebie dobrze, a są łatwe do czytania, ponieważ reszta ekranu wyświetla inny kolorowy środowisko.

Wyświetlaj ikony prostsze

Ikona icona jest symbolem, które представia akcji, obiekt lub koncepcję w doświadczeniu. Wykazanie ikonek, które są proste i intuicyjne, jest ważne, ponieważ rezultat końcowy pozwala graczom łatwo rozpoznać, co mogą zrobić i co chcesz powiedzieć poprzez swoją interfejs użytkownika bez używ

Proste ikony idealnie mają wyraźny styl od swoich 3D-składników, jednocześnie komplementując ogólny świat swojego doświadczenia. Na przykład, w końcowym środowisku Kursu Sztuki Środowiska modułowe i prop 3D-zasoby mają czysty, nowoczesny styl artystyczny, który wykorzystuje proste kształty z zaokrągl

Aby uzupełnić ten styl artystyczny, pozostając jednocześnie wyjątkowym, wszystkie elementy interfejsu, które nauczysz się tworzyć później w tym samouczniku, zawierają futurystyczny estetykę i rundne kąty bez dopasowania kształtu języka 3D w środowisko. To utrzymuje każdy znaczenie ikonaw innym od innych informacji w obu wymiarach 2D i 3D.

Aby pokazać ten koncept, zobacz następujące dwa obrazy z doświadczenia laserowego Tag na przykładzie crosshara, który mówi graczom, gdzie ich blaster strzela na ekranie, i przycisk, który umożliwia graczom strzielenie ich blastera na urządzeniach mobilnych. Obie ikony zawierają miękkie kąty, aby były one spójne z całym światem, ale ich sześciokątne i okrągłe

Podczas planowania prostych ikonek dla własnego doświadczenia, zastanów się nad obserwujekwestiami:

• Ikony są czytelne nawet gdy są małe. Z tego powodu, ograniczaj szczegóły na swoich ikonach , które stałyby się niewykonalne na ekranach urządzeń mobilnych.
• Ikony są potężne, ponieważ mogą komunikować się wiadomość bez względu na język gracza. Dzięki temu, że nie wpływa na zrozumienie gracza przez UI, zastępuj niepotrzebny tekst ikonami , aby poprawić wysiłki lokalizacji.
• Wiele doświadczeń tego samego gatunku używa ikonek, które są stylem podobnym, takich jak ikona miecza, która reprezentuje siłę, lub kubek, który reprezentuje magię. Przyjmuj symbolizm w swoim gatunku doświadczeń , aby gracze mogli zrozumieć twoje ikony bez dodatkowego kierowania.

Jeśli nie wiesz, które rodzaje ikonek są powszechnie stosowane w gatunekswojego doświadczenia, sprawdź Bazę danych interfejsu użytkownika . Ta bezpłatna narzędzie dla projektantów interfejsów uwzględnia screenshoty z setek gier różnych gatunków, które możesz zeskanować podczas swojego procesu projektowania.

Ustanów Porządek Interakcji

순서 interakcji to sequencja interakcji, którą gracze mogą mieć z Twoją interfejsem użytkownika. Ponieważ na ekranie jest wiele interaktywnych elementów UI, ważne jest, aby ustanowić intuicyjny porządek interakcji, aby pomóc graczom podejmować decyzje, gdy przeglądają różne workflowy.

Zwykle w workflowie jest trzy rodzaje interakcji:

• Interakcja główna – Akcja, którą najprawdopodobniej wykonuje gracz.
• Drugorzędna interakcja – Akcja, którą gracz prawdopodobnie wykonuje jako alternatywę dla głównej akcji.
• Interakcja terytoriańska – Akcja, która najmniej prawdopodobnie zostanie wykonana.

Każdy rodzaj interakcji musi mieć inny poziom akcentu wizualnego w zależności od prawdopodobieństwa wykonania akcji przez gracza. Aby ilustrować ten koncept, zbadaj następujące obrazki z kolejności interakcji dla workflow'u, w którym A reprezentuje główną interakcję, B reprezentuje drugą interakcję i C reprezentuje trzecią interakcję.

W tym przepływie pracy najprawdopodobniej wykonaniem gracza będzie wybór między dwoma różnymi typami broni, więc przyciski broni są znacznie większe niż jakakolwiek inna interaktywna część w projekcie. Ten poziom akcentu wizualnego przyciąga uwagę gracza i przyciąga jego oko na środek całego elementu

Chociaż nieprawdopodobne, gracz może nie wiedzieć, że jest w stanie wybrać jedną z przycisków blastera, aby komunikować, którego blaster chce użyć. Aby pomóc w tej sytuacji, istnieje dwa przyciski strzałki trzeciego poziomu, które gracz może używać, aby cyklicować między swoimi wyborami. Te przyciski są subtelniejsze i o wiele

Jeśli umieścisz te główne, wtórne i teryjne interakcje w innym porządku interakcji, takim jak wymiana przycisku WYBIERZ z przyciskiem LEWYM, gracze nie będą mieli wyraźnego kierunku na kolejności wyborów, które muszą wykonać. Z tego powodu, oprócz wizualnego akcentu

Podczas tworzenia porządku interakcji dla własnych zasobów, zastanów się nad obserwujekwestiami:

• Gracze muszą mieć wyraźne zrozumienie, kiedy mogą wchodzić w interakcję z Twoją interfejsem użytkownika, aby wykonać działania. Z tego powodu rekomendujemy dostarcz przynajmniej jedną formę wizualnego zwrotu informacji dla interaktywnych elementów UI, takich jak wyświetlanie konturów lub zmiany rozmiaru przycisku, gdy jest w skupieniu.
• Jeśli etykiety na interaktywnych elementach UI są niejednolite lub podobne jeden do drugiego w tym samym workfldzie, gracze mogą nie rozumieć, jak zakończyć akcję lub proces. Aby uniknąć negatywnego doświadczenia gracza, stwórz etykiety, które są czyścić, zwięzłe i odrębne od siebie .
• Jeśli interaktywne elementy interfejsu są zbyt duże, można je znieść z innych ważnych informacji na ekranie. Z drugiej strony, jeśli są zbyt małe, można je trudno czytać lub trudno wybierać, szczególnie jeśli są w pobliżu siebie na urządzeniach mobilnych. Dlatego należy przeglądać rozmiar swoich interaktywnych elementów interfejsu na różnych rozmiarach ekranu

W implementuj w Studio dowiesz się, jak używać obiektów UIAspectRatioConstraint, aby zapewnić, że elementy UI utrzymują określony wskaźnik rozmiarów bez względu na to, jakie urządzenia użytkownicy używają do dostępu do Twojego doświadczenia. Oprócz uł

Określ system tekstowy

System tekstowy to zestaw zasad dotyczący czcionek i stylu dla wszystkich słów w Twoim interfejsie, takich jak "zawsze czerwone nagłówki" lub "użyj zielonej czcionki, gdy odnosisz się do statystyki zdrowia." Zidentyfikowanie systemu tekstowego wcześniej w Twoim procesie projektowania pozwala Ci na zdefiniowanie struktury, którą możesz stosować konsekwentnie

Podczas gdy systemy tekstowe mogą się różnić w zależności od gatunku tekstu lub wymagań świata 3D, najważniejszą zasadą, którą wszystkie systemy tekstowe muszą przestrzegać, jest zagwarantowanie, że cały tekst UI jest jasny i łatwy do czytania . Używając tej zasady jako podstawy dla wszystkich zasad związanych

• Urządzenia, które gracze mogą używać, aby uzyskać dostęp do Twojego doświadczenia.
• Język, w którym gracze mogą czytać twoje lokalizowane teksty.
• Możliwy podstawowy tło za tekstem na ekranie.

Na przykład, następująca witryna reakcji na ekranie, gdy gracz jest oznaczony, skala się do mniejszego lub większego rozmiaru czcionki w zależności od urządzeniegracza, włącza wystarczająco dużo miejsca na obu stronach tekstu dla języków z dłuższymi tłumaczeniami i włącza kontrastującą tło, aby gracze mogli czytać tekst bez względu na kolor tła.

Podczas określania systemu tekstowego dla własnego doświadczenia, weź pod uwagę obserwujekwestie:

• Tekst jest trudny do odczytania, gdy miesza się z hałasem jego tła. Aby poprawić legibility swojego interfejsu użytkownika, wyświetlaj tekst na górze kontrastującego koloru lub z pocięciem .
• Jeśli nie skalujesz swojego tekstu na różnych urządzeniach, tekst będzie albo zajmował zbyt wiele miejsca, albo stanie się mały i nieczytelny na ekranie gracza. Aby złapać różnice w swoim tekście, testuj swój projekt na wielu urządzeniach przez cały proces projektowania.
• Słowa mogą się rozciągnąć poza pierwotny projekt, gdy lokalizujesz je na innych językach. Aby poprawić kompozycję swojego projektu, zobacz, ile miejsca zajmuje twój tekst na ekranie .
• Podczas gdy niektóre czcionki mogą pasować do estetyki swojego doświadczenia, mogą być trudne do czytania w dużych ilościach. Dlatego używaj stylizowanego tekstu oszczędnie , takiego jak dla tytułów lub tekstu powiadomienia.

Gdy masz plan dla stylu artystycznego swojego interfejsu, możesz przejść do następnej sekcji samouczka, aby nauczyć się, jak zaimportować układ każdego elementu w różnych workflowerach gracza.