Die folgenden Design-Best Practices helfen dir, für Nutzer, die dein Spiel auf YouTube auf verschiedenen Geräten und Plattformen spielen, eine optimale Nutzerfreundlichkeit zu gewährleisten.
Abgesehen von den Betriebssystemkomponenten besteht die Playables-Funktion hauptsächlich aus drei Komponenten:
- Playables-Aktionen
- Spiel-Canvas
- Menüs und Dialogfelder
Diese Best Practices für das Spieledesign enthalten Empfehlungen dazu, wie Sie Ihr Spiel für den Game Canvas erstellen.
Größe von Spielen anpassen
Achte darauf, dass Spiele sich an verschiedene Bildschirmgrößen und ‑ausrichtungen anpassen, indem du die folgenden Best Practices berücksichtigst.
Passen Sie die Größe des Spiels und die Benutzeroberfläche an die Größe und das Seitenverhältnis des Canvas an.
Verwende Pillarboxing oder Letterboxing, wenn das Spiel nicht vollständig auf die Größe und das Seitenverhältnis des Spielbereichs reagieren kann.
Vermeiden Sie das Auslösen von Scrollleisten. Scrollbalken wirken sich negativ auf das Gameplay und die allgemeine Navigation aus. Füllen Sie die Arbeitsfläche, ohne dass das Spiel auf der Arbeitsfläche gescrollt werden muss. Scrollbalken sind in Ordnung, wenn das Scrollen beabsichtigt ist, z. B. beim Scrollen durch eine lange vertikale Liste in der Benutzeroberfläche des Spiels. Im Idealfall sind Spiele vollständig responsiv.
Skalierung von Spielen
Sie müssen bei verschiedenen Bildschirmauflösungen klar gerendert werden (nicht verschwommen, verpixelt oder gestreckt).
Achte darauf, dass die Benutzeroberfläche des Spiels (Texte, Symbole) sowohl auf Bildschirmen mit niedriger Auflösung (z. B. 360 × 800 Pixel auf Mobilgeräten) als auch auf Bildschirmen mit hoher Auflösung (z. B. 3.840 × 2.560 Pixel auf Desktopmonitoren) richtig skaliert wird.
Vermeiden Sie gerasterte Assets mit niedriger Auflösung, die auf großen Bildschirmen unscharf dargestellt werden.
Typografie
Achten Sie darauf, dass der Text auf allen Geräten und Bildschirmgrößen gut lesbar ist.
Die Texte im Spiel, z. B. auf Schaltflächen, in Menüs und Sprechblasen, müssen auf verschiedenen Geräten und bei unterschiedlichen Bildschirmgrößen lesbar sein. Dies kann durch automatisches Skalieren und Anpassen des Texts oder durch eine Einstellung für Nutzer zum Anpassen der Schriftgröße erreicht werden.
Wenn der Text kleiner als 18 pt ist oder wenn der Text fett und kleiner als 14 pt ist, legen Sie das Farbkontrastverhältnis auf mindestens 4,5:1 fest.
Legen Sie für allen anderen Text ein Farbkontrastverhältnis von mindestens 3:1 fest.
Allgemeine Informationen finden Sie unter WCAG2.1.
 |
 |
