Wählen Sie einen Kunststil

Die Wahl eines Kunststils ist der Prozess, eine ästhetische Richtung für Ihre UI-Elemente zu planen. Es ist wichtig, Ihren Designprozess mit einem Kunststil zu beginnen, da Kunststile visuelle Grundregeln bieten, auf die Sie sich beziehen können, um sicherzustellen, dass Ihre UI den Spielern intuitiv Informationen darüber liefert, was sie in Ihrem Spiel tun können.

Anhand des Beispiel-Laser-Tag-Spiels .rbxl-Datei als Referenz zeigt Ihnen dieser Abschnitt des Benutzeroberflächen-Curriculums, wie Sie sinnvolle Entscheidungen darüber treffen, wie Sie Ihre UI-Elemente entsprechend dem Genre Ihres Spiels gestalten, einschließlich Anleitungen zu:

• Identifizierung notwendiger UI-Elemente entsprechend dem, was Sie den Spielern während Ihres Spiels kommunizieren möchten.
• Auswahl eines Farbschemas, das genre-spezifische Farbkonventionen verstärkt, die intuitiv für Ihr Publikum sind.
• Skizzierung einfacher Symbole, die auf jeder Bildschirmgröße leicht zu entschlüsseln sind.
• Festlegung einer Reihenfolge von Schaltflächen, die der Wahrscheinlichkeit verschiedener Spieler-Workflows entspricht.
• Bestimmung eines Textsystems, das die Lesbarkeit auf den Zielgeräten gewährleistet.

Nachdem Sie diesen Abschnitt abgeschlossen haben, werden Sie lernen, wie Sie die Struktur und den Fluss der Informationen gestalten, die Sie den Spielern über die UI in Ihrem Spiel kommunizieren möchten.

Identifizieren Sie Ihre UI-Elemente

Der erste Schritt bei der Wahl eines Kunststils für Ihre UI besteht darin, zu identifizieren, welche UI-Elemente Sie für die verschiedenen Arten von Informationen benötigen, die Sie Ihrem Publikum kommunizieren möchten. Diese Arbeit zu Beginn Ihres Designprozesses ist entscheidend, da sie es Ihnen ermöglicht, UI-Elemente nach ihrem funktionalen Zweck zu kategorisieren, semantische Entscheidungen zu treffen, je nachdem, wo und wann die Spieler mit jedem UI-Element interagieren werden, und zu planen, wo Sie UI-Elemente in Ihrem Spiel wiederverwenden können.

Es gibt viele verschiedene Möglichkeiten, um zu brainstormen, welche UI-Elemente für Ihre Spielanforderungen notwendig sind, aber es wird empfohlen, mit der Vorstellung zu beginnen, was ein Spieler wissen muss, sobald er Ihrem Spiel beitritt. Zum Beispiel, wenn ein Spieler das Beispiel-Laser-Tag-Spiel öffnet, könnte er sich folgende Fragen stellen:

• Was ist das Ziel des Spiels?
• Wie weiß ich, wer in meinem Team ist?
• Wie behalte ich die Punkte meines Teams im Auge?
• Wie wähle ich einen Blaster aus?
• Wie weiß ich, wo der Blaster einen Laser schießt?
• Wenn ich ein mobiles Gerät benutze, wie schieße ich mit meinem Blaster?
• Nachdem ich einen Laser geschossen habe, wann kann ich wieder schießen?
• Wie weiß ich, wann ich die Runde beginne?
• Wie weiß ich, wann ich jemanden erfolgreich mit meinem Blaster markiere?
• Wie weiß ich, wann das feindliche Team mich erfolgreich markiert?

Indem Sie diese Fragen verwenden, um zu verstehen, welche Informationen für die Spieler wichtig sind, um erfolgreich zu sein, können Sie die UI-Bedürfnisse des Beispiel-Laser-Tag-Spiels in drei Kategorien sortieren:

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

Die Sortierung der UI-Bedürfnisse Ihres Spiels in Kategorien ist hilfreich, da Sie Ihren Kunststil um jede Gruppe herum formulieren können, um zu verstärken, welche Informationen jede Kategorie den Spielern vermitteln muss. Wenn Sie beispielsweise möchten, dass Ihre UI den Spielern mitteilt, welche Aktionen sie in Bezug auf den Gesundheitsstatus ihres Charakters durchführen können, könnten Sie einen Kunststil wählen, bei dem UI-Elemente die Farbe Grün und/oder Plus-Symbole priorisieren, damit die Spieler ihre Funktion schnell erkennen können.

