Wireframes für 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 für Ihr Erlebnis nicht funktioniert.

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

• Planen 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 Erlebnis erfolgreich zu sein.
• Blockieren von UI-Elementen mit einfachen Formen, um die Komposition Ihrer UI-Elemente zusammen mit Robloxs Kernbenutzeroberfläche und Touch-Steuerungen zu überprüfen.
• Entwickeln von Benutzerflüssen, um die notwendigen Aktionen zu berücksichtigen, die Spieler unternehmen 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 einer visuellen Hierarchie

Eine visuelle Hierarchie ist eine Organisationsstruktur, die UI-Elemente nach ihrer Wichtigkeit hervorhebt. Eine visuelle Hierarchie für die verschiedenen Arbeitsabläufe in Ihrem Erlebnis zu planen, ist wichtig, da es den Spielern hilft, ihre Ziele erfolgreich zu erreichen, was besonders notwendig ist für das schnelle Gameplay von Ego-Shooter-Erlebnissen, in denen sich die Ziele von Moment zu Moment ändern.

Effektive visuelle Hierarchien leiten die Spieler durch die Funktionen und Informationen, die sie benötigen, um Ihre Spielanforderungen zu erfüllen, je nachdem, wo sie natürlich auf dem Bildschirm schauen, um Arbeitsabläufe abzuschließen. Beispielsweise muss die visuelle Hierarchie der Beispiellaser-Tag-Erfahrung die Spieler durch die folgenden Kategorien von UI-Elementen leiten, während sie die Karte navigieren und Spieler im feindlichen Team markieren:

1. Informationen über das Ziel des Erlebnisses.
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 oberen Seite, da sie UI-Elemente enthält, die die größte Bedeutung für den Gewinn des Spiels haben.
• Die zweite Kategorie nimmt den Großteil des Bildschirmraums in der Mitte ein, da sie als Fokus 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 Erlebnisgenres müssen Sie nur eine Kategorie von Informationen zur gleichen Zeit anzeigen, da dies die einzige Art von Informationen ist, die während dieses Arbeitsablaufs für den Spieler wichtig ist. Für Ego-Shooter-Erlebnisse hingegen müssen die Spieler jedoch UI-Elemente aus mehreren Kategorien gleichzeitig sehen, da diese alle Informationen liefern, die die Spieler benötigen, um erfolgreich zu sein, wie zum Beispiel den Punktestand ihres Teams, die Abklingzeit ihres Blasters und ob sie aus einer Runde heraus markiert wurden.

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

• Wenn Sie UI-Elemente aus verschiedenen Kategorien auf dem Bildschirm gruppieren, wissen die Spieler nicht, wo sie suchen müssen, um das zu finden, was sie brauchen. Um den Spielern bei der Navigation durch Ihr Erlebnis zu helfen, gruppieren Sie UI-Elemente aus der gleichen Kategorie zusammen.
• Wenn Sie zu viele Kategorien gleichzeitig auf dem Bildschirm haben, wissen die Spieler möglicherweise nicht, welche Informationen sie beachten müssen. Um zu vermeiden, dass die Spieler mit Unordnung überwältigt werden, zeigen Sie UI-Elemente kontextbezogen für verschiedene Arbeitsabläufe an.
• Ebenso kann eine zu große Anzahl von UI-Elementen pro Kategorie die Spieler davon ablenken, wie sie eine Aktion oder einen Prozess abschließen. Aus diesem Grund ist es wichtig, Ihren Kunststil zu nutzen, um visuelle Akzente für Ihre idealen Interaktionsordnungen zu setzen.

Für eine vollständige Überprüfung der visuellen Hierarchie der Beispiellaser-Tag-Erfahrung siehe die folgende Tabelle:

Blockieren Sie UI-Elemente

Jetzt, da Sie eine visuelle Hierarchie im Kopf haben, können Sie einzelne UI-Elemente mit einfachen 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 Spieler zur Verfügung haben, effektiv ist, wie auf Mobiltelefonen, 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. Beispielsweise zeigt Roblox standardmäßig die folgenden UI-Elemente in jedem Erlebnis an:

• Eine Liste von Spielern innerhalb des Erlebnisses.
• Die Lebensanzeige des Charakters.
• Den Rucksack des Charakters.
• Ein Chatfenster.
• Eine Aufnahme-Schaltfläche.
• Ein Popup-Menü für Charakter-Emotes.

Sie können deaktivieren Sie alle diese Elemente, die nicht den Spielanforderungen Ihres eigenen Erlebnisses entsprechen, um Platz für Ihre benutzerdefinierte UI zu sparen. Beispielsweise benötigt die Beispiellaser-Tag-Erfahrung 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 die Erfahrung diese Kernbenutzeroberfläche deaktivieren, um sicherzustellen, dass immer Platz für den Blasterauswähler vorhanden ist, wenn die Spieler wieder erscheinen, und dann einen anderen Standort zum Auswählen aus Ihrem Inventar bereitstellen.

Neben Robloxs Kernbenutzeroberfläche müssen Sie auch den notwendigen Bildschirmraum für Robloxs standardmäßige Touch-Steuerungen berücksichtigen. Beispielsweise wird beim Zugriff auf Ihr Erlebnis mit einem mobilen Gerät 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, Ihr Erlebnis zu navigieren, auch wenn sie keinen Zugriff auf eine Tastatur oder einen Controller haben.

