Richtlinien für App-Einstellungen

Applies to Windows only

Windows stellt standardmäßig für jede Windows Store-App einen Einstellungsbereich bereit. Im oberen Teil des Einstellungsbereichs befinden sich "Einstiegspunkte" für Ihre App-Einstellungen. Jeder Einstiegspunkt öffnet ein Einstellungen-Flyout mit den eigentlichen Einstellungsoptionen. In diesem Thema werden bewährte Methoden für das Erstellen und Anzeigen von App-Einstellungen beschrieben.

Sehen Sie dieses Feature in unserer Reihe App-Features von A bis Z in Aktion.:  Windows Store-App-Benutzeroberfläche von A bis Z

Beispiel

Benutzer wischen von der Seite des Bildschirms nach innen, um die Charms anzuzeigen, und drücken dann auf den Charm "Einstellungen", um den Einstellungsbereich anzuzeigen.

Einstellungsflyout für die OneDrive-App

Hinweis  Windows fügt jedem Einstellungsbereich in einer Windows Store-App zwei Standardeinstiegspunkte hinzu: Berechtigungen und Bewerten und Kritik schreiben. Beachten Sie, dass der Einstellungsbereich Ihrer App den Einstiegspunkt Bewerten und Kritik schreiben nicht enthält, wenn sie nicht über den Windows Store installiert wurde (z. B. bei einer quergeladenen Unternehmens-App). Der untere Teil des Einstellungsbereichs enthält Systemeinstellungen wie Lautstärke, Helligkeit und Energie.

Sollte meine App App-Einstellungen beinhalten?

Alle Windows Store-Apps enthalten standardmäßig einen Einstellungsbereich mit den Abschnitten Berechtigungen und Bewerten und Kritik schreiben. Folgende Beispiele für zusätzliche Einstellungen gehören ebenfalls in den Einstellungsbereich:

  • Konfigurationsoptionen, die sich auf das Verhalten der App auswirken und keine häufige erneute Anpassung erfordern (z. B. die Auswahl der Standardtemperatureinheit Celsius oder Fahrenheit in einer Wetter-App oder das Ändern der Kontoeinstellungen für eine E-Mail-App)
  • Optionen, die von den bevorzugten Benutzereinstellungen abhängen, wie Musik, Soundeffekte oder Farbdesigns
  • App-Infos, die eher selten benötigt werden, z. B. Datenschutzrichtlinie, Hilfe, App-Version oder Copyright-Informationen

Befehle, die Teil des typischen App-Workflows (z. B. das Ändern der Pinselgröße in einer Zeichen-App) sollten sich nicht im Einstellungsbereich befinden. Platzieren Sie häufig verwendete Befehle stattdessen in der oberen oder unteren App-Leiste. Weitere Informationen zur Platzierung von Befehlen finden Sie unter Befehlsmuster. Guidelines for app bars bietet Empfehlungen für die Verwendung von App-Leisten.

Empfohlene und nicht empfohlene Vorgehensweisen

Allgemeine Prinzipien

  • Erstellen Sie Einstiegspunkte für all Ihre App-Einstellungen im Einstellungsbereich.
  • Verwenden Sie einfache Einstellungen. Definieren Sie intelligente Standardwerte, und halten Sie die Anzahl von Einstellungen so gering wie möglich.
  • Bei Bedarf können Sie eine Verknüpfung zwischen Elementen der App-UI und dem Einstellungsbereich oder einen Deep-Link zu einem bestimmten Einstellungen-Flyout erstellen. Beispielsweise können Sie Ihr Hilfeeinstellungen-Flyout über eine "Hilfe"-Schaltfläche in der unteren App-Leiste sowie über einen "Hilfe"-Einstiegspunkt im Einstellungsbereich verlinken.
  • Wenn ein Benutzer eine Einstellung ändert, sollte die App die Änderung sofort wiedergeben. Übernehmen Sie Änderungen an Einstellungen sofort oder sobald der Benutzer die Interaktion mit dem Flyout abgeschlossen hat.
  • Verwenden Sie die für WinJS verfügbaren Steuerelemente für das Einstellungen-Flyout (SettingsFlyout) und XAML (SettingsFlyout). Mit diesen Steuerelementen werden die im Abschnitt Entwerfen einer Einstellungs-UI beschriebenen Richtlinien für die Benutzeroberflächengestaltung standardmäßig implementiert.
  • Fügen Sie den App-Einstellungen keine Befehle hinzu, die zu einem häufigen App-Workflow gehören (z. B. das Ändern der Pinselfarbe in einer Zeichen-App). Diese Befehle gehören in eine App-Leiste oder in den Zeichenbereich. Weitere Informationen finden Sie im konzeptionellen Überblick über Befehlsmuster und in den Richtlinien für App-Leisten.
  • Verwenden Sie keinen Einstiegspunkt im Einstellungsbereich, um eine Aktion direkt auszuführen. Einstiegspunkte sollten Einstellungen-Flyouts öffnen.
  • Nutzen Sie nicht den Einstellungsbereich für die Navigation. Wenn der Einstellungsbereich geschlossen wird, sollten Benutzer auf dieselbe App-Seite gelangen, von der aus sie auf den Charm " Einstellungen" geklickt haben. Die obere App-Leiste ist hierfür besser geeignet.
  • Verwenden Sie die Einstellungen-Flyout-Klassen nicht als Steuerelemente für alle Zwecke. Sie sind nur für Einstellungen-Flyouts vorgesehen, die über Einstiegspunkte im Einstellungsbereich gestartet werden.

