Richtlinien für Touch-Ziele

  • Artikel

Alle interaktiven UI-Elemente in Ihrer Windows-Anwendung müssen groß genug sein, damit Benutzer unabhängig vom Gerätetyp oder der Eingabemethode genau darauf zugreifen und diese verwenden können.

Die Unterstützung von Toucheingaben (und die relativ ungenaue Art des Touchkontaktbereichs) erfordert eine weitere Optimierung im Hinblick auf die Zielgröße und das Steuerungslayout, da der größere, komplexere Satz von Eingabedaten, die vom Touchdigalisierer gemeldet werden, verwendet wird, um das beabsichtigte (oder wahrscheinlichste) Ziel des Benutzers zu ermitteln.

Alle UWP-Steuerelemente wurden mit Standardmäßigen Touchzielgrößen und Layouts entwickelt, mit denen Sie visuell ausgewogene und ansprechende Apps erstellen können, die komfortabel, einfach zu bedienen sind und Vertrauen wecken.

In diesem Thema werden diese Standardverhalten beschrieben, sodass Sie Ihre App für eine maximale Benutzerfreundlichkeit mit Plattformsteuerelementen und benutzerdefinierten Steuerelementen entwerfen können (falls für Ihre App diese erforderlich sind).

Wichtige APIs: Windows.UI.Core, Windows.UI.Input, Windows.UI.Xaml.Input

Standard-Größenanpassung von Fluent

Die Standard-Größenanpassung von Fluent wurde entwickelt, um ein Gleichgewicht zwischen Informationsdichte und Benutzerfreundlichkeit zu schaffen. Effektiv werden alle Elemente auf dem Bildschirm auf einen Zielwert von 40 x 40 effektive Pixel (epx) ausgerichtet, wodurch UI-Elemente an einem Raster ausgerichtet und gemäß der Skalierung auf Systemebene entsprechend skaliert werden.

Hinweis

Weitere Informationen zu effektiven Pixeln und Skalierung finden Sie unter Bildschirmgrößen und Haltepunkte

Weitere Informationen zum Skalieren auf der Systemebene finden Sie unter Ausrichtung, Rand, Abstand.

Compact-Größenanpassung von Fluent

Anwendungen können eine höhere Informationsdichte mit Fluent Compact-Größenanpassung anzeigen. Die kompakte Größenanpassung richtet UI-Elemente an einem Epx-Ziel von 32 x 32 aus, wodurch UI-Elemente an einem engeren Raster ausgerichtet und basierend auf der Skalierung auf Systemebene entsprechend skaliert werden können.

Beispiele

Kompakte Größenanpassung kann auf Seiten- oder Rasterebene angewendet werden.

Seitenebene

<Page.Resources>
    <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
</Page.Resources>

Rasterebene

<Grid>
    <Grid.Resources>
        <ResourceDictionary Source="ms-appx:///Microsoft.UI.Xaml/DensityStyles/Compact.xaml" />
    </Grid.Resources>
</Grid>

Zielgröße

Legen Sie im Allgemeinen die Größe des Touchziels auf einen quadratischen Bereich von 7,5mm fest (40 x 40 Pixel auf einem 135 PPI-Display bei einem Skalierungsplateau von 1,0x). In der Regel richten sich UWP-Steuerelemente an 7,5 mm Touchziel (dies kann je nach steuerelementspezifischem Steuerelement und allen gängigen Verwendungsmustern variieren). Weitere Details finden Sie unter "Steuerelementgröße und -dichte ".

Diese Empfehlungen für die Zielgröße können nach Bedarf in Ihrem jeweiligen Szenario angepasst werden. Folgende Punkte sollten berücksichtigt werden:

  • Häufigkeit der Fingereingaben – Erwägen Sie, Ziele zu erstellen, die wiederholt oder häufig gedrückt werden, die größer als die Mindestgröße sind.
  • Fehlerfolge – Ziele, die schwerwiegende Folgen haben, wenn ein Fehler berührt wird, sollte einen größeren Abstand aufweisen und vom Rand des Inhaltsbereichs weiter platziert werden. Dies gilt insbesondere für Ziele, die häufig berührt werden.
  • Position im Inhaltsbereich.
  • Formfaktor und Bildschirmgröße.
  • Fingerhaltung.
  • Touchvisualisierungen.

Beispiele

Archivbeispiele