Indem Sie sowohl die Robloxs Kernbenutzeroberflächenelemente berücksichtigen, die für das Gameplay Ihres Erlebnisses notwendig sind, als auch die Möglichkeit von Touch-Steuerungen, können Sie Ihre benutzerdefinierten UI-Elemente in einem Design blockieren, das sich über Geräte hinweg anpasst. Das ist wichtig, denn es bedeutet, dass Sie keine separaten Versionen Ihrer Benutzeroberfläche pflegen müssen, während Sie Ihr Erlebnis aktualisieren.

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

• Grundformen, die benutzerdefinierte UI darstellen, weil es dem Design ermöglicht, leicht mehrere Iterationen durchzuführen, bevor das endgültige Design erreicht wird.
• Graue Farbgebung, die es dem Auge erleichtert, Informationen zu verfolgen, ohne durch eine bunte Hintergrundumgebung abgelenkt zu werden.
• Den geöffneten Zustand des Chatfensters und die Liste aktiver Spieler sowie das Chatfenster, um zu sehen, wie viel Platz sie auf dem Bildschirm einnehmen.
• Platz für mobile Steuerungen, selbst 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, sind Sie zukunftssicher für alle möglichen Layouts, je nach 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 bei 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 sind, ist unangenehm oder unmöglich. Platzieren Sie interaktive Elemente in leicht erreichbaren Zonen in der Nähe der natürlichen Ruheposition für die Daumen.
• Wenn Spieler durch Ihre Umgebung navigieren, kann der 3D-Raum Ihre 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 von Benutzerflüssen

Ein Benutzerfluss ist eine Sammlung von Pfaden, die Spieler in einem Erlebnis gehen können, um eine Aufgabe zu erfüllen, wie zum Beispiel eine Waffe auszuwählen, einen Artikel zu kaufen oder einen Charakter zu heilen. Benutzerflüsse beginnen typischerweise dort, wo Sie erwarten, dass die Spieler mit der Aufgabe beginnen, und enden mit der letzten Aktion oder dem Ziel, das die Spieler am Ende der Aufgabe erreichen. Effektive Benutzerflüsse berücksichtigen auch ungewöhnliche Pfade, die Spieler möglicherweise selbst wählen möchten, um dasselbe Ziel zu erreichen.

Das folgende Flussdiagramm zeigt den Benutzerfluss eines Spielers, der das Beispiellaser-Tag-Erlebnis betritt und spielt. Wenn ein Spieler das Erlebnis öffnet, tritt er einer Lobby bei. Wenn die Runde noch nicht im Gange ist, wartet er, bis die Runde beginnt; andernfalls tritt er einem Team bei, das derzeit das Spiel spielt. Wenn die Endbedingung nicht erfüllt ist, wie zum Beispiel das Erreichen einer Zeitgrenze oder das Herausmarkieren von 10 Spielern pro Team, wählen die Spieler ihren Blaster aus und erleben das Hauptspiel, indem sie das feindliche Team markieren oder von diesem markiert werden, in der Arena einen neuen Blaster ausrüsten oder nachdem sie herausmarkiert wurden, wieder erscheinen. 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 Erlebnis tun können, da es Ihnen ermöglicht zu bewerten, wo und wie Sie möchten, dass sie Aufgaben erfüllen, und vorherzusehen, wo Sie die Schmerzpunkte für jeden, der seinen eigenen Weg geht, lindern können. Zum Beispiel, wenn Sie zusätzliche Benutzerflüsse für die Beispiellaser-Tag-Erfahrung entwickeln würden, was passiert, wenn die Spieler:

• Eine Runde verlassen, bevor die Endbedingung erfüllt ist?
• Das Erlebnis 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?

Durch die Visualisierung aller möglichen Aktionen, die Spieler unternehmen können, oder Szenarien, die Spielern während der Erledigung von Aufgaben passieren können, können Sie besser bestimmen, wie die Anordnung Ihrer UI-Elemente negativ ihre Erfahrung beeinflusst, und dann Anpassungen vornehmen, bevor Sie Ihre Designs in Studio umsetzen. Wenn Aufgaben intuitiv, unauffällig und bequem sind, verbringen die Spieler eher Zeit in Ihrem Erlebnis und kehren zu einem späteren Zeitpunkt zurück.

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

• Was Sie möchten, dass die Spieler in Ihrem Erlebnis tun, und was sie tun möchten, kann vollkommen unterschiedlich sein. Es ist am besten, Ihre Layouts mit verschiedenen Spielertypen zu testen, um ein Verständnis für die Pfade zu bekommen, die sie wählen möchten, um ihre Ziele zu erreichen.
• Flussdiagramme können schwierig zu lesen und ineffektiv sein, wenn sie versuchen, mehrere Szenarien gleichzeitig innerhalb des Diagramms festzuhalten. Um Ihre Aufmerksamkeit auf jede Aufgabe zu konzentrieren, beschränken Sie Flussdiagramme auf eine Hauptaufgabe pro Zeit.
• Interaktionsmuster variieren je nachdem, ob die Spieler Touch-Steuerungen, Gamepads oder Computer-Mäuse verwenden, um mit Ihrem Erlebnis 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 an der Zeit, in Studio zu gehen und Ihre Benutzeroberfläche zum Leben zu erwecken.