Dieser Artikel wurde noch nicht bewertet - Dieses Thema bewerten.

Richtlinien für optischen Zoom und Änderung der Fenstergröße (Windows Store-Apps)

In diesem Thema wird die neue Windows-UI für das Zoomen und Ändern der Größe von Elementen beschrieben. Außerdem enthält das Thema Richtlinien für die Benutzeroberfläche zur Verwendung der neuen Interaktionsmechanismen in Ihren Windows Store-Apps.

Übersicht über optischen Zoom und Größenänderung

Mithilfe des optischen Zooms können Benutzer die Ansicht des Inhalts in einem Inhaltsbereich vergrößern (die Vergrößerung erfolgt für den gesamten Inhaltsbereich). Bei der Größenänderung hingegen können Benutzer die relative Größe eines oder mehrerer Objekte ändern, ohne die Ansicht im Inhaltsbereich zu ändern (die Größenänderung erfolgt für Objekte im Inhaltsbereich).

Hinweis  

Der optische Zoom ist nicht mit der Interaktion Semantischer Zoom zu verwechseln. Zwar werden bei beiden dieselben Gesten ausgeführt, jedoch bezieht sich Semantischer Zoom auf die Darstellung von und Navigation in strukturierten Daten oder Inhalten in einer einzelnen Ansicht (z. B. in der Ordnerstruktur eines Computers, einer Dokumentbibliothek oder einem Fotoalbum).

Der optische Zoom und die Größenänderung (Interaktion) werden mit den Bewegungen für Zusammendrücken und Aufziehen ausgeführt (durch Auseinanderbewegen der Finger wird vergrößert, und durch Zueinanderbewegen der Finger wird verkleinert). Alternativ können Benutzer die STRG-Taste gedrückt halten und gleichzeitig das Mausrad drehen oder die STRG-Taste gedrückt halten (wenn keine Zehnertastatur verfügbar ist, zusammen mit der UMSCHALTTASTE) und die Taste mit dem Pluszeichen (+) oder dem Minuszeichen (-) drücken.

Die folgenden Diagramme verdeutlichen die Unterschiede zwischen Größenänderung und optischem Zoom.

Optischer Zoom: Der Benutzer wählt einen Bereich aus und vergrößert den gesamten Bereich.

Wenn die Finger aufeinander zu bewegt werden, wird der Inhaltsbereich vergrößert, beim Spreizen der Finger wird er verkleinert.

Größenänderung: Der Benutzer wählt ein Objekt in einem Bereich aus und ändert die Größe dieses Objekts.

Wenn die Finger aufeinander zu bewegt werden, wird das Objekt verkleinert, beim Spreizen der Finger wird es vergrößert.

Richtlinien für die Benutzeroberfläche in Bezug auf optischen Zoom und Größenänderung

