Projektowanie interfejsu i UX

*Ta zawartość została przetłumaczona przy użyciu narzędzi AI (w wersji beta) i może zawierać błędy. Aby wyświetlić tę stronę w języku angielskim, kliknij tutaj.


Interfejs użytkownika łączy wizualną architekturę użytkownika z projektem informacji skupionym na komunikacji, aby produkować menu, projekty layoutów, głowy upływu (środowisko użytkownika) i inne interfejsy, z którymi gracze wchodzą w interakcję.

Interfejs użytkownika

Interfejs użytkownika dzieli się życiowymi informacjami, takimi jak punkty trafienia, cele zadań i ceny, które pozwalają graczom podejmować decyzje i przeglądać grę. Ponieważ jest to często główny sposób, w jaki gry komunikują się z graczem, interfejs użytkownika jest kluczowy dla doświadczenia graczy i prowadzi do niskiego wskaźnika retencji, podczas

  • Priorytetacja
  • Uwaga
  • Język Wizualny
  • Konwencje
  • Zgodność

Priorytetacja

Udostępnianie najbardziej znaczących informacji najpierw jest znane jako Hierarchia informacji . Jest to szczególnie istotne w grach, w których gracze często podejmują natychmiastowe decyzje w oparciu o ograniczony zestaw informacji. Gdy priorytetujesz UI, zidentyfikuj, co jest niezbędne lub najbardziej odpowiednie dla doświadczenia gracza i upewnij się, że jest to zarówno dost

  • Co gracz robi w tej chwili?
  • Jaka jest najważniejsza rzecz, o której powinni być świadomi lub mieć dostęp?
  • Jakie wybory muszą podjąć?
  • Jakie informacje potrzebują, aby podjąć te wybory?
  • Jak często będą angażować się w te wybory?

Zmieniają się ważne informacje i funkcje podczas kursu gry, w zależności od czynników, takich jak rola gracza, jego lokalizacja w świecie gry i przedmioty, które trzyma. UI można zaprojektować, aby prezentować tylko to, co ma znaczenie kontekstowo - wymienianie przycisków i informacji w zależności od tego, co jest przydatne w każdym kontekście. To zapewnia, że gracze z

Przykłady

Nierelevantne elementy mogą powodować zamieszanie i dystrakcję. RPG z zaklęciami ma czysty, minimalistyczny interfejs użytkownika, który jest szczególnie krytyczny dla interfejsów mobilnych, ponieważ małe ekrany mogą łatwo zostać przytłoczone przez nadmiar przycisków, ekranów i tekstu.

A close up view of an unselected circular Items button with a brown book icon. The environment in the background is a brown dirt with a patch of snow.
Przedmioty przed wyborem w Spellbound RPG ]
A close up view of a selected circular Items button with a brown book icon, along with three additional buttons for skills, equipment, and the players deck. The additional buttons only display when the button is selected.
Przedmioty po wyborze w Spellbound RPG

W Super Striker League , interakcje graczy różnią się w zależności od tego, czy kontrolują piłkę. Bez piłki gracze mogą biec i kłócić się, aby odzyskać kontrolę. Po posiadaniu, przyciski przechodzą do Deke i Pass, aby umożliwić graczom uniknięcie przeciwników i przekazanie piłki. Poprzez

Przyciski kontekstowe w Super Striker League
Przyciski kontekstowe w Super Striker League

W The Survival Game gracze muszą być świadomi swojego zdrowia i stanu status, a muszą mieć szybki dostęp do swojej mapy, zapasu i narzędzi. Ta informacja pozwala im podejmować decyzje i priorytetować działania dla przetrwania. Jeśli ta informacja lub narzędzia są trudne do znalezienia lub brakują, przetrwanie staje się trudniejsze i niepotrzebnie frustrujące.

Funkcje HUD w grze przetrwania

Uwaga

Mimo minimalistycznej, zautomatyzowanej i kontekstowej interfejsu gracze mogą nadal potrzebować pomocy w lokalizacji tego, czego potrzebują. Projektanci interfejsów mogą używać kilku narzędzi wizualnych, aby zachęcić graczy do zwrócenia uwagi, takich jak:

  • Kolor: Ярkie kolory przyciągają więcej uwagi niż ciemne. Użyj soczystych kolorów dla kluczowego tekstu, przycisków i innych elementów, a zmutowanych cieni dla mniej znaczących. To poprawia widoczność i zmniejsza rozproszenie.
  • Rozmiar: Duższe elementy są bardziej widoczne i postrzegane jako ważniejsze w porównaniu z mniejszymi.
  • Przestrzeń: Elementy otoczone szerokim negatywnym przestrzeń lub pasek jest przyciągające oko.
  • Bliskość: Grupowane elementy oznaczają połączenie. Umieszczając powiązane funkcje i przedmioty jeden po drugim, gracze mogą zrozumieć ich związek i łatwiej go znaleźć.
  • Ruch:: Animowane elementy przyciągają uwagę. Nawet niewielkie ruchy mogą przyciągnąć uwagę wśród statycznych odpowiedników. Efekty cząsteczek, migotące przyciski i animowane strzałki są często używane w samouczkach do kierowania.

