Wireframe deine Layouts

Wireframing deiner Layouts ist der Prozess, bei dem die Struktur und der Informationsfluss entworfen werden, den du über die Benutzeroberfläche in verschiedenen Workflows kommunizieren möchtest.Dieser kritische Schritt des Tutorials ermöglicht es Ihnen, die Anordnung Ihrer UI-Elemente zu wiederholen, Schmerzpunkte zu entdecken und die Erfahrung des Spieler:inzu verbessern, bevor Sie Zeit und Ressourcen in ein problematisches Design investieren, das für Ihre Erlebnisnicht funktioniert.

Mit der Beispiel-Laser-Tag-Erfahrung Datei als Referenz verwendet dieser Abschnitt des Benutzeroberflächen-Kurses zeigt Ihnen, wie Sie Ihre UI-Elemente auf dem Bildschirm strukturieren, einschließlich Anleitungen:

• Planen einer visuellen Hierarchie für deine UI, die intuitiv dazu führt, dass Spieler zu Funktionen und Informationen gelangen, die sie für den Erfolg in deiner Erlebnisbenötigen.
• Blockieren in UI-Elementen mit grundlegenden Formen, um die Zusammensetzung deiner UI-Elemente neben der Kern-UI und Steuerungvon Roblox zu überprüfen.
• Entwicklung von Benutzerflüssen, um die notwendigen Aktionen der Spieler zu berücksichtigen, um ihre Ziele zu erreichen.

Nachdem du diesen Abschnitt abgeschlossen hast, wirst du lernen, wie du deine Benutzeroberfläche in Studio konfigurierst und konfigurierst, die deinen Kunststil und Wireframes respektiert.

Planiere eine visuelle Hierarchie

Eine visuelle Hierarchie ist eine Organisationsstruktur, die UI-Elemente nach ihrer Relevanz hervorhebt.Die Planung einer visuellen Hierarchie für die verschiedenen Workflows in deiner Erfahrung ist wichtig, weil sie die Spieler für den Erfolg bei der Erreichung ihrer Ziele vorbereitet, was besonders für das schnelle Spiel von First-Person-Shooter-Erlebnissen notwendig ist, in denen sich die Ziele von Moment zu Moment ändern.

Effektive visuelle Hierarchien leiten Spieler durch die Funktionen und Informationen, die sie benötigen, um Ihre Spielanforderungen gemäß der Tatsache zu erfüllen, wo sie natürlich auf dem Bildschirm schauen, um Workflows abzuschließen.Zum Beispiel muss die visuelle Hierarchie des Probepunktlasertags die Spieler durch die folgenden Kategorien von UI-Elementen führen, wenn sie die Karte erkunden und Spieler auf dem gegnerischen Team markieren:

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

Die Position jeder dieser Kategorien auf dem Bildschirm im abschließenden Designhighlight zeigt ihre Reihenfolge der Wichtigkeit auf:

• Die erste Kategorie befindet sich in der Nähe des oberen , weil sie UI-Elemente enthält, die die größte Bedeutung haben, wie das Spiel gewonnen wird.
• Die zweite Kategorie nimmt den Großteil des Bildraums in der Nähe von mittig ein, weil sie als Fokuspunkt dient, um die Aufmerksamkeit der Spieler auf die Aktion im Platzzu lenken, und sie hat die größte Bedeutung für das Spielen des Spiels.
• Die dritte Kategorie befindet sich in der Nähe der Seiten , weil Spieler diese peripheren Informationen lesen können, ohne ihre Aufmerksamkeit vom Gameplayabzulenken.

Für einige Erfahrungsgenres musst du nur eine Kategorie von Informationen gleichzeitig anzeigen, weil es die einzige Art von Information ist, die dem Spieler während dieses Workflows wichtig ist.Für Erlebnisse in der ersten Person müssen Spieler jedoch UI-Elemente aus mehreren Kategorien gleichzeitig sehen, da sie alle Informationen liefern, die der Spieler benötigt, um erfolgreich zu sein, wie die Punktzahl seines Teams, die Abklingzeit für seinen Blaster und ob er aus einer Runde heraus markiert wird.

Wenn du eine visuelle Hierarchie für die Workflows in deiner eigenen Erlebnisplanst, berücksichtige gefolgte Profile:

• Wenn du Benutzeroberflächenelemente aus verschiedenen Kategorien auf dem gesamten Bildschirm zusammen gruppierst, werden Spieler nicht wissen, wo sie nach dem Nötigsten suchen sollen.Um Spielern zu helfen, deine Erlebniszu navigieren, gruppiere UI-Elemente aus derselben Kategorie zusammen .
• Wenn du zu viele Kategorien auf dem Bildschirm gleichzeitig hast, können Spieler nicht wissen, welche Informationen sie beachten müssen.Um Spieler mit Unordnung zu vermeiden, zeige UI-Elemente für verschiedene Workflows kontextuell an .
• Ebenso kann es passieren, wenn es zu viele UI-Elemente pro Kategorie gibt, dass Spieler von der Erkenntnis abgelenkt werden, wie eine Aktion oder ein Prozess abgeschlossen wird.Aus diesem Grund ist es wichtig, deinen Kunststil zu verwenden, um visuelle Akzente für deine idealen Interaktionsaufträge zu liefern .

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

