Entwerfen Sie Ihre Layouts

Wireframing Ihrer Layouts ist der Prozess, die Struktur und den Fluss der Informationen zu entwerfen, die Sie durch die Benutzeroberfläche in verschiedenen Arbeitsabläufen kommunizieren möchten. Dieser kritische Schritt des Tutorials ermöglicht es Ihnen, die Anordnung Ihrer UI-Elemente zu iterieren, Schmerzpunkte zu entdecken und das Spielerlebnis zu verbessern, bevor Sie Zeit und Ressourcen in ein problematisches Design investieren, das nicht für Ihr Spiel funktioniert.

Anhand der Beispiel-Laser-Tag-Spiel .rbxl-Datei als Referenz zeigt Ihnen dieser Abschnitt des Benutzeroberflächen-Curriculums, wie Sie Ihre UI-Elemente auf dem Bildschirm strukturieren, einschließlich Anleitungen zu:

• Planung einer visuellen Hierarchie für Ihre Benutzeroberfläche, die die Spieler intuitiv zu den Funktionen und Informationen führt, die sie benötigen, um in Ihrem Spiel erfolgreich zu sein.
• Blockieren von UI-Elementen mit grundlegenden Formen, um die Komposition Ihrer UI-Elemente neben Robloxs Kernbenutzeroberfläche und Touch-Steuerungen zu überprüfen.
• Entwicklung von Benutzerflüssen, um die notwendigen Aktionen zu berücksichtigen, die Spieler ausführen müssen, um ihre Ziele zu erreichen.

Nachdem Sie diesen Abschnitt abgeschlossen haben, lernen Sie, wie Sie Ihre Benutzeroberfläche in Studio konstruieren und konfigurieren, die Ihren Kunststil und Ihre Wireframes respektiert.

Planen Sie eine visuelle Hierarchie

Eine visuelle Hierarchie ist eine Organisationsstruktur, die UI-Elemente nach ihrer Wichtigkeit hervorhebt. Die Planung einer visuellen Hierarchie für die verschiedenen Arbeitsabläufe in Ihrem Spiel ist wichtig, da sie die Spieler auf den Erfolg bei der Erreichung ihrer Ziele vorbereitet, was besonders notwendig ist für das schnelle Gameplay von Ego-Shooter-Spielen, in denen sich die Ziele von Moment zu Moment ändern.

Effektive visuelle Hierarchien führen die Spieler durch die Funktionen und Informationen, die sie benötigen, um Ihre Gameplay-Anforderungen zu erfüllen, je nachdem, wo sie natürlich auf dem Bildschirm schauen, um Arbeitsabläufe abzuschließen. Zum Beispiel muss die visuelle Hierarchie des Beispiel-Laser-Tag-Spiels die Spieler durch die folgenden Kategorien von UI-Elementen führen, während sie die Karte navigieren und Spieler im gegnerischen Team markieren:

1. Informationen über das Ziel des Spiels.
2. Informationen über den Blaster.
3. Informationen über den Zustand des Spielers.

Der Standort jeder dieser Kategorien auf dem Bildschirm im endgültigen Design hebt ihre Wichtigkeit hervor:

• Die erste Kategorie befindet sich nahe der Oberseite, da sie UI-Elemente enthält, die die größte Bedeutung dafür haben, wie man das Spiel gewinnt.
• Die zweite Kategorie nimmt den Großteil des Bildschirmraums in der Mitte ein, da sie als Fokuspunkt dient, um die Aufmerksamkeit der Spieler auf die Aktion im 3D-Raum zu lenken, und sie hat die größte Bedeutung für das Spielen des Spiels.
• Die dritte Kategorie befindet sich nahe den Seiten, da die Spieler diese peripheren Informationen lesen können, ohne ihre Aufmerksamkeit vom Gameplay abzulenken.

