UX-Richtlinien für Windows Store Apps

Nutzen Sie diesen Index für die schnelle Suche nach den geeigneten Richtlinien für die Gestaltung der Benutzeroberfläche, die Ihnen beim Erstellen beeindruckender Windows Store-Apps helfen. Falls Sie die Themen Erstellen großartiger Windows Store-Apps und Planen von Windows Store-Apps noch nicht gelesen haben, sollten Sie dies als Erstes nachholen.

Microsoft-Design

Windows Store-Apps sind der Schwerpunkt der Benutzererfahrung in Windows 8. Die großartigen Windows Store-Apps haben alle wichtigen Eigenschaften, die dem Benutzer eine konsistente, elegante und überwältigende Erfahrung vermitteln.

• Layout und Navigation: Überlegen Sie, wie sich das Layout der Benutzeroberfläche auf das Navigationsverhalten von Benutzern in der App auswirkt. Siehe Muster für Navigationsdesign.
• Layout und Befehle: Platzieren Sie Befehle einheitlich, um die Benutzerinteraktion zu erleichtern und Zuverlässigkeit zu schaffen. Siehe Muster für das Befehlsdesign und Gestalten der Benutzeroberfläche.
• Layout und Seitenentwurf:  Verwenden Sie das Raster, um das Layout Ihrer App-Seiten an das Erscheinungsbild von Windows 8 anzupassen.
  • Gestalten einer App-Seite
  • Auswählen eines Layouts für JavaScript-Apps
• Animationen: Gut gestaltete Animationen machen Apps lebhaft und lassen sie realistisch und perfekt erscheinen. Helfen Sie Benutzern dabei, Kontextänderungen zu verstehen, und verbinden Sie Interaktionen mit visuellen Übergängen. Weitere Informationen finden Sie in den Richtlinien zu den folgenden Animationen:
  • Drag & Drop
  • Randbasierte Animationen
  • Listenanimationen
  • Übergangsanimationen
  • Animationen für vorübergehend angezeigte Benutzeroberflächenelemente
  • Benutzeroberflächenanimationen
• Typographie: Siehe Richtlinien für Text und Typographie.

Interaktion per Fingereingabe

Verwenden Sie Interaktionen per Fingereingabe, die dem Benutzer Kontrolle und Zuversicht verleihen. Zudem sollte der Rand des Bildschirms bzw. Geräts genutzt werden, sodass Befehle leichter aufgefunden werden können. Siehe Design für Interaktion per Fingereingabe.

• Allgemeine Benutzerinteraktionsführung: Stellen Sie einheitliche und effiziente Benutzerinteraktionen bereit. Siehe Richtlinien für die Benutzerinteraktion.
• Touch-Ziele: Bedenken Sie Größe und Position der Touch-Ziele.  Siehe Richtlinien für Touch-Ziele.
• Visuelles Feedback: Liefern Sie ein eindeutiges visuelles Feedback auf Benutzeraktionen.  Siehe Richtlinien für visuelles Feedback.
• Semantischer Zoom: Unterstützen Sie die Benutzer beim Durchsuchen großer Inhaltsmengen, indem Sie den "erweiterten" und "reduzierten" Zustand von Inhalten visuell verdeutlichen. Weitere Informationen zur Benutzerinteraktion finden Sie unter Richtlinien für semantischen Zoom. Weiter unten wird das SemanticZoom-Steuerelement beschrieben.
• Streifen und Wischen: Mithilfe dieser Standardinteraktion können Elemente aus einer Liste oder einem Raster ausgewählt werden. Siehe Richtlinien für Streifen.
• Optischer Zoom und Änderung der Fenstergröße: Hiermit können Benutzer die Fenstergröße ändern, um die Inhaltsanzeige zu verbessern. Siehe Richtlinien für optischen Zoom und Änderung der Fenstergröße.
• Schwenkung: Unterstützen Sie die Benutzer beim Navigieren durch die App mittels Schwenken. Siehe Richtlinien für Schwenkung.
• Drehung: Sorgen Sie für ein schnelles Feedback, wenn Benutzer den beweglichen Inhalt auf dem Bildschirm mittels Fingereingabe drehen. Siehe Richtlinien für Drehung.
• Auswählen von Text und Bildern:  Erleichtern Sie den Benutzern das Auswählen von Text und Bildern. Siehe Richtlinien für das Auswählen von Text und Bildern.
• Mausinteraktion:  Erstellen Sie großartige Mausfunktionen für Benutzer ohne Touchscreen. Siehe Richtlinien für Mausinteraktionen.
• Tastaturinteraktion:  Bieten Sie Benutzern, die lieber eine Tastatur verwenden oder aufgrund von Behinderungen eine Tastatur verwenden müssen, eine umfassende benutzerfreundliche Interaktion. Siehe Reaktion auf Tastaturinteraktionen.
• Zeichenstift-/Tablettstiftinteraktion:  Unterstützen Sie eine großartige Schreiberfahrung für Benutzer mit Zeichenstift-/Tablettstiftgeräten. Siehe Reaktion auf Zeichenstift- und Eingabestifteingabe.

