Richtlinien für die Text- und Bildauswahl (Windows-Runtime-Apps)

Applies to Windows and Windows Phone

In diesem Thema wird die neue Windows-UI zum Auswählen und Bearbeiten von Text, Bildern und Steuerelementen beschrieben. Außerdem finden Sie hier Richtlinien für die UX, die berücksichtigt werden sollten, wenn Sie diese neuen Auswahl- und Manipulationsmechanismen in Ihrer Windows Store-App verwenden.

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

Empfohlene und nicht empfohlene Vorgehensweisen

  • Verwenden Sie Schriftartglyphen, wenn Sie Ihre eigene Ziehelement-UI implementieren. Das Ziehelement ist eine Kombination aus zwei systemweit verfügbaren Segoe UI-Schriftarten. Die Verwendung von Schriftressourcen vereinfacht das Rendering bei unterschiedlichen DPI-Einstellungen und funktioniert gut mit den verschiedenen UI-Skalierungsebenen. Ihre Ziehelemente sollten alle die folgenden Benutzeroberflächenmerkmale aufweisen:

    • Kreisform
    • Sichtbar auf jedem Hintergrund
    • Einheitliche Größe
  • Fügen Sie um auswählbaren Inhalt einen Rand für die Ziehelement-UI hinzu. Falls Ihre App die Textauswahl in einem Bereich ohne Verschiebung/Bildlauf ermöglicht, sollten Sie einen Rand lassen, der an der linken und rechten Seite halb so groß ist wie das Ziehelement und an der oberen und unteren Seite so groß wie die Höhe des Zielelements (siehe folgende Abbildungen). Dadurch wird sichergestellt, dass die gesamte Ziehelement-UI für den Benutzer sichtbar ist, und unbeabsichtigte Interaktionen mit anderen randbasierten Benutzeroberflächen werden minimiert.

    Ränder des Textauswahlziehelements

  • Blenden Sie die Ziehelement-UI während der Interaktion aus. So können Sie verhindern, dass die Interaktion durch die Ziehelemente behindert wird. Dies ist hilfreich, wenn ein Ziehelement nicht vollständig vom Finger verdeckt wird oder mehrere Ziehelemente für die Textauswahl vorhanden sind. Dadurch werden visuelle Fehler beim Anzeigen untergeordneter Fenster verhindert.

  • Die Auswahl von Benutzeroberflächenelementen wie Steuerelementen, Beschriftungen, Bildern, geschützten Inhalten usw. sollte nicht möglich sein. In Windows-Apps ist die Auswahl normalerweise nur in bestimmten Steuerelementen möglich. Steuerelemente wie Schaltflächen, Beschriftungen und Logos sind nicht auswählbar. Bei Windows Store-Apps mit JavaScript müssen Sie die Auswahl deaktivieren. Beurteilen Sie, ob die Auswahl ein Problem für die App darstellt, und identifizieren Sie gegebenenfalls die Bereiche der UI, in denen keine Auswahl möglich sein sollte. Weitere Informationen zum Deaktivieren der Auswahl finden Sie unter So wird's gemacht: Deaktivieren der Auswahl von Text und Bildern.

Weitere Hinweise zur Verwendung

Für die Auswahl und Manipulation von Text ergeben sich durch Fingereingabeinteraktionen besonders leicht Probleme für die Benutzeroberfläche. Eingaben über Maus, Zeichen-/Tablettstift und Tastatur sind sehr präzise: Ein Mausklick oder ein Kontakt mit dem Zeichen- bzw. Tablettstift ist in der Regel einem einzigen Pixel zugeordnet, und eine Taste wird gedrückt oder nicht gedrückt. Die Fingereingabe ist weniger präzise. Es ist schwierig, die gesamte Oberfläche einer Fingerspitze einer bestimmten x-y-Position auf dem Bildschirm zuzuordnen, um ein Caretzeichen exakt im Text zu platzieren.

Überlegungen und Empfehlungen

Verwenden Sie die integrierten Steuerelemente der Sprachframeworks in Windows 8, um Apps mit sämtlichen Benutzerinteraktionsfunktionen der Plattform – einschließlich Auswahl- und Manipulationsverhalten – zu erstellen. Die Interaktionsfunktionen der integrierten Steuerelemente sollten daher für die meisten Windows Store-Apps ausreichen.

Bei Verwendung der standardmäßigen Textsteuerelemente von Windows 8 können die in diesem Thema beschriebenen Auswahlverhalten und visuellen Elemente nicht angepasst werden.

Textauswahl

Falls Ihre App eine benutzerdefinierte Benutzeroberfläche erfordert, die die Auswahl von Text unterstützt, empfehlen wir, die hier beschriebenen Auswahlverhalten von Windows 8 anzuwenden.

Bearbeitbare und nicht bearbeitbare Inhalte

Zur Unterstützung des weniger präzisen Zielbestimmungsverhaltens von Fingereingabeinteraktionen wurden die visuellen Benutzeroberflächenelemente für Auswahl und Änderungen (beispielsweise "Ziehelemente", die sowohl eine Auswahl angeben als auch das Interaktionsziel identifizieren) für Windows 8 völlig neu konzipiert.