Beachten Sie die folgenden Richtlinien für Anwendungen, die entweder Größenänderung oder optischen Zoom unterstützen.

  • Wenn Beschränkungen oder Grenzen der maximalen und minimalen Größe definiert sind, sollte ein visuelles Feedback erfolgen, wenn der Benutzer die Grenzen erreicht oder überschreitet.
  • Mit Andockpunkten kann das Zoom- und Größenänderungsverhalten beeinflusst werden, indem logische Punkte bereitgestellt werden, an denen die Manipulation angehalten und sichergestellt wird, dass eine bestimmte Teilmenge des Inhalts im Viewport angezeigt wird. Stellen Sie Andockpunkte für gängige Zoomfaktoren oder logische Ansichten bereit, um die Auswahl dieser Zoomfaktoren zu erleichtern. In Foto-Apps könnte z. B. ein Andockpunkt bei 100 % für Größenänderungen bereitgestellt werden, und bei Karten-Apps könnten Andockpunkte in Ansichten von Städten, Staaten und Ländern/Regionen nützlich sein.

    Andockpunkte ermöglichen den Benutzern ungenaue Gesten, mit denen sie dennoch das Gewünschte erreichen.

    Es gibt zwei Arten von Andockpunkten:

    • Näherung - Nachdem der Kontakt aufhoben wurde, wird ein Andockpunkt ausgewählt, wenn die Trägheitsbewegung innerhalb einer Distanzschwelle zum Andockpunkt anhält. Bei Näherungsandockpunkten kann ein Zoom- oder Größenänderungsvorgang zwischen Andockpunkten enden.
    • Erforderlich – Der ausgewählte Andockpunkt ist der Punkt direkt vor oder nach dem Andockpunkt, der vor dem Aufheben des Kontakts zuletzt überschritten wurde (abhängig von der Richtung und Geschwindigkeit der Geste). Eine Manipulation muss an einem erforderlichen Andockpunkt enden.
  • Es sollten Trägheitseffekte verwendet werden. Dazu zählen:
    • Verlangsamung: Findet statt, wenn der Benutzer mit dem Zusammendrücken oder Aufziehen aufhört. Dies ist mit allmählichem Anhalten auf glattem Untergrund vergleichbar.
    • Springen: Beim Überschreiten einer Größeneinschränkung oder -grenze erfolgt ein leichter Rückpralleffekt.
  • Verteilen Sie die Steuerelemente entsprechend den Richtlinien für Zielbestimmung.
  • Verwenden Sie nicht den Zoom, um in der UI zu navigieren oder zusätzliche Steuerelemente in der App verfügbar zu machen, sondern verwenden Sie stattdessen Verschiebungen. Weitere Informationen zur Verschiebung finden Sie unter Richtlinien für Verschiebung.

Beachten Sie die folgenden Richtlinien für Anwendungen, die Größenänderungen unterstützen.

  • Stellen Sie für eine eingeschränkte Größenänderung Ziehpunkte für die Skalierung bereit. Wenn keine Ziehpunkte angegeben werden, wird standardmäßig die isometrische bzw. proportionale Größenänderung verwendet.
  • In den meisten Fällen ist es nicht empfehlenswert, in der Größe anpassbare Objekte in einem Inhaltsbereich zu platzieren, dessen Größe geändert werden kann. Ausnahmen bilden die folgenden Fälle:
    • Zeichnungsprogramme, in denen in der Größe anpassbare Elemente in einem Zeichenbereich oder auf einer Zeichenfläche, dessen bzw. deren Größe geändert werden kann, angezeigt werden können
    • Webseiten mit einem eingebetteten Objekt, z. B. einer Karte

    Hinweis  

    In allen Fällen wird die Größe des Inhaltsbereichs geändert, es sei denn, alle Berührungspunkte befinden sich in dem in der Größe anpassbaren Objekt.

Verwandte Themen

Konzept
Richtlinien für häufige Benutzerinteraktionen
Entwicklung von Fingereingabeinteraktionen
Lernprogramm (Windows Store-Apps mit JavaScript)
Schnellstart: Zeiger
Schnellstart: DOM-Gesten und -Manipulationen
Schnellstart: Statische Gesten
Schnellstart: Manipulationsgesten
Lernprogramm (Windows Store-Apps mit C#/VB/C++ und XAML)
Schnellstart: Fingereingabe
Schnellstart: Behandeln von Zeigereingaben
Lernprogramm (Windows Store-Apps mit C++ und DirectX)
Reagieren auf Fingereingaben (DirectX und C++)
Beispiele (DOM)
Beispiel für HTML-Bildlauf, -Verschiebung und -Zoomen
Eingabe: Beispiel für instanziierbare Gesten
Beispiele (Windows Store-App-APIs) 
Eingabe: Beispiel für Manipulationen und Gesten (JavaScript)
Eingabe: Beispiel für Windows 8-Bewegungen
Eingabe: Beispiel XAML-Benutzereingabeereignisse
Beispiel für XAML-Bildlauf, -Verschiebung und -Zoomen
Beispiele (DirectX)
Beispiel für die DirectX-Fingereingabe
Eingabe: Beispiel für Bearbeitungen und Bewegungen (C++)

 

 

© 2013 Microsoft. Alle Rechte vorbehalten.