Mit den folgenden Best Practices für das Design kannst du dafür sorgen, dass Nutzer dein Spiel auf YouTube auf verschiedenen Geräten und Plattformen optimal spielen.
Neben den Betriebssystemkomponenten besteht die Playables-Erfahrung hauptsächlich aus drei Komponenten:
- Playables-Aktionen
- Leinwand für Spiele
- Menüs und Dialogfelder
Die folgenden Best Practices für das Spieldesign enthalten Empfehlungen dazu, wie Sie Ihr Spiel für die Spiel-Canvas erstellen können.
Größenanpassung des Spiels
Sorgen Sie dafür, dass sich Spiele an verschiedene Bildschirmgrößen und -ausrichtungen anpassen.
Passen Sie die Größe des Spiels und die Benutzeroberfläche an die Größe und das Seitenverhältnis des Canvas an.
Verwende Pillarbox- oder Letterbox-Bild, wenn das Spiel nicht vollständig auf die Canvasgröße und das Seitenverhältnis des Spiels reagieren kann.
Vermeiden Sie das Auslösen von Bildlaufleisten. Bildlaufleisten beeinträchtigen sowohl das Spiel als auch die allgemeine Navigation. Füllen Sie den Canvas aus, ohne dass das Spiel darin scrollbar ist. Bildlaufleisten eignen sich zum bewussten Scrollen, z. B. beim Scrollen durch eine lange vertikale Liste in der Benutzeroberfläche eines Spiels. Idealerweise sind Spiele vollständig für den Darstellungsbereich verantwortlich.
Skalierung von Spielen
Deutlich rendern (nicht verschwommen, verpixelt oder gestreckt) bei unterschiedlichen Bildschirmauflösungen.
Achten Sie darauf, dass die Benutzeroberfläche des Spiels (Texte, Symbole) korrekt skaliert wird, wenn sie sowohl auf Bildschirmen mit geringerer Auflösung (z. B. 360 × 800 Pixel) als auch auf Bildschirmen mit höherer Auflösung (z. B. Computerbildschirme mit 3.840 × 2.560) gerendert wird.
Vermeiden Sie Raster-Assets mit niedriger Auflösung, die auf großen Bildschirmen verschwommen aussehen.
Typografie
Sorgen Sie für gute Lesbarkeit auf allen Geräten und Bildschirmgrößen.
Die im Spiel angezeigten Texte, z. B. Schaltflächen, Menüs und Sprechblasen, müssen auf verschiedenen Geräten und Bildschirmgrößen lesbar sein. Dazu können Sie den Text automatisch skalieren und anpassen oder Nutzern eine Einstellung zum Anpassen der Schriftgröße anbieten.
Wenn der Text kleiner als 18 pt oder fett und kleiner als 14 pt ist, sollte das Farbkontrastverhältnis mindestens 4,5:1 betragen.
Bei allen anderen Texten sollte das Farbkontrastverhältnis mindestens 3:1 betragen.
Allgemeine Informationen finden Sie unter WCAG2.1.
 |
 |