Moderacja jest kluczowa z tych narzędzi. Nadmierne używanie jasnych, ruchomych elementów może przytłoczyć i zamieszkać graczy, zamiast pomóc im.

Przykłady

W sezonie Jailbreak jest to UI sezonu, która pokrywa pasek złotego żółtego poniżej ikonek sezonu, przyciągając uwagę na nagrody premium i czyniąc je wizualnie odrębne od tych z darmowych.

Sezonowa interfejs użytkownika w Jailbreak ”

W Dragon Adventures, zestaw monet o wysokiej wartości jest zwiększony wielkością i oddzielony więcej płytki, aby go odróżnić od mniejszych zestawów.

Zestawy monet w Dragon Adventures

W Tower Defense Simulatorużywa się zarówno wielkość, jak i bliskość, aby wizualnie grupować i odróżniać codzienne Skórki Wieży od codziennych Skrzynek.

Sklep w Tower Defense Simulator

Język wizualny

Oprócz kierowania uwagi graczy na najważniejsze elementy na ekranie, projektanci interfejsu użytkownika opracowują język wizualny, aby pomóc graczom zrozumieć to, co widzą. Język wizualny to zestaw celnych i spójnych wyborów projektowych, które dostarczają informacje na temat celu, status, powiązań i znaczenia. Język jest zbudowany z narzędzi, takich

Ikony

Ikony mogą zatrudniać wizualną tożsamość, która przekazuje znaczenie i związania. Na instancjaikony związane z konkretnymi statystykami mogą udostępniać paletę kolorów i podobne kształty, umożliwiając graczom rozpoznanie i zrozumienie ich funkcji.

Statystyki gracza w Winds of Fortune

Przyciski

Jako powszechna forma wpisu gracza przyciski muszą być łatwe do zidentyfikowania. Mieszczenie przycisków w kontenerze, takich jak kolor otaczający tekst lub ikona, odróżnia je od tła, czyniąc je interaktywnymi. Dodawanie podświetlenia lub cienia może poprawić ich atrakcyjność poprzez sugestię głębi 3D.

Przyciski w BotClash Simulator >

Tekst

Najwyższy stopień wysokiego poziomu informacji powinien być większy i bardziej widoczny niż treść ciała. Kolory, które są bardzo czytelne i kontrastują dobrze z tłem, powinny być rozważane. Wybory stylistyczne, takie jak kolor i ozdobienie, mogą podkreślić ważne informacje, takie jak przedmioty w grze, statystyki lub umiejętności. Zawsze priorytetuj legibility, gdy wyb

Sklep z Ubraniami w Wiatrach Fortuny

Gdy język wizualny zostanie zaprojektowany, można go opisać w Style Guide, zestaw zasad i przykładów, które pomagają wszystkim na zespole zrozumieć, jak zastosować język konsekwentnie w całej gra.

Konwencje

Konwencje są powszechnie stosowanymi wyborami projektowymi, które widoczne są w wielu różnych grach. Niektóre przykłady obejmują:

  • Symbol X na przycisku, który zamyka dialog, gdy jest naciśnięty
  • Kolor szary zastosowany do przycisków, które są obecnie niedostępne
  • Ikona blokada nadającą nazwę przyciskowi lub funkcji, aby wskazać, że gracz jeszcze go nie zdobył lub nie odblokował

Ponieważ ich powszechne użycie, gracze są zwykle znajomych z takimi konwencjami. Wykorzystując tę znajomość, można uczynić interfejs bardziej intuicyjnym i zmniejszyć potrzebę grySpecjalne instrukcje. Gry w grach w ramach swojego celu może pomóc zidentyfikować konwencje, które gracze mogą rozpoznać. Projektant interfejsu może zdecydować się na unikalne pode

X Zamknij przyciski w Wietrach szczęścia , Przygody smoka , BotClash Simulator i
2> DOORS 2>

Zgodność statystyki „Zdrowie” w Arcane Odyssey

Zgodność

Niezależnie od tego, jakie decyzje podejmuje projektant UI, powinny one zostać stosowane konsekwentnie w całej grze. Spójność pomaga graczom lepiej nawigować po grze i zapobiegać zamieszaniu i frustracji.

