Dotyk

Wszystkie aplikacje systemu Microsoft Windows powinny mieć doskonałe środowisko dotykowe. Tworzenie takiego doświadczenia jest łatwiejsze niż myślisz.

Funkcja Touch odnosi się do używania jednego lub kilku palców w celu zapewnienia danych wejściowych za pośrednictwem wyświetlacza urządzenia i interakcji z systemem Windows i aplikacjami. Aplikacja zoptymalizowana pod kątem dotyku ma interfejs użytkownika i model interakcji zaprojektowany w celu uwzględnienia większych, mniej precyzyjnych obszarów kontaktowych dotyku, różnych czynników form urządzeń dotykowych oraz wielu postaw i uchwytów, które użytkownicy mogą przyjąć podczas korzystania z urządzenia dotykowego.

dotykowego

Każde urządzenie wejściowe ma swoje mocne strony. Klawiatura jest najlepsza w przypadku wprowadzania tekstu i wydawania poleceń z minimalnym ruchem dłoni. Mysz jest najlepsza do wydajnego, precyzyjnego wskazywania. Dotyk najlepiej nadaje się do manipulowania obiektami i nadawania prostych poleceń. Pióro jest najlepsze dla wyrażenia freeform, podobnie jak w przypadku pisma ręcznego i rysunku.

System Windows 8.1 jest zoptymalizowany pod kątem reakcji, dokładności i łatwości użycia z dotykiem, a jednocześnie w pełni obsługuje tradycyjne metody wprowadzania (takie jak mysz, pióro i klawiatura). Szybkość, dokładność i dotykowe opinie, które zapewniają tradycyjne tryby wprowadzania, są znane i atrakcyjne dla wielu użytkowników i potencjalnie lepiej dostosowane do konkretnych scenariuszy interakcji.

Wskazówki dotyczące myszy, pióra i ułatwień dostępu można znaleźć w oddzielnych tematach.

Gdy myślisz o środowisku interakcji dla aplikacji:

Nie zakładaj, że jeśli interfejs użytkownika działa dobrze dla myszy, działa również dobrze w przypadku dotyku. Chociaż dobra obsługa myszy jest początkiem, dobre środowisko dotykowe ma kilka dodatkowych wymagań.

Załóżmy, że jeśli interfejs użytkownika działa dobrze dla palca, działa również dobrze dla pióra. Dzięki temu aplikacja jest bardzo wzruszająca, aby zapewnić również dobrą obsługę pióra. Podstawową różnicą jest to, że palce mają blunter tip, więc potrzebują większych celów.

Za pomocą dotyku można bezpośrednio manipulować obiektami i interfejsem użytkownika, co sprawia, że jest to szybsze, bardziej naturalne i atrakcyjne środowisko.

Zapewnienie doskonałego środowiska dotykowego

Należy upewnić się, że użytkownicy mogą wydajnie wykonywać krytyczne i ważne zadania przy użyciu danych wejściowych dotykowych. Jednak określone funkcje aplikacji, takie jak manipulowanie tekstem lub pikselami, mogą nie być odpowiednie dla dotyku i mogą być zarezerwowane dla najbardziej odpowiedniego urządzenia wejściowego.

Jeśli nie masz dużego doświadczenia w tworzeniu aplikacji dotykowych, najlepiej nauczyć się, wykonując te czynności. Pobierz komputer z obsługą dotykową, umieść mysz i klawiaturę na bok i użyj tylko palców do interakcji z aplikacją. Jeśli masz tablet, eksperymentuj z trzymanie go na różnych pozycjach, takich jak na kolanach, leżąc płasko na stole, lub w ramionach, gdy stoisz. Spróbuj użyć go w orientacji pionowej i poziomej.

Aplikacje zoptymalizowane pod kątem dotyku, które najlepiej współdziałają z interakcją dotykową, zwykle:

• Naturalne i intuicyjne. Interakcje są zaprojektowane tak, aby odpowiadały sposobom interakcji użytkowników z obiektami w świecie rzeczywistym.
• Mniej uciążliwe. Używanie dotyku jest dyskretne, a w związku z tym znacznie mniej rozpraszające niż wpisywanie lub klikanie.
• Przenośny. Urządzenia dotykowe są bardziej kompaktowe, ponieważ wiele zadań można wykonać bez klawiatury, myszy, pióra lub touchpadu. Są one również bardziej elastyczne, ponieważ powierzchnia robocza nie jest wymagana.
• Bezpośredni i angażujący. Dotyk sprawia, że czujesz się jak bezpośrednio manipulujesz obiektami na ekranie.
• Mniej dokładne. Użytkownicy nie mogą kierować obiektów tak dokładnie, jak w przypadku dotyku, w porównaniu z myszą lub piórem.

