Interakcje dotykowe

Ten temat zawiera wskazówki projektowe dotyczące tworzenia niestandardowych, zoptymalizowanych pod kątem dotyku środowisk w aplikacjach systemu Windows.

Przegląd

Interfejs dotykowy to podstawowa forma wprowadzania danych w systemie Windows oraz aplikacjach dla Windows, obejmujący użycie jednego lub kilku palców (lub kontaktów dotykowych). Te kontakty dotykowe i ich ruch są interpretowane jako gesty dotykowe i manipulacje, które obsługują różne interakcje użytkowników.

Zarówno Windows SDK, jak i Windows App SDK obejmują kompleksowe kolekcje kontrolek zoptymalizowanych pod kątem dotyku, które zapewniają niezawodne i spójne doświadczenia w aplikacjach systemu Windows.

Skorzystaj z tych wytycznych podczas tworzenia niestandardowych kontrolek, środowisk i struktur dla aplikacji systemu Windows.

Zasady projektowania

Podczas projektowania środowiska dotykowego w aplikacji systemu Windows należy wziąć pod uwagę następujące kwestie.

Optymalizacja dotykowa

Środowiska aplikacji systemu Windows powinny wydawać się zachęcające do dotyku, umożliwiać bezpośrednie manipulowanie i obsługiwać mniej precyzyjne interakcje. Rozważ akceleratory dotykowe, w tym gesty i integrację pióra i głosu.

Spójne między pozycjami

Aplikacja powinna zapewniać spójne doświadczenie, niezależnie od metody wprowadzania danych lub pozycji ciała użytkownika. Zmiany tradycyjnego trybu pulpitu na tryb tabletu (zobacz Zalecane ustawienia dla lepszych doświadczeń z tabletem), a także zmiany orientacji, nie powinny być dezorientujące, ale raczej subtelne i tylko w razie potrzeby. Twoja aplikacja powinna w subtelny sposób przeorganizować interfejs użytkownika, tworząc znajome, spójne środowisko, które dostosowuje się do potrzeb użytkowników tam, gdzie się znajdują.

Elastyczne

Aplikacje i interakcje powinny dostarczać użytkownikom informacji zwrotnych na każdej fazie (dotknięcie ekran, akcja, podniesienie palca) interakcji przy użyciu animacji, które reagują na istniejący stan użytkownika, wskazując jednocześnie możliwe działania. Animacje powinny również utrzymywać co najmniej 60 klatek na sekundę, aby czuć się płynnie i nowoczesne.

Przestrzeganie konwencji dotykowych

Responsywna informacja zwrotna

Odpowiednie opinie wizualne podczas interakcji z aplikacją pomagają użytkownikom rozpoznawać, uczyć się i dostosowywać się do sposobu interpretowania ich interakcji zarówno przez aplikację, jak i platformę Windows. Dostarczaj natychmiastową i ciągłą informację zwrotną w odpowiedzi na dotyk użytkownika, która jest zauważalna, zrozumiała i nie gubi się w wyniku rozproszenia uwagi. Ta natychmiastowa opinia polega na tym, jak użytkownicy będą uczyć się i eksplorować interaktywne elementy aplikacji.

• Informacja zwrotna powinna być natychmiastowa po dotknięciu, a przenoszone obiekty powinny przylegać do palca użytkownika.
• Interfejs użytkownika powinien reagować na gesty, dostosowując się do szybkości i ruchów użytkownika, unikając używania animacji klatek kluczowych.
• Informacja zwrotna wizualna powinna przekazywać możliwe wyniki przed podjęciem działania przez użytkownika.

Zrób

Nie

Aby uzyskać więcej informacji, zobacz Wytyczne dotyczące opinii wizualnych i Ruch w Windows 11

Wzorce interakcji dotykowych

Przestrzegaj tych typowych wzorców interakcji i gestów, aby zapewnić spójność i przewidywalność doświadczenia.

Typowe interakcje

Istnieje zestaw typowych zachowań i gestów dotykowych, które użytkownicy znają i oczekują spójnej pracy we wszystkich środowiskach systemu Windows.