Block im UI-Elementen

Jetzt, da du eine visuelle Hierarchie im Auge hast, kannst du einzelne UI-Elemente mit grundlegenden Formen blockieren, um die Zusammensetzung deines benutzerdefinierten UI-Layouts neben der Kern-UI von Roblox auf mehreren Geräten zu überprüfen.Dieser Prozess ermöglicht es dir, zu sehen, wo du dein Design modifizieren musst, damit es auf allen Bildschirmen effektiv ist, die Spieler verwenden können, um auf deine Erlebniszuzugreifen, wie auf mobilen, Tablets, Laptops und Fernsehbildschirmen.

Bevor du beginnst, musst du herausfinden, wie viel Bildschirmplatz für deine benutzerdefinierten UI-Elemente verfügbar ist, während du Roblox' Kern-UI berücksichtigst.Zum Beispiel zeigt Roblox standardmäßig die folgenden UI-Elemente in jedem Erlebnis an:

• Eine Liste von Spielern innerhalb des Erlebnisses.
• Die Gesundheitsbar des Charakters.
• Der Rucksack des Charakters.
• Ein Chat-Fenster.
• Eine Capture-Taste.
• Ein Popup-Menü mit Charakter-Emotes.

Du kannst deaktivieren jedes dieser Elemente, die den Spielanforderungen deiner eigenen Erfahrung nicht entspricht, um Bildplatz für deine benutzerdefinierte UI zu sparen.Zum Beispiel erfordert die Probepunktlasertag-Erfahrung keinen Rucksack, weil Spieler nur die Möglichkeit haben, einen einzigen Blaster auszuwählen.Wenn Spieler jedoch mehrere Blaster gleichzeitig auswählen könnten, könnte das Erlebnis diese Kern-Benutzeroberfläche deaktivieren, um sicherzustellen, dass es immer Platz für den Blasterauswahlbereich gibt, wenn Spieler respawnen, und bietet dann einen anderen Ort, aus Ihrem Inventar auszuwählen.

Zusätzlich zur Kern-UI von Roblox musst du auch den notwendigen Bildschirmplatz für die Steuerungvon Roblox berücksichtigen.Zum Beispiel, wenn Spieler mit einem mobilen Gerät auf deine Erfahrung zugreifen, wird ein virtueller Thumbstick in der unteren linken Ecke des Bildschirms angezeigt, und ein Sprung-Button wird in der unteren rechten Ecke des Bildschirms angezeigt.Dies gewährleistet, dass Spieler immer in der Lage sind, deine Erlebniszu navigieren, auch wenn sie keinen Zugriff auf eine Tastatur oder einen Controller haben.

Indem du sowohl die Kern-UI-Elemente von Roblox berücksichtigst, die für das Gameplay deiner Erfahrung erforderlich sind, als auch die Möglichkeit der Touch-Steuerung, kannst du in deinen benutzerdefinierten UI-Elementen in einem Design , das sich über Geräte adaptiert, blockieren.Das ist wichtig, weil es bedeutet, dass du keine separaten Versionen deiner UI aktualisieren musst, wenn du dein Erlebnis aktualisierst.

Um diese Methode zu demonstrieren, überprüfen Sie die folgenden zwei Bilder, wie die Probepunktlaser-Tag-Erfahrung in den benutzerdefinierten UI-Elementen für mobile und PC-Geräte blockiert wird.Beide Bilder enthalten:

• Grundformen, um benutzerdefinierte UI darzustellen, weil sie das Design ermöglicht, mehrere Iterationen durchzugehen, bevor das endgültige Design erreicht wird.
• Graustufen-Farben, die es dem Auge ermöglichen, Informationen ohne die Ablenkung einer farbenfrohen Umgebungzu verfolgen
• Der offene Zustand des Chat-Fensters und der Liste der aktiven Spieler und Chat-Fenster, um zu sehen, wie viel Platz sie auf dem Bildschirm einnehmen.
• Raum für mobile Steuerelemente, auch wenn sie für PC-Geräte nicht erforderlich sind.

Wenn du deine Layouts so gestaltest, während du darüber nachdenkst, wie viele UI-Elemente gleichzeitig auf dem Bildschirm existieren können, sorgst du für alle möglichen Layouts gemäß den Geräten und Workflows der Spieler zukunftssicher.

Wenn Sie UI-Elemente für Ihre Layouts blockieren, berücksichtigen Sie gefolgte Profile:

• Wo und wie du in deiner UI blockierst, kann die Zusammensetzung deiner Layouts beeinflussen. Ziele auf Balance und Symmetrie in der Menge und Größe deiner benutzerdefinierten UI-Elemente neben der Kern-UI von Roblox.
• Die Interaktion mit der Benutzeroberfläche, die weit von den unteren Ecken einiger mobiler und Tablets entfernt ist, ist unangenehm oder unmöglich. Platziere interaktive Elemente in leicht zugänglichen Zonen in der Nähe der natürlichen Ruheposition für Daumen.
• Wenn Spieler durch deine Umgebung navigieren, kann der 3D-Raum ablenkend von deiner Benutzeroberfläche auf dem Bildschirm werden. Teste deine Layouts gegen eine Vielzahl von möglichen Hintergründen , um sicherzustellen, dass deine On-Screen-UI-Elemente klar und leserlich bleiben.

Für weitere Informationen darüber, was bei der Planung und Blockierung deiner UI-Elemente für mehrere Geräte zu berücksichtigen ist, siehe Positionierung und Größe - Cross-Plattform-Faktoren.

Entwickle Benutzerflüsse

Ein Benutzerfluss ist eine Sammlung von Pfaden, die Spieler in einem Erlebnis nehmen können, um eine Aufgabe zu erledigen, z. B. eine Waffe auszuwählen, einen Artikelzu kaufen oder einen Charakter zu heilen.Benutzerflüsse starten in der Regel dort, wo du erwartest, dass Spieler die Aufgabe beginnen, und enden mit der letzten Aktion oder Leistung, die Spieler am Ende der Aufgabe erreichen.Darüber hinaus machen effektive Benutzerflüsse auch ungewöhnliche Pfade aus, die Spieler möglicherweise selbst einschlagen möchten, um dasselbe Ziel zu erreichen.

Die folgende Flussdiagramm zeigt den Benutzerfluss eines Spielers, der das Probelasertag-Erlebnis betritt und spielt.Wenn ein Spieler das Erlebnis öffnet, schließt er sich einer Lobby an.Wenn die Runde noch nicht im Gange ist, warten sie, bis der Rundenschleife beginnt, ansonsten treten sie einem Team bei, das gerade das Spiel spielt.Wenn die Endbedingung nicht erfüllt wurde, wie das Erreichen einer Zeit限 oder das Markieren von 10 Spielern pro Team, wählen die Spieler ihren Blaster aus und erleben das Hauptspiel des Markierens oder werden vom gegnerischen Team markiert, rüsten einen neuen Blaster innerhalb der Arena aus oder respawnen, nachdem sie markiert wurden.Sobald Spieler die Endbedingung erfüllen, beenden sie die Runde und treten wieder der Lobby bei.

Es ist wichtig, Benutzerflüsse für alles zu entwickeln, was Spieler in deiner Erfahrung tun können, weil es dir ermöglicht, zu bewerten, wo und wie du Aufgaben abschließen möchtest, und vorherzusagen, wo du die Schmerzpunkte für jeden lindern kannst, der seinem eigenen Weg folgt.Wenn du beispielsweise zusätzliche Benutzerflüsse für das Probepunktlasertag-Erlebnis entwickeln würdest, was passiert, wenn Spieler:

• Eine Runde beenden, bevor die Endbedingung erfüllt ist?
• Spiel verlassen, während du einem Team beitrittst?
• Einen Anruf in der Mitte einer Runde empfangen?
• Verlieren Sie Ihre Verbindung zur Runde für weniger als 15 Sekunden?

Durch Visualisierung aller möglichen Aktionen, die Spieler ausführen können, oder Szenarien, die Spielern während der Ausführung von Aufgaben passieren können, kannst du besser bestimmen, wie sich die Anordnung deiner UI-Elemente negativ auf ihr Erlebnis auswirkt, und dann vor der Umsetzung deiner Designs in Studio Anpassungen vornehmen.Wenn Aufgaben intuitiv, unaufdringlich und bequem sind, verbringen Spieler wahrscheinlich mehr Zeit in deiner Erfahrung und kehren zu einem späteren Zeitpunkt zurück.

Wenn du Benutzerflüsse für deine eigene Erlebnisentwickelst, berücksichtige gefolgte Profile:

• Was Spieler in deiner Erfahrung tun sollen und was sie tun möchten, kann völlig unterschiedlich sein.Es ist am besten, deine Layouts mit mehreren Arten von Spielern zu testen , um ein Verständnis der Wege zu erhalten, die sie einschlagen möchten, um ihre Ziele zu erreichen.
• Flussdiagramme können schwer zu lesen und unwirksam werden, wenn sie versuchen, mehrere Szenarien gleichzeitig innerhalb des Diagramms einzufangen.Um deine Aufmerksamkeit auf jede Aufgabe zu richten, beschränke die Flussdiagramme auf eine Hauptaufgabe auf einmal .
• Die Interaktionsmuster variieren je nachdem, ob Spieler Steuerung, Gamepads oder Computer-Mäuse verwenden, um mit deiner Erlebniszu interagieren.Wenn du für mehrere Geräte entwickelst, entwickle einzigartige Benutzerflüsse für jedes Gerät , damit du Schmerzpunkte identifizieren und Workflows vereinfachen kannst.

Nachdem du das Design deiner Wireframes abgeschlossen hast, ist es Zeit, in Studio zu wechseln und deine Benutzeroberfläche zum Leben zu erwecken.