Dotyk zapewnia naturalne, rzeczywiste uczucie interakcji. Bezpośrednie manipulowanie i animacja zakończą to wrażenie, dając obiektom realistyczny, dynamiczny ruch i opinie. Rozważmy na przykład grę kartową. Nie tylko jest wygodne i łatwe przeciąganie kart za pomocą palca, doświadczenie bierze na wciągający rzeczywisty świat czuć, gdy możesz rzucić, ślizgać i obracać karty tak jak w przypadku fizycznego pokładu. A kiedy próbujesz przenieść kartę, której nie można przenieść, lepiej jest mieć opór karty, ale nie zapobiegać ruchowi i osadzać się w miejscu po zwolnieniu, aby wyraźnie wskazać, że akcja została rozpoznana, ale nie można tego zrobić.

Na szczęście, jeśli aplikacja jest już dobrze zaprojektowana, zapewnienie doskonałego środowiska dotykowego jest łatwe do wykonania. W tym celu dobrze zaprojektowany program:

• Zapewnia, że najważniejsze zadania mogą być wykonywane wydajnie przy użyciu palca (przynajmniej zadania, które nie obejmują dużo pisania lub szczegółowego manipulowania pikselami).
• Używa dużych kontrolek do obsługi dotykowej. Typowe kontrolki mają minimalny rozmiar 23x23 pikseli (13x13 DLU), a najczęściej używane kontrolki to co najmniej 40x40 pikseli (23x22 DLU). Aby uniknąć braku odpowiedzi, elementy interfejsu użytkownika powinny mieć między sobą co najmniej 5 pikseli (3 jednostki DLU). W przypadku innych kontrolek upewnij się, że mają co najmniej 23x23 pikseli (13x13 DLU) obiekt docelowy, nawet jeśli ich statyczny wygląd jest znacznie mniejszy. Zobacz ustalanie rozmiaru standardowej kontrolki.
• Obsługuje wprowadzanie myszy. Kontrolki interakcyjne mają jasne, widoczne przystępności. Obiekty mają standardowe zachowania dla standardowych interakcji myszy (pojedyncze i dwukrotne kliknięcie po lewej stronie, kliknięcie prawym przyciskiem myszy, przeciągnięcie i zatrzymanie).
• Obsługuje wprowadzanie klawiatury. Aplikacja udostępnia standardowe przypisania skrótów, szczególnie w przypadku poleceń nawigacji i edytowania, które mogą być również generowane za pomocą gestów dotykowych.
• Zapewnia dostępność. Używa automatyzacji interfejsu użytkownika lub usługi Microsoft Active Accessibility (MSAA), aby zapewnić programowy dostęp do interfejsu użytkownika dla technologii pomocniczych. Aplikacja odpowiednio reaguje na zmiany orientacji, motywu, ustawień regionalnych i metryk systemowych.
• Eliminuje niepotrzebne interakcje. Aby zapobiec utracie dostępu do danych lub systemu, użyj najbezpieczniejszych i najbezpieczniejszych wartości domyślnych. Jeśli bezpieczeństwo i zabezpieczenia nie są czynnikami, aplikacja wybiera najbardziej prawdopodobną lub wygodną opcję.
• Zapewnia odpowiednik dotyku dla aktywowania wskaźnika myszy. Nie polegaj na zatrzymaniu wskaźnika myszy jako jedynym sposobem wykonania akcji.
• Zapewnia natychmiastowe zastosowanie gestów. Zachowaj punkty kontaktowe pod palcami użytkownika płynnie przez cały gest, co zapewnia efekt mapowania gestu bezpośrednio na ruch użytkownika.
• Używa standardowych gestów, gdy jest to możliwe. Niestandardowe gesty tylko dla interakcji unikatowych dla aplikacji.
• Zapewnia, że niepożądane lub destrukcyjne polecenia można cofnąć lub poprawić. Przypadkowe akcje są bardziej prawdopodobne w przypadku korzystania z dotyku.

Wskazówki dotyczące wprowadzania danych dotykowych

Dzięki dotykowi aplikacja systemu Windows może używać gestów fizycznych do emulowania bezpośredniego manipulowania elementami interfejsu użytkownika.

Podczas projektowania aplikacji z obsługą dotykową należy wziąć pod uwagę następujące najlepsze rozwiązania:

Czas odpowiedzi jest niezbędny do tworzenia środowisk dotykowych, które czują się bezpośrednio i angażujące. Aby czuć się bezpośrednio, gesty muszą obowiązywać natychmiast, a punkty kontaktowe obiektu muszą pozostać pod palcami użytkownika płynnie w całym gestzie. Efekt wprowadzania dotykowego powinien być mapowy bezpośrednio na ruch użytkownika, więc na przykład jeśli użytkownik obraca palce 90 stopni, obiekt powinien również obracać 90 stopni. Każde opóźnienie, chybienie odpowiedzi, utrata kontaktu lub niedokładne wyniki niszczy postrzeganie bezpośredniej manipulacji, a także jakości.