Nachdem Sie die UI-Bedürfnisse Ihres Spiels in Kategorien sortiert haben, können Sie eine Liste der UI-Elemente erstellen, die erforderlich sind, um die Anforderungen jeder Kategorie zu erfüllen. Um dies zu demonstrieren, verwendet das Beispiel-Laser-Tag-Spiel die folgende Tabelle von UI-Elementen, um die vorherige Liste potenzieller Spielerfragen zu adressieren. Während Sie dieses Tutorial durchlaufen, wird das UI-Curriculum weiterhin auf diese Liste verweisen und wichtige Designentscheidungen hervorheben, die sich auf jede Kategorie von UI-Elementen beziehen.

Jetzt, da Sie eine Liste von UI-Elementen für Ihr Spiel haben, ist es an der Zeit, stilistische und semantische Entscheidungen für jede Gruppe von UI-Elementen zu treffen, beginnend mit einem Farbschema.

Wählen Sie ein Farbschema

Ein Farbschema oder eine Farbpalette ist eine Auswahl von Farben, die jeweils eine Botschaft durch konsistente Anwendung innerhalb Ihres Spiels kommunizieren, wie zum Beispiel die Verwendung einer hellen Farbe, um anzuzeigen, wann etwas auswählbar ist. Die Anwendung eines Farbschemas auf Ihre UI-Elemente ist wichtig, insbesondere wenn Sie auf Farbkonventionen innerhalb des Genres Ihres Spiels angewiesen sind, da es den Spielern ermöglicht, Ihre UI mit minimalem Aufwand schnell zu verstehen.

Im Umweltkunst-Curriculum ist jede Hälfte der Laser-Tag-Umgebung von oben farbcodiert, um zu unterscheiden, welcher Bereich der Karte in der Nähe der jeweiligen Spawnzone jedes Teams liegt: minze für das Team, das sich auf der linken Seite der Karte versammelt, und Nelkenrosa für das Team, das sich auf der rechten Seite der Karte versammelt. Diese spezifischen Farben sind nützlich, da sie komplementär sind, was bedeutet, dass sie sich gut voneinander abheben und es den Spielern ermöglichen, ihre Umgebung leicht zu scannen und sich zu orientieren, unabhängig davon, in welche Richtung sie im Gebäude schauen.

Das Beispiel-Laser-Tag-Spiel verwendet dasselbe Farbschema in seiner UI, um Informationen hervorzuheben, die sich auf jedes Team beziehen, wie zum Beispiel den Teamindikator jedes Spielers im 3D-Raum oder den Punkteverfolger des Teams, der den Bildschirm überlagert. Diese Konsistenz hilft den Spielern, Informationen über das Ziel des Spiels während des schnellen Gameplays eines Ego-Shooter-Spiels schnell zu verstehen, insbesondere da die Spieler schnelle Entscheidungen treffen müssen, während sie sich in der Umgebung bewegen.

Bei der Auswahl eines Farbschemas für Ihr eigenes Spiel sollten Sie Folgendes berücksichtigen:

• Die Stärke eines Farbschemas beruht darauf, den Spielern zu helfen, schnelle mentale Assoziationen zwischen jeder Farbe und ihrer Funktion herzustellen. Aus diesem Grund sollten Sie Ihr Farbschema einschränken, um nur die wichtigsten Informationen hervorzuheben, die Sie möchten, dass die Spieler mit Ihren UI-Elementen assoziieren.
• Um sicherzustellen, dass Spieler mit Farbenblindheit die Botschaft Ihres Farbschemas verstehen können, verlassen Sie sich nicht immer nur auf Farbe, um zwischen UI-Elementen zu unterscheiden. Kombinieren Sie stattdessen Farben mit Symbolen, Formen und/oder Animationen, um sicherzustellen, dass Ihre UI effektiv mit jedem Spieler kommuniziert.
• Es ist wichtiger, dass Ihre UI lesbar ist, als ästhetisch ansprechend. Aus diesem Grund sollten Sie einfache UI priorisieren, deren Farben sowohl auf hellen als auch auf dunklen Elementen in der 3D-Welt lesbar bleiben.