Einstiegspunkte

Einstiegspunkte sind die Bezeichnungen, die oben im Einstellungsbereich angezeigt werden und Einstellungen-Flyouts öffnen, in denen Sie Einstellungsoptionen anzeigen können. Wenn Sie eine Liste der gewünschten Einstellungen erstellt haben, berücksichtigen Sie die folgenden Richtlinien für Einstiegspunkte:

  • Gruppieren Sie unter einem Einstiegspunkt ähnliche oder aufeinander bezogene Optionen. Fügen Sie Ihrem Einstellungsbereich höchstens vier Einstiegspunkte hinzu.
  • Zeigen Sie unabhängig vom App-Kontext dieselben Einstiegspunkte an. Sind einige Einstellungen in einem bestimmten Kontext nicht relevant, deaktivieren Sie sie im Einstellungen-Flyout.
  • Verwenden Sie für Ihre Einstiegspunkte nach Möglichkeit informative Beschriftungen, die nur aus einem einzigen Wort bestehen. Nennen Sie den Einstieg für kontobezogene Einstellungen eher "Konten" als "Kontoeinstellungen". Wenn Sie nur einen Einstiegspunkt für Ihre Einstellungen festlegen möchten und die Einstellungen selbst sich nicht als Beschriftung eignen, verwenden Sie "Optionen" oder "Standardeinstellungen".
  • Wird über einen Einstiegspunkt direkt das Web anstelle eines Flyouts aufgerufen, informieren Sie den Benutzer mit einem als Hyperlink formatierten visuellen Hinweis darüber, z. B. mit "Hilfe (online)" oder "Webforen". Mehrere Weblinks sollten Sie in einem Flyout mit einem einzigen Einstiegspunkt gruppieren. Beispiel: Der Einstiegspunkt „Info“ könnte ein Flyout mit Links zu Ihren Nutzungsbedingungen, Datenschutzbestimmungen und App-Support-Infos öffnen.
  • Fassen Sie selten verwendete Einstellungen zu einem einzigen Einstiegspunkt zusammen, damit für gängigere Einstellungen jeweils ein eigener Einstiegspunkt zur Verfügung steht. Fassen Sie Inhalte oder Links, die nur Informationen enthalten, unter dem Einstiegspunkt "Info" zusammen.
  • Wiederholen Sie die Funktionen nicht im Berechtigungsbereich. Windows stellt diesen Bereich standardmäßig bereit, und er kann nicht geändert werden.

Entwerfen einer Einstellungs-UI

Hinweis  Die in WinJS und XAML verfügbaren Steuerelemente für das Einstellungen-Flyout folgen diesen Richtlinien automatisch, mit Ausnahme derer, die für die Header- und Rahmenfarbe gelten. Verwenden Sie diese Steuerelemente (SettingsFlyout (HTML) oder SettingsFlyout (XAML)), um sicherzustellen, dass Ihre Einstellungen-Flyouts den UI-Richtlinien folgen und eine konsistenten Benutzeroberfläche bieten.
  • Öffnen Sie ein Einstellungen-Flyout immer über Einstiegspunkte in Ihrem Einstellungsbereich.
  • Verwenden Sie eine Oberfläche mit automatischer Ausblendung, die oberhalb des Hauptinhalts der App angezeigt wird und ausgeblendet wird, wenn der Benutzer außerhalb des Flyouts klickt oder die Größe der App ändert. So können Benutzer schnell eine Einstellung ändern und wieder zur App zurückkehren.
  • Achten Sie darauf, dass Ihr Einstellungen-Flyout auf derselben Bildschirmseite angezeigt wird, wie die Charms und der Einstellungsbereich. Verwenden Sie die SettingsEdgeLocation-Eigenschaft, um festzustellen, auf welcher Bildschirmseite der Charm "Einstellungen" angezeigt wird.
  • Blenden Sie das Flyout von derselben Seite des Bildschirms wie Ihren Einstellungsbereich (und nicht von oben oder unten) ein.
  • Einstellungen-Flyouts müssen unabhängig von der Ausrichtung der vollen Bildschirmhöhe entsprechen und sollten schmal (346 Pixel) oder breit (646 Pixel) sein. Wählen Sie die für den Inhalt am besten geeignete Breite aus, und erstellen Sie keine benutzerdefinierten Formate.
  • Die Kopfzeile des Flyouts sollte eine "Zurück"-Schaltfläche, den Namen des Einstiegspunkts, über den das Flyout geöffnet wurde, sowie das Symbol der App enthalten.
  • Die Hintergrund- und Rahmenfarbe der Überschrift sollten der Hintergrundfarbe der Kachel entsprechen.
  • Für den Rahmen sollte die gleiche Farbe wie für den Header verwendet werden, aber 20 % dunkler.
  • Zeigen Sie Einstellungsinhalte auf einem weißen Hintergrund an.