Spójność jest niezbędna do tworzenia środowisk dotykowych, które czują się naturalne i intuicyjne. Gdy użytkownicy nauczą się standardowego gestu, oczekują, że gest będzie miał taki sam efekt we wszystkich aplikacjach. Aby uniknąć nieporozumień i frustracji, nigdy nie przypisz standardowych znaczeń do standardowych gestów. Zamiast tego użyj niestandardowych gestów na potrzeby interakcji unikatowych dla programu.

Następnie opiszemy język obsługi dotykowej systemu Windows, ale zanim przejdziemy dalej, oto krótka lista podstawowych terminów wprowadzania dotyku.

• gestu

  Gestem jest fizyczny akt lub ruch wykonywany na urządzeniu wejściowym (palcem, palcami, piórem/rysikiem, myszą itd.). Aby na przykład uruchomić, aktywować lub wywołać polecenie, użyj pojedynczego naciśnięcia palca dla urządzenia dotykowego lub touchpad (odpowiednik lewego kliknięcia za pomocą myszy, naciśnięcia piórem lub Enter na klawiaturze).

• manipulowania

  Manipulowanie jest natychmiastową reakcją w czasie rzeczywistym lub reakcją obiektu lub interfejsu użytkownika musi być gest. Na przykład gesty slajdu i przesunięcia zwykle powodują przejście elementu lub interfejsu użytkownika w jakiś sposób.

  Ostatecznym wynikiem manipulacji, sposobem manifestu obiektu na ekranie i w interfejsie użytkownika jest interakcja.

• interakcji

  Interakcje zależą od sposobu interpretowania manipulacji oraz polecenia lub akcji wynikającej z manipulacji. Na przykład obiekty można przenosić za pomocą gestów slajdu i przesunięcia, ale wyniki różnią się w zależności od tego, czy próg odległości jest przekraczany. Slajd może służyć do przeciągania obiektu lub przesuwania widoku, gdy szybkie przesunięcie może służyć do wybierania elementu lub wyświetlania paska aplikacji.

Język obsługi dotykowej systemu Windows

System Windows udostępnia zwięzły zestaw interakcji dotykowych, które są używane w całym systemie. Stosowanie tego języka dotykowego stale sprawia, że aplikacja jest znana temu, co już wiedzą użytkownicy. Zwiększa to pewność użytkownika, ułatwiając naukę i używanie aplikacji. Aby dowiedzieć się więcej na temat implementacji języka dotykowego, zobacz Gesty, manipulacje i interakcje.

naciśnij i przytrzymaj, aby dowiedzieć się,

Gest naciśnięcia i blokady wyświetla szczegółowe informacje lub wizualizacje nauczania (na przykład etykietkę narzędzia lub menu kontekstowe) bez zatwierdzania akcji lub polecenia. Przesuwanie jest nadal możliwe, jeśli podczas wyświetlania wizualizacji jest uruchamiany gest przesuwany.

Stan wejścia: jeden lub dwa palce w kontakcie z ekranem.

Ruch: Brak ruchu.

Stan wyjścia: Ostatni palec kończy gest.

Efekt: Wyświetl więcej informacji.

Gest naciśnięcia i wstrzymania.

aktywowania

Zatrzymanie wskaźnika myszy jest przydatną interakcją, ponieważ umożliwia użytkownikom uzyskiwanie dodatkowych informacji za pośrednictwem porad przed zainicjowaniem akcji. Wyświetlanie tych wskazówek sprawia, że użytkownicy czują się pewniej i zmniejszają błędy.

Niestety, wskaźnik aktywowania nie jest obsługiwany przez technologie dotykowe, więc użytkownicy nie mogą zatrzymać wskaźnika myszy podczas korzystania z palca. Prostym rozwiązaniem tego problemu jest pełne wykorzystanie wskaźnika myszy, ale tylko w sposób, który nie jest wymagany do wykonania akcji. W praktyce zwykle oznacza to, że akcja może być również wykonywana przez kliknięcie, ale niekoniecznie w taki sam sposób.

W tym przykładzie użytkownicy mogą zobaczyć bieżącą datę, umieszczając wskaźnik myszy lub klikając.

naciśnij, aby akcji podstawowej

Naciśnięcie elementu wywołuje jego akcję podstawową, na przykład uruchomienie aplikacji lub wykonanie polecenia.

Stan wejścia: jeden palec w kontakcie z ekranem lub touchpadem i podniesiony przed progiem czasu dla naciśnięcia i interakcji blokady.

Ruch: Brak ruchu.

Stan wyjścia: Palec kończy gest.

Efekt: uruchom aplikację lub wykonaj polecenie.

Gest naciśnięcia.

przesuwanie

Slajd jest używany głównie do przesuwania interakcji, ale może być również używany do przenoszenia (gdzie przesuwanie jest ograniczone do jednego kierunku), rysowanie lub pisanie. Slajd może być również używany do kierowania małych, gęsto zapakowanych elementów przez szorowanie (przesuwając palcem nad powiązanymi obiektami, takimi jak przyciski radiowe).

Stan wejścia: jeden lub dwa palce w kontakcie z ekranem.