Um die Anleitung im letzten Punkt zu verdeutlichen, nutzt das Beispiel-Laser-Tag-Spiel die neutralen Farben Schwarz und Weiß für fast jedes andere UI-Element, das den 2D-Bildschirm überlagert. Schwarz und Weiß heben sich gut voneinander ab und sind leicht zu lesen, während der Rest des Bildschirms eine ansonsten farbenfrohe 3D-Umgebung anzeigt.

Skizzieren Sie einfache Symbole

Ein Symbol ist ein Zeichen, das eine Aktion, ein Objekt oder ein Konzept in einem Spiel darstellt. Einfache und intuitive Symbole zu skizzieren ist wichtig, da das Endergebnis es den Spielern ermöglicht, leicht zu erkennen, was sie tun können und was Sie ihnen durch Ihre UI mitteilen möchten, ohne Text zu verwenden, der den Bildschirm überladen und die Aufmerksamkeit von wichtigen Inhalten ablenken kann. Dieser Prozess ist noch entscheidender, wenn Ihr Publikum Ihr Spiel auf einem kleinen Bildschirm auf mobilen Geräten aufruft.

Einfache Symbole haben idealerweise einen klaren Stil, der sich von Ihren 3D-Elementen unterscheidet, während sie dennoch die Gesamtwelt Ihres Spiels ergänzen. Zum Beispiel haben im endgültigen Umfeld des Umweltkunst-Curriculums sowohl modulare als auch Requisiten-3D-Assets einen sauberen, hochmodernen Kunststil, der rechteckige Formen mit sanften, abgerundeten Ecken verwendet. Von den abgeschrägten Paneelen entlang des Bodens bis zu den nahezu kreisförmigen Fenstern in der Decke hat nichts eine scharfe Kante.

Um diesen Kunststil zu ergänzen und dennoch einzigartig zu bleiben, enthalten alle UI-Elemente, die Sie später in diesem Tutorial lernen werden, eine futuristische Ästhetik und runde Winkel, ohne die Formensprache der 3D-Assets in der Umgebung zu übernehmen. Dies hält die Bedeutung jedes Symbols von anderen Informationen sowohl im 2D- als auch im 3D-Raum deutlich.

Um dieses Konzept zu demonstrieren, sehen Sie sich die folgenden beiden Bilder aus dem Beispiel-Laser-Tag-Spiel an, das Fadenkreuz, das den Spielern zeigt, wo ihr Blaster auf dem Bildschirm schießt, und die Schaltfläche, die es den Spielern ermöglicht, ihren Blaster auf mobilen Geräten zu schießen. Beide Symbole haben sanfte Winkel, um mit der Gesamtwelt kohärent zu sein, aber ihre hexagonalen und kreisförmigen Formen heben sie von allem ab, was ein Spieler mit den Symbolen im Spiel assoziieren könnte.

Bei der Skizzierung einfacher Symbole für Ihr eigenes Spiel sollten Sie Folgendes berücksichtigen:

• Einfache Symbole sind auch dann lesbar, wenn sie klein sind. Aus diesem Grund sollten Sie Details auf Ihren Symbolen einschränken, die auf Bildschirmen mobiler Geräte unkenntlich werden könnten.
• Symbole sind mächtig, da sie eine Botschaft unabhängig von der Sprache des Spielers kommunizieren können. Solange es das Verständnis des Spielers für Ihre UI nicht beeinträchtigt, ersetzen Sie unnötigen Text durch Symbole, um die Lokalisierungsbemühungen zu verbessern.
• Viele Spiele desselben Genres verwenden stilistisch ähnliche Symbole, wie ein Schwertsymbol, das Stärke darstellt, oder ein Kolben, der Magie darstellt. Nutzen Sie die Symbolik innerhalb des Genres Ihres Spiels, damit die Spieler Ihre Symbole ohne zusätzliche Anleitung verstehen können.