Andocken und Skalieren

Mit diesen Features können Sie eine großartige Benutzeroberfläche für alle Formfaktoren und sämtliche Anzeigeoptionen Ihrer Benutzer erstellen.

• Flexible Layouts: Entwerfen Sie Ihre App für unterschiedliche Formfaktoren, und bieten Sie Benutzern die Möglichkeit, den Inhalt entsprechend ihren Anforderungen und Wünschen zu manipulieren. Zunächst empfiehlt sich die Querformatansicht, sodass die App mit allen Formularfaktoren funktioniert. Beachten Sie jedoch, dass einige Bildschirme gedreht werden können. Daher sollte das Layout der Inhalte so optimiert werden, dass die Funktionen für den Inhalt auch in der Hochformatansicht erhalten bleiben. Siehe Richtlinien für Layouts.
• Angedockte Ansicht und gefüllte Ansicht: Berücksichtigen Sie beim Design die Multitasking-Anforderungen der Benutzer. Anwender möchten Ihre App verwenden, während sie chatten, im Internet surfen, einen Film schauen oder andere Vorgänge ausführen. Behalten Sie also mit der angedockten Ansicht den Kontext bei, wenn Benutzer zwischen angedockten und nicht angedockten Ansichten wechseln. Siehe Richtlinien für angedockte und gefüllte Ansichten
• Skalierung auf unterschiedliche Bildschirme:  Designen Sie eine App-UI, die auf verschiedenen Bildschirmgrößen hervorragend aussieht – —von einem kleinen Tablet-Bildschirm über einen Laptop-Bildschirm mittlerer Größe bis hin zu einem großen Desktop- oder All-in-One-Bildschirm. Siehe Richtlinien für die Skalierung auf unterschiedliche Bildschirme.
• Skalierung auf die Pixeldichte: Achten Sie darauf, dass die Bilder in Ihrer App auch im skalierten Zustand hervorragend aussehen. Windows skaliert Ihre App, um eine gleichmäßige Größenanpassung unabhängig von der Pixeldichte des Geräts zu gewährleisten. Siehe Richtlinien für die Skalierung auf die Pixeldichte.
• Größenänderung: Stellen Sie sicher, dass Ihre App auch dann gut aussieht, wenn Windows ihre Größe ändern muss. Windows ändert die Größe der App automatisch, wenn der Benutzer den Ansichtszustand ändert oder die Bildschirmtastatur aufruft. Siehe Richtlinien für Größenänderungen.

Verträge, Charms und Funktionen

Verträge sind der Leim, durch den Windows Store-Apps miteinander und mit der Benutzeroberfläche des Systems verbunden werden. Zwei Apps, in denen derselbe Vertrag implementiert ist, können interagieren, um ein breites oder komplexes Szenario darzustellen. Einige Verträge werden durch Charms dargestellt. Hier finden Sie eine vollständige Liste der App-Verträge. Funktionen geben die von der App genutzten Gerätefeatures an.