Ruch: Przeciągnij, z dodatkowymi palcami pozostałymi w tej samej pozycji względem siebie.

Stan wyjścia: Ostatni palec kończy gest.

Efekt: Przenieś obiekt bazowy bezpośrednio i natychmiast, gdy palce się przesuwają. Pamiętaj, aby zachować punkt kontaktu pod palcem przez cały gest.

Gest patelni.

Szybkie przesunięcie, aby wybrać, uruchomić polecenie i przenieść

Przesuwając palec w niewielkiej odległości, prostopadły do kierunku przesuwania (gdzie przesuwanie jest ograniczone do jednego kierunku), wybiera obiekty na liście lub siatce. Wyświetla pasek aplikacji z odpowiednimi poleceniami, gdy obiekty są zaznaczone.

Stan wejścia: co najmniej jeden palce dotykają ekranu.

Ruch: Przeciągnij krótką odległość i podnieś przed progiem odległości dla interakcji ruchu.

Stan wyjścia: Ostatni palec kończy gest.

Efekt: obiekt źródłowy jest zaznaczony lub przeniesiony albo jest wyświetlany pasek aplikacji. Pamiętaj, aby zachować punkt kontaktu pod palcem przez cały gest.

Gest przesunięcia.

Szczypta i rozciągnij, aby powiększyć

Gesty szczypta i rozciągnięcia są używane do trzech typów interakcji: zoom optyczny, zmiana rozmiaru i powiększenie semantyczne.

Powiększenie optyczne dostosowuje poziom powiększenia całego obszaru zawartości, aby uzyskać bardziej szczegółowy widok zawartości. Z kolei zmiana rozmiaru jest techniką dostosowywania względnego rozmiaru jednego lub większej liczby obiektów w obszarze zawartości bez zmieniania widoku na obszar zawartości.

Powiększenie semantyczne to technika zoptymalizowana pod kątem dotyku do prezentowania ustrukturyzowanych danych lub zawartości w jednym widoku (na przykład struktury folderów komputera, biblioteki dokumentów lub albumu fotograficznego) bez konieczności przesuwania, przewijania lub kontrolek widoku drzewa. Powiększenie semantyczne zapewnia dwa różne widoki tej samej zawartości, umożliwiając wyświetlanie większej ilości szczegółów w miarę powiększania i pomniejszania szczegółów.

Stan wejścia: dwa palce w kontakcie z ekranem w tym samym czasie.

Ruch: Palce przesuwają się od siebie (rozciągnięcie) lub razem (szczypta) wzdłuż osi.

Stan wyjścia: Każdy palec kończy gest.

Efekt: Powiększ obiekt bazowy bezpośrednio i natychmiast, gdy palce oddzielają się lub zbliżają się na osi. Pamiętaj, aby zachować punkty kontaktowe pod palcem przez cały gest.

Gest powiększenia.

Obracanie

Obracanie z co najmniej dwoma palcami powoduje obracanie obiektu. Obracanie samego urządzenia w celu obrócenia całego ekranu.

Stan wejścia: dwa palce w kontakcie z ekranem w tym samym czasie.

Ruch: Jeden lub oba palce obracają się wokół drugiej, przesuwając prostopadłą do linii między nimi.

Stan wyjścia: Każdy palec kończy gest.

Efekt: Obróć obiekt bazowy o taką samą ilość, jak palce obrócone. Pamiętaj, aby zachować punkty kontaktowe pod palcem przez cały gest.

Gest rotacji.

Rotacja ma sens tylko dla niektórych typów obiektów, więc nie jest mapowany na interakcję systemu Windows.

Rotacja jest często wykonywana inaczej przez różne osoby. Niektórzy wolą obracać jeden palec wokół palca przestawnego, podczas gdy inni wolą obracać obie palce w okrągłym ruchu. Większość ludzi używa kombinacji tych dwóch, z jednym palcem poruszającym się więcej niż drugi. Podczas gdy gładka rotacja do dowolnego kąta jest najlepszą interakcją, w wielu kontekstach, takich jak wyświetlanie zdjęć, najlepiej jest rozłożyć się do najbliższej rotacji 90 stopni, gdy użytkownik odpuszcza. W edycji zdjęć można użyć małej rotacji, aby wyprostować zdjęcie.

Szybkie przesunięcie z krawędzi dla poleceń aplikacji

Przesuwanie palcem w niewielkiej odległości od dolnej lub górnej krawędzi ekranu powoduje wyświetlenie poleceń aplikacji na pasku aplikacji.

Stan wejścia: Co najmniej jeden palec dotyka ramki.

Ruch: Przeciągnij krótką odległość na ekran i windę.

Stan wyjścia: Ostatni palec kończy gest.

Efekt: zostanie wyświetlony pasek aplikacji.

Szybkie przesunięcie z gestu krawędzi.

Deweloperzy: aby uzyskać więcej informacji, zobacz DIRECTMANIPULATION_CONFIGURATION wyliczenie.

