Gestalten der Benutzeroberfläche (Windows Store-Apps)
Hier finden Sie Informationen zum Layout von Windows Store-Apps und erfahren, inwiefern sich Windows Store-Apps von herkömmlichen Desktop-Apps unterscheiden. Sie können in einer Windows Store-App eine Vielzahl von Oberflächen verwenden – beispielsweise das App-Fenster, Flyouts, Dialogfelder und App-Leisten. Die Verwendung der richtigen Oberfläche zur richtigen Zeit kann den Unterschied zwischen einer unkomplizierten und einer umständlichen App ausmachen.
Die App-Seite (auch Canvas genannt)
Die App-Seite, gelegentlich auch als Canvas bezeichnet, ist die Grundlage der Benutzeroberfläche. Hier befinden sich alle Inhalte und Steuerelemente. Integrieren Sie Ihre UI-Elemente möglichst in diese Basisoberfläche. So können Sie im App-Fenster mithilfe der integrierten Animationen beispielsweise eine Fehlermeldung sanft einblenden, ausblenden oder verschieben, anstatt die Fehlermeldung in einem Popup anzuzeigen. Durch die Inlinepräsentation Ihrer UI können sich die Benutzer ganz in Ihre App vertiefen und werden nicht aus dem Kontext der App gerissen.
Sie können so viele App-Seiten erstellen, wie zur Unterstützung des jeweiligen Benutzerszenarios notwendig sind. Weitere Informationen zum Gestalten von App-Seiten zur Unterstützung bestimmter Benutzerszenarios finden Sie unter Planen von Windows Store-Apps und Navigationsdesign.
Ansichtszustand
Benutzer können Ihre App andocken, sodass sie eine andere App verwenden können, oder eine andere App andocken, damit sie Ihre App nutzen können. Sie können Ihre App so designen, dass der Inhalt dynamisch angeordnet wird, um auf diese Weise die Darstellung in jedem Ansichtszustand – Vollbild, angedockt oder gefüllt – für den Benutzer zu optimieren.
 |
Vollbildansicht Die App füllt den gesamten Bildschirm aus. |
 |
Angedockte Ansicht Die App wird in einem kleinen Bereich des gesamten Bildschirms angedockt. |
 |