| Verwenden Sie große Schriftgrößen mit ausreichend Gewicht und Kontrast, damit der Text gut lesbar ist. In diesem Beispiel beträgt das Kontrastverhältnis 4, 48:1. | Vermeiden Sie kleine Schriftgrößen und Farben mit geringem Kontrast. In diesem Beispiel beträgt das Kontrastverhältnis 3,07:1. |
Interaktion
In diesem Abschnitt werden Best Practices für Nutzerinteraktionen und zugehörige Elemente behandelt.
Berührungszielbereiche
Zielelemente müssen groß genug sein, damit Nutzer sie leichter antippen können.
Berührungszielbereiche sollten mindestens 48 × 48 dp groß sein und der Abstand zwischen einzelnen Elementen sollte mindestens 8 dp betragen. So wird die Interaktion erleichtert. Weitere Informationen finden Sie in den Material Design-Richtlinien.
In diesem Beispiel ist die visuell gerenderte Schaltfläche 24 dp groß, während das unsichtbare Berührungsziel 12 dp um das Symbol herum umfasst, um das Berührungsziel von 48 × 48 dp zu erreichen.
Fügen Sie um Symbole und Schaltflächen herum Innenabstand hinzu, um die Größe des Berührungszielbereichs zu erhöhen.
Schaltflächen
Verwenden Sie für jeden Schaltflächenstatus ein eindeutiges Design:
- Aktiviert
- Deaktiviert
- Hover (für Eingabegeräte ohne Touch-Funktion)
- konzentriert
- Gepresst
Achten Sie darauf, Schaltflächen auch nach Hierarchie zu unterscheiden. Beispiel: primäre und sekundäre Aktionsschaltflächen in einem Startmenü (siehe Google Material 2-Designrichtlinien für Schaltflächen).
Einzigartige Stile, die die einzelnen Schaltflächenstatus unterscheiden
Tastatureingabe
Um die Zugänglichkeit des Spiels für verschiedene Geräte und Nutzer zu erhöhen, sollten Sie neben Touch- und Mauseingabe auch die Tastatureingabe für alle Gameplay-Steuerelemente und die Bildschirmnavigation unterstützen.
Bei Spielen, die die Eingabe über die Tastatur unterstützen, sollten Nutzer alle Menüs und Dialogfelder im Spiel mit der Esc schließen können. Das ist zusätzlich zur visuellen Schaltfläche zum Schließen (z. B. ein „X“-Symbol in der oberen Ecke) erforderlich. Häufige Beispiele für Modale oder Dialogfelder sind das Menü Einstellungen, das Menü Pause, Fehlermeldungen und Pop-ups mit Hilfe-Informationen.
Vermeiden Sie es, Aktionen dem langen Drücken der Esc-Taste zuzuweisen, da diese in Desktop-Webbrowsern zum Beenden des Vollbildmodus verwendet wird.
Bei Spielen, für die Keypress-Listener registriert sind: Verwenden Sie preventDefault() nicht mit Esc-Tastenereignissen. Wenn sich der Nutzer in Safari im Vollbildmodus befindet, wird das Tastendruckereignis vom Spiel verarbeitet, ohne dass der Vollbildmodus beendet wird.
Haptik
Wenn es sich anbietet, sollten Sie haptisches Feedback (Vibrationen) verwenden, um Ihre Spiele noch unterhaltsamer und immersiver zu gestalten.
Wichtige Momente im Spiel
In diesem Abschnitt werden wichtige Momente in einem Spiel behandelt, die für ein großartiges Spielerlebnis sorgen.
Tutorial
Fügen Sie ein kurzes Tutorial oder eine Onboarding-Stufe hinzu, um neuen Spielern den Einstieg zu erleichtern.
Beim Onboarding lernen Nutzer die Grundlagen des Spiels kennen, damit sie es spielen und genießen können.
Playables sollen für Nutzer schnell und einfach zu starten sein. Halten Sie das Onboarding daher so kurz wie möglich. Nicht alle Spiele erfordern ein Tutorial, aber die meisten profitieren von einer Art Onboarding. Überlege dir, welche wichtigen Mechaniken, Regeln und Fähigkeiten der Spieler kennen muss, um das Spiel erfolgreich spielen und genießen zu können.
Tutorials können in folgendem Format vorliegen:
- Eine Reihe von Bildschirmen am Anfang des Spiels (oder idealerweise kontextbezogen im gesamten Spiel, wenn es angebracht ist)
- Das tatsächliche Tutorial-Level, das der Nutzer durchspielt
Pausieren
Der Spielstatus muss dem Nutzer klar mitgeteilt werden.
Teilen Sie dem Nutzer deutlich mit, wenn das Spiel pausiert wird, und erklären Sie ihm, wie er das Spiel fortsetzen kann. Vermeide es, dass der Nutzer denkt, das Spiel sei eingefroren oder abgestürzt.
Kennzeichnen Sie den Spielstatus deutlich als „pausiert“ und bieten Sie eine klare Aktion (Schaltfläche) zum Fortsetzen des Spiels an.
Spielende
Teilen Sie dem Nutzer mit, dass er das letzte Level abgeschlossen oder das Spiel beendet hat.
Wenn das Spiel ein definitives Ende hat (z. B. eine begrenzte Anzahl von Levels), müssen Sie dies dem Nutzer deutlich mitteilen. So wird verhindert, dass der Nutzer denkt, das Spiel sei defekt oder eingefroren. Idealerweise wird der Spieler für das Abschließen des Spiels gefeiert und beglückwünscht.
Audio
Das Spiel kann separate Lautstärkeregler für Effekte, Sprache und Hintergrundmusik enthalten. Die Steuerelemente können aus Schiebereglern zum Anpassen der Lautstärke oder einem Stummschaltungsschalter für einen oder beide bestehen.
Bedienungshilfen
Ein barrierefreies Design ermöglicht es den unterschiedlichsten Nutzenden mit und ohne Beeinträchtigungen, Ihr Spiel zu spielen und zu genießen.
Anders als beim Web- und Softwaredesign gibt es keine branchenüblichen Richtlinien zur Barrierefreiheit für das Spieledesign. Eine gute Ressource mit zusätzlichen Richtlinien zum inklusiven Spieldesign finden Sie unter Game Accessibility Guidelines. Wir empfehlen Ihnen, zu überlegen, wie Sie diese Richtlinien auf das Design Ihres Spiels anwenden können.