Lege deine Wireframes auf

Wireframing deine Layouts ist der Prozess der Entwicklung der Struktur und des Flusses der Informationen, die du über die Benutzeroberfläche in verschiedenen Workflows kommunizieren möchtest. Dieser kritische Schritt des Tutorials ermöglicht es dir, auf die Anordnung deiner UI-Elemente zu wiederholen, Schmerzpunkte zu entdecken und die Erfahrung des Spieler:invor dem Investieren von Zeit und Ressourcen auf eine problematische Design, das nicht für dein Erlebnis funktioniert.

Dieses Beispiel-Laser-Tag-Erlebnis als Referenz verwenden, zeigt dieses Abschnitt des Benutzeroberflächen-Kurses, wie Sie Ihre UI-Elemente auf dem Bildschirm aufbauen, einschließlich Anleitung:

• Planen Sie eine visuelle Hierarchie für Ihre UI, die die Spieler intuitiv zu den Funktionen und Informationen führt, die sie erfolgreich in Ihrem Erlebnis sein müssen.
• Blockieren in UI-Elementen mit grundlegenden Formen, um die Zusammensetzung deiner UI-Elemente neben Roblox's Kern-UI und Steuerungzu überprüfen.
• Entwickeln Sie Benutzerflows, um die notwendigen Aktionen zu berücksichtigen, die Spieler unternehmen müssen, um ihre Ziele zu erreichen.

Nachdem du diese Sektion abgeschlossen hast, wirst du lernen, wie du deine UI im Studio aufbaust und konfigurierst, die deinen Stil und deine Wireframes entspricht.

Planen Sie eine visuelle Hierarchie

Eine visuelle Hierarchie ist eine Organisationsstruktur, die die UI-Elemente nach ihrer Bedeutung sortiert anzeigt. Die Planung einer visuellen Hierarchie für die verschiedenen Workflows in deiner Erfahrung ist wichtig, da sie die Spieler auf den Erfolg in der Erfüllung ihrer Ziele vorbereitet, was besonders für das schnelle Gameplay von First-Person-Shooter-Erlebnissen mit Zielen, die sich von Moment zu Moment ändern, wichtig ist.

Effektive visuelle Hierarchien führen Spieler durch die Funktionen und Informationen, die sie brauchen, um Ihren Spielablauf-Anforderungen entsprechend zu erfüllen, indem sie auf dem Bildschirm natürlich ansehen, um Workflows abzuschließen. Zum Beispiel muss die visuelle Hierarchie der Beispiel-Laser-Tag-Erfahrung die Spieler durch die folgenden Kategorien von UI-Elementen führen, während sie die Karte und die Spieler auf dem feindlichen Team navigieren:

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

Die Position, die jede dieser Kategorien auf dem Bildschirm im endgültigen Design hat, zeigt ihre Reihenfolge der Wichtigkeit:

• Die erste Kategorie befindet sich in der Nähe der oberen , da sie UI-Elemente enthält, die die meiste Bedeutung haben, wie man das Spiel gewinnt.
• Die zweite Kategorie belegt den Großteil des Bildschirms in der Nähe des Mittels , da sie als Fokuspunkt dient, um die Aufmerksamkeit des Spielers auf die Aktion im Platzzu ziehen, und sie hat die größte Bedeutung für das Spielen des Spiels.
• Die dritte Kategorie befindet sich in der Nähe der Seiten , da Spieler diesen periphere Informationen lesen können, ohne ihre Aufmerksamkeit vom Gameplayzu lenken.

Für einige Erfahrungs-Genres müssen Sie nur eine Kategorie von Informationen auf einmal anzeigen, da es der einzige Typ von Information, der für den Spieler während dieses Workflows wichtig ist. Wenn Sie jedoch für First-Person-Shooter-Erlebnisse spielen, müssen Sie die Benutzeroberfläche-Elemente aus mehreren Kategorien gleichzeitig sehen, da sie alle Informationen bieten, die der Spieler für den Erfolg benötigt, z. B

Wenn Sie beim Planen einer visuellen Hierarchie für die Workflows in Ihrer eigenen Erlebnisberücksichtigen, sollten Sie gefolgte Profileberücksichtigen:

• Wenn Sie UI-Elemente von verschiedenen Kategorien auf dem Bildschirm zusammen anzeigen, wissen die Spieler nicht, wo sie suchen sollen. Um den Spielern zu helfen, ihre Erlebniszu navigieren, gruppieren Sie UI-Elemente aus der selben Kategorie zusammen .
• Wenn Sie zu viele Kategorien auf dem Bildschirm gleichzeitig haben, können Spieler nicht wissen, auf welche Informationen sie Aufmerksamkeit ziehen sollen. Um überladene Spieler mit Clutter zu vermeiden, zeigen Sie UI-Elemente für verschiedene Workflows kontextuell an .
• Ebenso kann es ablenken, wenn zu viele UI-Elemente pro Kategorie vorhanden sind, die Spieler daran hindern, die Anweisungen zu verstehen, wie man eine Aktion oder einen Prozess abschließt. Aus diesem Grund ist es wichtig, deinen Kunststil zu verwenden, um visuelle Akzente für deine idealen Interaktionsbefehle zu liefern .

Für eine vollständige Überprüfung der visuellen Hierarchie für das Beispiel-Laser-Tag-Erlebnis, siehe die folgende Tabelle:

Blockieren in UI-Elementen

Jetzt, da Sie eine visuelle Hierarchie im Hinterkopf haben, können Sie einzelne UI-Elemente mit grundlegenden Formen blockieren, um die Zusammensetzung Ihres benutzerdefinierten UI-Layouts neben der Roblox-Core-UI auf mehreren Geräten zu überprüfen. Dieser Prozess ermöglicht es Ihnen, zu sehen, wo Sie Ihr Design anpassen müssen, damit es auf allen Bildschirmen effektiv ist, die Spieler verwenden können, um auf Ihr Erlebnis zuzugre

Bevor du beginnst, musst du herausfinden, wie viel Bildschirmplatz für deine benutzerdefinierten UI-Elemente verfügbar ist, während du die Kern-UI von Roblox betrachtest. Zum Beispiel zeigt Roblox standardmäßig die folgenden UI-Elemente in jeder Erlebnisan:

• Eine Liste der Spieler innerhalb der Erlebnis.
• Die Gesundheitsleiste des Charakters.
• Der Rucksack des Charakters.
• Ein Chat-Fenster.
• Ein Capture-Button.
• Ein Popup-Menü mit Charakter-Emotes.

Du kannst alle diese Elemente deaktivieren, die nicht die Spielanforderungen deines eigenen Erlebnisses erfüllen, um Platz auf dem Bildschirm für deine benutzerdefinierte UI zu sparen. Zum Beispiel erfordert die Lasertag-Sammlung nicht einen Rucksack, da die Spieler nur die Fähigkeit haben, einen einzelnen Blaster auszuwählen. Wenn Spieler jedoch mehrere Blaster auf einmal

Neben der Roblox-Core-Benutzeroberfläche müssen Sie auch den notwendigen Bildschirmplatz für die Steuerungvon Roblox betrachten. Zum Beispiel wird ein virtueller Thumbstick in der unteren linken Ecke des Bildschirms angezeigt, und ein Sprung按鈕 wird in der unteren rechten Ecke des Bildschirms angezeigt. Dies stellt sicher, dass die Spieler immer Zugriff auf Ihre Erlebnishaben, auch wenn sie keinen

Indem Sie berücksichtigen, dass sowohl die Roblox-Core-Benutzeroberflächeselemente, die für das Gameplay Ihres Erlebnisses erforderlich sind, als auch die Möglichkeit der Touch-Steuerung, können Sie Ihre benutzerdefinierten UI-Elemente in einem Design blockieren, das adaptiv auf Geräten ist. Dies ist wichtig, da dies bedeutet, dass Sie keine separaten Versionen Ihrer UI auf Ihrem Gerät aktualisieren müssen, wenn Sie Ihr Erlebnis aktualis

Um diesen Methoden beizudemonstrieren, überprüfen Sie die folgenden zwei Bilder, wie die Probe-Laser-Tag-Erfahrung in der benutzerdefinierten UI-Elemente für beide mobile und PC-Geräte blockiert. Beide Bilder enthalten:

• Grundlegende Formen, um benutzerdefinierte UI zu repräsentieren, da sie die Design-iterationen erlaubt, bevor das endgültige Design erstellt wird.
• Farb-Skalierung, die es dem Auge ermöglicht, Informationen zu folgen, ohne die Abwechslung eines farbenfrohen Umgebung
• Der offene Zustand des Chat-Fensters und der Liste aktiver Spieler und Chat-Fenster, um zu sehen, wie viel Platz sie auf dem Bildschirm einnehmen.
• Platz für mobile Steuerelemente, auch wenn sie für PC-Geräte nicht notwendig sind.

Wenn Sie Ihre布局 in dieser Weise entwerfen, während Sie darüber nachdenken, wie viele UI-Elemente auf dem Bildschirm gleichzeitig existieren können, futuristifizieren Sie alle potenziellen布局 gemäß den Geräten und Workflows der Spieler.

Wenn Sie in UI-Elementen für Ihre Anordnungen blockieren, berücksichtigen Sie gefolgte Profile:

• Wo und wie Sie in Ihrer UI blockieren, kann die Zusammensetzung Ihrer布局 beeinflussen. Zielen Sie auf Balance undSymmetrie in der Menge und Größe Ihrer benutzerdefinierten UI-Elemente neben Roblox's Kern-UI.
• Interaktion mit UI, die weit entfernt von den Ecken des einigen mobilen und Tablet-Geräten ist, ist entweder unangenehm oder unmöglich. Platziere interaktive Elemente in leicht zugänglichen Bereichen in der Nähe der natürlichen Ausgangsposition für Daumen.
• Wenn Spieler durch deine Umgebung navigieren, kann der 3D-Raum ablenkend von deiner On-screen-Benutzeroberfläche sein. Teste deineLayouts gegen eine Vielzahl möglicher Hintergründe , um sicherzustellen, dass deine On-screen-UI-Elemente klar und lesbar bleiben.

For more information on what to consider as you design and block in your UI elements for multiple devices, see Positioning and Sizing - Cross-Platform Factors.

Entwickeln Sie Benutzerflows

Ein Benutzerfluss ist eine Sammlung von Pfaden, die Spieler in einem Erlebnis nehmen können, um eine Aufgabe abzuschließen, z. B. eine Waffe zu wählen, ein Artikelzu kaufen oder einen Charakter zu heilen. Benutzerflows starten normalerweise dort, wo Sie erwarten, dass Spieler die Aufgabe beginnen, und beenden mit der letzten Aktion oder dem Erfolg, den Spieler am Ende der Aufgabe erreicht. Darüber hinaus zählen effektive Benutzerflows auch zu un

Die folgende Flussdiagramm zeigt den Benutzerfluss eines Spielers, der die Probephase Erlebniseingibt und spielt. Wenn ein Spieler die Erlebnisöffnet, wird er einem Lobby beigetreten. Wenn die Runde noch nicht im Gange ist, warten

Es ist wichtig, Benutzerflows für alles zu entwickeln, was Spieler in deiner Erfahrung tun können, weil es erlaubt dir, zu bewerten, wo und wie du Aufgaben abschließen möchtest, und zu antizipieren, wo du die Schmerzpunkte für jeden, der seinen eigenen Pfad folgt, entlasten kannst. Zum Beispiel, wenn du zusätzliche Benutzerflows für die Erlebnisentwickelst, was passiert, wenn Spieler:

• Runde beenden, bevor die Endbedingung erfüllt ist?
• Das Spiel verlassen, während einem Team beitritt?
• Mitte einer Runde einen Telefonanruf erhalten?
• Verlieren Sie ihre Verbindung zur Runde für weniger als 15 Sekunden?

Durch das Visualisieren aller potenziellen Aktionen, die Spieler ergreifen oder Szenarien, die Spieler während des Abschlusses von Aufgaben nehmen können, können Sie besser bestimmen, wie die布局 Ihrer UI-Elemente die Erfahrung der Spieler negativ beeinflusst, dann vornehmen Sie Anpassungen, bevor Sie Ihre Designs in Studio implementieren. Wenn Aufgaben intuitiv, unauffällig und bequem sind, sind Spieler wahrscheinlicher, dass sie Zeit in Ihrem Erlebnis verbringen und am späteren Dat

Wenn Sie Benutzerflows für Ihr eigenes Erlebnis entwickeln, berücksichtigen Sie gefolgte Profile:

• Was du willst, dass die Spieler in deiner Erfahrung tun, und was sie tun möchten, können völlig unterschiedlich sein. Es ist am besten, deineLayouts mit mehreren Arten von Spielern zu testen , um ein Verständnis der Wege zu bekommen, die sie folgen, um ihre Ziele zu erreichen.
• Flussdiagramme können schwer zu lesen und ineffektiv sein, wenn sie versuchen, mehrere Szenarien gleichzeitig in dem Diagramm zu fassen. Um Ihre Aufmerksamkeit auf jede Aufgabe zu lenken, beschränken Sie Flussdiagramme auf eine primäre Aufgabe zu einer Zeit .
• Interaktionsmuster variieren, abhängig davon, ob Spieler Steuerung, Gamepads oder Computer-Mäuse verwenden, um mit Ihrem Erlebnis zu interagieren. Wenn Sie für mehrere Geräte entwerfen, entwickeln Sie einzigartige Benutzerflows für jedes Gerät , damit Sie Schmerzpunkte identifizieren und Workflows einfachen können.

Nachdem du das Design deiner Wireboards finalisiert hast, ist es Zeit, in Studio zu gehen und deine UI zum Leben zu erwecken.