• Naciśnij , aby aktywować lub wybrać element
• Krótkie naciśnięcie i przeciągnięcie , aby przenieść obiekt
• Naciśnij i przytrzymaj , aby uzyskać dostęp do menu pomocniczych, kontekstowych poleceń
• Szybkie przesunięcie (lub przeciąganie i zwalnianie) dla poleceń kontekstowych
• Obracaj zgodnie z ruchem wskazówek zegara lub przeciwnie, aby obracać

Interakcje

Stuknij

Przesuń szybko (lub przeciągnij i puść)

Krótkie naciśnięcie i przeciąganie

Obracać

Naciśnij i przytrzymaj

Aby uzyskać więcej informacji, zobacz Wytyczne dotyczące opinii wizualnych i ruchu w systemie Windows 11

Gesty

Gesty obniżają nakład pracy wymagany przez użytkowników do nawigowania i działania na typowych interakcjach. Jeśli to możliwe, obsługa interfejsu użytkownika za pomocą gestów dotykowych ułatwia użytkownikom nawigację i działanie w aplikacji.

W przypadku nawigacji między widokami, używaj połączonych animacji, aby zarówno istniejące, jak i nowe stany były widoczne podczas przeciągania. W przypadku interakcji z interfejsem użytkownika elementy powinny być zgodne z ruchem użytkownika, przekazywać opinie i reagować na dodatkowe akcje na podstawie progów położenia przeciągania.

Gesty powinny być również możliwe do wykonywania poprzez szybkie ruchy i machnięcia, opierając się na inercji i mieszcząc się w wygodnym zakresie ruchu.

• Przeciągnij lub machnij, aby przejść w tę i z powrotem.
• Przeciągnij, aby odrzucić
• Przeciągnij, aby odświeżyć

Gesty

Przeciągnij lub stuknij, aby poruszać się tam i z powrotem.

Przeciągnij, aby odświeżyć

Przeciągnij, aby odrzucić

Aby uzyskać więcej informacji, zobacz Przejścia stron i Przeciągnij, aby odświeżyć.

Gesty niestandardowe

Używanie niestandardowych gestów w celu przenoszenia skrótów klawiaturowych o wysokiej częstotliwości i gestów klawiatury do interakcji dotykowej. Pomoc w odnajdywaniu i reagowaniu dzięki specjalnym funkcjom wspomagającym z animacjami i stanami wizualnymi (na przykład umieszczenie trzech palców na ekranie powoduje zmniejszenie okien, co daje wizualną informację zwrotną).

• Nie przesłaniaj typowych gestów, ponieważ może to spowodować zamieszanie dla użytkowników.
• Rozważ użycie gestów z wieloma palcami w przypadku akcji niestandardowych, ale należy pamiętać, że system zarezerwował kilka gestów z wieloma palcami na potrzeby szybkiego przełączania się między aplikacjami i pulpitami.
• Należy pamiętać o niestandardowych gestach pochodzących w pobliżu krawędzi ekranu, ponieważ gesty krawędzi są zarezerwowane dla zachowań na poziomie systemu operacyjnego, które mogą być wywoływane przypadkowo.

Unikaj przypadkowej nawigacji

Jeśli twoja aplikacja lub gra może obejmować częste interakcje w pobliżu krawędzi ekranu, rozważ wprowadzenie trybu pełnoekranowego ekskluzywnego (FSE), aby uniknąć przypadkowych aktywacji wysuwanych okien systemowych (użytkownicy będą musieli przesuwać palcem bezpośrednio po tymczasowej karcie, aby wywołać skojarzone wysuwane okno).

Uwaga / Notatka

Należy unikać korzystania z tej funkcji, chyba że jest to absolutnie konieczne, ponieważ utrudni użytkownikom przechodzenie z aplikacji lub używanie jej w połączeniu z innymi osobami.

Doświadczenia klawiatury dotykowej

Klawiatura dotykowa umożliwia wprowadzanie tekstu dla urządzeń obsługujących dotyk. Kontrolki wprowadzania tekstu aplikacji systemu Windows domyślnie wywołują klawiaturę dotykową, gdy użytkownik naciągnie edytowalne pole wejściowe.

Wywołaj przy dotknięciu pola tekstowego

Klawiatura dotykowa powinna pojawić się, gdy użytkownik naciśnie pole wprowadzania tekstu — będzie to działać automatycznie przy użyciu naszych systemowych interfejsów API w celu pokazania i ukrycia klawiatury. Zobacz Reagowanie na obecność klawiatury dotykowej.

