Richtlinien für optischen Zoom und Änderung der Fenstergröße

Applies to Windows and Windows Phone

Sehen Sie dieses Feature in unserer Reihe App-Features von A bis Z in Aktion.:  Benutzerinteraktion: Toucheingabe... und vieles mehr

In diesem Thema werden die Windows-Elemente für das Zoomen und Ändern der Größe beschrieben. Außerdem enthält das Thema Richtlinien für die Benutzeroberfläche zur Verwendung dieser Interaktionsmechanismen in Ihren Apps.

Beschreibung

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 des Inhaltsbereichs zu ändern (die Größenänderung erfolgt für Objekte im Inhaltsbereich).

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.

Hinweis  

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

Empfohlene und nicht empfohlene Vorgehensweisen

Beachten Sie die folgenden Richtlinien für Apps, 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. Wenn Sie mit XAML arbeiten, finden Sie weitere Informationen unter den Eigenschaften der Andockpunkte von ScrollViewer. Verwenden Sie für JavaScript und HTML -ms-content-zoom-snap-points.

    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.
  • Verwenden Sie Trägheitseffekte. 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.
  • 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.
  • 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.
  • Platzieren Sie keine in der Größe veränderbare Objekte in einem Inhaltsbereich, 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

Für Designer
Richtlinien für häufige Benutzerinteraktionen
Entwicklung von Fingereingabeinteraktionen
Für Entwickler (HTML)
Schnellstart: Zeiger
Schnellstart: DOM-Gesten und -Manipulationen
Schnellstart: Statische Gesten
Schnellstart: Manipulationsgesten
Für Entwickler (XAML)
Schnellstart: Fingereingabe
Schnellstart: Behandeln von Zeigereingaben
Für Entwickler (Windows-Runtime-Apps mit DirectX mit C++)
Reagieren auf Fingereingaben (DirectX und C++)
Beispiele
Eingabe: Beispiel für Gesten und Manipulationen mit GestureRecognizer
Beispiel für HTML-Bildlauf, -Verschiebung und -Zoomen
Eingabe: Beispiel für instanziierbare Gesten (mit MSGesture)
Eingabe: Beispiel XAML-Benutzereingabeereignisse
Beispiel für XAML-Bildlauf, -Verschiebung und -Zoomen
Beispiel für die DirectX-Fingereingabe

 

 

Anzeigen:
© 2014 Microsoft