Wenn Sie nicht wissen, welche Arten von Symbolen in Ihrem Genre üblich sind, schauen Sie sich die Game UI Database an. Dieses kostenlose Ressourcenwerkzeug für UI-Designer enthält Screenshots von Hunderten von Spielen verschiedener Genres, auf die Sie während Ihres Designprozesses zurückgreifen können.

Legen Sie eine Interaktionsreihenfolge fest

Eine Interaktionsreihenfolge ist die Reihenfolge der Interaktionen, die Spieler mit Ihrer UI haben können. Da es oft mehrere interaktive UI-Elemente auf dem Bildschirm gibt, ist es wichtig, eine intuitive Interaktionsreihenfolge festzulegen, um den Spielern zu helfen, Entscheidungen zu treffen, während sie verschiedene Workflows navigieren.

Es gibt typischerweise drei Arten von Interaktionen in einem Workflow:

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

Jeder Interaktionstyp muss je nach Wahrscheinlichkeit, dass ein Spieler die Aktion ausführt, ein unterschiedliches Maß an visueller Betonung haben. Um dieses Konzept zu veranschaulichen, betrachten Sie das folgende Bild der Interaktionsreihenfolge für den Workflow zur Auswahl eines Blasters im Beispiel-Laser-Tag-Spiel, in dem A die primäre Interaktion darstellt, B die sekundäre Interaktion und C die tertiäre Interaktion.

In diesem Workflow ist die Aktion, die ein Spieler am wahrscheinlichsten ausführen wird, die Auswahl zwischen den beiden verschiedenen Blastertypen, sodass die Blastertasten viel größer sind als jedes andere interaktive Element im Design. Dieses Maß an visueller Betonung zieht die Aufmerksamkeit des Spielers auf sich und lenkt ihren Blick auf die Mitte des gesamten UI-Elements. Nachdem der Spieler seine Entscheidung getroffen hat, ist der logische nächste Schritt im Workflow, ihre Auswahl zu bestätigen und die Runde zu starten. Aus diesem Grund befindet sich die SELECT-Taste direkt unter der primären Interaktion.

Obwohl es unwahrscheinlich ist, könnte der Spieler nicht wissen, dass er eine der Blastertasten auswählen kann, um zu kommunizieren, welchen Blaster er verwenden möchte. Um in dieser Situation zu helfen, gibt es zwei Pfeil-Tertiärschaltflächen, die der Spieler nutzen kann, um zwischen seinen Optionen 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 wahrnehmbar, der Anleitung benötigt, welche Aktionen er ausführen kann.

Wenn Sie diese primären, sekundären und tertiären Interaktionen in einer anderen Interaktionsreihenfolge anordnen würden, z. B. die SELECT-Taste mit der linken Pfeiltaste vertauschen, hätten die Spieler keine klare Richtung für die Reihenfolge der Entscheidungen, die sie treffen müssen. Aus diesem Grund folgen effektive Workflows zusätzlich zur visuellen Betonung einer Schaltflächenreihenfolge einer visuellen Hierarchie, die die Spieler durch Ihre ideale Reihenfolge von Entscheidungen führt, je nachdem, in welche Richtung sie wahrscheinlich Informationen scannen, z. B. von oben nach unten und von links nach rechts.

Bei der Festlegung einer Interaktionsreihenfolge für die Workflows in Ihrem eigenen Spiel sollten Sie Folgendes berücksichtigen:

• Die Spieler müssen ein klares Verständnis dafür haben, wann sie mit Ihrer UI interagieren können, um Aktionen auszuführen. Aus diesem Grund wird empfohlen, mindestens eine Form von visuellem Feedback für interaktive UI-Elemente bereitzustellen, z. B. durch Anzeigen eines Rahmens oder Ändern der Größe, Farbe oder Animation einer Schaltfläche, wenn sie im Fokus ist.
• Wenn die Beschriftungen auf interaktiven UI-Elementen vage oder einander im selben Workflow ähnlich sind, können die Spieler missverstehen, wie sie eine Aktion oder einen Prozess abschließen. Um ein negatives Spielerlebnis zu vermeiden, erstellen Sie Beschriftungen, die klar, prägnant und voneinander unterscheidbar sind.
• Wenn interaktive UI-Elemente zu groß sind, können sie von anderen wichtigen Informationen auf dem Bildschirm ablenken. Umgekehrt, wenn sie zu klein sind, können sie schwer zu lesen oder auszuwählen sein, insbesondere wenn sie in unmittelbarer Nähe auf mobilen Geräten sind. Aus diesem Grund ist es wichtig, die Größe Ihrer interaktiven UI-Elemente auf verschiedenen Bildschirmgrößen zu überprüfen.