Für einige Spielgenres müssen Sie nur eine Kategorie von Informationen gleichzeitig anzeigen, da es die einzige Art von Informationen ist, die für den Spieler während dieses Arbeitsablaufs wichtig ist. Für Ego-Shooter-Spiele müssen die Spieler jedoch UI-Elemente aus mehreren Kategorien gleichzeitig sehen, da sie alle Informationen bereitstellen, die der Spieler benötigt, um erfolgreich zu sein, wie z. B. den Punktestand ihres Teams, die Abklingzeit für ihren Blaster und ob sie aus einer Runde herausgezeichnet wurden.

Bei der Planung einer visuellen Hierarchie für die Arbeitsabläufe in Ihrem eigenen Spiel sollten Sie Folgendes berücksichtigen:

• Wenn Sie UI-Elemente aus verschiedenen Kategorien auf dem Bildschirm gruppieren, wissen die Spieler nicht, wo sie nach dem suchen sollen, was sie benötigen. Um den Spielern zu helfen, sich in Ihrem Spiel zurechtzufinden, gruppieren Sie UI-Elemente aus derselben Kategorie zusammen.
• Wenn Sie zu viele Kategorien gleichzeitig auf dem Bildschirm haben, wissen die Spieler möglicherweise nicht, auf welche Informationen sie achten müssen. Um zu vermeiden, dass die Spieler mit Unordnung überwältigt werden, zeigen Sie UI-Elemente kontextuell für verschiedene Arbeitsabläufe an.
• Ebenso kann es, wenn es zu viele UI-Elemente pro Kategorie gibt, die Spieler davon ablenken, wie sie eine Aktion oder einen Prozess abschließen. Aus diesem Grund ist es wichtig, Ihren Kunststil zu verwenden, um visuelle Akzente für Ihre idealen Interaktionsreihenfolgen zu setzen.

Für eine vollständige Überprüfung der visuellen Hierarchie des Beispiel-Laser-Tag-Spiels siehe die folgende Tabelle:

Blockieren Sie UI-Elemente

Jetzt, da Sie eine visuelle Hierarchie im Kopf haben, können Sie einzelne UI-Elemente mit grundlegenden Formen blockieren, um die Komposition Ihres benutzerdefinierten UI-Layouts neben Robloxs Kernbenutzeroberfläche auf mehreren Geräten zu überprüfen. Dieser Prozess ermöglicht es Ihnen zu sehen, wo Sie Ihr Design ändern müssen, damit es auf allen Bildschirmgrößen, die die Spieler verwenden können, um auf Ihr Spiel zuzugreifen, effektiv ist, wie z. B. auf Mobilgeräten, Tablets, Laptops und Fernsehern.

Bevor Sie beginnen, müssen Sie herausfinden, wie viel Bildschirmfläche für Ihre benutzerdefinierten UI-Elemente verfügbar ist, während Sie Robloxs Kernbenutzeroberfläche berücksichtigen. Zum Beispiel zeigt Roblox standardmäßig die folgenden UI-Elemente in jedem Spiel an:

• Eine Liste von Spielern im Spiel.
• Die Gesundheitsanzeige des Charakters.
• Der Rucksack des Charakters.
• Ein Chatfenster.
• Eine Schaltfläche zum Erfassen.
• Ein Popup-Menü mit Charakter-Emotes.

Sie können deaktivieren alle diese Elemente, die nicht den Gameplay-Anforderungen Ihres eigenen Spiels entsprechen, um Bildschirmfläche für Ihre benutzerdefinierte Benutzeroberfläche zu sparen. Zum Beispiel benötigt das Beispiel-Laser-Tag-Spiel keinen Rucksack, da die Spieler nur die Möglichkeit haben, einen einzigen Blaster auszuwählen. Wenn die Spieler jedoch mehrere Blaster gleichzeitig auswählen könnten, könnte das Spiel diese Kernbenutzeroberfläche deaktivieren, um sicherzustellen, dass immer Platz für die Blasterauswahl vorhanden ist, wenn die Spieler wiederbelebt werden, und dann einen anderen Ort bereitstellen, um aus Ihrem Inventar auszuwählen.

