Wählen Sie einen Kunststil

Die Wahl eines Kunststils ist der Prozess, bei dem Sie einen ästhetischen Richtungsstil für Ihre UI-Elemente planen. Es ist wichtig, dass Sie Ihren Designprozess mit einem Kunststil beginnen, da Kunststile visuelle Bodenregeln bieten, an denen Sie referenzieren können, um sicherzustellen, dass Ihre UI intuitiv den Spielern Informationen darüber bietet, was sie in Ihrem Erlebnis tun können.

Dieser Abschnitt des Benutzeroberflächen-Kurses zeigt dir, wie du deine Erlebnisin der Bedeutungsvolligkeit präsentieren kannst, indem du die Beispiel-Laser-Tag-Erfahrung.rbxl Datei als Referenz verwendest. Dieser Abschnitt zeigt dir, wie du deine Entscheidungen in der Bedeutungsvolligkeit präsentieren kannst, indem du Anleitungen für:

• Identifizieren Sie die notwendigen UI-Elemente entsprechend dem, was Sie den Spielern während Ihres Erlebnisses kommunizieren möchten.
• Auswählen eines Farbthemas, das Genre-spezifische Farbregeln verwendet, die für Ihr Publikum intuitiv sind.
• Umriss einfacher Symbole, die auf jedem Bildschirm eine einfache Lesbarkeit haben.
• Eine Knopf-Reihenfolge erstellen, die der Wahrscheinlichkeit entspricht, dass verschiedene Spieler-Workflows arbeiten.
• Bestimmung eines Text-Systems, das Legibilität auf Zielgeräten garantiert.

Nachdem Sie diesen Abschnitt abgeschlossen haben, werden Sie lernen, wie Sie die Struktur und den Fluss der Informationen designen, die Sie den Spielern über die UI innerhalb Ihres Erlebnisses kommunizieren möchten.

Identifizieren Sie Ihre UI-Elemente

Der erste Schritt beim Auswählen eines Kunststils für Ihre UI ist es, zu identifizieren, welche UI-Elemente Sie für die verschiedenen Arten von Informationen benötigen, die Sie Ihrem Publikum mitteilen möchten. Wenn Sie dies tun am Beginn Ihres Design-Prozesses ist von entscheidender Bedeutung, weil Sie die UI-Elemente nach ihrem Funktionszweck kategorisieren, semantische Entscheidungen nach dem Ort und Zeitpunkt, an dem die Spieler mit jedem UI-Element interag

Es gibt viele verschiedene Möglichkeiten, welche UI-Elemente für Ihre Spielanforderungen notwendig sind, aber es wird empfohlen, mit dem Visionieren zu beginnen, was ein Spieler braucht, sobald er Ihrem Erlebnis beitritt. Zum Beispiel, wenn ein Spieler die Beispiel-Laser-Tag-Erfahrung öffnet, kann er sich die folgenden Fragen stellen:

• Was ist das Ziel des Erlebnisses?
• Wie weiß ich, wer in meinem Team ist?
• Wie kann ich die Punkte meines Teams verfolgen?
• Wie wähle ich einen Blaster aus?
• Wo weiß ich, wo der Blaster einen Laser abfeuert?
• Wenn ich auf einem mobilen Gerät bin, wie schieße ich meinen Blaster?
• Wann kann ich nach dem Laserschießen wieder schießen?
• Wie weiß ich, wann ich die Runde starten möchte?
• Wie weiß ich, wenn ich jemanden mit meinem Blaster erfolgreich versehe?
• Wie weiß ich, wenn das feindliche Team mich erfolgreich markiert?

Durch die Verwendung dieser Fragen, um zu verstehen, welche Informationen für Spieler wichtig sind, um erfolgreich zu sein, können Sie die UI-Anforderungen der Erlebnisin drei Kategorien sortieren:

1. Informationen über das Ziel des Erlebnisses.
2. Informationen über den Blaster.
3. Informationen über den Zustand des Spieler:in.

Die Sortierung der UI deines Erlebnisses in Kategorien ist hilfreich, da du so deinen Kreativstil in jede Gruppe einfügen kannst, um zu verstärken, welche Informationen jede Kategorie den Spielern mitteilen soll. Zum Beispiel, wenn du möchtest, dass deine UI den Spielern mitteilen kann, welche Aktionen sie mit ihrem Statustun können, wählst du einen Kreativstil mit UI-Elementen, die die Farbe Grün und/oder Plus-Symbole

Nachdem Sie die UI-Anforderungen in Kategorien sortiert haben, können Sie eine Liste der UI-Elemente erstellen, die für die Anforderungen jedes Kategoris erforderlich sind. Um zu zeigen, verwendet das Beispiel Laser-Tag-Erlebnis die folgende Tabelle von UI-Elementen, um die vorherige Liste von potenziellen Spielerfragen zu beantworten. Während Sie durch dieses Tutorial arbeiten, wird das UI-Curriculum weiterhin auf diese Liste und Highlight-Hauptdesignentscheidungen zielen, die sich auf jede K

Jetzt, da du eine Liste von UI-Elementen für deine Erlebnishast, ist es an der Zeit, stilistische und semantische Auswahl für jede Gruppierung von UI-Elementen zu beginnen, mit einem Farbthema zu beginnen.

Wählen Sie ein Color Theme

Ein Farbthema oder eine Farbpalette ist eine Auswahl von Farben, die jeweils eine Nachricht über eine konsistente Anwendung innerhalb Ihres Erlebnisses, wie das Verwenden einer hellen Farbe, um anzuzeigen, wenn etwas auswählbar ist, ist wichtig, vor allem, wenn Sie auf Farbgebote innerhalb des Genres Ihres Erlebnisses angewenden, da dies die Spieler mit minimalem Aufwand schnell verstehen können, mit dem Sie Ihre UI mit minimalem Aufwand schnell ver

In dem Umweltkunst-Kurriments ist jede Hälfte des Lasertag-Umgebungs von oben nach unten farblich kodiert, um zu unterscheiden, welcher Bereich der Karte in der Nähe der jeweiligen Spawn-Zone ist:

Die Beispiel-Laser-Tag-Erfahrung verwendet dieselbe Farbthema in ihrer UI, um Informationen darzustellen, die für jedes Team relevant sind, wie zum Beispiel der Team-Indikator jedes Spieler:ininnerhalb des Platzoder der Team-Punkt-Tracker, der den Umgebungüberschneidet. Diese Konsistenz hilft den Spielern, die Informationen über das Ziel der Erlebniswährend des schnellen Gameplays eines Erlebnis

Wenn Sie ein Farbthema für Ihr eigenes Erlebnis auswählen, berücksichtigen Sie gefolgte Profile:

• Die Stärke eines Farbthemas basiert darauf, den Spielern zu helfen, schnelle mentale Verknüpfungen zwischen jeder Farbe und ihrer Funktion herzustellen. Aus diesem Grund begrenzen Sie Ihr Farbthema , um nur die wichtigen Informationen zu zeigen, mit denen Sie die Spieler mit Ihren UI-Elementen verknüpfen möchten.
• Um Spielern mit Farbblindheit zu ermöglichen, die Nachricht von Ihrem Farbthema zu verstehen, verlassen Sie die Abhängigkeit von Farbe allein nicht , um zwischen Benutzeroberflächenelementen zu unterscheiden. Stattdessen kombinieren Sie Farben mit Icons, Formen und/oder Animationen, um Ihre UI effektiv mit jedem Spieler:inzu kommunizieren.
• Es ist wichtiger, dass Ihre UI lesbar ist, als es ästhetisch ansprechend ist. Aus diesem Grund priorisieren Sie einfache UI mit Farbe, die über beide hell und dunkel Elemente in der 3D-Welt lesbar ist .

