Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
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
Fluent-Standard-Größe
Fluent Standard-Größe wurde erstellt, um ein Gleichgewicht zwischen Informationsdichte und Nutzerkomfort zu bieten. Effektiv sind alle Elemente auf dem Bildschirm auf ein Ziel von 40 x 40 effektiven Pixeln (epx) ausgerichtet, was es UI-Elementen ermöglicht, auf einem Raster ausgerichtet und entsprechend skaliert zu werden, basierend auf der Skalierung auf Systemebene.
Hinweis
Weitere Informationen zu effektiven Pixeln und Skalierung finden Sie unter Bildschirmgrößen und Haltepunkte
Weitere Informationen zur Skalierung auf Systemebene finden Sie unter Ausrichtung, Rand, Abstand.
Fluent Compact-Größeneinstellung
Anwendungen können eine höhere Informationsdichte mit der Fluent Compact-Größe anzeigen. Die kompakte Größenanpassung richtet UI-Elemente auf ein Zielmaß von 32x32 epx aus und ermöglicht somit, dass UI-Elemente präzise an einem engeren Raster ausgerichtet und entsprechend der Systemebene skaliert werden können.
Examples
Kompakte Dimensionierung 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). UWP-Steuerelemente orientieren sich in der Regel am 7,5-mm-Touchziel (dies kann je nach speziellen Steuerelementen und den gängigen Verwendungsmustern variieren). Weitere Details finden Sie unter Größe und Dichte des Steuerelements.
Diese Empfehlungen für die Zielgröße können nach Bedarf in Ihrem jeweiligen Szenario angepasst werden. Hier sind einige Punkte, die Sie berücksichtigen sollten:
- Häufigkeit der Fingereingaben – Erwägen Sie, Ziele zu erstellen, die wiederholt oder häufig gedrückt werden und die größer als die Mindestgröße sind.
- Fehlerfolge – Ziele, die schwerwiegende Folgen haben, wenn sie versehentlich berührt werden, sollten einen größeren Abstand aufweisen und weiter vom Rand des Inhaltsbereichs entfernt sein. Dies gilt insbesondere für Ziele, die häufig berührt werden.
- Position im Inhaltsbereich.
- Formfaktor und Bildschirmgröße.
- Fingerhaltung.
- Touchvisualisierungen.
Verwandte Artikel
- Designgrundlagen für Windows-Apps
- Bildschirmgrößen und Haltepunkte
- Steuerungsgröße und -dichte
- Ausrichtung, Rand, Abstand
Beispiele
- Einfaches Eingabebeispiel
- Beispiel für eine Eingabe mit geringer Latenz
- Beispiel für den Benutzerinteraktionsmodus
- Beispiel für Fokussierungsvisualisierung
Archivbeispiele
Windows developer