Richtlinien für Touch-Ziele

  • Artikel

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

Die Unterstützung der Toucheingabe (und der relativ unpräzise Natur des Touchkontaktbereichs) erfordert eine weitere Optimierung in Bezug auf Die Zielgröße und das Steuerungslayout, da der größere, komplexere Satz von Eingabedaten, der vom Touchdigalisierer gemeldet wird, verwendet wird, um das beabsichtigte (oder höchstwahrscheinliche) Ziel des Benutzers zu bestimmen.

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 und Vertrauen schaffen.

In diesem Thema werden diese Standardverhalten beschrieben, damit Sie Ihre App mit Plattformsteuerelementen und benutzerdefinierten Steuerelementen für maximale Benutzerfreundlichkeit entwerfen können (falls ihre App sie erfordert).

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 mit Fluent Compact eine höhere Informationsdichte anzeigen. Die kompakte Größenanpassung richtet UI-Elemente an einem Epx-Ziel mit 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

Die 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

Im Allgemeinen legen Sie die Zielgröße für die Toucheingabe auf einen Quadratbereich von 7,5 mm fest (40 x 40 Pixel auf einem 135-PPI-Display auf einem 1,0-fachen Skalierungsplateau). In der Regel sind UWP-Steuerelemente am 7,5-mm-Touchziel ausgerichtet (dies kann je nach dem jeweiligen Steuerelement und allen gängigen Verwendungsmustern variieren). Weitere Informationen finden Sie unter Steuern von Größe und Dichte .

Sie können diese Empfehlungen für die Zielgröße an die Anforderungen des jeweiligen Szenarios anpassen. Folgende Punkte sollten berücksichtigt werden:

  • Häufigkeit der Berührungen: Erwägen Sie, Ziele, die wiederholt oder häufig gedrückt werden, größer als die Mindestgröße zu machen.
  • Fehlerfolge: Ziele, die schwerwiegende Folgen haben, wenn sie fehlerhaft berührt werden, sollten eine größere Auffüllung aufweisen und weiter vom Rand des Inhaltsbereichs entfernt 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