Um die Richtlinien in letzter Sektion zu betonen, verwendet die Probe-Laser-Tag-Erfahrung die neutralen Farben von Schwarz und Weiß für fast jeden anderen UI-Element, das die 2D-Bildschirm überschneidet. Schwarz und Weiß sind gut voneinander zu lesen, und sie sind leicht zu lesen, da der Rest des Bildschirms eine andere farbige 3D-Umgebung anzeigt.

Umriss einfache Symbole

Ein Symbol ist ein Symbol, das eine Action, ein Objekt oder eine Konzept in einem Erlebnis darstellt. Die Umrandung von Icons, die einfach und intuitiv sind, ist wichtig, da das Ergebnis das Spielern die Möglichkeit bietet, leicht zu erkennen, was sie tun können und was du durch deine UI ohne Texten ermöglichen möchtest. Dieser Prozess ist noch wichtiger, wenn dein Publikum mit einem kleinen

Einfache Icons haben normalerweise einen einzigartigen Stil von Ihren 3D-Elementen, während sie immer noch die Gesamtwelt Ihrer Erlebnisbetrachten. Zum Beispiel in der finalen Umgebung des Umweltkunst-Curriculum haben sowohl modulare als auch prop 3D-Assets einen sauberen, hochmodernen Kunststil, der rechteckige Formen mit weichen, runden Ecken verwendet. Von den Wellpappen entlang des Bod

Um diesen Kunststil zu ergänzen, während Sie immer noch einzigartig bleiben, enthalten alle UI-Elemente, die Sie später in diesem Tutorial lernen, einen futuristischen Ästhetik und runden Winkeln, ohne die Formsprache der 3D-Assets im Umgebungsbereich zu entsprechen. Dies hält jedes Icon's Bedeutung von anderen Informationen im 2D- und Platz.

Um dieses Konzept zu demonstrieren, sehen Sie sich die folgenden zwei Bilder der Beispiel-Laser-Tag-Erfahrung des Crosshairs an, die den Spielern zeigt, wo ihr Blaster auf dem Bildschirm schießt, und die Schaltfläche, mit der die Spieler ihren Blaster auf mobilen Geräten abfeuern können. Beide Symbole enthalten weiche Winkel, um mit der Weltzu verschmelzen, aber ihre sechsseckigen und kreisförmigen Formen setzen sie von allem ab,

Wenn Sie einfache Icons für Ihr eigenes Erlebnis ausrichten, berücksichtigen Sie gefolgte Profile:

• Einfache Symbole sind auch dann lesbar, wenn sie klein sind. Aus diesem Grund Beschränkungen auf Ihren Symbolen , die auf dem mobilen Gerät nicht erkennbar würden.
• Symbole sind mächtig, weil sie eine Nachricht übermitteln können, unabhängig von der Sprache des Spieler:in. Solange sie nicht das Verständnis des Spielers beeinflussen, erscheinen Sie mit Icons überschüssigen Text mit Icons ersetzen , um die Lokalisierungsanstrengungen zu verbessern.
• Viele Erlebnisse desselben Genres verwenden Icons, die stilistisch ähnlich sind, wie ein Schwert-Icon, das Stärke repräsentiert, oder ein Becher, der Magie repräsentiert. Umgeße den Symbolismus in deiner Erlebnissen-Genre , damit Spieler deine Icons ohne zusätzliche Anleitung verstehen können.

Wenn Sie nicht wissen, welche Arten von Icons innerhalb der Genre Ihres Erlebnisses häufig sind, dann check out the Spiel-UI-Datenbank . Dieser kostenlose Ressourcen-Tool für UI-Designer enthält Screenshots von Hunderten von Spielen von verschiedenen Genres, die Sie während Ihres Designprozesses referenzieren können.

Interaktionsordnung erstellen

