Udostępnij przez


Wskazówki dotyczące celów dotykowych

Wszystkie interaktywne elementy interfejsu użytkownika w aplikacji systemu Windows muszą być wystarczająco duże, aby użytkownicy mogli dokładnie uzyskiwać dostęp do i używać, niezależnie od typu urządzenia lub metody wejściowej.

Obsługa wprowadzania dotykowego (i stosunkowo nieprecyzyjny charakter obszaru kontaktu dotykowego) wymaga dalszej optymalizacji w odniesieniu do rozmiaru docelowego i układu sterowania, ponieważ większy, bardziej złożony zestaw danych wejściowych zgłaszanych przez cyfry dotykowe jest używany do określania zamierzonego (lub najbardziej prawdopodobnego) celu użytkownika.

Wszystkie kontrolki platformy UWP zostały zaprojektowane z domyślnymi rozmiarami i układami punktów dotykowych, które umożliwiają budowanie wizualnie zrównoważonych i atrakcyjnych aplikacji, które są wygodne, łatwe w użyciu i inspirują zaufanie.

W tym temacie opisano te domyślne zachowania, aby można było zaprojektować aplikację pod kątem maksymalnej użyteczności przy użyciu kontrolek platformy i kontrolek niestandardowych (jeśli aplikacja ich wymaga).

Ważne interfejsy API: Windows.UI.Core, Windows.UI.Input, Windows.UI.Xaml.Input

Skalowanie zgodne z Fluent Standard

Rozmiar fluent Standard został utworzony w celu zapewnienia równowagi między gęstością informacji a komfortem użytkownika. W praktyce wszystkie elementy na ekranie są wyrównane do docelowych 40x40 efektywnych pikseli (epx), co pozwala wyrównać elementy interfejsu użytkownika do siatki i skalować odpowiednio na podstawie skalowania na poziomie systemu.

Uwaga / Notatka

Aby uzyskać więcej informacji na temat efektywnych pikseli i skalowania, zobacz Rozmiary i punkty przerwania ekranu

Aby uzyskać więcej informacji na temat skalowania na poziomie systemu, zobacz Wyrównanie, margines, wypełnienie.

Fluent Compact - rozmiar

Aplikacje mogą wyświetlać wyższy poziom gęstości informacji, korzystając z opcji Fluent Compact. Kompaktowy rozmiar dopasowuje elementy interfejsu użytkownika do docelowej wielkości 32x32 epx, co umożliwia ich dopasowanie do bardziej zwartej siatki i odpowiednie skalowanie w oparciu o skalowanie systemowe.

Przykłady

Kompaktowanie rozmiaru można zastosować na poziomie strony lub siatki.

Poziom strony

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

Poziom siatki

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

Rozmiar docelowy

Ogólnie rzecz biorąc, ustaw rozmiar docelowego obszaru dotykowego na kwadratowy wymiar 7,5 mm (40x40 pikseli na wyświetlaczu o gęstości 135 PPI przy współczynniku skali 1,0x). Zazwyczaj kontrolki platformy UWP są zgodne z celem dotykowym o wielkości 7,5 mm (może się to różnić w zależności od konkretnej kontrolki i typowych wzorców użycia). Aby uzyskać więcej szczegółów, zobacz Rozmiar i gęstość kontrolek .

Te zalecenia dotyczące rozmiaru docelowego można dostosować zgodnie z wymaganiami danego scenariusza. Oto kilka rzeczy do sprawdzenia:

  • Częstotliwość dotykania — rozważ powiększenie celów, które są wielokrotnie lub często naciskane, tak aby były większe niż ich minimalny rozmiar.
  • Konsekwencja błędu — cele, które mają poważne konsekwencje w przypadku błędu, powinny mieć większy margines i być umieszczone dalej od krawędzi obszaru zawartości. Dotyczy to szczególnie celów, które są często dotykane.
  • Pozycja w obszarze zawartości.
  • Format i rozmiar ekranu.
  • Ułożenie palców.
  • Wizualizacje dotykowe.

Samples

Próbki archiwalne