Die Benutzeroberfläche (UI) kombiniert künstlerisches visuelles Design mit kommunikationszentriertem Informationsdesign, um Menüs, Shop-Layouts, Heads-up-Anzeigen (HUDs) und andere Interfaces zu erzeugen, mit denen Spieler interagieren.Die Benutzererfahrung (UX) bezieht sich darauf, wie Spieler mit dem Spiel interagieren, wie sie ihre Wahl dem Spiel bekannt machen und wie sie von einer Wahl zur nächsten wechseln.Während UI und UX oft zusammenarbeiten, liegt der Fokus von UX eher auf Interaktivität und dem Erlebnis des Spieler:inals auf dem visuellen und informativen Design der UI.
UI
Die Benutzeroberfläche teilt wichtige Informationen wie Trefferpunkte, Questziele und Preise, mit denen Spieler Entscheidungen treffen und das Spiel navigieren können.Da es oft der primäre Weg ist, mit dem Spiele mit dem Spieler:inkommunizieren, ist die Benutzeroberfläche für das Erlebnis der Spieler kritisch.Schlecht gestaltete UI kann Spieler verwirrt und frustriert lassen und zu schlechter Kundenbindung führen, während gut gestaltete UI zur Beteiligung und Monetarisierung beitragen kann.Effektive entworfene Benutzeroberflächen verwenden die folgenden Prinzipien:
- Priorisierung
- Achtung
- Visuelle Sprache
- Konventionen
- Konsistenz
Priorisierung
Das Teilen der wichtigsten Informationen zuerst ist als die Hierarchie der Informationen bekannt.Dies ist besonders wichtig in Spielen, in denen Spieler häufig sofortige Entscheidungen treffen, basierend auf einem eingeschränkten Set von Informationen.Wenn du die UI priorisierst, identifiziere, was für das Erlebnis des Spieler:inessentiell oder am relevantesten ist, und stelle sicher, dass es sowohl zugänglich als auch leicht zu finden ist.Betrachte diese Fragen:
- Was macht der Spieler zu diesem Moment?
- Was ist das Wichtigste, worauf sie sich bewusst sein müssen oder Zugang haben?
- Welche Entscheidungen müssen sie treffen?
- Welche Informationen benötigen sie, um diese Entscheidungen zu treffen?
- Wie häufig werden sie sich in diesen Entscheidungen beteiligen?
Wichtige Informationen und Funktionen ändern sich im Laufe eines Spiels, abhängig von Faktoren wie der Rolle, die der Spieler übernimmt, seinem Standort in der Weltund den von ihm gehaltenen Gegenständen.Die Benutzeroberfläche kann so gestaltet werden, dass nur das präsentiert wird, was im Kontext wichtig ist - die Buttons und Informationen wechseln, abhängig davon, was in jedem Kontext nützlich ist.Dies gewährleistet, dass Spieler immer das haben, was sie brauchen, ohne die Unordnung all dessen, was sie nicht haben.
Beispiele
Irrelevante Elemente können zu Verwirrung und Ablenkung führen.Zauberbuch-RPG > hat eine saubere, minimalistische Benutzeroberfläche, die für mobile Interfaces besonders wichtig ist, da kleine Bildschirme leicht mit übermäßigen Knöpfen, Bildschirmen und Text überfordert werden können.
In Super Striker League variieren die Interaktionen der Spieler je nachdem, ob sie den Ball kontrollieren.Ohne den Ball können Spieler sprinten und angreifen, um die Kontrolle wiederzuerlangen.Sobald in Besitz, wechseln die Schaltflächen zu Deke und Pass, so dass Spieler den Ball umschlagen und Gegner ausweichen können.Durch das Wechseln dieser Schaltflächen bleibt die UI kontextbezogen nützlich, vermeidet unnötige Ablenkungen.
In dem Überlebensspiel, müssen Spieler ihren Gesundheits- und Statuskennen und schnellen Zugang zu ihrer Karte, ihrem Inventar und ihren Werkzeugen haben.Diese Informationen ermöglichen es ihnen, Entscheidungen zu treffen und Aktionen für den Überlebens priorisieren.Wenn diese Informationen oder Werkzeuge schwer zu finden oder fehlend sind, wird das Überleben herausfordernder und unnötig frustrierender.
Achtung
Trotz einer minimalistischen, priorisierten und kontextualisierten Benutzeroberfläche könnten Spieler immer noch Hilfe benötigen, um zu finden, was sie brauchen.UI-Designer können mehrere visuelle Tools verwenden, um die Aufmerksamkeit von Spielern zu erfassen und zu lenken, wie z. B.:
- Farbe: Helle Farben erregen mehr Aufmerksamkeit als fade.Verwende lebendige Farbtöne für wichtige Texte, Schaltflächen und andere Elemente und schwache Farbtöne für weniger bedeutende.Dieser Kontrast verbessert die Sichtbarkeit und reduziert Ablenkung.
- Größe: Größere Elemente sind auffälliger und werden als wichtig wahrgenommen, im Vergleich zu kleineren.
- Platz: Elemente, die durch ausreichenden negativen Raum oder Puffer umgeben sind, sind auffällig.
- Nähe: Gruppierte Elemente implizieren eine Verbindung.Durch das Platzieren von verwandten Funktionen und Elementen in der Nähe einander können Spieler ihre Vereinigung verstehen und sie leichter finden.
- Bewegung: Animierte Elemente ziehen Aufmerksamkeit auf sich.Selbst leichte Bewegung kann ein Element hervorheben unter statischen Gegenstücken.Partikeleffekte, wackelnde Schaltflächen und animierte Pfeile werden oft in Tutorials zur Orientierung verwendet.
Mäßigung ist der Schlüssel mit diesen Tools. Übermäßige Verwendung heller, bewegender Elemente könnte Spieler überwältigen und verwirren, anstatt ihnen zu helfen.
Beispiele
Im Ausbruch 's Saisonpass-UI, liegt ein Streifen golden-gelber unter den saisonpass-exklusiven Symbolen, der Aufmerksamkeit auf die Premium-Belohnungen lenkt und sie visuell von den kostenlosen unterscheidet.
In Drachenabenteuern wird der visuelle Vorrang dem teuersten Münzbündel gegeben, indem seine Größe erhöht und es mit mehr Platzierung getrennt wird, um es von kleineren Bündeln zu unterscheiden.
In Turmverteidigungs-Simulator werden sowohl Größe als auch Nähe verwendet, um tägliche Turm-Skins visuell zu gruppieren und zu unterscheiden.
Visuelle Sprache
Neben der Ausrichtung der Aufmerksamkeit der Spieler auf die wichtigsten Elemente auf dem Bildschirm entwickeln UI-Designer eine visuelle Sprache, um den Spielern zu helfen, zu verstehen, was sie sehen.Eine visuelle Sprache ist eine Reihe von absichtsvollen und konsistenten Designentscheidungen, die Informationen auf einen Blick über den Zweck, den Status, die Verbindungen und die Relevanz eines Elements liefern.Die Sprache wird aus Werkzeugen wie Form, Farbe und Stil zusammengesetzt.Einige der Verwendungen für visuelle Sprache umfassen:
Ikonen
Icons können eine visuelle Identität einsetzen, die Bedeutung und Assoziationen vermittelt.Zum Instanzkönnen Ikonen, die mit bestimmten Statistiken verbunden sind, eine Farbpalette und ähnliche Formen teilen, so dass Spieler ihre Funktion erkennen und verstehen können.
Schaltflächen
Als häufige Form der Spieler输入, müssen Schaltflächen leicht zu identifizieren sein.Wohnungs-Buttons in einem Container, wie eine Farbe, die den Text oder das Symbol umgibt, unterscheidet sie vom Hintergrund und macht sie interaktiv.Das Hinzufügen von Highlights oder Schatten kann ihren taktilen Reiz verbessern, indem es 3D-Tiefe vorschlägt.
Text
Überschriften und Titel mit wichtigen hochrangigen Informationen sollten größer und mutiger sein als der Körpertext.Farben, die gut lesbar sind und gut gegen die Hintergrundfarbe kontrastieren, sollten berücksichtigt werden.Stilistische Auswahl wie Farbe und Fettung kann wichtige Informationen wie In-Game-Artikel, Statistiken oder Fähigkeiten hervorheben.Stelle immer die Lesbarkeit im Vordergrund, wenn du eine Schriftart wählst.
Sobald die visuelle Sprache entworfen wurde, kann sie in einem Style-Leitfaden dokumentiert werden, einer Reihe von Regeln und Beispielen, die allen im Team helfen, die Sprache konsistent über das Spiel anzuwenden.
Konventionen
Konventionen sind häufig angewendete Designentscheidungen, die in vielen verschiedenen Spielen gesehen werden. Einige Beispiele sind:
- Ein X-Symbol auf einem Button, der den Dialog schließt, wenn gedrückt wird
- Die Farbe Grau gilt für Schaltflächen, die derzeit nicht verwendbar sind
- Ein Schloss-Symbol, das über einen Knopf oder eine Funktion gelegt wird, um anzuzeigen, dass der Spieler sie noch nicht verdient oder freigeschaltet hat
Angesichts ihrer weitreichenden Verwendung sind Spieler in der Regel mit solchen Konventionen vertraut.Die Nutzung dieser Familiarität kann eine Oberfläche intuitiver machen und die Notwendigkeit spezifischer Anweisungen für Spiele verringern.Das Spielen von Spielen innerhalb deines Zielgenres kann helfen, Konventionen zu identifizieren, die Spieler erkennen können.Ein UI-Designer kann sich für einen einzigartigen Ansatz entscheiden, um sein Spiel besser zu passen, aber das Wissen um diese Konventionen informiert seinen Entscheidungsprozess.
X Schließenknöpfe in Winds of Fortune , Dragon Adventures , BotClash Simulator und DOORS >
Grüne "Gesundheit"-Statistikkonstanz in Arkaner Odyssee >
Konsistenz
Was auch immer Entscheidungen, die ein UI-Designer trifft, sie sollten sie konsistent während des Spiels anwenden.Konsistenz hilft den Spielern, effizienter durch das Spiel zu navigieren, und verhindert Verwirrung und Frustration.
Hier sind einige Beispiele für die UI-Konsistenz in einem Spiel:
- Die "Gesundheit"-Statistik erscheint grün in allen Texten, verwandten Ikonen und der Gesundheitsleiste.
- Immer wenn der NPC-Dialog ein Artikelerwähnt, wird es hervorgehoben.
- Schließknöpfe sind immer quadratisch, rot und enthalten ein weißes X, das nur in der oberen rechten Ecke eines Dialogs erscheint.
- Wann immer ein Spieler ein Artikel im kaufennicht leisten kann, wird der Preis in Rot angezeigt.
Diese Auswahl ist absichtlich, um die Verständigung und Navigation des Spielers zu erleichtern.Durch ihre konsequente Anwendung ermöglichen sie es Spielern, verwandte Elemente zu verknüpfen, wichtige Gegenstände zu identifizieren, Muskelgedächtnis zu entwickeln, schnelle informierte Entscheidungen zu treffen und mehr Zeit im Spiel zu verbringen.
UX
UX-Design bezieht sich darauf, wie Spieler mit dem Spiel interagieren, wie sie ihre Wahl dem Spiel bekannt machen und wie sie von einer Wahl zur nächsten wechseln.Obwohl UX oft Hand in Hand mit der Benutzeroberfläche (UI) arbeitet, konzentriert sich mehr auf Interaktivität und Spielererfahrung als auf das visuelle und informative Design der UI.
Spieler verstehen
Ein Hauptziel des UX-Designers ist es, Interaktionen und Flüsse zu erstellen, die intuitiv, unaufdringlich und für Spieler einfach zu verwenden sind.Dieser Prozess beginnt mit einem Verständnis der Spieler selbst, des beabsichtigten Publikums für ein Spiel.Wenn du Spieler eines Erlebnisses identifizierst, berücksichtige gefolgte Profile:
Demographie: Die Demographie hilft, Designentscheidungen zu informieren, indem sie allgemeine Informationen über eine Gruppeoffenbart.Zum Beispiel sind jüngere Spieler generell wahrscheinlicher, auf mobilen oder Tablet-Geräten zu spielen als auf persönlichen Computern, weshalb Spiele für dieses Publikum oft die Planung und Feinabstimmung der mobilen Erlebnispriorisieren.
Stufe: Entwickler können sich dafür entscheiden, für Spieler mit wenig Erlebnis, eine beträchtliche Menge oder irgendwo dazwischen zu entwerfen.Interaktionen, die erfahrenen Spielern vertraut sind, wie das Drücken einer Zahlentaste, um ein Element in einer Toolleiste auszurüsten, oder das Drücken von c, um sich zu bücken, sind möglicherweise nicht für unerfahrene Spieler offensichtlich und erfordern zusätzliche Nachrichten oder Schulungen.
Genre-Kenntnis: Ähnlich wie der allgemeine Stufespiegelt die Genre-Kenntnis das Erfahrungslevel der Spieler mit einer bestimmten Art von Spiel wider.Spiele, die in beliebte Genres auf Roblox fallen, wie Rollenspiel, Überlebenshorror und First-Person-Shooter, werden wahrscheinlich viele potenzielle Spieler haben, die zuvor ein ähnliches Spiel gespielt haben.Spiele in anderen Genres haben möglicherweise weniger erfahrene Spieler, aber diese Erfahrungslücke kann durch Tutorials und Benutzerfreundlichkeit überwunden werden.
Spielstil: Spieler favorisieren oft spezielle Arten von spielen, die von Wettbewerb und Leistungssammlung bis hin zu Erkundung und Zusammenarbeit reichen.Diese Präferenzen werden nicht nur in den Spielmechanismen widerspiegelt, die Spieler bevorzugen, sondern beeinflussen auch UX-Entscheidungen.Designer betrachten, welche Interaktionen priorisiert werden sollen, welche poliert werden sollen und welche den Spielern präsentiert werden sollen.Sie berücksichtigen auch die Denkweise, die Spieler haben, wenn sie sich mit diesen Interaktionen beschäftigen und die Emotionen, die sie von ihnen hervorrufen wollen.
Nachdem du diese Faktoren berücksichtigt und eine Zielspielergruppe (oder Gruppen) ausgewählt hast, lerne sie kennen, indem du mit ihnen spielst und über ihre Ziele und Präferenzen informierst, um Designentscheidungen besser zu informieren.
Design-Interaktionen
Interaktionen sind Funktionen, die es Spielern ermöglichen, ihre Auswahl in einem Spiel zu erleben und zu kommunizieren.UX-Designer möchten, dass diese Interaktionen intuitiv sind und so wenig Erklärung wie möglich erfordern.Um dies zu tun, nutzen sie:
- Konventionen
- Metaphernen
- Rückmelde
Konventionen
Konventionen sind UX-Designs und Prinzipien, mit denen Spieler möglicherweise bereits vertraut sind aus anderen Spielen.
Beispiele für Konventionen umfassen:
- Die "E"-Nahfeldaufforderung, die Roblox-Entwickler verwenden, um den Spielern mitzuteilen, dass ein Element interagierbar ist, wenn sie nah genug stehen, um es zu sehen.
- Die "C"-Taste, mit der der Avatar des Spieler:inkriechen kann, um unter Hindernissen hindurchzukommen oder in enge Räume zu passen.
- Nummernschlüssel ausrüsten Gegenstände aus einer Toolbar in die Hände des Avatars, damit sie verwendet werden können.
- Gehen in Kreise auf dem Boden, um sich für ein übereinstimmenin der Warteschlange anzustellen.
Konventionen werden festgelegt, wenn eine bestimmte Implementierung oder Designwahl aufgrund ihrer einfachen Bedienung beliebt wird.Zum Beispiel "C" zu kriechen ist leicht zu erinnern, da es der erste Buchstabe im Wort "Kriechen" ist und sich bequem neben WASD befindet, den Tasten, mit denen Spieler navigieren.Es ist eine einfache Interaktion, die schnell und unter Druck durchgeführt werden kann, was ideal ist, da das Versuchen, sich vor einer sich nähernden Bedrohung zu verbergen oder zu fliehen, ein häufiger Fall für das Kriechen ist.
Metaphern
Metaphern beziehen ein abstraktes Konzept auf ein bekannteres, um einen Kurzweg zur Verständnis zu schaffen.In diesem Beispiel aus Spellbound Wizard RPG wird der Akt des Zauberwurfs durch das Ziehen von Karten aus einem Deck durchgeführt.Die auf der Plattform basierende UI/UX begründet den abstrakten Akt des Zauberwurfs, der keine reale Lebensausdruck hat, in etwas, das Spieler leichter und schneller verstehen können.
Rückmeldung
Die Kommunikation vom Spiel an den Spieler ist als Feedback bekannt.Feedback hilft den Spielern zu verstehen, dass eine von ihnen durchgeführte Aktion einen Effekt im Spiel hatte.Es kann dazu beitragen, zu lernen, wie das Spiel funktioniert, und fügt eine zusätzliche polnische Schicht hinzu, die eine Funktion angenehmer zu verwenden macht.Einige Beispiele für Feedback umfassen:
- Ein Feind spielt seine "Hit"-Reaktionsanimation ab, um anzugeben, dass es Schaden durch die Waffe des Spieler:inerlitten hat
- Eine Schaltfläche, die die Farbe ändert, um den Zustand "Hover-Nachricht", "Depressed" und "Freigegeben" (ausgewählt) anzuzeigen
- Ein Kassensoundeffekt "cha-ching!" spielt, wenn der Spieler einen kaufenabschließt
- Eine Fortschrittsleiste füllt sich, wenn der Spieler Quest-Ziele abschließt
Wenn Feedback fehlt oder unzureichend ist, wissen Spieler möglicherweise nicht, was sie erreicht haben, verstehen, ob die Effekte gut oder schlecht waren, oder wissen sogar, ob die Funktion, die sie verwenden, richtig funktioniert oder Fehler auftritt.
Designflüsse
Mehrere Interaktionen sind oft erforderlich, damit ein Spieler ein Ziel abschließt.UX-Designer kümmern sich darum, wie Spieler von einer Aktion oder einem UI-Bildschirm oder einer Auswahl zur nächsten navigieren und sicherstellen, dass diese Pfade logisch und praktisch sind.
Zum Beispiel, um ein Element auf einem Avatar in Berry Avenue RP auszustatten, muss ein Spieler:
- Finde und tippe auf die Avatar-Schaltfläche
- Wählen Sie eine Artikelkategorie (Gesicht, Kopf, Nacken usw.)
- Scrollen, um ein interessantes Element zu finden
- Tippe auf das Element, um es auf seinem Avatar auszustatten
- Finde und tippe auf die Schaltfläche Fertig, um die Avataranpassung zu verlassen
Diese Schritte zusammen betragen den Avatar-Anpassungsfluss.Dieser Fluss ist einfach und unkompliziert, mit so wenigen Schritten wie möglich, um ein Artikelauszustatten.Da Spieler nicht viele Aktionen ausführen oder zu viel darüber nachdenken müssen, was sie tun müssen, ist dieser Fluss niedrig in Reibung, einer Messung der Anstrengung, die erforderlich ist, um ein Ziel zu erreichen.
Die Entwicklung effizienter, niedriger Reibungflüsse erfordert eine sorgfältige Betrachtung von Anwendungsfällen. Diese Anwendungsfälle können als Spielerziele ausgedrückt werden, wie:
- Möchte einen Avatar schnell modifizieren können
- Gegenstände leicht finden, während du modifizierst
- Vorschau von Elementen vor der Auswahl
- Einfache Artikelentfernung nach Auswahl
Diese Ziele leiten dann das UI- und UX-Design der Funktion:
- Spieler greifen über einen prominenten Knopf auf der HUD auf die Avatar-Anpassungsfunktion zu und können sofort beginnen, Gegenstände für ihre Avatare auszurüsten
- Register ordnen die Elemente in praktische Kategorien ein, und das Suchfeld ermöglicht es Spielern, direkt nach Elementen zu suchen
- Artikel werden sofort auf dem Avatar angezeigt
- Spieler können das Element entfernen, indem sie erneut darauf tippen, um es abzuwählen, oder indem sie in der ausgerüsteten Artikelliste darauf tippen
Designer können dann beginnen, die UI zu entwerfen und die Schritte zu planen, die Spieler unternehmen werden, um das Ziel zu vervollständigen, ihren Avataren zu modifizieren.Dieser Prozess kann durch die Verwendung einer Flussdiagramm unterstützt werden, die die Aktionen der Spieler visuell darstellt, wenn sie durch die UI navigieren.Diese Diagramme können helfen, übersehene Schritte, Schmerzpunkte, an denen die Schritte unklar oder lästig sind, und übermäßige Reibung zu identifizieren.