Eine Interaktions顺序 ist die Reihenfolge der Interaktionen, die Spieler mit deiner UI haben können. Wenn es oft mehrere interaktionsfähige UI-Elemente auf dem Bildschirm gibt, ist es wichtig, einen intuitiven Interaktions顺序 zu erstellen, um den Spielern zu helfen, Entscheidungen zu treffen, während sie verschiedene Workflows navigieren.

Es gibt drei Arten von Interaktionen in einem Workflow:

• Primäre Interaktion – Die Aktion, die ein Spieler am wahrscheinlichsten ausführt.
• Sekundäre Interaktion – Die Aktion, die ein Spieler wahrscheinlich als Alternative zur primären Actionausführt.
• Tertiäre Interaktion – Die Aktion, die ein Spieler am wenigsten wahrscheinlich ist.

Jeder Interaktionstyp muss ein anderes Niveau visuellen Akzentes abhängig von der Wahrscheinlichkeit, mit der ein Spieler die Actionausführt, haben. Um dieses Konzept zu illustrieren, untersuchen Sie das folgende Bild der Interaktions顺序 für den Workflow, in dem A den primären Interaktionslevel auswählt, B den Sekundärinteraktionslevel auswählt und C das tertiäre Interaktionslevel auswählt.

In diesem Workflow ist die Aktion, die ein Spieler am wahrscheinlichsten ausführen wird, die Auswahl zwischen den beiden verschiedenen Arten von Blaster, so dass die Blaster-Schaltflächen viel größer sind als jedes andere interagierbare Element in der Design. Dieser visuelle Fokus fängt die Aufmerksamkeit des Spieler:inund zieht seinen Blick auf die Mitte des gesamten UI-Elements. Nachdem der Spieler seine Entscheidung getro

Während es unwahrscheinlich ist, dass der Spieler weiß, dass er eines der Blaster-Schaltflächen auswählen kann, um zu kommunizieren, welcher Blaster er verwenden möchte. Um bei dieser Situation zu helfen, gibt es zwei Pfeiltasten, die der Spieler verwenden kann, um zwischen seinen Auswahlmöglichkeiten zu wechseln. Diese Schaltflächen sind subtil und viel kleiner als die Elemente der primären und sekundären Interaktionen, aber sie sind auch für den Spieler sichtbar, der

Wenn Sie diese primären, sekundären und tertiären Interaktionen in einer anderen Interaktions顺序 platzieren würden, z. B. die SELECT-Schaltfläche mit der linken Pfeiltaste tauschen, hätten die Spieler keine klare Richtung in der Reihe der Auswahlmöglichkeiten, die sie treffen müssen. Aus diesem Grund folgen effektive Workflows einer visuellen Hierarch

Wenn Sie eine Interaktionsordnung für die Workflows in Ihrer eigenen Erlebniserstellen, berücksichtigen Sie gefolgte Profile:

• Spieler müssen ein klares Verständnis haben, wann sie mit Ihrer UI interagieren können, um Aktionen auszuführen. Aus diesem Grund wird empfohlen, mindestens eine Form von visuellen Feedback zu bieten für interaktionsfähige UI-Elemente, wie das Anzeigen eines Umrisses oder das Ändern der Größe, Farbe oder Animation eines Buttons, wenn er in Fokus ist.
• Wenn die Etiketten auf interaktbaren UI-Elementen unscharf oder ähnlich sind, wie z. B. bei der Abwicklung eines Aktionen oder eines Prozesses, können Spieler den Eindruck haben, wie man eine Aktion oder einen Prozess abschließt. Um eine negative Erlebniszu vermeiden, erstellen Sie Etiketten, die löschen, einfach und unterschiedlich von einander sind .
• Wenn interaktive UI-Elemente zu groß sind, können sie von anderen wichtigen Informationen auf dem Bildschirm ablenken. Umgekehrt können sie, wenn sie zu klein sind, schwer zu lesen oder schwer zu wählen, besonders wenn sie in der Nähe sind. Aus diesem Grund ist es wesentlich, die Größe Ihrer interaktbaren UI-Elemente auf verschiedenen Bildschirmen zu überprüfen .