Oto kilka przykładów spójności interfejsu w gra:

  • Statystyka „Zdrowie” pojawia się w zielonym kolorze we wszystkim, co tekst, powiązane ikony i bar zdrowia.
  • W każdym momencie dialogu NPC wspomina o przedmiotw grze, jest to podświetlone na czerwono.
  • Przyciski zawsze są kwadratowe, czerwone i zawierają białą X, która pojawia się tylko w górnym prawym rogu dialogu.
  • Kiedy cena przedmiotu w robić zakupynie może być wykorzystana przez gracza, cena wyświetlana jest w czerwonym kolorze.

Te wybory są celowe, zmierzające do ułatwienia zrozumienia i nawigacji gracza. Poprzez ich stosowanie konsekwentnie, umożliwiają graczom powiązanie związanych elementów, zidentyfikowanie ważnych przedmiotów, rozwój pamięci mięśniowej, szybkie podejmowanie decyzji i spędzanie więcej czasu w grze.

środowisko użytkownika

Projekt UX dotyczy tego, jak gracze wchodzą w interakcję z grą, jak robią swoje wybory znanymi dla gry i jak przesuwają się z jednego wyboru do następnego. Meskipun UX często działa w rękodzielu z interfejsem użytkownika (UI), jest bardziej skupiony na interaktywności i doświadczeniu gracza niż na wizualnym i informacyjnym projektowaniu UI.

Zrozumienie graczy

Głównym celem projektanta UX jest stworzenie interakcji i przepływów, które są intuicyjne, nieinwazyjne i wygodne dla graczy do użycia. Ten proces zaczyna się od zrozumienia samych graczy, publiczności intencjonalnej dla gry. Gdy identyfikujesz graczy do doświadczenia, rozważaj obserwuje:

  • Demografia: Demografia pomaga zidentyfikować wybory projektów, ujawniając ogólne informacje o grupagraczy. Na przykład, młodsi gracze są generalnie bardziej prawdopodobni do gry na urządzeniach mobilnych lub tabletowych niż na komputerach osobistych, więc gry przeznaczone dla tego odbiorcy często priorytetują projektowanie i polerowanie doświadczenia użytkownika mobilnego.

  • Poziom doświadczenia: Rozwójcy mogą wybrać projekt dla graczy z małym doświadczeniem, znacznej ilości lub gdzieś pomiędzy. Interakcje, które są znane doświadczonym graczom, takie jak naciśnięcie klawisza numery, aby założyć przedmiot w pasku narzędzi, lub naciśnięcie c, aby się schować, mogą nie być oczywiste dla nieświadomych graczy i

  • Znajomość gatunku: Podobnie jak ogólny poziom doświadczenia, znajomość gatunku odzwierciedla poziom doświadczenia gracza z okreśленnym typem gry. Gry, które wpadają w popularne gatunki na Roblox, takie jak Roleplay, Survival Horror i First-Person Shooter, prawdopodobnie mają wiele potencjalnych graczy,

  • Styl gry: Gracze często preferują konkretne rodzaje grać, od konkursu i zbierania osiągnięć do zabawy i współpracy. Te preferencje nie są tylko odzwierciedlone w mecha graczy preferują, ale również wpływają na decyzje UX. Projektanci rozważają, które interakcje prioryzować, które polować i które przedstawić graczom. Bior

Po rozważeniu tych czynników i wyboru grupy docelowej (lub grup), poznaj je, grając z nimi i dowiadując się o ich celach i preferencjach, aby lepiej informować o wyborach projektów.

Projektowanie interakcji

Interakcje są funkcjami, które pozwalają graczom doświadczyć i komunikować swoje wybory w grze. Projektanci UX chcą, aby te interakcje były intuicyjne i wymagały jak najmniej wyjaśnienia. Aby to zrobić, używają:

  • Konwencje
  • Metafory
  • Opinia

Konwencje

Konwencje to projekty UX i zasady, z którymi gracze mogą już być znajomymi z innych gier.

“E” wskazówka dotykowych w życiu żaby

Przykładami konwencji są:

  • Proximity prompt "E", który używają rozwójcy Roblox, aby sygnalizować graczom, że przedmiot jest interaktywny, jeśli stoją wystarczająco blisko, aby pojawił się.
  • Klucz "C", umożliwiający awatarowi gracza, by się kręcił, aby mógł płynąć pod przeszkodami lub zmieścić się w ciasnych miejscach.
  • Klucze liczbowe umieszczające przedmioty z pasku narzędzi w ręce awatara, aby mogły być używane.
  • Chodzenie po kręgach na ziemi w celu dołączenia do dopasowywać.