Kontrolowanie użycia

W tym miejscu udostępniamy pewne wskazówki dotyczące optymalizowania kontrolek pod kątem użycia dotyku.

• Użyj typowych kontrolek. Większość typowych kontrolek jest przeznaczona do obsługi dobrego środowiska dotykowego.
• Wybierz kontrolki niestandardowe przeznaczone do obsługi dotyku. Aby obsługiwać specjalne środowiska programu, mogą być potrzebne kontrolki niestandardowe. Wybierz kontrolki niestandardowe, które:
  • Rozmiar może być wystarczająco duży, aby ułatwić kierowanie i manipulowanie.
  • Podczas manipulowania, przesuwania i reagowania na sposób, w jaki obiekty w świecie rzeczywistym poruszają się i reagują, na przykład poprzez rozmach i tarcie.
  • Są forgiving, umożliwiając użytkownikom łatwe poprawianie błędów.
  • Są wyrozumiały niedokładności za pomocą klikania i przeciągania. Obiekty, które są porzucane w pobliżu ich miejsca docelowego, powinny należeć do właściwego miejsca.
  • Mieć jasne opinie wizualne, gdy palec jest nad kontrolką.
• Użyj kontrolek ograniczonych. Ograniczone kontrolki, takie jak listy i suwaki, przeznaczone do łatwego kierowania dotykiem, mogą być lepsze niż nieobsługiwane kontrolki, takie jak pola tekstowe, ponieważ zmniejszają potrzebę wprowadzania tekstu.
• Podaj odpowiednie wartości domyślne. Wybierz najbezpieczniejszą opcję (aby zapobiec utracie dostępu do danych lub systemu) i najbezpieczniejszą domyślnie. Jeśli bezpieczeństwo i zabezpieczenia nie są czynnikami, wybierz najbardziej prawdopodobną lub wygodną opcję, eliminując w ten sposób niepotrzebne interakcje.
• Podaj automatyczne uzupełnianie tekstu. Zawiera listę najbardziej prawdopodobnych wartości lub ostatnio wejściowych wartości, aby znacznie ułatwić wprowadzanie tekstu.
• W przypadku ważnych zadań używających wielokrotnego wyboru, jeśli zamiast tego jest używana standardowa lista wyboru wielokrotnego wyboru, podaj opcję użycia listy pól wyboru.

Określanie rozmiarów kontrolek i określania wartości docelowych dotyku

Ze względu na dużą powierzchnię palca, małe kontrolki, które są zbyt blisko siebie, mogą być trudne do dokładnego kierowania.

Ogólnie rzecz biorąc, rozmiar kontrolki 23x23 pikseli (13x13 DLU) to dobry minimalny interakcyjny rozmiar sterowania dla dowolnego urządzenia wejściowego. Natomiast kontrolki pokrętła o rozmiarze 15x11 pikseli są zbyt małe, aby efektywnie używać z dotykiem.

Należy pamiętać, że minimalny rozmiar jest naprawdę oparty na obszarze fizycznym, a nie na metrykach układu, takich jak piksele lub jednostki DLU. Badania wskazują, że minimalny obszar docelowy do wydajnej, dokładnej interakcji za pomocą palca wynosi 6x6 milimetrów (mm). Ten obszar przekłada się na metryki układu w następujący sposób:

Czcionka	Milimetrach	Piksele względne	Jednostki DLL
9-punktowy interfejs użytkownika Segoe	6x6	23x23	13x13
8 punktów Tahoma	6x6	23x23	15x14

Ponadto badania pokazują, że minimalny rozmiar 10x10 mm (około 40x40 pikseli) zapewnia lepszą szybkość i dokładność, a także czuje się bardziej komfortowo dla użytkowników. W praktyce użyj tego większego rozmiaru dla przycisków poleceń używanych w przypadku najważniejszych lub często używanych poleceń.

Celem nie jest posiadanie gigantycznych kontrolek, tylko tych, które są łatwo używane z dotykiem.

W tym przykładzie program Microsoft Word używa przycisków większych niż 10x10 mm dla najważniejszych poleceń.

Ta wersja kalkulatora używa przycisków większych niż 10x10 mm dla najczęściej używanych poleceń.

Nie ma idealnego rozmiaru dla celów dotykowych. Różne rozmiary działają w różnych sytuacjach. Akcje z poważnymi konsekwencjami (takimi jak usuwanie i zamykanie) lub często używane akcje powinny używać dużych celów dotykowych. Rzadko używane akcje z niewielkimi konsekwencjami mogą używać małych obiektów docelowych.

wytyczne dotyczące rozmiaru docelowego dla kontrolek niestandardowych