Hinzufügen von Einstellungsinhalten zum Einstellungen-Flyout

  • Stellen Sie Inhalte von oben nach unten in einer einzelnen, ggf. bildlauffähigen Spalte dar. Beschränken Sie den Bildlauf auf die doppelte Bildschirmhöhe.
  • Verwenden Sie die folgenden Steuerelemente für App-Einstellungen:

    • Umschalter: Benutzer können Werte auf "Ein" bzw. "Aus" setzen.
    • Optionsfelder: Benutzer können aus bis zu fünf zusammenhängenden Optionen, die sich gegenseitig ausschließen, eine auswählen.
    • Texteingabefeld: Benutzer können hier Text eingeben. Wählen Sie die Art des Texteingabefelds passend zum Typ des vom Benutzer erhaltenen Texts aus, beispielsweise für E-Mail-Adressen oder Kennwörter.
    • Hyperlinks: Benutzer werden zu einer anderen Seite innerhalb der App oder zu einer externen Website weitergeleitet. Wenn ein Benutzer auf einen Hyperlink klickt, wird das Einstellungen-Flyout geschlossen.
    • Schaltflächen: Benutzer können eine Aktion sofort durchführen, ohne das aktuell geöffnete Einstellungen-Flyout zu schließen.
  • Wenn eines der Steuerelemente deaktiviert ist, fügen Sie eine beschreibende Meldung hinzu. Platzieren Sie diese Meldung über dem deaktivierten Steuerelement.
  • Zeigen Sie Inhalte und Steuerelemente als einzelnen Block per Animation an, nachdem das Einstellungsflyout und die Überschrift eingeblendet wurden. Animieren Sie Inhalte mit der Animation enterPage oder EntranceThemeTransition mit einem Offset links von 100 Pixel.
  • Verwenden Sie Abschnittsüberschriften, Absätze und Bezeichnungen, um Inhalte ggf. zu organisieren und zu erläutern.
  • Verwenden Sie zum Wiederholen von Einstellungen eine zusätzliche UI-Ebene oder ein Model zum Erweitern und Reduzieren. Beschränken Sie Hierarchien jedoch auf maximal zwei Ebenen. So könnte zum Beispiel in einer Wetter-App, deren Einstellungen sich auf die jeweilige Stadt beziehen, eine Liste mit Städten angezeigt werden. Der Benutzer muss dann nur auf die gewünschte Stadt zu tippen, um ein neues Flyout zu öffnen oder zu erweitern, um die Einstellungsoptionen anzuzeigen.
  • Wenn das Laden von Steuerelementen oder Webinhalten längere Zeit in Anspruch nimmt, informieren Sie den Benutzer mithilfe eines unbestimmten Statussteuerelements darüber, dass Informationen geladen werden. Weitere Informationen finden Sie unter Richtlinien für Statussteuerelemente.
  • Verwenden Sie keine Schaltflächen für die Navigation oder zum Übernehmen von Änderungen. Verwenden Sie Hyperlinks, um zu anderen Seiten zu navigieren, und speichern Sie Änderungen an App-Einstellungen automatisch, wenn ein Benutzer das Einstellungen-Flyout schließt, anstatt eine Schaltfläche für das Übernehmen von Änderungen zu verwenden.

Verwandte Themen

Für Designer
Layout
Befehlsmuster
Guidelines for app help
Guidelines for app bars
Richtlinien für das Auswahlsteuerelement
Für Entwickler (HTML)
Gestalten der Benutzeroberfläche
WinJS.UI.SettingsFlyout
SettingsCommand
ApplicationSettings
Quickstart: Adding app settings
Quickstart: Add app help
Liste der Steuerelemente
Für Entwickler (XAML)
Gestalten der Benutzeroberfläche
SettingsFlyout
SettingsCommand
ApplicationSettings
Quickstart: Add app settings
Quickstart: Add app help
Liste der Steuerelemente
Beispiele
Beispiel für App-Einstellungen

 

 

Anzeigen:
© 2015 Microsoft