In Im Studio implementieren lernst du, wie du UIAspectRatioConstraint Objekte verwenden, um sicherzustellen, dass die UI-Elemente ein bestimmtes Aspekt-Verhältnis behalten, unabhängig davon, welches Gerät Spieler auf deine Erlebniszugreifen. Darüber hinaus kann diese Technik auch dazu beitragen,

Bestimmen Sie ein Text-System

Ein Text-System ist eine Reihe von Regeln über Schriften und Stile für alle Wörter in deiner UI, wie " immer krasse Üerschriften " oder " grüne Schriften verwenden, wenn man eine Gesundheitsstat referenziert ". Wenn du ein Text-System früh in deinem Designprozess bestimmst, kannst du eine Struktur haben, die du konsistent anwenden kannst, während du auf deine gesamte Erfahrung suchst, damit die Spieler wissen, was sie suchen, wenn sie nach der

Während die Text-Systeme unterschiedliche Erlebnisund 3D-Welt-Anforderungen beinhalten können, ist die wichtigste Regel, die alle Text-Systeme folgen müssen, um zu gewährleisten, dass alle IU-Texts klar und leicht zu lesen sind . Indem Sie diese Regel als Basis für alle Entscheidungen, die sich auf Ihr Text-System beziehen, verwenden, können Sie die Barrierefreiheit und das Benutzererlebnis für Spieler verbessern

• Die Gerätetreiber, die Sie verwenden, um auf Ihr Erlebnis zuzugreifen.
• Die Sprache, in der Spieler deinen lokalisierten Text lesen können.
• Der mögliche untere Hintergrund hinter dem on-screen-Text.

Zum Beispiel, die folgende Bildschirm-Antwort-Design, wenn ein Spieler ausgegraut wird, skaliert in kleinerer oder größerer Schriftgröße, je nach Geräte des Spieler:in, einschließlich genug Platz auf beiden Seiten des Englischen Texts für Sprachen mit längeren Übersetzungen und enthält einen kontrastierenden Hintergrund, damit Spieler den Text lesen können, unabhängig davon, welche Farbe in ihrem Hintergrund ist.

Wenn Sie ein Text-System für Ihr eigenes Erlebnis festlegen, berücksichtigen Sie gefolgte Profile:

• Text ist schwer zu lesen, wenn er sich mit der Lärm des Hintergrunds vermischt. Um die Legibilität Ihrer UI zu verbessern, zeigen Sie Text oben einer kontrastreichen Farbe oder mit einem Strich. * Wenn Sie Ihren Text für verschiedene Geräte skalieren, wird der Text entweder zu viel Platz einnehmen oder auf dem Bildschirm des Spieler:inklein und unleserlich werden. Um Diskrepanzen in Ihrem Text zu erkennen, testen Sie Ihr Design auf mehreren Geräten während des Designprozesses.
• Wörter können über dein ursprüngliches Design hinausgehen, wenn du sie in andere Sprachen lokalisierst. Um die Zusammensetzung deines Designs zu verbessern, verweise auf den meisten Platz, den dein Text auf dem Bildschirm einnehmen kann .
• Während einige Schriften die Ästhetik Ihres Erlebnisses unterstützen können, können sie in großen Mengen schwer zu lesen sein. Aus diesem Grund verwenden Sie stilized text sparingly , wie für Titel oder Alarmtext.

Sobald Sie einen Plan für den Kunststil Ihrer UI haben, können Sie zum nächsten Abschnitt des Tutorials wechseln, um zu lernen, wie Sie das Layout jedes Elements in verschiedenen Player-Workflows verwalten.