Wytyczne dotyczące rozmiaru	Opis
zalecany minimalny rozmiar	7x7 mm: zalecany minimalny rozmiar 7x7 mm jest dobrym minimalnym rozmiarem, jeśli dotknięcie niewłaściwego celu można poprawić w jednym lub dwóch gestach lub w ciągu pięciu sekund. Wypełnienie między miejscami docelowymi jest równie ważne, jak rozmiar docelowy.
zalecany rozmiar	Gdy dokładność ma znaczenie Zamknięcie, usunięcie i inne działania z poważnymi konsekwencjami nie mogą pozwolić sobie na przypadkowe naciśnięcia. Użyj elementów docelowych 9x9 mm, jeśli dotknięcie nieprawidłowego obiektu docelowego wymaga więcej niż dwóch gestów, pięciu sekund lub dużej zmiany kontekstu w celu poprawienia.
minimalny rozmiar	Kiedy po prostu nie zmieści się Jeśli znajdziesz się zatrzasając rzeczy, aby dopasować, to dobrze jest użyć 5x5 mm obiektów docelowych, o ile dotknięcie niewłaściwego celu można poprawić za pomocą jednego gestu. Użycie 2 mm dopełnienia między celami jest niezwykle ważne w tym przypadku.

wytyczne dotyczące rozmiaru docelowego dla typowych kontrolek

• W przypadku typowych kontrolek użyj zalecanych rozmiarów kontrolek. Zalecany rozmiar kontrolki spełnia minimalny rozmiar 23x23 pikseli (13x13 DLU), z wyjątkiem pól wyboru i przycisków radiowych (ich szerokość tekstu kompensuje nieco), kontrolek spin (które nie są użyteczne z dotykiem, ale są nadmiarowe) i rozdzielacze.

  

  Zalecane rozmiary kontrolek można łatwo dotknąć.

• W przypadku przycisków poleceń używanych w przypadku najważniejszych lub często używanych poleceń użyj minimalnego rozmiaru 40x40 pikseli (23x22 DLU) zawsze, gdy jest to praktyczne. Daje to lepszą szybkość i dokładność, a także czuje się bardziej komfortowo dla użytkowników.

  

  Zawsze, gdy jest to praktyczne, używaj większych przycisków poleceń dla ważnych lub często używanych poleceń.

• Dla innych kontrolek:

  • Użyj większych elementów docelowych kliknięć. W przypadku małych kontrolek ustaw rozmiar docelowy większy niż statycznie widoczny element interfejsu użytkownika. Na przykład przyciski ikony 16x16 pikseli mogą mieć przyciski 23x23 pikseli, a elementy tekstowe mogą mieć prostokąty zaznaczenia 8 pikseli szersze niż tekst i 23 piksele wysokości.

    Poprawny:

    

    Błędny:

    

    Poprawny:

    

    We właściwych przykładach obiekty docelowe kliknięć są większe niż statycznie widoczne elementy interfejsu użytkownika.

  • Użyj nadmiarowych elementów docelowych kliknięć. Dopuszczalne jest, aby obiekty docelowe kliknięć było mniejsze niż minimalny rozmiar, jeśli ta kontrolka ma nadmiarowe funkcje.

    Na przykład trójkąty stopniowego ujawniania używane przez kontrolkę widoku drzewa są tylko 6x9 pikseli, ale ich funkcjonalność jest nadmiarowa z skojarzonymi etykietami elementów.

    

    Trójkąty widoku drzewa są zbyt małe, aby można je było łatwo dotknąć, ale są one nadmiarowe w funkcjach z większymi skojarzonymi etykietami.

    Uwzględnianie metryk systemowych. Nie rachuj rozmiarów kodu twardego. W razie potrzeby użytkownicy mogą zmieniać metryki systemowe lub dpi, aby zaspokoić ich potrzeby. Należy jednak traktować to jako ostateczność, ponieważ użytkownicy nie powinni zwykle dostosowywać ustawień systemowych, aby można było używać interfejsu użytkownika.

    

    W tym przykładzie zmieniono metryki systemowe dla wysokości menu.

Edytowanie tekstu

Edytowanie tekstu jest jedną z najtrudniejszych interakcji podczas korzystania z palca. Używanie kontrolek ograniczonych, odpowiednich wartości domyślnych i automatycznego uzupełniania eliminuje lub zmniejsza potrzebę wprowadzania tekstu. Jeśli jednak aplikacja obejmuje edytowanie tekstu, możesz zwiększyć produktywność użytkowników, automatycznie powiększając interfejs użytkownika danych wejściowych do 150 procent domyślnie, gdy jest używany dotyk.

Na przykład program poczty e-mail może wyświetlać interfejs użytkownika w normalnym rozmiarze dotykowym, ale powiększa interfejs użytkownika wejściowego do 150 procent, aby tworzyć wiadomości.

E-mail

W tym przykładzie interfejs użytkownika danych wejściowych jest powiększany do 150 procent.

Układ i odstępy między kontrolkami