Gefüllte Ansicht Die App füllt den verbleibenden Bildschirmbereich aus, der nicht von der angedockten App belegt ist. |
Weitere Informationen zur Unterstützung dieser Ansichtszustände finden Sie unter Richtlinien für angedockte und gefüllte Ansichten.
Bildschirmtastatur und Schreibbereich
Bildschirmtastatur und Schreibbereich bieten eine zweite Befehlsbenutzeroberfläche für die Texteingabe. Der Bereich wird angezeigt, wenn der Benutzer in einer Windows Store-App ein bearbeitbares Eingabefeld berührt oder auf dem Desktop in der Taskleiste auf das Tastatursymbol klickt. Der Bereich wird ausgeblendet, wenn der Fokus nicht mehr auf dem Eingabefeld liegt.
Über die Bildschirmtastatur kann Text für Formfaktoren ohne Hardwaretastatur oder ein anderes Tastaturperipheriegerät eingegeben und bearbeitet werden. Über den Schreibbereich kann Text für handschriftliche Formfaktoren eingegeben und bearbeitet werden.
Ähnlich wie die bereits erwähnten Ansichtszustände können Sie die App so gestalten, dass der Inhalt dynamisch angeordnet und damit die Benutzerfreundlichkeit bei angezeigter Bildschirmtastatur oder eingeblendetem Schreibbereich optimiert wird.
Weitere Informationen zur Unterstützung dieser Texteingabemodi finden Sie in den Richtlinien für Bildschirmtastatur und Schreibbereich.
App-Leisten
Außerhalb der App-Seite ist die App-Leiste die primäre Befehlsschnittstelle für Ihre App. Verwenden Sie die App-Leiste, um den Benutzern Navigationselemente, Befehle und Tools zur Verfügung zu stellen. Die App-Leiste ist standardmäßig ausgeblendet und wird angezeigt, wenn der Benutzer den Finger vom oberen oder unteren Bildschirmrand aus über den Bildschirm zieht. Sie wird im Vordergrund des App-Inhalts angezeigt. Der Benutzer kann sie wieder schließen, indem er den Finger über einen Bildschirmrand zieht oder mit der App interagiert.
Weitere Informationen zur Gestaltung mit Befehlen finden Sie unter Steuerungsdesign. Richtlinien zur Benutzerführung finden Sie in den Richtlinien für App-Leisten.
Charms
Charms sind bestimmte und stets gleichförmige Schaltflächen, die die dem Benutzer in jeder App zur Verfügung stehen: "Suche", "Teilen", "Verbinden", "Einstellungen" und "Start". Dies sind unserer Ansicht nach Kernszenarios, die jeder Benutzer in nahezu jeder App ausführt.
- Suche Der Benutzer kann nach Inhalten in Ihrer oder in einer anderen App suchen und die Inhalte Ihrer App in einer anderen App durchsuchen.
- Teilen Der Benutzer kann Inhalte aus Ihrer App an andere Personen oder Dienste weitergeben.
- Geräte Der Benutzer kann Verbindungen mit Geräten herstellen und Inhalte senden, Medien streamen und Druckfunktionen nutzen.
- Einstellungen Der Benutzer kann die App nach seinen Vorstellungen konfigurieren und auf die Benutzerhilfe zugreifen.
- Start Der Benutzer kann direkt zur Startseite wechseln.
Weitere Informationen finden Sie in den folgenden Richtlinien zum Suchen, Teilen, zu App-Einstellungen und zur App-Hilfe
Kontextmenüs
Das Kontextmenü wird auch Popupmenü genannt und enthält Aktionen, die der Benutzer für Text- oder UI-Elemente in einer App ausführen kann. Für jedes Kontextmenü können Sie bis zu fünf Befehle wie "Ausschneiden", "Kopieren" oder "Öffnen mit" verwenden. Dank dieser Beschränkung bleibt das Kontextmenü übersichtlich, gut lesbar und direkt relevant für die Textelemente oder Objekte, für die die Befehle ausgeführt werden sollen.
Verwenden Sie Kontextmenüs nicht als primäre Befehlsschnittstelle für eine App. Dafür ist die App-Leiste da. Weitere Informationen finden Sie in den Richtlinien für Kontextmenüs.
Meldungsdialogfelder
Meldungsdialogfelder sind Dialogfelder, die explizit eine Benutzerinteraktion erfordern. Sie blenden das App-Fenster ab, und fordern den Benutzer zu einer Reaktion auf, bevor die App fortgesetzt wird. Verwenden Sie Meldungsdialoge nur, um den Benutzer zu unterbrechen und zu einer Aktion aufzufordern.
Im obigen Beispiel ist das App-Fenster abgeblendet, und der Benutzer muss auf eine der beiden Schaltflächen tippen, um das Dialogfeld zu schließen. Mit anderen Worten: Die Meldung im Dialogfeld kann nicht ignoriert werden.
Weitere Informationen finden Sie in den Richtlinien für Meldungsdialogfelder.
Flyouts
Flyouts dienen zum vorübergehenden Anzeigen von ausblendbarer UI, die einen Bezug zur aktuellen Aktion des Benutzers hat. So können Sie mit Flyouts beispielsweise einen Benutzer auffordern, eine Aktion zu bestätigen, ein Dropdownmenü für eine Schaltfläche auf der App-Leiste anzeigen oder zusätzliche Details zu einem Element einblenden. Der Unterschied zwischen Flyouts und Meldungsdialogfeldern besteht darin, dass Flyouts nur als Reaktion auf Tipp- oder Klickeingaben eines Benutzers angezeigt werden dürfen und sich wieder schließen müssen, sobald der Benutzer auf eine Stelle außerhalb des Flyouts tippt. Im Gegensatz dazu dürfen Meldungsdialogfelder nur angezeigt werden, wenn Sie den Benutzer unterbrechen müssen und ein Benutzereingriff erforderlich ist.
Im obigen Beispiel bleibt die App aktiv, und der Benutzer kann entweder auf die Schaltfläche oder auf eine Stelle außerhalb des Flyouts tippen, um es zuschließen. Anders ausgedrückt: Die Meldung im Dialogfeld kann auch ignoriert werden. Weitere Informationen finden Sie in den Richtlinien für Flyouts.
Popups
Popups sind Benachrichtigungen, die Sie Benutzern anzeigen, wenn sich die App im Hintergrund befindet. Popups eignen sich gut, um Benutzer in Echtzeit mit interessanten Informationen zu versorgen, die aber nicht so wichtig sind, dass sie unbedingt gelesen werden müssen. Durch Tippen auf das Popup wechselt der Benutzer zu Ihrer App, um weitere Informationen zu erhalten.
Bedenken Sie jedoch, dass Benutzer Popupbenachrichtigungen als störend oder lästig empfinden können. Setzen Sie Popups daher wohlüberlegt ein. Weitere Informationen finden Sie in den Richtlinien für Popupbenachrichtigungen.
Kacheln
 |