Bei der Fingereingabe werden Auswahlinteraktionen hauptsächlich durch Bewegungen ausgeführt, z. B. Tippen, um einen Einfügecursor zu setzen oder ein Wort auszuwählen, und Ziehen, um eine Auswahl zu ändern. Wie bei anderen Fingereingabeinteraktionen in Windows 8 sind zeitgesteuerte Interaktionen zum Anzeigen einer Informationsbenutzeroberfläche auf die Gedrückthaltebewegung beschränkt. Weitere Informationen finden Sie unter Richtlinien für visuelles Feedback.

Für die Verwendung von Maus, Zeichen-/Tablettstift und Tastatur gibt es in Windows 8 keine Änderungen am Auswahlverhalten.

Windows 8 erkennt zwei mögliche Zustände für Auswahlinteraktionen (bearbeitbar und nicht bearbeitbar) und passt Auswahl-UI, Feedback und Funktionalität entsprechend an.

Bearbeitbare Inhalte

Durch Tippen in der linken Hälfte eines Worts wird der Cursor links neben dem Wort platziert, durch Tippen in der rechten Hälfte wird er rechts neben dem Wort platziert.

Im folgenden Bild wird veranschaulicht, wie Sie einen anfänglichen Einfügecursor mit Ziehelement platzieren, indem Sie in die Nähe des Anfangs oder Endes eines Worts tippen.

Tippen (oder drücken und halten) Sie links neben ein Wort, um ein Caretzeichen und ein Ziehelement am Anfang des Worts zu platzieren. Tippen (oder drücken und halten) Sie rechts neben ein Wort, um ein Caretzeichen und ein Ziehelement am Ende des Worts zu platzieren.

Im folgenden Bild wird veranschaulicht, wie Sie eine Auswahl durch Ziehen des Ziehelements anpassen.

Ziehen Sie das Ziehelement in eine beliebige Richtung, um die Auswahl anzupassen (das erste Ziehelement bleibt verankert, und ein zweites Ziehelement wird angezeigt). Ziehen Sie eines der Ziehelemente, um weitere Anpassungen vorzunehmen.

Im folgenden Bild wird veranschaulicht, wie Sie das Kontextmenü aufrufen, indem Sie in die Auswahl oder auf ein Ziehelement tippen (Sie können auch Drücken und Halten verwenden).

Tippen (oder drücken und halten) Sie in die Auswahl oder auf ein Ziehelement, um das Kontextmenü aufzurufen.

Hinweis  Bei einem falsch geschriebenen Wort weichen diese Interaktionen etwas ab. Wenn Sie auf ein Wort tippen, das als falsch geschrieben gekennzeichnet ist, wird das gesamte Wort hervorgehoben. Außerdem wird das Kontextmenü mit der vorgeschlagenen Schreibweise aufgerufen.

Nicht bearbeitbare Inhalte

Im folgenden Bild wird veranschaulicht, wie Sie ein Wort auswählen, indem Sie in das Wort tippen (die anfängliche Auswahl enthält keine Leerzeichen).

Tippen Sie in ein Wort, um es auszuwählen (die anfängliche Auswahl enthält keine Leerzeichen).

Gehen Sie für bearbeitbaren Test genauso vor, um die Auswahl anzupassen und das Kontextmenü anzuzeigen.

Objektmanipulation

Verwenden Sie beim Implementieren einer benutzerdefinierten Objektmanipulation in einer Windows Store-App nach Möglichkeit die gleichen (oder ähnliche) Ziehelementressourcen wie für die Textauswahl. Auf diese Weise kann ein einheitliches Interaktionsverhalten für die gesamte Plattform bereitgestellt werden.

Zielelemente können wie in den folgenden Abbildungen dargestellt z. B. auch in Bildverarbeitungs-Apps verwendet werden, die Größenänderungen und Zuschneiden unterstützen, oder in Media-Player-Apps mit anpassbaren Statusanzeigen.

Media-Player mit Statusziehelement

Media-Player mit anpassbarer Statusanzeige

Bild mit Ziehelementen zum Zuschneiden

Bild-Editor mit Ziehelementen zum Zuschneiden

Verwandte Themen

Für Designer
Richtlinien für häufige Benutzerinteraktionen
Design für Interaktion per Fingereingabe
Für Entwickler (HTML)
So wird's gemacht: Deaktivieren der Auswahl von Text und Bildern
Schnellstart: Zeiger
Schnellstart: DOM-Gesten und -Manipulationen
Schnellstart: Statische Gesten
Schnellstart: Manipulationsgesten
Für Entwickler (XAML)
Schnellstart: Fingereingabe
Schnellstart: Behandeln von Zeigereingaben
Windows.UI.Input
Für Entwickler (Windows-Runtime-Apps mit DirectX mit C++)
Reagieren auf Fingereingaben (DirectX und C++)
Windows.UI.Xaml.Input
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++)

 

 

Anzeigen:
© 2015 Microsoft