Richtlinien für Seitenübergangsanimationen

Applies to Windows and Windows Phone

Verwenden Sie Seitenübergangsanimationen, um die erste Seite einer neu gestarteten App anzuzeigen oder zwischen Seiten innerhalb einer App zu wechseln.

Hinweis  Wenn nur ein Teil des Bildschirminhalts geändert wird, verwenden Sie Inhaltsübergangsanimationen anstelle von Seitenübergangsanimationen.

Empfohlene und nicht empfohlene Vorgehensweisen

  • Teilen Sie die Seite entlang natürlicher Grenzen in einen Satz aus zwei bis fünf Regionen auf. Wenden Sie ein gestaffeltes Timing auf die Regionen an, damit die Regionen nicht alle auf einmal, sondern nacheinander angezeigt werden. Legen Sie für ein breites App-Layout außerdem ein Offset von 100 Pixel für die Regionen fest. Sie können auch ein kleineres Offset verwenden, wenn Ihre App über ein spezielles Layout für den schmalen Zustand verfügt. Informationen zu den gängigsten Seitenaufteilungen und die empfohlene Anzeigereihenfolge finden Sie unter Weitere Hinweise zur Verwendung.
  • Stellen Sie sicher dass alle Inhalte, die den aus- und eingehenden Seiten gemeinsam sind, ohne Animationen weiter angezeigt werden. Wenn beispielsweise sowohl auf der ausgehenden als auch auf der eingehenden Seite eine Schaltfläche Zurück vorhanden ist, sollte diese nicht in die Übergangsanimation aufgenommen werden.
  • Wenn auf der ausgehenden Seite keine Schaltfläche Zurück vorhanden ist (beispielsweise auf der ersten Seite einer App), während die Schaltfläche auf der eingehenden Seite vorhanden ist, sollte die Schaltfläche Zurück als separate Region angegeben werden. Diese Region sollte vor allen anderen mit einer Animation eingeblendet werden.
  • Wenn die aus- und eingehenden Seiten unterschiedliche Hintergründe haben, verwenden Sie die Einblendungsanimation, um den neuen Hintergrund anzuzeigen. Starten Sie die Einblendungsanimation gleichzeitig mit der Seitenübergangsanimation.
  • Wenn ein Teil des Inhalts der eingehenden Seite nicht sofort zum Anzeigen bereit ist, verwenden Sie die Seitenübergangsanimation, um möglichst viel des anzeigebereiten Inhalts einzublenden. Zeigen Sie bei Bedarf in der Zwischenzeit ein Steuerelement an, während Sie den zusätzlichen Inhalt vorbereiten. Wenn der zusätzliche Inhalt zum Anzeigen bereit ist, blenden Sie ihn mit einer auf dem Inhaltsbereich basierenden Animation ein. Verwenden Sie für große Inhaltsbereiche die Inhaltsübergangsanimation. Verwenden Sie für kleine Inhaltsbereiche oder nicht zusammenhängende Inhalte die Einblendungsanimation.
  • Bewegen Sie die Seite entgegen des normalen Seitenflusses oder der Leserichtung in die Ansicht. Wenn der Inhalt der eingehenden Seite beispielsweise von links nach rechts fließt, sollte die eingehende Seite von rechts nach links hereingleiten. In Apps mit Leserichtung von rechts nach links sollte die eingehende Seite von links nach rechts hereingleiten. Wenn Sie die Abschnitte einer Seite wie in den folgenden Abbildungen gezeigt aufteilen, sollten die Abschnitte einer Seite in entgegengesetzter Reihenfolge zur Leserichtung angezeigt werden.
  • Führen Sie keine Seitenübergangsanimationen aus, wenn Benutzer die Größe eines App-Fensters ändern. Seitenübergangsanimationen dienen nur dazu, innerhalb einer bestimmten Ansicht zwischen Seiten zu navigieren. Das System steuert die Animation zwischen dem alten und dem neuen Layout, wenn sich die Ansicht ändert.

Weitere Hinweise zur Verwendung

Hier sehen Sie die am häufigsten verwendeten Seitenaufteilungen einschließlich der Reihenfolge, in der sie angezeigt werden sollten:

Häufig verwendete Seitenaufteilungen

Hier sehen Sie die gängigsten Seitenaufteilungen mit Zurück-Schaltflächen. Wenn auf der ausgehenden Seite keine Schaltfläche Zurück vorhanden ist (beispielsweise auf der ersten Seite einer App), während die Schaltfläche auf der eingehenden Seite vorhanden ist, sollte die Schaltfläche Zurück als separate Region angegeben werden. Diese Region sollte vor allen anderen mit einer Animation eingeblendet werden.

Häufig verwendete Seitenaufteilungen

Hier werden die gängigsten Seitenaufteilungen in Apps gezeigt, die in schmaler Breite und im Hochformat angezeigt werden. Außerdem sehen Sie die Reihenfolge, in der die Aufteilungen angezeigt werden sollten. Wenn die Schaltfläche Zurück auf der ausgehenden Seite bereits vorhanden ist, sollte sie weiter angezeigt und nicht in die Animation aufgenommen werden.

Häufig verwendete Seitenaufteilungen in Ansichten mit geänderter Größe und Hochformatansichten

Verwandte Themen

Für Designer
Richtlinien für das Hinzufügen und Löschen
Richtlinien für Inhaltsübergangsanimationen
Richtlinien für Ziehanimationen
Richtlinien für randbasierte UI-Animationen
Richtlinien für Ein- und Ausblendungsanimationen
Richtlinien für Zeigerklickanimationen
Richtlinien für Positionsänderungsanimationen
Richtlinien für Popup-UI-Animationen
Richtlinien für Wischanimationen
Für Entwickler (Windows Runtime-Apps mit JavaScript und HTML)
HTML-Beispiel für die Animationsbibliothek
Animieren der Benutzeroberfläche
Animieren von Seitenübergängen
WinJS.UI.Animation.enterPage function
WinJS.UI.Animation.exitPage function
Für Entwickler (Windows Runtime-Apps mit C#/VB/C++ und XAML)
Animieren der Benutzeroberfläche
Animieren von Inhalts- und Eingangsübergängen
Schnellstart: Animieren der Benutzeroberfläche anhand von Bibliotheksanimationen
EntranceThemeTransition class

 

 

Anzeigen:
© 2014 Microsoft