Kacheln werden auf der Startseite angezeigt und ersetzen die Anwendungsverknüpfungen, die auf dem Desktop und im alten Startmenü angezeigt wurden. Durch Tippen auf die App-Kachel können Benutzer Ihre App starten. Weitere Informationen finden Sie in den Richtlinien für Kacheln. |
Fehler
Fehler in einer App können dem Benutzer auf drei Hauptoberflächen gemeldet werden. Welche Oberfläche verwendet wird, legt der App-Entwickler auf der Grundlage des Inhalts und der Folgen des Fehlers fest.
| Verwenden Sie zum Aufrufen von: | diese Oberfläche: |
|---|---|
|
Ein nicht kritischer elementspezifischer Fehler in der App. Ihre App kann den Fehler nicht beheben, die Benutzer jedoch schon. Benutzerinteraktion: Benutzer können auch weiterhin mit der App, Systemkomponenten und anderen Apps interagieren, ohne den Fehler zu schließen. Beispiel: Der Benutzer gibt eine ungültig Zeichenfolge in ein Textfeld ein und gibt sie anschließend erneut ein. |
Text inline im Zeichenbereich
|
|
Ein nicht kritischer Fehler, der sich auf die gesamte App auswirkt. Ihre App kann den Fehler nicht beheben, die Benutzer jedoch schon. Benutzerinteraktion: Benutzer können auch weiterhin mit der App, Systemkomponenten und anderen Apps interagieren, ohne den Fehler zu schließen. Beispiel: E-Mails können momentan nicht synchronisiert werden. |
Text ganz oben auf der Seite
|
|
Ein erheblicher, jedoch nicht kritischer Fehler, der sich auf die gesamte App auswirkt. Ihre App kann einen Lösungsvorschlag machen. Benutzerinteraktion: Benutzer können auf Ihre Eingabeaufforderung reagieren oder weiterhin mit der App, Systemkomponenten und anderen Apps interagieren, ohne den Fehler zu schließen. |
Fehler- und Warnungsleiste
|
|
Ein kritischer Fehler, der sich auf die gesamte App auswirkt und verhindert, dass der Benutzer die App weiter verwendet. Benutzerinteraktion: Benutzer können mit der App nicht mehr interagieren, bis sie den Fehler geschlossen haben. Benutzer können auch weiterhin mit Systemkomponenten interagieren und andere Apps verwenden. |
Meldungsdialog
|
Verwenden Sie zum Anzeigen von Fehlern keine Flyouts, Popups oder benutzerdefinierten UI-Oberflächen.
Fehler: Inlinetext
Im Allgemeinen ist der Inlinefehler die erste Oberfläche. Bei einer Fehlermeldung mit Inlinetext werden die Meldungen im Kontext der aktuellen Aktionen des Benutzers oder im Kontext der aktuellen App-Seite angezeigt. Ein Inlinefehler erfordert keine ausdrückliche Benutzeraktion zum Schließen der Nachricht. Die Meldung verschwindet automatisch, wenn sie keine Gültigkeit mehr besitzt.
| Empfohlen | Richten Sie die Meldung mit dem Steuerelement oder Element aus, auf das sie sich bezieht. |
| Räumen Sie der Meldung großzügig Platz außen herum ein, damit sie im Mittelpunkt steht. |
Das folgende Beispiel zeigt eine Inlinefehlermeldung, die einem bestimmten Textfeld zugeordnet ist.
| Nicht empfohlen | Platzieren Sie Aktionen und Befehle in der Nachricht. |
Im folgenden Beispiel wären Fehler- oder Warnindikatoren eine bessere Wahl.
Fehler: Fehler- oder Warnindikatoren
Verwenden Sie eine Fehler- oder Warnungsleiste, um den Benutzer über wichtige Fehler und Warnungen zu informieren und ihn zum Eingreifen zu animieren. Fehlermeldungen weisen den Benutzer darauf hin, dass ein Problem besteht, geben den Grund dafür an und schlagen eine Lösung vor, damit Benutzer das Problem beheben können. Warnmeldungen informieren den Benutzer über einen Zustand, der in Zukunft zu Problemen führen kann.
| Empfohlen | Positionieren Sie die Leiste oben auf dem Bildschirm, damit sie dem Benutzer ins Auge fällt und ihn dazu animiert, Maßnahmen zu ergreifen. |
| Geben Sie der Leiste eine Farbe aus der Farbpalette der App. | |
| Verwenden Sie für alle Fehler- und Warnungsleisten dieselbe Farbe und dasselbe Layout. |
| Nicht empfohlen | Verwenden Sie für Leisten und Glyphen wie Schilder und Ausrufezeichen abhängig vom vermeintlichen Schweregrad verschiedene Farben. |
| Verwenden Sie statt einer "X"-Glyphe zum Schließen der Leiste eine mit "Schließen" beschriftete Schaltfläche. | |
| Verwenden Sie für Meldungen mit Informationen eine Fehler- oder Warnungsleiste. |
Die Meldung im folgenden Beispiel dient nur Informationszwecken. Es ist keine Aktion notwendig. In diesem Fall hätte eine Inlinemeldung ganz oben auf dem Bildschirm verwendet werden sollen.
Fehler: Meldungsdialogfelder
Verwenden Sie Meldungsdialogfelder nur, wenn eine modale Meldung erforderlich ist, bei der die Interaktion des Benutzers mit der App unterbrochen wird.
| Empfohlen | Verwenden Sie einen Meldungsdialog, wenn der Benutzer eingreifen muss, um die App weiter nutzen zu können. |
Das folgende Beispiel stellt den korrekten Gebrauch eines Fehlermeldungsdialogs dar, da die App nicht verwendet werden kann, wenn Benutzer kein aktives Konto haben.
| Nicht empfohlen | Verwenden Sie einen Dialog, wenn der Benutzer die Meldung ignorieren kann. |
Im folgenden Beispiel macht der Fehler keine Blockierung des Benutzers nötig, bis er sich um das Problem gekümmert hat. Eine Fehler- oder Warnungsleiste wäre die bessere Wahl gewesen.
Verwandte Themen
- Richtlinien für App-Leisten
- Richtlinien für App-Einstellungen
- Richtlinien für die Suche
- Richtlinien zum Teilen von Inhalten
- Richtlinien für Flyouts
- Richtlinien für Meldungsdialogfelder
- Richtlinien für Kontextmenüs
- Richtlinien für Begrüßungsbildschirme
- Richtlinien für die App-Hilfe