• Suchen: Ermöglichen Sie Benutzern das schnelle Durchsuchen von App-Inhalten von überall im System. Siehe Richtlinien für die Suche.
• Freigeben und Austauschen von Daten: Ermöglichen Sie Benutzern das Teilen von App-Inhalten mit Freunden, das Empfangen freigabefähiger Inhalte aus anderen Apps und das Anzeigen von Inhalten für Benutzer. Siehe Richtlinien zum Teilen von Inhalten, Richtlinien für Befehle für die Zwischenablage und Richtlinien für die Erstellung benutzerdefinierter Datenformate.
• Dateiauswahl: Ermöglichen Sie Benutzern zum Laden von Dateien in und aus Ihre(r) App den Zugriff auf den lokalen PC, angeschlossene Speichergeräte, Heimnetzgruppen und andere Apps. Außerdem können Sie eine Dateiauswahlerweiterung bereitstellen, sodass andere Apps den Inhalt Ihrer App laden können. Siehe Richtlinien für die Dateiauswahl und Richtlinien für Verträge für "Dateiauswahl".
• Ortung:  Stellen Sie eine saubere, unterbrechungsfreie Ortung sicher, bei der die Privatsphäre stets gewahrt bleibt. Siehe Richtlinien für Ortungs-Apps.
• Geräteerkennung: Mikrofone, Kameras, Standortanbieter und Textnachrichtendienste können auf die persönlichen Daten des Benutzers zugreifen und für diesen Kosten verursachen. Windows Store-Apps müssen daher über Features verfügen, die die Kontrolle des Benutzers über diese vertraulichen Geräte sicherstellen. Wenn die App auf sensible Geräte zugreift, designen Sie sie so, dass Benutzer den Gerätezugriff aktivieren und deaktivieren können. Siehe Richtlinien für die Nutzung von sensiblen Geräten und Richtlinien für die Erstellung einer Geräteauswahl.
• Dialogfeld für das Drucken: Erstellen Sie eine benutzerdefinierte Oberfläche, wenn Benutzer Inhalte aus Ihrer App drucken. Siehe Richtlinien für die Gestaltung der Druckbenutzeroberfläche.
• Näherungsbewegungen: Ermöglichen Sie Benutzern das Herstellen einer Verbindung zwischen mehreren Geräten mit einer Tippbewegung. Diese Bewegung führt zu mehr Benutzerfreundlichkeit, wenn mehrere Benutzer nahe beieinander sitzen, z. B. bei Multiplayer-Spielen. Siehe Richtlinien für das Tippen.
• Multimedia: Stellen Sie sicher, dass Ihre App umfassend Multimedia unterstützt. Siehe Richtlinien für das Entwickeln von Apps mit Audiounterstützung und Richtlinien für die Kamera-UI.

Kacheln und Benachrichtigungen

Die Kachel ist die Haustür einer App. Sie liegt auf dem Startbildschirm und ist die Erweiterung einer App. Eine Kachel kann viel mehr persönliche und überzeugende Informationen vermitteln als ein traditionelles Symbol. Investieren Sie in das Design einer guten Kachel, um das Interesse der Benutzer an Ihrer App zu wecken. Bieten Sie über Live-Kacheln und Benachrichtigungen aktuellen Inhalt an, damit die Benutzer die Verbindung zu Ihrer App spüren. Ermöglichen Sie Benutzern, mit Freunden und Geräten in Verbindung zu bleiben.

• App-Kacheln und sekundäre Kacheln: Mithilfe der App-Kachel können Sie die Aufmerksamkeit der Benutzer gewinnen, sie zur Nutzung Ihrer App animieren und die App aktuell und interessant gestalten. Sie können interessante Inhalte und Deep-Links aus der App auf dem Startbildschirm präsentieren und Benutzern das direkte Starten eines bestimmten Bereichs in der App ermöglichen. Siehe Richtlinien für Kacheln und Signale und Richtlinien für sekundäre Kacheln.
• Benachrichtigungen: Erinnern Sie Benutzer mithilfe von Popupbenachrichtigungen an Termine oder persönlich relevante Inhalte, und laden Sie sie erneut zur Nutzung Ihrer App ein, wenn diese nicht eingeblendet ist. Siehe Richtlinien für Popupbenachrichtigungen, Richtlinien für Pushbenachrichtigungen, Richtlinien für regelmäßige Benachrichtigungen, Richtlinien für geplante Benachrichtigungen.

Steuerelemente