Odstęp między kontrolkami jest znaczącym czynnikiem umożliwiającym łatwe dotykanie kontrolek. Określanie wartości docelowej jest szybsze, ale mniej precyzyjne w przypadku używania palca jako urządzenia wskazującego, co powoduje, że użytkownicy częściej dotykają poza zamierzonym celem. Gdy kontrolki interakcyjne są umieszczane bardzo blisko siebie, ale w rzeczywistości nie dotykają, użytkownicy mogą klikać nieaktywne miejsce między kontrolkami. Ponieważ kliknięcie nieaktywnego miejsca nie ma wyników ani opinii wizualnych, użytkownicy często nie są pewni, co poszło nie tak.

Dynamiczne dostosowywanie odstępów na podstawie używanego urządzenia wejściowego. Jest to szczególnie przydatne w przypadku przejściowego interfejsu użytkownika, takiego jak menu i wysuwane.

Podaj co najmniej 5 pikseli (3 jednostki DLU) odstępu między docelowymi regionami kontrolek interakcyjnych. Jeśli małe kontrolki są zbyt blisko rozmieszczone, użytkownik musi nacisnąć z dokładnością, aby uniknąć naciśnięcia nieprawidłowego obiektu.

Ułatwiaj rozróżnianie kontrolek w grupach przy użyciu więcej niż zalecane odstępy pionowe między kontrolkami. Na przykład przyciski radiowe o wysokości 19 pikseli są krótsze niż minimalny zalecany rozmiar 23 pikseli. Jeśli masz dostępne miejsce w pionie, można osiągnąć mniej więcej taki sam efekt jak zalecane ustalanie rozmiaru, dodając dodatkowe 4 piksele odstępów do standardowego 7 pikseli.

Poprawny:

Lepszy:

W lepszym przykładzie dodatkowe odstępy między przyciskami radiowymi ułatwiają ich rozróżnianie.

Mogą wystąpić sytuacje, w których podczas korzystania z dotyku pożądane byłoby dodatkowe odstępy, ale nie w przypadku korzystania z myszy lub klawiatury. W takich przypadkach należy używać tylko bardziej przestronnego projektu, gdy akcja jest inicjowana za pomocą dotyku.

Wybierz układ, który umieszcza kontrolki w pobliżu miejsca, w którym najprawdopodobniej będą używane. Zachowaj interakcje zadań w małym obszarze, jeśli to możliwe, i znajdź kontrolki w pobliżu miejsca, w którym najprawdopodobniej będą używane. Unikaj długich ruchów dłoni, szczególnie w przypadku typowych zadań i przeciągania.

Należy wziąć pod uwagę, że bieżąca lokalizacja wskaźnika jest najbliżej miejsca docelowego, co sprawia, że jest to proste do uzyskania. W związku z tym menu kontekstowe korzystają z prawa Fitts, podobnie jak mini-paski narzędzi używane przez pakiet Microsoft Office.

Unikaj umieszczania małych kontrolek w pobliżu krawędzi aplikacji lub wyświetlacza. Małe obiekty docelowe w pobliżu krawędzi mogą być trudne do dotknięcia (ramki ekranu mogą zakłócać gesty krawędzi). Aby upewnić się, że kontrolki są łatwe do kierowania w przypadku zmaksymalizowania okna, należy je umieścić co najmniej 23x23 pikseli (13x13 DLU) lub umieścić je z dala od krawędzi okna.

Użyj zalecanego odstępu. Zalecane odstępy są przyjazne dla dotyku. Jeśli jednak aplikacja może korzystać z większych rozmiarów i odstępów, należy rozważyć zalecane ustalanie rozmiaru i odstępy, jeśli jest to konieczne.

Podaj co najmniej 5 pikseli (3 jednostki DLU) odstępu między interaktywnymi kontrolkami. Zapobiega to nieporozumieniu, gdy użytkownicy naciskają poza zamierzony cel.

Rozważ dodanie więcej niż zalecane odstępy pionowe w grupach kontrolek, takich jak łącza poleceń, pola wyboru i przyciski radiowe, a także między grupami. Dzięki temu łatwiej je rozróżniać.

Rozważ dodanie więcej niż zalecane odstępy pionowe dynamicznie po zainicjowaniu akcji za pomocą dotyku. Dzięki temu obiekty są łatwiejsze do odróżnienia, ale bez zajmowania większej ilości miejsca podczas korzystania z klawiatury lub myszy. Zwiększ odstępy o jedną trzecią normalnego rozmiaru lub co najmniej 8 pikseli.

W tym przykładzie listy szybkiego paska zadań systemu Windows 7 są bardziej przestronne w przypadku korzystania z dotyku.

Interakcja

Użycie prawidłowych kontrolek umożliwia tylko część sposobu korzystania z aplikacji zoptymalizowanej pod kątem dotyku. Należy również wziąć pod uwagę ogólny model interakcji, który obsługuje te kontrolki. Oto kilka wskazówek, które pomogą Ci w tym.

• Ustaw wskaźnik aktywowania na nadmiarowy. Wskaźnik aktywowania nie jest obsługiwany przez większość technologii dotykowych, więc użytkownicy z takimi ekranami dotykowymi nie mogą wykonywać żadnych zadań wymagających najechania kursorem.