| Verwenden Sie große Schriftgrößen mit ausreichend Schriftstärke und Kontrast für eine gute Lesbarkeit. In diesem Beispiel beträgt das Kontrastverhältnis 4, 48:1. | Vermeiden Sie kleine Schriftgrößen und kontrastreiche Farben. In diesem Beispiel beträgt das Kontrastverhältnis 3,07:1. |
Interaktion
In diesem Abschnitt werden Best Practices zu Nutzerinteraktionen und verwandten Elementen beschrieben.
Berührungszielbereiche
Berührungszielbereiche sollten groß genug sein, um die Interaktion zu erleichtern.
Zur einfacheren Interaktion sollten Berührungszielbereiche mindestens 48 x 48 dp mit mindestens 8 dp Abstand zwischen den Zielen (siehe Material Design-Richtlinien) haben.
In diesem Beispiel hat die visuell gerenderte Schaltfläche 24 dp, während das unsichtbare Berührungsziel 12 dp um das Symbol herum einschließt, um das Zielelement von 48 x 48 dp zu erreichen.
Fügen Sie einen Abstand um Symbole und Schaltflächen hinzu, um die Größe des Berührungszielbereichs zu erhöhen.
Tasten
Verwenden Sie eindeutige Stile für jeden Schaltflächenstatus:
- Aktiviert
- Deaktiviert
- Hover (für nicht berührungslose Eingabegeräte)
- konzentriert
- Gedrückt
Versuchen Sie, die 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 Barrierefreiheit des Spiels auf verschiedenen Geräten und Nutzern zu verbessern, sollten Sie zusätzlich zur Touch- und Mauseingabe die Tastatureingabe für alle Steuerelemente und Bildschirmnavigation unterstützen.
Erlaube den Nutzern bei Spielen, die die Tastatureingabe unterstützen, alle Menüs und Dialogfelder im Spiel mit der Esc zu schließen. Außerdem gibt es eine visuelle Schließen-Schaltfläche (z. B. ein X-Symbol oben in der Ecke). Gängige Beispiele für modale Fenster oder Dialogfelder sind das Menü Einstellungen, das Menü Pause, Fehlermeldungen und Pop-ups mit Hilfeinformationen.
Vermeiden Sie es, Aktionen durch langes Drücken der Esc zuzuordnen, da dies zum Beenden des Vollbildmodus in Desktop-Webbrowsern verwendet wird.
Für Spiele, bei denen Keypress-Listener registriert sind, darf preventDefault() nicht mit Esc-Tastenereignissen verwendet werden. Wenn die Vollbildansicht in Safari aktiviert ist, wird das Ereignis für das Drücken der Taste vom Spiel genutzt, ohne den Vollbildmodus zu beenden.
Haptik
Gegebenenfalls empfiehlt es sich, haptisches Feedback (Vibrationen) zu verwenden, damit Ihre Spiele unterhaltsamer und immersiver erscheinen.
Wichtige Spielmomente
In diesem Abschnitt werden wichtige Momente in einem Spiel behandelt, die dem Spieler ein großartiges Erlebnis bieten.
Tutorial
Fügen Sie ein kurzes Tutorial oder ein Einstiegslevel hinzu, um neuen Spielern zu helfen.
Durch das Onboarding lernen die Nutzer die grundlegenden Spiel- und Spielgrundlagen kennen, um mit dem Spiel fortzufahren und es zu genießen.
Da Playables für Nutzer schnell und zugänglich sein sollen, versuchen Sie, das Onboarding so gering wie möglich zu halten. Auch wenn nicht für alle Spiele ein Tutorial erforderlich ist, profitieren die meisten Spiele von einer Art des Onboardings. Berücksichtigen Sie die wichtigsten Mechanismen, Regeln und Fähigkeiten, die der Spieler kennen muss, um das Spiel erfolgreich zu spielen und zu genießen.
Anleitungen können folgendes Format haben:
- Gruppe von Bildschirmen zu Beginn des Spiels (oder besser gesagt, die während des Spiels gegebenenfalls kontextbezogen dargestellt werden)
- Tatsächliches Tutorial-Level, den der Nutzer durchläuft
Pausieren
Sie müssen dem Nutzer den Spielstatus deutlich mitteilen.
Sie müssen dem Nutzer deutlich mitteilen, wann das Spiel pausiert wird und wie er das Spiel fortsetzen kann. Nutzer sollten nicht denken, dass das Spiel eingefroren ist oder abgestürzt ist.
Beschriften Sie den Spielstatus deutlich als "pausiert" und bieten Sie eine eindeutige Aktion (Schaltfläche) zum Fortsetzen des Spiels.
Spielende
Teilen Sie dem Nutzer mit, dass er das letzte Level abgeschlossen oder das Spiel beendet hat.
Wenn das Spiel ein bestimmtes Ziel hat (z. B. eine endliche Anzahl von Levels), teilen Sie dies dem Nutzer klar mit. So denkt der Nutzer nicht, dass das Spiel kaputt oder eingefroren ist. Im Idealfall feiert und gratuliert das Spieler für den Abschluss des Spiels.
Audio
Das Spiel kann separate Lautstärkeregler für Effekte, Sprache und Hintergrundmusik haben. Die Steuerelemente können aus Schiebereglern zum Anpassen der Lautstärke, aus einer Ein/Aus-Schaltfläche für die Stummschaltung oder für beide bestehen.
Bedienungshilfen
Barrierefreiheit im Design ermöglicht es Nutzern mit unterschiedlichen Fähigkeiten, Ihr Spiel zu spielen und zu genießen.
Im Gegensatz zum Web- und Softwaredesign gibt es beim Spieledesign keine branchenüblichen Richtlinien für die Barrierefreiheit. Eine gute Ressource mit zusätzlichen Richtlinien zum inklusiven Spieldesign finden Sie in den Richtlinien zur Barrierefreiheit von Spielen. Wir empfehlen Ihnen, zu überlegen, wie diese Richtlinien auf das Design Ihres Spiels angewendet werden können.