Neben Robloxs Kernbenutzeroberfläche müssen Sie auch den notwendigen Bildschirmplatz für Robloxs Standard-Touch-Steuerungen berücksichtigen. Wenn die Spieler beispielsweise Ihr Spiel mit einem mobilen Gerät aufrufen, wird ein virtueller Daumenstick in der unteren linken Ecke des Bildschirms angezeigt, und eine Sprungtaste wird in der unteren rechten Ecke des Bildschirms angezeigt. Dies stellt sicher, dass die Spieler immer in der Lage sind, sich in Ihrem Spiel zu bewegen, auch wenn sie keinen Zugriff auf eine Tastatur oder einen Controller haben.

Indem Sie sowohl die notwendigen UI-Elemente von Roblox, die für das Gameplay Ihres Spiels erforderlich sind, als auch die Möglichkeit von Touch-Steuerungen berücksichtigen, können Sie Ihre benutzerdefinierten UI-Elemente in einem Design blockieren, das sich an verschiedene Geräte anpasst. Dies ist wichtig, da es bedeutet, dass Sie keine separaten Versionen Ihrer Benutzeroberfläche pflegen müssen, während Sie Ihr Spiel aktualisieren.

Um diese Methode zu demonstrieren, überprüfen Sie die folgenden beiden Bilder, wie das Beispiel-Laser-Tag-Spiel die benutzerdefinierten UI-Elemente sowohl für mobile als auch für PC-Geräte blockiert. Beide Bilder enthalten:

• Grundformen, um benutzerdefinierte UI darzustellen, da dies das Design ermöglicht, mehrere Iterationen durchzugehen, bevor das endgültige Design erreicht wird.
• Graustufenfarben, die es dem Auge ermöglichen, Informationen zu folgen, ohne von einer bunten Hintergrundumgebung abgelenkt zu werden.
• Den offenen Zustand des Chatfensters und die Liste der aktiven Spieler, um zu sehen, wie viel Platz sie auf dem Bildschirm einnehmen.
• Platz für mobile Steuerungen, auch wenn sie für PC-Geräte nicht notwendig sind.

Wenn Sie Ihre Layouts auf diese Weise entwerfen und dabei darüber nachdenken, wie viele UI-Elemente gleichzeitig auf dem Bildschirm vorhanden sein können, machen Sie Ihre Layouts zukunftssicher für alle potenziellen Layouts entsprechend den Geräten und Arbeitsabläufen der Spieler.

Beim Blockieren von UI-Elementen für Ihre Layouts sollten Sie Folgendes berücksichtigen:

• Wo und wie Sie Ihre UI blockieren, kann die Komposition Ihrer Layouts beeinflussen. Zielen Sie auf Balance und Symmetrie in der Menge und Größe Ihrer benutzerdefinierten UI-Elemente neben Robloxs Kernbenutzeroberfläche ab.
• Die Interaktion mit UI, die weit von den unteren Ecken einiger mobiler und Tablet-Geräte entfernt ist, ist entweder unangenehm oder unmöglich. Platzieren Sie interaktive Elemente in leicht erreichbaren Zonen in der Nähe der natürlichen Ruheposition für Daumen.
• Wenn die Spieler durch Ihre Umgebung navigieren, kann der 3D-Raum von Ihrer On-Screen-UI ablenken. Testen Sie Ihre Layouts gegen eine Vielzahl möglicher Hintergründe, um sicherzustellen, dass Ihre On-Screen-UI-Elemente klar und lesbar bleiben.

Entwickeln Sie Benutzerflüsse

Ein Benutzerfluss ist eine Sammlung von Pfaden, die Spieler in einem Spiel nehmen können, um eine Aufgabe abzuschließen, wie z. B. eine Waffe auszuwählen, einen Gegenstand zu kaufen oder einen Charakter zu heilen. Benutzerflüsse beginnen typischerweise dort, wo Sie erwarten, dass die Spieler die Aufgabe beginnen, und enden mit der letzten Aktion oder dem Erfolg, den die Spieler am Ende der Aufgabe erreichen. Darüber hinaus berücksichtigen effektive Benutzerflüsse auch ungewöhnliche Pfade, die Spieler möglicherweise selbst einschlagen möchten, um dasselbe Ziel zu erreichen.