Konwencje stają się ustanowione, gdy pewne wyboru implementacji lub projektu roś popularności ze względu na jego łatwość użycia. "C" do kaczuszkę, na przykład, jest łatwo zapamiętać ze względu na to, że jest pierwszą literą w słowie kaczuszkę, i jest wygodnie położony obok WASD, klucz, który gracze używ

Metafory

Metafory odnoszą się do abstrakcyjnego pojęcia bardziej znanego, tworząc skrót do zrozumienia. W tym przykładzie z Spellbound Wizard RPG akt wykonania zaklęć magicznych jest wykonany rysując karty z dekory. UI/UX oparty na bazie dekory ułatwia zrozumienie abstrakcyjnego aktu zaklęć, który nie ma real

Gry w przepowiedzi jako karty w RPG związanego zaklęcia >

Opinia

Komunikacja z gry na gracza jest znana jako opinia. Opinia pomaga graczom zrozumieć, że działanie, które podejmują, miało wpływ na grę. Może to przyczynić się do uczenia się, jak funkcjonuje gra i dodać dodatkową warstwę polish, która czyni funkcję bardziej satysfakcjonującą do użycia. Niektóre przykłady opinii obejmują:

  • Wrogowie odtwarzają animację reakcji "hit", aby wskazać, że otrzymali obrażenia z broni gracza
  • Przycisk, który zmienia kolor, aby wskazać na stanie kiedy jest naciągnięty i uwolniony (wybrany)
  • Efekt dźwiękowy "cha-ching!" odtwarzany po ukończeniu kupować
  • Przepustka postępuje wypełniając się, gdy gracz ukończy celach zadania

Gdy brakuje lub jest niewystarczająca opinia, gracze mogą nie wiedzieć, co osiągnęli, zrozumieć, czy efekty były dobre lub złe, lub nawet wiedzieć, czy funkcja, którą używają, działa poprawnie lub doświadcza błędów.

Projektowanie przepływów

Wiele interakcji jest często wymagane, aby gracz osiągnął cel. Projektanci UX są zainteresowani tym, jak gracze przesuwają się z jednej akcji lub ekranu lub wyboru do następnej i upewnić się, że te drogi są logiczne i wygodne.

Na przykład, aby użyć przedmiotu na awatarze w Berry Avenue RP, gracz musi:

  • Znajdź i kliknij przycisk Avatar
  • Wybierz kategorię przedmiotu ( twarz, głowa, szyja itp)
  • Przewinądź, aby znaleźć interesujący przedmiot
  • Kliknij na przedmiot, aby założyć go na ich awatarze
  • Znajdź i kliknij przycisk Ukończ, aby wyjść z personalizacji awatara
Dostosowanie awatara w Berry Avenue RP

Te kroki podjęte razem stanowią przepływ personalizacji awatara. Ten przepływ jest prosty i przejrzysty, z tyloma krokami, jak to możliwe, aby założyć przedmiot. Ponieważ gracze nie muszą wykonujące wiele akcji lub myśleć zbyt wiele o tym, co muszą zrobić, ten przepływ jest niski w fricción , czyli pomiar wysiłku wymaganego do osiągnięcia celu.

Projektowanie wydajnych, nisko-spadających przepływów wymaga uważnego rozważenia przypadków użycia. Te przypadki użycia można wyrazić jako cele graczy, takie jak:

  • Chcesz być w stanie szybko zmieniać awatar
  • Łatwo znaleźć przedmioty podczas modyfikacji
  • Przeglądaj przedmioty przed wyborem
  • Łatwe usuwanie po wyborze

Te cele następnie kierują projektem UI i UX funkcja:

  • Gracze uzyskują dostęp do funkcji personalizacji awatara poprzez wyraźny przycisk na HUD, a mogą natychmiastowo zacząć używać przedmiotów do ich awatarów
  • Taby sortują przedmioty w wygodnych kategoriach, a pola wyszukiwania umożliwiają graczom szukanie przedmiotów bezpośrednio
  • Przedmioty są podglądane na awatarze natychmiastowo
  • Gracze mogą usunąć przedmiot, klikając na nie ponownie, aby anulować wybór, lub klikając na nie w listach założonych przedmiotów

Projektanci mogą wtedy zacząć układać UI i planować kroki, które gracze podejmą, aby ukończyć cel zmodyfikowania ich awatarów. Ten proces może być wspomagany przez użycie diagramu przepływu, który wizualnie przedstawia działania graczy, gdy przeglądają UI. Te diagrafy mogą pomóc zidentyfikować niezaznaczone kroki, punkty

Przykład poniższego wykresu kierunkowego.