Gestalten der Benutzeroberfläche (HTML)
[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]
Hier finden Sie Informationen zum Layout von Windows-Runtime-Apps und erfahren, inwiefern sich Windows-Runtime-Apps von herkömmlichen Apps unterscheiden. Sie können in einer Windows-Runtime-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.
.png "App-Seite (auch Canvas genannt)")
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.
Windows: Ändern der UI-Größe
Benutzer können die Größe Ihrer App ändern, sodass sie eine andere App verwenden können, oder die Größe einer anderen App ändern, 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 Benutzerfreundlichkeit bei geänderter Größe zu optimieren.
.png "Vollbild") |
Vollbild Die App füllt den gesamten Bildschirm aus. |
|
Größe geändert Die Größe der App wird an einen Teil des gesamten Bildschirms angepasst. Der verbleibende Bildschirmbereich kann von anderen Apps gefüllt werden. |
.png "Schmale App mit geänderter Größer")
.png "Breite App mit geänderter Größe")
Weitere Informationen finden Sie unter UX-Richtlinien für Layout und Skalierung.
Bildschirmtastatur und Schreibbereich
Die Bildschirmtastatur (und der Schreibbereich unter Windows) bietet eine zweite Befehlsbenutzeroberfläche für die Texteingabe. Der Bereich wird angezeigt, wenn der Benutzer ein bearbeitbares Eingabefeld berührt (oder unter Windows 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 bei Tablet-PCs und Telefonen, d. h. für Formfaktoren ohne Hardwaretastatur oder ein anderes Tastaturperipheriegerät, Text eingegeben und bearbeitet werden. Über den Schreibbereich kann Text unter Windows 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. Unter Windows Phone ist das Menü standardmäßig ausgeblendet und wird angezeigt, wenn auf das Auslassungszeichen getippt wird. Die vollständige App-Leiste ist unter Windows standardmäßig ausgeblendet und wird angezeigt, wenn der Benutzer den Finger vom oberen oder unteren Bildschirmrand aus über den Bildschirm zieht. Die App-Leiste verdeckt den Inhalt der App und kann wie dargestellt vom Benutzer oder über die App selbst geschlossen werden.
.png "App-Leiste am unteren Bildschirmrand")
Weitere Informationen zum Gestalten von Befehlen finden Sie unter Steuerungsdesign. Richtlinien zur Benutzerführung finden Sie in den Richtlinien für App-Leisten.
Windows: Charms
Bei den Charms handelt es sich um eine spezifische und einheitliche Gruppe von Schaltflächen, die in jeder App zu finden sind: "Suche", "Teilen", "Geräte", "Einstellungen" und "Start". Dies sind unserer Ansicht nach Kernszenarien, die Benutzer in nahezu jeder App benötigen.
- Suche Benutzer können an einer beliebigen Stelle im System nach den Inhalten Ihrer App oder nach Webinhalten suchen.
- 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.
.png "App mit Charms")
Weitere Informationen finden Sie in den folgenden Richtlinien: Suche, Teilen, App-Einstellungen und 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.
.png "Kontextmenüs")
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 Meldungsdialogfelder nur, um den Benutzer zu unterbrechen und zu einer Aktion aufzufordern.
.png "Meldungsdialog")
Im obigen Windows-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.
.png "Flyout")
Im obigen Windows-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 (oder Banner)
Ein Popup (unter Windows Phone auch als "Banner" bezeichnet) ist eine Benachrichtigung, die Sie für Benutzer anzeigen, wenn sich Ihre App im Hintergrund befindet. Ein Popup eignet 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
.png "Kacheln auf der Startseite") |
Kacheln werden auf der Startseite angezeigt. (Unter Windows ersetzen sie 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, der Benutzer jedoch schon. Benutzerinteraktion: Der Benutzer kann 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 Texteingabefeld 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, der Benutzer jedoch schon. Benutzerinteraktion: Der Benutzer kann 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: Der Benutzer kann 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: Der Benutzer kann mit der App nicht mehr interagieren, bis er den Fehler geschlossen hat. Der Benutzer kann 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 Windows-Beispiel zeigt eine Inlinefehlermeldung, die einem bestimmten Texteingabefeld zugeordnet ist.
.png "Mit einem bestimmten Textfeld verknüpfte Inlinefehlermeldung")
| Nicht empfohlen | Platzieren Sie Aktionen und Befehle in der Nachricht. |
Im folgenden Windows-Beispiel wären Fehler- und Warnindikatoren eine bessere Wahl.
.png "Bessere Aktion als ein Fehler- oder Warnindikator")
Fehler: Fehler- oder Warnindikatoren
Verwenden Sie einen Fehler- oder Warnindikator, 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 der Benutzer das Problem beheben kann. 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. |
.png "Fehlerindikator")
| 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 Windows-Beispiel dient nur Informationszwecken. Es ist keine Aktion notwendig. In diesem Fall hätte eine Inlinemeldung ganz oben auf dem Bildschirm verwendet werden sollen.
.png "Falsche Verwendung von Fehler- oder Warnindikatoren")
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 Windows-Beispiel stellt den korrekten Gebrauch eines Fehlermeldungsdialogs dar, da die App nicht verwendet werden kann, wenn der Benutzer kein aktives Konto hat.
.png "Richtige Verwendung eines Fehlermeldungsdialogs")
| 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.
.png "Falsche Verwendung eines Fehlermeldungsdialogs")
Verwandte Themen
Richtlinien für App-Einstellungen
Richtlinien zum Teilen von Inhalten
Richtlinien für Meldungsdialogfelder