Entwerfen Sie die Benutzeroberfläche Ihrer App so, dass der Inhalt effektvoll präsentiert wird. Reduzieren Sie Ablenkungen, damit die Benutzer sich ganz auf den Inhalt konzentrieren können – auf dem Bildschirm sollten nur die wichtigsten Elemente zu sehen sein. Die folgenden Richtlinien helfen Ihnen dabei, eine konsistente, elegante und attraktive Benutzeroberfläche zu erstellen.

Roaming in die Cloud

Schaffen Sie mithilfe von Datenroaming eine geräteübergreifend konsistente Oberfläche, sodass Benutzer Aufgaben unabhängig vom verwendeten Gerät an der Stelle fortsetzen können, an der sie sie unterbrochen haben, und immer die gleiche Benutzeroberfläche sehen.

• Roaming: Erleichtern Sie Benutzern die Nutzung Ihrer App auf allen Geräten, z. B. auf dem Familien-PC in der Küche, dem Arbeits-PC und auf dem eigenen Tablet, indem Sie Einstellungen und Zustände mittels Roaming beibehalten. Weitere Anleitungen zum Roaming finden Sie unter Verwalten von App-Daten und Richtlinien für das Roaming von App-Daten. Informationen zum Speichern und Abrufen von Einstellungen und Dateien im bzw. aus dem Roamingspeicher finden Sie unter Schnellstart: Roaming von App-Daten.
• Einstellungen: Führen Sie alle Einstellungen der App auf einer UI zusammen, und ermöglichen Sie Benutzern die Konfiguration der App mithilfe verbreiteter, bereits bekannter Methoden. Siehe Richtlinien für App-Einstellungen.
• Einmaliges Anmelden:  Stellen Sie sicher, dass Benutzer sich mit ihrem Microsoft-Konto anmelden können und auf jedem Windows 8-Gerät eine einheitliche Oberfläche sehen. Informationen finden Sie unter Schnellstart: Herstellen einer Verbindung mit einem Online-Identitätsanbieter.

Grundlagen

Um möglichst viele Benutzer zu erreichen, sollte jede App über ein solides Fundament verfügen.

• Begrüßungsbildschirm:  Der Begrüßungsbildschirm sollte einen nahtlosen Übergang zwischen dem Starten der App und dem Zeitpunkt darstellen, zu dem sie genutzt werden kann. Der Begrüßungsbildschirm sollte den Benutzern dezent Ihre Marke vermitteln und sie nicht ablenken oder mit Werbung überschütten. Siehe Richtlinien für Begrüßungsbildschirme.
• Anhalten und Fortsetzen des App-Zustands:  Benutzer blenden Ihre App auf dem Bildschirm ein und aus, und sie wird von Windows beendet, wenn sie nicht verwendet wird. Sie sollten den App-Status möglichst speichern und wieder aufnehmen, um den Kontext beizubehalten. Siehe Richtlinien für das Anhalten und Fortsetzen von Apps.
• Automatisches Starten und "Öffnen mit": Starten Sie die Standard-App für einen Dateityp oder ein Protokoll aus Ihrer App. Siehe Richtlinien und Prüflisten für Dateitypen und Protokolle.
• Globalisierung, Lokalisierung und App-Ressourcen: Windows wird weltweit genutzt. Daher müssen Sie Ihre App so entwerfen, dass Ressourcen wie Zeichenfolgen und Bilder vom zugehörigen Code getrennt sind, um die Lokalisierung zu erleichtern. Siehe Richtlinien für die Globalisierung Ihrer App und Richtlinien für App-Ressourcen.
• Barrierefreiheit:  Stellen Sie Ihre App allen Benutzern zur Verfügung, unabhängig von ihren Fähigkeiten oder Vorlieben. Wenn Sie dazu die integrierten UI-Steuerelemente nutzen, kostet Sie die Barrierefreiheit überhaupt nichts. Wenn Sie benutzerdefinierte Steuerelemente erstellen müssen, finden Sie entsprechende Informationen unter Planen der Barrierefreiheit.
• Hilfe zur App: Stellen Sie für die Benutzer eine Hilfe oder Tipps zur Problembehandlung bereit. Siehe Richtlinien für die App-Hilfe.
• Store-Kategorien: Erfahren Sie, wie Sie attraktive Apps für spezielle Windows Store-Kategorien wie Games oder Unterhaltung erstellen. Siehe Kategorieleitfaden.