Windows-Apps
Inhaltsverzeichnis reduzieren
Inhaltsverzeichnis erweitern

Prüfliste für die Gestaltung der Benutzeroberfläche von Windows Store-Apps

Zur Erleichterung der App-Zertifizierung und zur Ermöglichung einer hohen Benutzerfreundlichkeit verwenden Sie diese Prüfliste, um festzustellen, inwieweit Ihre App den Richtlinien für die Gestaltung der Benutzeroberfläche entspricht.

Erforderlich

Im Folgenden sind die wichtigsten Richtlinien für die Gestaltung der Benutzeroberfläche Ihrer App aufgeführt. Die Richtlinien in diesem Abschnitt müssen eingehalten werden, damit Ihre App für den Windows Store zertifiziert wird.

ÜberprüfenBeschreibungRichtlinien
[ ]Die App muss Kunden einen einzigartigen, kreativen Wert bieten. Planen von Windows Store-Apps
[ ]Die App muss mehr sein als eine Website, die als Windows Store-App verpackt ist. Planen von Windows Store-Apps
[ ]Jede App muss nach der Installation eine Kachel anzeigen. Das auf einer App-Kachel angezeigte Bild muss einen geeigneten Bezug zum Inhalt der App haben.Arbeiten mit Kacheln, Signalen und Popupbenachrichtigungen (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Für die Kachel der App muss eine standardmäßige Kachelvorlage verwendet werden.Arbeiten mit Kacheln, Signalen und Popupbenachrichtigungen (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Die App darf weder ihre Beschreibung noch Kacheln, Benachrichtigungen oder die App-Leiste zu Werbezwecken nutzen und auch keine der Interaktionen, wenn der Benutzer vom Rand aus eine Streifbewegung durchführt. Richtlinien für Werbung
[ ]Die App muss sowohl die Fingereingabe als auch die Tastatur- und Mauseingabe vollständig unterstützen.Reaktion auf Benutzerinteraktionen (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Fingereingabegesten und -aktionen müssen der Windows-Sprache für Fingereingaben entsprechen. In der App dürfen keine Fingereingabegesten verwendet werden, die nicht der Windows-Sprache für Fingereingaben entsprechen. Muster für Fingereingabe
[ ]In der App muss die Windows 8-Sprache für Mauseingaben verwendet werden.Reaktion auf Mausinteraktionen (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Interaktive UI-Elemente müssen ein visuelles Feedback liefern. Nicht interaktive UI-Elemente dürfen kein visuelles Feedback liefern.Richtlinien für visuelles Feedback (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Die App muss auch dann noch funktionsfähig sein, wenn der Benutzer die Größe auf eine beliebige Größe bis hinunter zur standardmäßigen Mindestgröße ändert. Richtlinien für Größenänderungen und Richtlinien für Größenänderungen in schmale Layouts
[ ]Im Querformat müssen sämtliche Funktionen der App zugänglich sein, wenn die Anzeigegröße der App 1024 x 768 ist. Richtlinien zum Skalieren auf Bildschirme
[ ]Die App darf weder programmgesteuert geschlossen werden noch über die UI Möglichkeiten zum Schließen bieten. Die Windows 8-Prozesslebensdauer-Verwaltung schließt Windows Store-Apps automatisch. Richtlinien für das Anhalten und Fortsetzen von Apps
[ ]Die App muss beim Anhalten und Fortsetzen einen angemessenen Zustand einnehmen. Richtlinien für das Anhalten und Fortsetzen von Apps
[ ]Wenn die App eine untere App-Leiste implementiert, muss diese Leiste angezeigt werden, wenn der Benutzer von unten nach oben streift.Richtlinien und Prüfliste für App-Leisten (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Wenn die App eine Navigationsleiste implementiert, muss diese Leiste angezeigt werden, wenn der Benutzer von oben nach unten streift.Richtlinien und Prüfliste für App-Leisten (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Die App darf keine Systemeinstellungen für Benachrichtigungen außer Kraft setzen und muss auch funktionieren, wenn die Benachrichtigungen deaktiviert sind.Arbeiten mit Kacheln, Signalen und Popupbenachrichtigungen (JavaScript und HTML oder C#/VB/C++ und XAML)

 

Sehr empfehlenswert

Wir empfehlen dringend, dass die Richtlinien in diesem Abschnitt von Ihrer App erfüllt werden. Jede dieser Richtlinien trägt zum Erstellen einer gut konzipierten App bei.

ÜberprüfenBeschreibungRichtlinien
App-Ziele
[ ]Die App muss klare Ziele hinsichtlich der Benutzerfreundlichkeit und eine deutliche Aussage zur Besonderheit aufweisen. Planen von Windows Store-Apps
[ ]Die Haupt- oder Hubseite der App muss mehr als eine eingebettete Website sein. Planen von Windows Store-Apps

Navigationsmuster
Layout und Ausrichtung
[ ]Zur Anordnung von Inhalten müssen Ausrichtung, Typografie und Leerzeichen auf allen Seiten und in allen Ansichten der App einheitlich verwendet werden. Gestalten einer App-Seite

Richtlinien für Typografie
[ ]Die App verwendet keine Spielereien (Linien, Felder und andere UI-Elemente) als primäres Mittel zum Organisieren von Inhalten. Gestalten einer App-Seite

Designfallstudie: von der Website zur Windows Store-App
[ ]Wenn die App eine Hubseite hat, darf diese Seite nicht hauptsächlich als Menü für andere Seiten der App dienen. Die Seite muss nützliche Inhalte aufweisen. Navigationsmuster
Raster
[ ]UI-Elemente müssen am Raster ausgerichtet sein. Gestalten einer App-Seite
Silhouette
[ ]Der Titel der App muss auf allen Seiten einheitlich angeordnet sein. Gestalten einer App-Seite
[ ]Die Ränder müssen auf allen Seiten einheitlich angeordnet sein. Gestalten einer App-Seite
[ ]Wenn die App ein dynamisches Layout hat, muss der linke Rand mindestens 120 px groß sein. Gestalten einer App-Seite
[ ]Der untere Rand muss mindestens 50 px groß sein. Gestalten einer App-Seite
Verschiebung und Bildlauf
[ ]Auf einer horizontal schwenkbaren Hub- oder Hauptseite muss eine Liste mit vertikalem Bildlauf über Andockpunkte verfügen.Richtlinien für Schwenkung (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Auf einer vertikal schwenkbaren Hub- oder Hauptseite muss eine Liste mit horizontalem Bildlauf über Andockpunkte verfügen.Richtlinien für Schwenkung (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Ein Seite darf nicht sowohl vertikal als auch horizontal schwenkbar sein, es sei denn, die Inhalte machen eine formfreie Verschiebung notwendig.Richtlinien für Schwenkung (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Eine bildlauffähige Seite muss Verschiebungsanzeigen aufweisen.Richtlinien für Schwenkung (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Eine horizontal schwenkbare Seite darf nicht mehrere vertikal schwenkbare Listen enthalten.Richtlinien für Schwenkung (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Eine vertikal schwenkbare Seite darf nicht mehrere horizontal schwenkbare Listen enthalten.Richtlinien für Schwenkung (JavaScript und HTML oder C#/VB/C++ und XAML)
Typografie
[ ]Für die App muss ein fester Satz von Schriftgraden und -breiten (Typhierarchie) verwendet werden. Richtlinien für Typografie

Richtlinien für Schriftarten
[ ]Schriftarten und Schriftartenhierarchie müssen seitenübergreifend einheitlich sein. Richtlinien für Typografie

Richtlinien für Schriftarten
[ ]Die Groß- und Kleinschreibung muss einheitlich sein. Richtlinien für Typografie
[ ]Die App darf keine Rechtschreibfehler enthalten. Richtlinien für Typografie
[ ]Die App darf keinen abgeschnittenen Text enthalten. Richtlinien für Typografie
Gehostete Webinhalte
[ ]Die App darf auf der Hubseite keine gehosteten Webinhalte in einem <iframe> enthalten. Schnellstart: Verwenden der Einzelseitennavigation
Wenn die App gehostete Webinhalte in einem <iframe> enthält, muss eine Methode vorhanden sein, um zurück zur App zu navigieren. Schnellstart: Verwenden der Einzelseitennavigation
[ ]Webinhalte, die keine direkten App-Inhalte sind, müssen in einem externen Browser geöffnet werden. Richtlinien und Prüfliste für Links
[ ]Gehostete Webinhalte müssen an der App-Silhouette ausgerichtet sein. Gestalten einer App-Seite
Branding
[ ]Die App muss einen Begrüßungsbildschirm (620 x 320 Pixel) haben. Richtlinien und Prüfliste für Begrüßungsbildschirme
[ ]Der Begrüßungsbildschirm darf keine Werbung enthalten. Richtlinien und Prüfliste für Begrüßungsbildschirme
[ ]Der Begrüßungsbildschirm darf keine wesentlichen App-Informationen, z. B. über die App oder die Hilfe, enthalten. Richtlinien und Prüfliste für Begrüßungsbildschirme
[ ]Als Übergang zwischen dem Begrüßungsbildschirm und der ersten Ansicht der App darf kein leerer Bildschirm angezeigt werden. Richtlinien und Prüfliste für Begrüßungsbildschirme
[ ]Ein Logo darf die richtige Platzierung oder Ausrichtung des Seitentitels nicht verhindern und andere Inhalte nicht behindern. Branding
[ ]Die App darf in Branding- oder sonstigen App-Elementen nicht auf Windows-fremde Plattformen verweisen. Branding
[ ]Das Überfliegen und Lesen von Inhalten darf durch Hintergrundbilder nicht gestört oder beeinträchtigt werden. Branding
App-Leisten
[ ]Die untere App-Leiste darf keine Navigationselemente enthalten, nur Befehle. Richtlinien und Prüfliste für App-Leisten (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Die Navigationsleiste darf keine Befehle enthalten, nur Navigationselemente.Richtlinien und Prüfliste für App-Leisten (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]In den App-Leisten dürfen sich Aktionen der Charms nicht wiederholen. Davon ausgenommen ist das Drucken, das in der unteren App-Leiste vorkommen darf.
[ ]Die App-Leisten müssen geschlossen werden, wenn der Benutzer auf die Seite tippt oder eine Streifbewegung vom unteren oder oberen Bildschirmrand ausführt.Richtlinien und Prüfliste für App-Leisten (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Wenn ein Benutzer eine Streifbewegung zum Auswählen eines Elements ausführt, muss die App-Leiste geöffnet werden und die für das ausgewählte Element verfügbaren Aktionen anzeigen.Richtlinien und Prüfliste für App-Leisten (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]In der App darf nicht mehr als eine untere App-Leiste gleichzeitig angezeigt werden.Richtlinien und Prüfliste für App-Leisten (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Kontextbefehle müssen auf der linken Seite der unteren App-Leiste angeordnet sein (bzw. auf der rechten Seite bei Rechts-nach-links-Sprachen).Richtlinien und Prüfliste für App-Leisten (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Der Text auf den Schaltflächen der App-Leisten muss mittig im Blocksatz ausgerichtet sein.Richtlinien und Prüfliste für App-Leisten (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Befehle dürfen in den App-Leisten nicht doppelt vorhanden sein.Richtlinien und Prüfliste für App-Leisten (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Seitenübergreifend verwendete Befehle müssen jeweils so nah wie möglich an denselben Positionen auf den App-Leisten angeordnet werden.Richtlinien und Prüfliste für App-Leisten (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]In der App darf ein vorhandenes Symbol nicht für einen neuen Zweck verwendet werden. Wenn kein Symbol für die Aktion bzw. den Befehl existiert, erstellen Sie eines. WinJS.UI.AppBarIcon

Bilder von Schaltflächenstilen für App-Leisten
Flyouts
[ ]Wenn ein Benutzer etwas in einem Flyout ändert, müssen die Inhalte sofort aktualisiert werden, um die Änderungen anzuzeigen. Richtlinien und Prüfliste für Flyouts
[ ]In der App dürfen keine modalen Dialogfelder für die Informations- oder Kontext-UI verwendet werden. Verwenden Sie Flyouts für die Informations-UI und Kontextmenüs für die Kontext-UI.Gestalten der Benutzeroberfläche (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Ein Flyout muss geschlossen werden, wenn der Benutzer auf die Seite tippt, oder es muss ein Befehl zum Schließen oder Abbrechen vorhanden sein. Richtlinien und Prüfliste für Flyouts
[ ]Ein Flyout muss in der Nähe der zugehörigen Schaltfläche der App-Leiste angeordnet sein. Richtlinien und Prüfliste für Flyouts
[ ]Ein Flyout darf den Befehl nicht verdecken, durch den es geöffnet wurde. Richtlinien und Prüfliste für Flyouts
[ ]Flyouts dürfen keine Schatten oder sonstige Elemente haben, die einen erhöhten oder 3D-Effekt erzeugen. Die visuellen Elemente in Windows sind flach, nicht erhaben. Richtlinien und Prüfliste für Flyouts
[ ]Wenn ein Flyout Navigationselemente enthält, muss auch eine Zurück-Schaltfläche vorhanden sein. Beispielsweise kann der Benutzer im Einstellungsbereich zu Einstellungsflyouts wie "Über" und "Feedback" navigieren. Diese Einstellungsflyouts enthalten eine Zurück-Schaltfläche, über die der Benutzer wieder den Einstellungsbereich anzeigen kann. Richtlinien und Prüfliste für Flyouts
[ ]Ein an den Kanten des Geräts angeordnetes Flyout darf keine Streifbewegungen von den Rändern aus beeinträchtigen. Richtlinien und Prüfliste für Flyouts
Kontextmenüs
[ ]Objekte, die Sie mit Streifbewegungen direkt auswählen können, dürfen kein Kontextmenü aufweisen. Richtlinien und Prüfliste für Kontextmenüs
[ ]Befehle dürfen in der App-Leiste und in Kontextmenüs nicht doppelt vorhanden sein. Richtlinien und Prüfliste für Kontextmenüs
Meldungsdialogfelder
[ ]Fehlermeldungen dürfen keine Stapelüberwachungen oder Debuginformationen enthalten. Richtlinien und Prüfliste für Meldungsdialogfelder
[ ]In Dialogfeldern angezeigte Fehlermeldungen oder Bestätigungsfragen müssen für die gesamte App gelten. Richtlinien und Prüfliste für Meldungsdialogfelder

Gestalten der Benutzeroberfläche (JavaScript und HTML oder C#/VB/C++ und XAML)
Sortieren und Filtern
[ ]Für Filter, die über die App-Leiste geöffnet werden, muss ein Flyout verwendet werden. Navigationsmuster
[ ]Flyouts zum Sortieren und Filtern müssen in der Nähe der zugehörigen Schaltfläche der App-Leiste angeordnet sein. Navigationsmuster

Richtlinien und Prüfliste für Flyouts
[ ]Flyouts zum Sortieren und Filtern müssen geschlossen werden, wenn der Benutzer auf die Seite tippt. Richtlinien und Prüfliste für Flyouts
[ ]Die Optionen zum Sortieren und Filtern müssen in einer Dropdownliste angeordnet werden, wenn die Benutzeroberfläche zum Sortieren und Filtern auf der Canvas ist und mehr als ein Kriterium für das Sortieren und Filtern mit der App verwendet wird. Navigationsmuster

Richtlinien und Prüfliste für Flyouts
[ ]In der App darf das Sortieren oder Filtern nicht für die Navigation verwendet werden, z. B. zum Nachahmen von Registerkarten. Verwenden Sie das Sortieren und Filtern vielmehr dafür, dass die Benutzer die Ansichten von Daten schnell verfeinern können. Navigationsmuster
Steuerelemente
[ ]Die App muss eine direkte Bedienung zulassen, anstelle von separaten Modi zum Bearbeiten oder Neuanordnen. Steuerungsdesign

Designfallstudie: vom iPad zur Windows Store-App
[ ]In der App dürfen keine benutzerdefinierten Aktionen oder Gesten verwendet werden, mit denen Elemente zum Bearbeiten oder Neuanordnen ausgewählt werden. Richtlinien für Querziehen
[ ]Das Häkchen darf nur verwendet werden, um anzuzeigen, dass ein Element ausgewählt ist. Richtlinien für Querziehen
[ ]Wenn der Benutzer ein Element auswählen kann, dann muss dem ausgewählten Element mindestens ein Befehl zugeordnet sein. Richtlinien für Querziehen

Richtlinien und Prüfliste für App-Leisten (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Befehle, die notwendig sind, damit der Benutzer fortfahren kann, müssen auf der Canvas angeordnet sein.Gestalten der Benutzeroberfläche (JavaScript und HTML oder C#/VB/C++ und XAML)
Navigation
[ ]In der App dürfen keine Navigationssteuerelemente auf der Canvas oder im Seitenbereich oder in der unteren App-Leiste vorhanden sein. Die Navigationssteuerelemente müssen sich auf der Navigationsleiste befinden.

Hinweis  Eine Ausnahme ist die Zurück-Schaltfläche, die sich auf der Canvas befinden darf.

Navigationsmuster
[ ]In der App dürfen auf der Canvas keine Registerkarten für die Navigation verwendet werden. Designfallstudie: von der Website zur Windows Store-App
[ ]Mit Abschnitts- und Detailüberschriften müssen sich die entsprechenden Seiten der Abschnitte oder Details öffnen lassen. Navigationsmuster
[ ]Abschnittsüberschriften müssen eine sichtbare und aktionsrelevante Benutzeroberfläche zum Anzeigen weiterer Inhalte haben, z. B. einen Chevronindikator oder den Text "Alle <x> anzeigen". Navigationsmuster
[ ]Die Zurück-Schaltfläche muss oben links auf der Seite oder links in der Navigationsleiste angeordnet sein. Positionieren Sie die Zurück-Schaltfläche im Fall von Rechts-nach-links-Sprachen oben rechts auf der Seite oder rechts auf der Navigationsleiste. Navigationsmuster
[ ]Die App darf keine deaktivierte Zurück-Schaltfläche auf der Seite oder auf der Navigationsleiste aufweisen. Navigationsmuster
Semantischer Zoom
[ ]Es darf kein semantischer Zoom verwendet werden, um zu einer anderen Seite der App zu navigieren. Der semantische Zoom wird verwendet, um eine andere Position auf derselben Seite anzusteuern.Richtlinien für semantischen Zoom (JavaScript und HTML oder C#/VB/C++ und XAML)

Richtlinien und Prüfliste für SemanticZoom-Steuerelemente (C#/VB/C++ und XAML)
[ ]Wenn die aktuelle Ansicht mehr als acht Seiten mit Inhalten umfasst, müssen Sie den semantischen Zoom verwenden.Richtlinien für semantischen Zoom (JavaScript und HTML oder C#/VB/C++ und XAML)
Fingereingabegesten
[ ]UI-Elemente, Steuerelemente und sonstige Teile der App dürfen nicht mit Windows-Gesten von den Bildschirmrändern oder der zugehörigen Benutzeroberfläche in Konflikt geraten.Richtlinien für allgemeine Benutzerinteraktionen (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Wenn ein Element nicht auswählbar ist, darf die Streifbewegung zum Auswählen für das Element nicht implementiert werden. Richtlinien für Querziehen
[ ]Einem UI-Element darf nicht mehr als ein Befehl zugeordnet sein. Wenn einem einzigen UI-Element mehr als ein Befehl zugeordnet ist, führt dies zu einer Mehrdeutigkeit für Fingereingabegesten. Richtlinien für häufige Benutzerinteraktionen
[ ]Fingereingabegesten dürfen sich nicht überschneiden. Die App darf keine bildlauffähigen Kartensteuerelemente, Umschalter, Schieberegler oder sonstigen Steuerelemente in einem bildlauffähigen Viewer aufweisen, durch die es zu Beeinträchtigungen beim Verschieben oder Bildlauf kommt. Richtlinien für häufige Benutzerinteraktionen
Touch-Ziele
[ ]Interaktionen per Fingereingabe müssen ein Feedback für den Benutzer auslösen. Muster für Fingereingabe
[ ]Wenn für ein Element keine Aktion ausgeführt werden kann, darf es für den Benutzer kein Fingereingabefeedback auslösen. Muster für Fingereingabe
[ ]In der App darf eine Berührung nicht zu einer direkten Bestätigung führen. Interaktionen müssen umkehrbar sein. Muster für Fingereingabe
[ ]Wenn der Benutzer ein Element wegzieht, muss die Fingereingabeaktion abgebrochen werden. Muster für Fingereingabe
[ ]Touch-Ziele müssen mindestens 5 mm groß sein.Richtlinien für Zielbestimmung (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Die App muss mindestens 2 Teileinheiten (10 Pixel) zwischen Touch-Zielen aufweisen. Richtlinien für Zielbestimmung
Texteingabe
[ ]Für die App muss die Windows-Bildschirmtastatur oder ein entsprechender Eingabemethoden-Editor (IME) verwendet werden. Es darf keine benutzerdefinierte Bildschirmtastatur verwendet werden. Richtlinien und Prüfliste für die IME-Entwicklung

Richtlinien für Bildschirmtastatur und Handschriftbereich
[ ]Die Bildschirmtastatur darf keine Steuerelemente verdecken, die benötigt werden, um die Texteingabe abzuschließen. Beispielsweise darf die Bildschirmtastatur für ein Textfeld zur Eingabe von Benutzernamen und Kennwort nicht die Anmeldeschaltfläche verdecken. Richtlinien für Bildschirmtastatur und Handschriftbereich
Animationen
[ ]Animationen müssen nach Bedarf in der App implementiert werden.Animieren der Benutzeroberfläche (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Benutzerdefinierte Animationen dürfen sich nicht negativ auf die Leistung und die Benutzerfreundlichkeit auswirken. Animieren
[ ]Animationen und Übergänge dürfen keine schlechte Leistung aufweisen. So darf der Benutzer das Neuzeichnen von Kacheln nicht wahrnehmen. Animieren

Erzielen flüssiger Animationen
Bildschirmgrößen und Ausrichtungen
[ ]Bei Apps mit dynamischem Layout müssen Inhalte für größere Bildschirme dynamisch angepasst werden. Richtlinien für Layouts

Richtlinien zum Skalieren auf Bildschirme
[ ]Apps dürfen auf großen Displays oder Displays mit hoher Pixeldichte keine wahrnehmbaren Artefakte oder Verschlechterungen der Bildqualität aufweisen. Richtlinien zum Skalieren auf Bildschirme

Richtlinien zum Skalieren auf die Pixeldichte
[ ]Apps müssen die Ausrichtung im Hochformat auf Geräten und Monitoren unterstützen. Apps müssen die Anpassung der Größe unterstützen, bei der die Höhe größer ist als die Breite. Richtlinien für Größenänderungen
[ ]Bei der App müssen Kontext und Status beibehalten werden, wenn der Benutzer die Größe der App anpasst. Richtlinien für Größenänderungen
[ ]Die App muss bis hinab zur standardmäßigen Mindestgröße voll funktionsfähig sein. Wenn die App eine Mindestgröße unterstützt, die kleiner als die Standardmindestgröße ist, sollte die Funktionalität in der Mindestgröße noch so groß wie möglich sein. Richtlinien für Größenänderungen

Richtlinien für Größenänderungen in schmale Layouts
[ ]Das Layout und sämtliche Steuerelemente der App müssen entsprechend skaliert werden, wenn der Benutzer die Größe der App ändert. Die Benutzeroberfläche und die Steuerelemente müssen in einem Fenster beliebiger Größe funktionieren. Richtlinien für Größenänderungen
[ ]Wenn die App Breiten von 320 bis 499 Pixel unterstützt, muss bei schmalen Breiten auf eine schmale, vertikale Ansicht umgeschaltet werden. Schalten Sie auf einen vertikalen Bildlauf um, und verwenden Sie kleinere Ränder, Kopfzeilen, Zurück-Schaltflächen und einen kleineren Versatz für Übergangsanimationen. Richtlinien für Größenänderungen in schmale Layouts
[ ]Die Größe der App darf nicht programmgesteuert geändert werden. Der Benutzer kann die Größe der App jederzeit anpassen. Richtlinien für Größenänderungen in schmale Layouts
[ ]Die App darf nicht auf einen anderen Teil der App umschalten, wenn die Fenstergröße geändert wird. Richtlinien für Größenänderungen in schmale Layouts
Verträge und Charms
[ ]In der App dürfen die Charms "Einstellungen", "Teilen" oder "Geräte" auf der App-Canvas oder in der App-Leiste nicht doppelt vorkommen. Befehlsmuster
[ ]Die App muss die Verwendung der Charms in jeder beliebigen Größe, Ausrichtung oder Bildschirmposition unterstützen. Die Charms gelten für die letzte App, die der Benutzer verwendet hat. Richtlinien für Größenänderungen in schmale Layouts
Vertrag und Charm für "Suche"
[ ]Der Vertrag für "Suche" darf in der App nicht für "Auf Seite suchen" verwendet werden. Platzieren Sie die Steuerelemente für "Auf Seite suchen" in der App-Leiste.Richtlinien und Prüfliste für "Auf Seite suchen" (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Wenn in der App ein Steuerelement für die Suche auf der Canvas vorhanden ist, muss darüber der Vertrag für "Suche" geöffnet werden. Richtlinien und Prüfliste für Suchfunktionen
Vertrag und Charm für "Teilen"
[ ]Wenn eine Freigabefunktion implementiert wird, muss dies über den Charm "Teilen" erfolgen. Richtlinien für die Freigabe von Inhalt
[ ]In der App muss die richtige Meldung angezeigt werden, wenn der Charm "Teilen" implementiert ist, aber im aktuellen Kontext kein freigabefähiger Inhalt vorhanden ist. Richtlinien für die Freigabe von Inhalt
Vertrag und Charm für "Einstellungen"
[ ]App-Einstellungen, einschließlich Konfiguration, Optionen und Kontoverwaltung, müssen über den Charm "Einstellungen" implementiert werden, nicht auf App-Seiten oder in benutzerdefinierten Flyouts. Richtlinien für App-Einstellungen
[ ]Die Seiten "Über", "Datenschutzbestimmungen", "Nutzungsbedingungen", "Hilfe" und "Feedback" müssen über den Charm "Einstellungen" implementiert werden. Richtlinien für App-Einstellungen
[ ]In der App müssen Steuerelemente im Bereich "Einstellungen" einheitlich verwendet werden. Richtlinien für App-Einstellungen
[ ]Der Einstellungsbereich muss geschlossen werden, wenn der Benutzer auf die App tippt. Richtlinien für App-Einstellungen
[ ]Der Einstellungsbereich muss über eine Zurück-Schaltfläche verfügen. Richtlinien für App-Einstellungen
[ ]Das Flyout für Einstellungen muss in die aktuelle Breite der App passen. Richtlinien für Größenänderungen in schmale Layouts
Dateiauswahl
[ ]In der App muss die Dateiauswahl für das Öffnen und Speichern von Dateien sowie für den Zugriff auf Dateien verwendet werden. Richtlinien für die Dateiauswahl

Richtlinien und Prüfliste für die Dateiauswahl
[ ]In der App darf die Dateiauswahl nicht für das Durchsuchen oder Nutzen von Inhalten verwendet werden. Richtlinien für die Dateiauswahl
Kacheln
[ ]Wenn in der App eine breite Kachel verwendet wird, muss es Liveinhalte für die Kachel geben. Richtlinien und Prüfliste für Kacheln und Signale
[ ]Die Farben, Schriftarten und Symbole von App-Kacheln und von der App müssen einheitlich gestaltet sein. Richtlinien und Prüfliste für Kacheln und Signale
[ ]Das App-Symbol oder -Logo auf der Kachel muss qualitativ hochwertig sein und darf keine wahrnehmbaren Artefakte aufweisen. Richtlinien und Prüfliste für Kacheln und Signale
[ ]Der Text auf der Kachel muss richtig geschrieben sein. Richtlinien und Prüfliste für Kacheln und Signale
[ ]Eine sekundäre Kachel darf nicht mit statischen Inhalten verknüpft sein. Richtlinien und Prüfliste für sekundäre Kacheln
[ ]Eine sekundäre Kachel darf keine Befehlsschaltfläche sein, über die der Benutzer mit der App interagieren kann. Richtlinien und Prüfliste für sekundäre Kacheln
[ ]Über eine sekundäre Kachel muss der zugehörige Inhalt direkt angesteuert werden. Über die sekundäre Kachel darf nicht die Startseite der App geöffnet werden. Richtlinien und Prüfliste für sekundäre Kacheln
[ ]Sekundäre Kacheln dürfen in der App nicht zum Anzeigen von Werbung verwendet werden. Richtlinien und Prüfliste für sekundäre Kacheln
Popupbenachrichtigungen
[ ]In der App dürfen keine Popupbenachrichtigungen für Fehlermeldungen verwendet werden. Richtlinien und Prüfliste für Popupbenachrichtigungen
[ ]Popupbenachrichtigungen müssen handlungsrelevant sein und müssen die App ansteuern, wenn der Benutzer auf sie tippt. Richtlinien und Prüfliste für Popupbenachrichtigungen
[ ]In der App dürfen keine Popupbenachrichtigungen für Werbezwecke verwendet werden. Richtlinien und Prüfliste für Popupbenachrichtigungen
[ ]In der App dürfen keine Popupbenachrichtigungen für geringfügige Änderungen verwendet werden. Richtlinien und Prüfliste für Popupbenachrichtigungen
Roaming
[ ]Für Roamingdaten muss ein einheitliches und präzises Roaming verwendet werden. Es ist zum Beispiel nicht zulässig, dass ein Roaming von Daten an ein bestimmtes Gerät, nicht aber an ein anderes Gerät erfolgt. Richtlinien für das Roaming von App-Daten
Kontoverwaltung
[ ]Funktionen zur Kontoverwaltung müssen über den Charm "Einstellungen" implementiert werden.Richtlinien und Prüfliste für App-Leisten (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Der Benutzer muss sich vom Charm "Einstellungen" abmelden können. Richtlinien und Prüfliste für Anmeldesteuerelemente
[ ]Durch einen Einstiegspunkt zum Anmelden in der App muss der Charm "Einstellungen" geöffnet werden. (Ausnahme: Webauthentifizierung) Richtlinien und Prüfliste für Anmeldesteuerelemente
[ ]Wenn für die App keine Authentifizierung erforderlich ist, dürfen keine Anmeldesteuerelemente angezeigt werden. Richtlinien und Prüfliste für Anmeldesteuerelemente
[ ]Bei Bedarf muss ein standardmäßiges Dialogfeld für die Webauthentifizierung verwendet werden. Webauthentifizierungsbroker

 

Empfohlen

Die Richtlinien in diesem Abschnitt tragen zu einer optimierten Benutzererfahrung für die App bei.

ÜberprüfenBeschreibungRichtlinien
Layout und Ausrichtung
[ ]Der Inhalt sollte auf allen App-Seiten in allen Ansichten links (bei Rechts-nach-links-Sprachen rechts) ausgerichtet sein. Richtlinien für Typografie
[ ]Die Hub- oder Hauptseite der App sollte visuelle Variationen aufweisen. Navigationsmuster
Silhouette
[ ]Spalten sollten mindestens 560 Pixel groß sein (28 Einheiten). Gestalten einer App-Seite
[ ]Wenn für die App die standardmäßige Silhouette verwendet wird, sollten die folgenden Richtwerte eingehalten werden:
  • Der Seitenheader sollte 100 Pixel (5 Einheiten) von oben betragen.
  • Der linke Rand des Seitenheaders sollte 120 Pixel (6 Einheiten) betragen.
  • Der Seitenheader sollte mit dem Stil-Set "SegoeUI Light 20" formatiert sein.
  • Der obere Rand des Inhaltsbereichs sollte 140 Pixel (7 Einheiten) betragen.
  • Der linke Rand des Inhaltsbereichs sollte 120 Pixel (6 Einheiten) betragen.
  • Wenn sich der Inhalt horizontal verschieben lässt, sollte der untere Rand des Inhaltsbereichs nicht größer sein als 130 Pixel (6,5 Einheiten) und nicht kleiner als 50 Pixel (2,5 Einheiten).
  • Stark konturierte Elemente wie Bilder und Kacheln haben 10 Pixel (2 Untereinheiten) horizontalen Abstand zwischen dem Element und dem zugehörigen Text.
  • Stark konturierte Elemente wie Bilder und Kacheln haben 10 Pixel (2 Untereinheiten) horizontalen Abstand zwischen Spalten.
  • Listen haben 40 Pixel (2 Einheiten) horizontalen Abstand zwischen Spalten.
  • Stark konturierte Elemente wie Bilder und Kacheln haben 10 Pixel (2 Untereinheiten) vertikalen Abstand zwischen Elementen in einer Zeile.
  • Kachel- und Textlisten haben 20 Pixel (1 Einheit) vertikalen Abstand zwischen den Elementen in einer Zeile.
  • Gruppen von Elementen haben 80 Pixel (4 Einheiten) horizontalen Abstand voneinander.
Gestalten einer App-Seite

Richtlinien für Typografie

Richtlinien für Schriftarten

Verschiebung und Bildlauf
[ ]Auf einer horizontal schwenkbaren Seite müssen die Inhalte zum linken Rand verschoben werden. Der Bildlauf für die Inhalte darf am linken Rand nicht aufhören.Richtlinien für Schwenkung (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Alle Bereiche der Seite sollten auf Verschiebung und Bildlauf reagieren. Richtlinien für Schwenkung
Typografie
[ ]Die Typhierarchie der App sollte nicht mehr als fünf Schriftgrade aufweisen. Richtlinien für Typografie
[ ]Für den ersten Buchstaben eines Satzes sollte in der App die Großschreibung verwendet werden. Richtlinien für Typografie
Branding
[ ]Wenn die App über einen erweiterten Begrüßungsbildschirm verfügt, sollte dieser dem ersten Begrüßungsbildschirm ähnlich sein. Richtlinien und Prüfliste für Begrüßungsbildschirme
[ ]Die Assets des Begrüßungsbildschirms der App sollten eine 1,4x-Skalierung (868 x 420 Pixel) und eine 1,8x-Skalierung (1116 x 540 Pixel) unterstützen. Richtlinien und Prüfliste für Begrüßungsbildschirme
[ ]Wenn der Begrüßungsbildschirm länger als 7 Sekunden sichtbar ist, sollte der Benutzer durch einen visuellen Hinweis informiert werden, dass er das Laden der App abwarten soll. Richtlinien und Prüfliste für Begrüßungsbildschirme
[ ]Auf der Hubseite der App sollte ein Logo zu sehen sein. Branding
App-Leisten
[ ]Die Befehle "Zurück" und "Weiter" sollten nicht in der App-Leiste enthalten sein. Stattdessen sollte in der Canvas der App eine Flip-Steuerung vorhanden sein.Richtlinien und Prüfliste für App-Leisten (JavaScript und HTML oder C#/VB/C++ und XAML)

Hinzufügen von FlipView-Steuerelementen (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Die App-Leiste der App sollte nicht leer sein.Richtlinien und Prüfliste für App-Leisten (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]In den App-Leisten sollten sich Aktionen der Charms nicht wiederholen. Befehlsmuster
Kontextmenüs
[ ]Kontextmenüs sollten in der Nähe der Zielobjekte angeordnet werden. Richtlinien und Prüfliste für Kontextmenüs
Sortieren und Filtern
[ ]Befehle zum Sortieren und Filtern sollten auf der Canvas angeordnet werden, wenn die Befehle für die App von zentraler Bedeutung sind. Wenn die Befehle zum Sortieren und Filtern für die App weniger wichtig sind, sollten sie in der App-Leiste platziert werden. Navigationsmuster
[ ]Die App sollte pro App-Leiste nicht mehr als eine Schaltfläche zum Sortieren und nicht mehr als eine Schaltfläche zum Filtern haben.Richtlinien und Prüfliste für App-Leisten (JavaScript und HTML oder C#/VB/C++ und XAML)
Navigation
[ ]Wenn die App über mehr als vier Hierarchieebenen verfügt, sollte eine Dropdownliste in der Kopfzeile oder die Navigationsleiste die Navigation zu verschiedenen Abschnitten ermöglichen. Navigationsmuster
[ ]Sie sollten die Zurück-Schaltfläche als Zurück-Stapel implementieren, sodass sie wie eine Schaltfläche für den Browserverlauf funktioniert. Navigationsmuster
[ ]Die Zurück-Schaltfläche sollte nicht über einem Video im Vollbildmodus angezeigt werden. Sie sollte ausgeblendet oder in der Navigationsleiste platziert werden. Audio- und Videoleistung

Optimieren von Medienressourcen
Semantischer Zoom
[ ]Wenn die aktuelle Ansicht mehr als fünf Seiten mit Inhalten umfasst, sollten Sie den semantischen Zoom verwenden.Richtlinien für semantischen Zoom (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Die Ansicht für den semantischen Zoom sollte zusätzliche relevante Informationen enthalten.Richtlinien für semantischen Zoom (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Bei einer Verkleinerung durch den Benutzer sollte die App einen standardmäßigen linken Rand aufweisen.Richtlinien für semantischen Zoom (JavaScript und HTML oder C#/VB/C++ und XAML)
Fingereingabe
[ ]Fingereingabeziele für Aktionen, bei denen Präzision wichtig ist, z. B. Löschen oder Schließen, sollten mindestens 9 mm groß sein. Muster für Fingereingabe
[ ]Alle Fingereingabeziele müssen mindestens 7 mm groß sein. Muster für Fingereingabe
Tastatur und Maus
[ ]Die App sollte Navigation und Auswahl mithilfe einer Tastatur unterstützen.Richtlinien für allgemeine Benutzerinteraktionen (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Inhaltscontainer in der App, z. B. Listen und Raster, sollten einen Bildlauf per Mausrad unterstützen.Mausinteraktionen (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Die App sollte Feedback für das Zeigen mit der Maus unterstützen.Mausinteraktionen (JavaScript und HTML oder C#/VB/C++ und XAML)
Animationen
[ ]Animationen sollten die natürliche Bewegung durch die App nicht behindern. Verwenden von Animationen in der App (JavaScript und HTML oder C#/VB/C++ und XAML)
[ ]Animationen sollten den Benutzer nicht ablenken.Verwenden von Animationen in der App (JavaScript und HTML oder C#/VB/C++ und XAML)
Bildschirmgrößen und Ausrichtungen
[ ]Apps mit festem Layout sollten bei allen Bildschirmgrößen und Pixeldichten zentriert ausgerichtet sein. Richtlinien zum Skalieren auf Bildschirme
[ ]Die Übergänge zwischen verschiedenen Ausrichtungen sollten flüssig sein. Neuzeichnungsvorgänge sollten nicht wahrnehmbar sein. Richtlinien für Größenänderungen
[ ]Die Übergänge bei Größenänderungen sollten flüssig sein. Neuzeichnungsvorgänge sollten nicht wahrnehmbar sein. Richtlinien für Größenänderungen
Vertrag und Charm für "Suche"
[ ]Wenn die App durchsuchbare Inhalte umfasst, sollte der Vertrag für "Suche" implementiert werden. Richtlinien und Prüfliste für Suchfunktionen
[ ]Wenn keine Suchergebnisse zurückgegeben werden, sollte eine sinnvolle Meldung für den Benutzer angezeigt werden. Richtlinien und Prüfliste für Suchfunktionen
[ ]In der App sollten Suchkriterien zusammen mit den Suchergebnissen angezeigt werden. Richtlinien und Prüfliste für Suchfunktionen
[ ]Wenn der Vertrag für "Suche" in der App implementiert ist, sollte das Eingeben von Suchtext aktiviert sein. Richtlinien und Prüfliste für Suchfunktionen
Vertrag und Charm für "Teilen"
[ ]In einer App mit freigabefähigen Inhalten sollte der Quellenfreigabe-Vertrag implementiert sein. Richtlinien für die Freigabe von Inhalt
[ ]Wenn die App das Veröffentlichen, Speichern oder Erstellen von Inhalten zulässt, sollte der Zielfreigabe-Vertrag implementiert werden. Richtlinien für die Freigabe von Inhalt
Vertrag und Charm für "Einstellungen"
[ ]Änderungen, die der Benutzer im Einstellungsbereich vornimmt, sollten sofort übernommen werden. Richtlinien für App-Einstellungen
[ ]Im Einstellungsbereich deaktivierte Steuerelemente sollten eine beschreibende Meldung aufweisen, die angibt, weshalb das Steuerelement deaktiviert wurde. Richtlinien für App-Einstellungen
[ ]Das Einstellungsflyout sollte entweder schmal (346 Pixel) oder breit (646 Pixel) sein. Richtlinien für App-Einstellungen
Dateiauswahl
[ ]Wenn die App einen Speicherort bietet, sollte der Vertrag für "Auswahl für 'Datei öffnen'" implementiert werden. Richtlinien und Prüfliste für die Dateiauswahl
Kacheln
[ ]Wenn eine App dynamische Inhalte umfasst, sollte eine Live-Kachel implementiert werden. Richtlinien und Prüfliste für Kacheln und Signale
[ ]Name und Logo sollten auf der Kachel nicht dupliziert werden. Richtlinien und Prüfliste für Kacheln und Signale
[ ]Breite sekundäre Kacheln sollten über Liveinhalte verfügen. Richtlinien und Prüfliste für sekundäre Kacheln
Popupbenachrichtigungen
[ ]Wenn die App auf dem Bildschirm sichtbar ist, sollten keine Popupbenachrichtigungen angezeigt werden. Richtlinien und Prüfliste für Popupbenachrichtigungen
[ ]Popupbenachrichtigungen sollten über ein "X“-Symbol zum Schließen der Benachrichtigung verfügen. Richtlinien und Prüfliste für Popupbenachrichtigungen
Roaming
[ ]Bei der App sollte ein Roaming geeigneter Daten erfolgen, z. B. von App-Einstellungen und -Vorgaben, Aktivitätsverläufen, Favoriten und benutzerdefinierten Listen. Richtlinien für das Roaming von App-Daten

 

Verwandte Themen

UX-Testfälle für Windows Store-Apps

 

 

Anzeigen:
© 2017 Microsoft