• W przypadku aplikacji, które wymagają wprowadzania tekstu, w pełni zintegruj funkcję klawiatury dotykowej przez:

  • Podanie odpowiednich wartości domyślnych dla danych wejściowych użytkownika.
  • Dostarczanie sugestii autouzupełnianych, jeśli jest to konieczne.

  Nuta

  Deweloperzy: aby uzyskać więcej informacji na temat integracji klawiatury dotykowej, zobacz ITextInputPanel.

• Zezwalaj użytkownikom na powiększanie interfejsu użytkownika zawartości, jeśli program ma zadania wymagające edytowania tekstu. Rozważ automatyczne powiększanie do 150 procent w przypadku użycia dotyku.

• Zapewnia płynne, dynamiczne przesuwanie i powiększanie wszędzie tam, gdzie jest to konieczne. Szybko rysuj ponownie po przesuwaniu lub powiększaniu, aby zachować czas reakcji. Jest to konieczne, aby bezpośrednia manipulacja czuła się naprawdę bezpośrednia.

• Podczas przesuwania lub powiększania upewnij się, że punkty kontaktowe pozostają pod palcem przez cały gest. W przeciwnym razie przesuwanie lub powiększanie jest trudne do kontrolowania.

• Ponieważ gesty są zapamiętane, przypisz im znaczenie spójne w aplikacjach. Nie należy podawać różnych znaczeń gestom ze stałymi semantykami. Zamiast tego użyj odpowiedniego gestu specyficznego dla aplikacji.

Wybaczenie

Bezpośrednie manipulowanie sprawia, że dotyk naturalny, ekspresyjny, wydajny i angażujący. Jednak tam, gdzie istnieje bezpośrednia manipulacja, może istnieć przypadkowa manipulacja i dlatego potrzeba przebaczenia.

Przebaczenie jest zdolność do odwrócenia lub poprawienia niepożądanej akcji łatwo. Doświadczenie dotykowe jest forgiving, dostarczając cofnij, dając dobre opinie wizualne, mając wyraźną fizyczną separację między często używanymi poleceniami i destrukcyjnymi poleceniami i umożliwiając użytkownikom łatwe poprawianie błędów. Związane z przebaczeniem uniemożliwia niepożądane działania w pierwszej kolejności, co można zrobić za pomocą ograniczonych kontrolek i potwierdzeń dla ryzykownych działań lub poleceń, które mają niezamierzone konsekwencje.

• Podaj polecenie Cofnij. Najlepiej jest podać prosty sposób cofnięcia wszystkich poleceń, ale aplikacja może mieć pewne polecenia, których efekt nie może być cofniętą.

• Za każdym razem, gdy jest to praktyczne, prześlij dobrą opinię na palcem w dół, ale nie podejmuj działań, aż palcem w górę. Dzięki temu użytkownicy mogą poprawić błędy przed ich dokonaniem.

• Za każdym razem, gdy jest to praktyczne, umożliwia użytkownikom łatwe poprawianie błędów. Jeśli akcja ma wpływ na palcem w górę, pozwól użytkownikom poprawić błędy, przesuwając palcem nadal w dół.

• Za każdym razem, gdy jest to praktyczne, wskazuje, że bezpośrednie manipulowanie nie może być wykonywane przez opór ruchu. Zezwól na to, aby ruch miał miejsce, ale jeśli obiekt zostanie zwolniony, wyraźnie wskaże, że akcja została rozpoznana, ale nie można jej wykonać.

• Mają wyraźne rozdzielenie fizyczne między często używanymi poleceniami i destrukcyjnymi poleceniami. W przeciwnym razie użytkownicy mogą przypadkowo dotykać destrukcyjnych poleceń. Polecenie jest uważane za destrukcyjne, jeśli jego efekt jest powszechny i albo nie można go łatwo cofnąć lub efekt nie jest natychmiast zauważalny.

• Potwierdź polecenia dla ryzykownych akcji lub poleceń, które mają niezamierzone konsekwencje. W tym celu użyj okna dialogowego potwierdzenia.

• Rozważ potwierdzenie wszelkich innych akcji, które użytkownicy mają tendencję do przypadkowego wykonywania podczas korzystania z dotyku, i które są niezauważone lub są trudne do cofnięcia. Zwykle są one nazywane rutynowymi potwierdzeniami i są zniechęcane w oparciu o założenie, że użytkownicy często nie wydają takich poleceń przypadkowo za pomocą myszy lub klawiatury. Aby zapobiec niepotrzebnym potwierdzeniem, należy przedstawić te potwierdzenia tylko wtedy, gdy polecenie zostało zainicjowane za pomocą dotyku.

  Rutynowe potwierdzenia są akceptowalne w przypadku interakcji, które użytkownicy często wykonują przypadkowo przy użyciu dotyku.

  Deweloperzy: możesz odróżnić zdarzenia myszy i zdarzenia dotykowe przy użyciu interfejsu API INPUT_MESSAGE_SOURCE.