Das folgende Flussdiagramm zeigt den Benutzerfluss eines Spielers, der das Beispiel-Laser-Tag-Spiel betritt und spielt. Wenn ein Spieler das Spiel öffnet, tritt er einer Lobby bei. Wenn die Runde noch nicht im Gange ist, wartet er, bis die Rundenrunde beginnt, andernfalls tritt er einem Team bei, das derzeit das Spiel spielt. Wenn die Endbedingung nicht erfüllt ist, wie z. B. das Erreichen einer Zeitgrenze oder das Herauszeichnen von 10 Spielern pro Team, wählen die Spieler ihren Blaster aus und erleben das Hauptspiel, in dem sie das gegnerische Team markieren oder selbst markiert werden, einen neuen Blaster innerhalb der Arena ausrüsten oder wiederbelebt werden, nachdem sie herausgezeichnet wurden. Sobald die Spieler die Endbedingung erfüllen, beenden sie die Runde und treten erneut der Lobby bei.

Es ist wichtig, Benutzerflüsse für alles zu entwickeln, was die Spieler in Ihrem Spiel tun können, da es Ihnen ermöglicht, zu bewerten, wo und wie Sie möchten, dass sie Aufgaben abschließen, und vorherzusehen, wo Sie die Schmerzpunkte für jeden, der seinen eigenen Weg folgt, lindern können. Wenn Sie beispielsweise zusätzliche Benutzerflüsse für das Beispiel-Laser-Tag-Spiel entwickeln würden, was passiert, wenn die Spieler:

• Eine Runde vor Erfüllung der Endbedingung abbrechen?
• Das Spiel verlassen, während sie einem Team beitreten?
• In der Mitte einer Runde einen Anruf erhalten?
• Ihre Verbindung zur Runde für weniger als 15 Sekunden verlieren?

Indem Sie alle potenziellen Aktionen visualisieren, die Spieler ausführen können, oder Szenarien, die den Spielern während des Abschlusses von Aufgaben passieren können, können Sie besser bestimmen, wie das Layout Ihrer UI-Elemente negativ auf ihr Erlebnis wirkt, und dann Anpassungen vornehmen, bevor Sie Ihre Designs in Studio implementieren. Wenn Aufgaben intuitiv, unauffällig und bequem erscheinen, verbringen die Spieler eher Zeit in Ihrem Spiel und kehren später zurück.

Bei der Entwicklung von Benutzerflüssen für Ihr eigenes Spiel sollten Sie Folgendes berücksichtigen:

• Was Sie möchten, dass die Spieler in Ihrem Spiel tun, und was sie tun möchten, kann völlig unterschiedlich sein. Es ist am besten, Ihre Layouts mit mehreren Arten von Spielern zu testen, um ein Verständnis für die Pfade zu bekommen, die sie einschlagen möchten, um ihre Ziele zu erreichen.
• Flussdiagramme können schwierig zu lesen und ineffektiv werden, wenn sie versuchen, mehrere Szenarien gleichzeitig innerhalb des Diagramms zu erfassen. Um Ihre Aufmerksamkeit auf jede Aufgabe zu konzentrieren, beschränken Sie Flussdiagramme auf eine Hauptaufgabe gleichzeitig.
• Interaktionsmuster variieren je nachdem, ob die Spieler Touch-Steuerungen, Gamepads oder Computer-Mäuse verwenden, um mit Ihrem Spiel zu interagieren. Wenn Sie für mehrere Geräte entwerfen, entwickeln Sie einzigartige Benutzerflüsse für jedes Gerät, damit Sie Schmerzpunkte identifizieren und Arbeitsabläufe vereinfachen können.

Nachdem Sie das Design Ihrer Wireframes abgeschlossen haben, ist es Zeit, in Studio zu gehen und Ihre Benutzeroberfläche zum Leben zu erwecken.