In Implement in Studio lernen Sie, wie Sie UIAspectRatioConstraint-Objekte verwenden, um sicherzustellen, dass UI-Elemente ein bestimmtes Seitenverhältnis beibehalten, egal welches Gerät die Spieler verwenden, um auf Ihr Spiel zuzugreifen. Neben der Erleichterung Ihres Designprozesses kann diese Technik Ihnen auch helfen, die Empfehlungen der Web Content Accessibility Guidelines zu Touch Target Size and Spacing zu erfüllen, um eine Berührungszone für interaktive UI-Elemente zu schaffen, die auf mobilen Geräten mindestens 9x9 mm groß ist.

Bestimmen Sie ein Textsystem

Ein Textsystem ist eine Reihe von Regeln über Schriftarten und Stile für alle Wörter in Ihrer UI, wie "immer fettgedruckte Überschriften" oder "verwenden Sie grüne Schrift, wenn Sie auf einen Gesundheitswert verweisen." Ein frühes Festlegen eines Textsystems in Ihrem Designprozess ermöglicht es Ihnen, eine Struktur zu haben, die Sie konsistent in Ihrem Spiel anwenden können, damit die Spieler wissen, was sie erwarten können, während sie nach den Informationen suchen, die sie benötigen.

Während Textsysteme je nach Genre des Spiels oder Anforderungen der 3D-Welt variieren können, ist die wichtigste Regel, die alle Textsysteme befolgen müssen, sicherzustellen, dass all Ihr UI-Text klar und leicht zu lesen ist. Indem Sie diese Regel als Grundlage für alle Entscheidungen im Zusammenhang mit Ihrem Textsystem verwenden, können Sie die Zugänglichkeit und Benutzererfahrung für Spieler, die Ihre UI lesen, verbessern, indem Sie die verschiedenen Möglichkeiten berücksichtigen, wie Spieler mit Ihrem Text interagieren können, wie zum Beispiel:

• Das Gerät, das die Spieler verwenden, um auf Ihr Spiel zuzugreifen.
• Die Sprache, in der die Spieler Ihren lokalisierten Text lesen können.
• Der mögliche Hintergrund hinter dem Text auf dem Bildschirm.

Zum Beispiel skaliert das folgende Bildschirmantwortdesign, wenn ein Spieler markiert wird, auf eine kleinere oder größere Schriftgröße, je nach Gerät des Spielers, enthält genügend Platz auf beiden Seiten des englischen Textes für Sprachen mit längeren Übersetzungen und hat einen kontrastierenden Hintergrund, damit die Spieler den Text lesen können, egal welche Farbe sich im Hintergrund befindet.

Bei der Bestimmung eines Textsystems für Ihr eigenes Spiel sollten Sie Folgendes berücksichtigen:

• Text ist schwer zu lesen, wenn er sich mit dem Hintergrund vermischt. Um die Lesbarkeit Ihrer UI zu verbessern, zeigen Sie Text auf einem kontrastierenden Hintergrund oder mit einem Rand an.
• Wenn Sie Ihren Text nicht für verschiedene Geräte skalieren, nimmt der Text entweder zu viel Platz ein oder wird klein und unleserlich auf dem Bildschirm des Spielers. Um Diskrepanzen in Ihrem Text zu erkennen, testen Sie Ihr Design auf mehreren Geräten während des Designprozesses.
• Wörter können über Ihr ursprüngliches Design hinausgehen, wenn Sie sie in andere Sprachen lokalisieren. Um die Komposition Ihres Designs zu verbessern, referenzieren Sie den meisten Platz, den Ihr Text auf dem Bildschirm einnehmen kann.
• Während einige Schriftarten zur Ästhetik Ihres Spiels passen können, können sie in großen Mengen schwer zu lesen sein. Aus diesem Grund sollten Sie stilisierten Text sparsam verwenden, z. B. für Titel oder Warntexte.

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