Używanie standardowych kontrolek wprowadzania tekstu

Korzystanie z typowych kontrolek zapewnia oczekiwane zachowanie i minimalizuje niespodzianki dla użytkowników.

Kontrolki tekstu obsługujące platformę Text Services Framework (TSF) zapewniają możliwości pisania poprzez przesuwanie palca (klawiatury szybkiego przesunięcia).

Sygnały klawiatury dotykowej

Uwzględnianie danych wejściowych, stanowych, sygnałów sprzętowych, które sprawiają, że klawiatura dotykowa jest trybem głównym wejścia (klawiatura sprzętowa jest odłączona, punkty wejścia są wywoływane za pomocą dotyku, jasne intencje użytkownika do wpisywania).

Odpowiednio przepełnij ponownie

• Należy pamiętać, że klawiatura może zająć 50% ekranu na mniejszych urządzeniach.
• Nie ukrywaj aktywnego pola tekstowego za pomocą klawiatury dotykowej.
• Jeśli klawiatura dotykowa zasłania aktywne pole tekstowe, przewiń zawartość aplikacji w górę (z animacją), aż pole będzie widoczne.
• Jeśli klawiatura dotykowa zasłania aktywne pole tekstowe, ale zawartość aplikacji nie może przewijać się w górę, spróbuj przenieść kontener aplikacji (z animacją).

Trafienie celów

Upewnij się, że trafione cele są wygodne i zachęcające do dotyku. Jeśli trafione cele są zbyt małe lub zatłoczone, użytkownicy muszą być bardziej precyzyjni, co jest trudne przy użyciu dotyku i może prowadzić do złego doświadczenia.

Dotykalny

Określamy jako dotykowy element o minimalnych wymiarach 40 x 40 epx, nawet jeśli element graficzny jest mniejszy, lub wysokość wynosi 32 epx przy szerokości co najmniej 120 epx.

Nasze typowe kontrolki są zgodne z tym standardem (są one zoptymalizowane zarówno dla użytkowników myszy, jak i dotyku).

Zoptymalizowane pod kątem dotyku

W przypadku interfejsu użytkownika zoptymalizowanego pod kątem dotyku rozważ zwiększenie rozmiaru docelowego do 44 x 44 epx z co najmniej 4 epx widocznym odstępem między miejscami docelowymi.

Zalecamy dwa domyślne zachowania: Zawsze zoptymalizowane pod kątem dotyku lub przełączanie na podstawie sygnałów urządzenia.

Kiedy aplikację można zoptymalizować do obsługi dotykowej bez pogarszania doświadczeń użytkowników myszy, zwłaszcza jeśli aplikacja jest używana głównie dotykowo, zawsze optymalizuj do obsługi dotykowej.

W przypadku, gdy dostosowujesz interfejs użytkownika na podstawie sygnałów dotyczących pozycji urządzenia, zawsze zapewnij spójne doświadczenia w każdej pozycji.

Dopasowanie wizualizacji do obszaru dotykowego

Rozważ zaktualizowanie grafik, gdy zmieni się wymiar obszaru dotyku. Na przykład, gdy cele trafienia zwiększają się, gdy użytkownicy przechodzą w tryb tabletu, interfejs użytkownika reprezentujący te cele powinien również zostać zaktualizowany, aby ułatwić użytkownikom zrozumienie zmiany stanu i zaktualizowane możliwości. Aby uzyskać więcej informacji, zobacz Podstawowe informacje dotyczące projektowania zawartości dla aplikacji systemu Windows, Wskazówki dotyczące celów dotykowych, Rozmiar i gęstość kontrolek.

Optymalizacja orientacji pionowej

Obsługa dynamicznych układów, które uwzględniają zarówno wysokie, jak i szerokie okna, aby zapewnić, że aplikacja jest zoptymalizowana pod kątem orientacji poziomej i pionowej.

Zapewni to również prawidłowe wyświetlanie podstawowych elementów wizualnych interfejsu użytkownika w oknach aplikacji w scenariuszach wielozadaniowych (aplikacje ustawione obok siebie w pionowym układzie proporcji) niezależnie od orientacji i rozmiarów ekranu.