Wskazówki dotyczące przesuwania

Przesuwanie lub przewijanie umożliwia użytkownikom nawigowanie w jednym widoku, aby wyświetlić zawartość widoku, która nie mieści się w obszarze widoku. Przykłady widoków obejmują strukturę folderów komputera, bibliotekę dokumentów lub album fotograficzny.

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

Zalecenia i zakazy

Wskaźniki przesuwania i paski przewijania

• Przed załadowaniem zawartości do aplikacji upewnij się, że jest możliwe przesuwanie/przewijanie.

• Wyświetlaj wskaźniki przesuwu i paski przewijania, aby zapewnić wskazówki dotyczące lokalizacji i rozmiaru. Ukryj je, jeśli udostępniasz niestandardową funkcję nawigacji.

  Uwaga W przeciwieństwie do standardowych pasków przewijania, wskaźniki przesuwania są wyłącznie informacyjne. Nie są one narażone na urządzenia wejściowe i nie mogą być manipulowane w żaden sposób.

   

Przesuwanie pojedynczej osi (jednowymiarowe przepełnienie)

• Użyj przesuwania wzdłuż jednej osi dla regionów zawartości, które wykraczają poza jedną granicę widoku (pionową lub poziomą).

  • Pionowe przesuwanie dla jednowymiarowej listy elementów.
  • Poziome przesuwanie siatki elementów.

• Nie należy używać obowiązkowych punktów przyciągania przy jednoosiowym przesuwaniu, jeśli użytkownik musi być w stanie zatrzymywać się i przesuwać między punktami przyciągania. Obowiązkowe punkty przyciągania gwarantują, że użytkownik zatrzyma się w punkcie przyciągania. Zamiast tego użyj punktów przyciągania zbliżeniowego.

Swobodne przewijanie (dwuwymiarowe przesuwanie)

• Użyj dwukierunkowego przesuwania dla regionów zawartości, które wykraczają poza granice widoku (pionowe i poziome).

  • Zastąp domyślne zachowanie szyn i użyj swobodnego przesuwania dla niestrukturalnej zawartości, gdzie użytkownik prawdopodobnie będzie poruszać się w wielu kierunkach.

• Swobodne przesuwanie jest zwykle odpowiednie do nawigowania w obrębie obrazów lub map.

Widok stronicowany

• Użyj obowiązkowych punktów przyciągania, gdy zawartość składa się z dyskretnych elementów lub chcesz wyświetlić cały element. Może to obejmować strony książki lub magazynu, kolumny elementów lub pojedynczych obrazów.

  • Punkt przyciągania należy umieścić na każdej granicy logicznej.
  • Każdy element powinien mieć rozmiar lub być skalowany, aby dopasować go do widoku.

Punkty logiczne i kluczowe

• Użyj punktów przylegania, jeśli istnieją kluczowe punkty lub miejsca logiczne w treści, przy których użytkownik prawdopodobnie się zatrzyma. Na przykład nagłówek sekcji.

• Jeśli zdefiniowano ograniczenia lub granice maksymalnego i minimalnego rozmiaru, użyj opinii wizualnej, aby pokazać, kiedy użytkownik osiągnie lub przekroczy te granice.

Łączenie osadzonej lub zagnieżdżonej zawartości

• Do obsługi zawartości tekstowej i opartej na siatce należy używać przesuwania jednoosiowych (zazwyczaj poziomych) i układów kolumn. W takich przypadkach zawartość zwykle zawija się i przepływa naturalnie z kolumny do kolumny, zapewniając spójne i przyjazne dla użytkownika środowisko w aplikacjach systemu Windows.

• Nie używaj osadzonych regionów z możliwością przesuwania do wyświetlania tekstów lub list elementów. Ponieważ wskaźniki przesuwania i paski przewijania są wyświetlane tylko wtedy, gdy kontakt wejściowy zostanie wykryty w regionie, nie jest to intuicyjne ani łatwo odkrywalne doświadczenie użytkownika.

• Nie należy łączyć ani umieszczać jednego obszaru przesuwalnego w innym obszarze przesuwalnym, jeśli oba obszary przesuwają się w tym samym kierunku, jak pokazano na ilustracji. Może to spowodować, że obszar nadrzędny jest przesuwany przypadkowo, gdy zostanie osiągnięta granica obszaru podrzędnego. Rozważ ustawienie osi przesuwania prostopadłej.

  

Dodatkowe wskazówki dotyczące użycia

Przesuwanie za pomocą dotyku, za pomocą gestu przesunięcia lub slajdu z co najmniej jednym palcem, jest jak przewijanie myszą. Interakcja przesuwania jest najbardziej podobna do obracania kółka myszy lub przesuwania suwaka przewijania, zamiast klikania paska przewijania. O ile interfejs API nie wprowadza rozróżnienia ani interfejs użytkownika Windows specyficzny dla urządzenia tego nie wymaga, obie interakcje określamy po prostu jako przesuwanie.

Windows 10 Fall Creators Update — zmiana zachowania Domyślnie zamiast zaznaczenia tekstu aktywne pióro teraz przewija/przesuwa w aplikacjach systemu Windows (na przykład touch, touchpad i pasywne pióro). Jeśli Twoja aplikacja zależy od poprzedniego zachowania, możesz zastąpić funkcję przewijania piórem i przywrócić poprzednie zachowanie. Aby uzyskać szczegółowe informacje, zobacz temat Dokumentacja interfejsu API dla klasy ScrollViewer.

W zależności od urządzenia wejściowego użytkownik przesuwa się w regionie, który można przesuwać przy użyciu jednego z następujących elementów:

• Mysz, touchpad lub aktywne pióro/rysik, aby kliknąć strzałki przewijania, przeciągnąć pole przewijania lub kliknąć na pasku przewijania.
• Przycisk koła myszy do emulacji przeciągania paska przewijania.
• Przyciski rozszerzone (XBUTTON1 i XBUTTON2), jeśli są obsługiwane przez mysz.
• Klawisze strzałek na klawiaturze w celu emulacji przeciągania pola przewijania lub klawiszy stron w celu emulacji kliknięcia w obrębie paska przewijania.
• Ekran dotykowy, touchpad lub pasywne pióro/rysik do przesuwania palców w żądanym kierunku.

Przesuwanie polega na powolnym przesuwaniu palców w kierunku przewijania. Powoduje to relację jeden do jednego, w której zawartość przesuwa się z taką samą prędkością i odległością jak palce. Przesuwanie, które polega na szybkim przesuwaniu i podnoszeniu palców, powoduje stosowanie następującej fizyki do animacji panoramowania.

• Deceleracja (bezwładność): Podnoszenie palców powoduje, że przesuwanie zaczyna się spowalniać. Jest to podobne do ślizgania się do zatrzymania na śliskiej nawierzchni.
• Absorpcja: Podczas zwalniania pęd przesuwania może wywołać niewielki efekt odbicia, jeśli zostanie osiągnięty punkt zatrzymania lub granica obszaru treści.

Typy panoramowania

System Windows obsługuje trzy typy przesuwania:

• Pojedyncza oś - przesuwanie jest obsługiwane tylko w jednym kierunku (poziomym lub pionowym).
• Szyny - przesuwanie jest obsługiwane we wszystkich kierunkach. Jednak gdy użytkownik przekroczy próg odległości w określonym kierunku, przesuwanie jest ograniczone do tej osi.
• Tryb swobodny — przesuwanie jest obsługiwane we wszystkich kierunkach.

Panoramowanie interfejsu użytkownika

Doświadczenie interakcji przy przesuwaniu jest unikatowe dla urządzenia wejściowego, a jednocześnie oferuje podobną funkcjonalność.

Istnieją dwa tryby wyświetlania panoramy na podstawie wykrytego urządzenia wejściowego.

• Wskaźniki przewijania dla ekranu dotykowego.
• Paski przewijania dla innych urządzeń wejściowych, w tym myszy, touchpada, klawiatury i rysika.

Uwaga Wskaźniki przesuwania są widoczne tylko wtedy, gdy kontakt dotykowy znajduje się w regionie z możliwością przesuwania. Podobnie pasek przewijania jest widoczny tylko wtedy, gdy kursor myszy, kursor piórem/rysikiem lub fokus klawiatury znajduje się w regionie przewijania.

Wskaźniki przesuwania Wskaźniki przesuwania są podobne do pola przewijania na pasku przewijania. Wskazują one proporcję wyświetlanej zawartości do całkowitego obszaru przesuwalnego oraz względne położenie wyświetlanej zawartości w obszarze przesuwalnym.

Na poniższym diagramie przedstawiono dwa obszary z możliwością przesuwania o różnych długościach i ich wskaźniki przesuwania.

Zachowania przesuwaniaPunkty przyciągania Przesuwanie za pomocą gestu wprowadza zachowanie inercji w interakcji, gdy kontakt dotykowy zostaje przerwany. W przypadku bezwładności zawartość nadal przesuwa się do momentu osiągnięcia pewnego progu odległości bez bezpośredniego wkładu użytkownika. Użyj punktów przyciągania, aby zmodyfikować to zachowanie inercji.

Punkty przyciągania określają logiczne punkty zatrzymania w zawartości aplikacji. Kognitywne punkty przyciągania działają jako mechanizm stronicowania dla użytkownika i minimalizuj zmęczenie przed nadmiernym przesuwaniem lub przesuwaniem w dużych regionach z możliwością przesuwania. Dzięki nim można obsługiwać nieprecyzyjne dane wejściowe użytkownika i upewnić się, że w oknie widoku jest wyświetlany określony podzbiór zawartości lub kluczowych informacji.

Istnieją dwa typy punktów przyciągania:

• Zbliżenie — po podniesieniu kontaktu punkt przyciągania zostaje wybrany, jeśli inercja zatrzymuje się w granicach progu odległości punktu przyciągania. Przesuwanie nadal może zatrzymać się między punktami przyciągania zbliżeniowego.
• Obowiązkowe — wybrany punkt przyciągania to ten, który bezpośrednio poprzedza lub następuje po ostatnim punkcie przyciągania przekroczonym przed zakończeniem kontaktu (w zależności od kierunku i prędkości gestu). Przesuwanie musi zatrzymać się w obowiązkowym punkcie przyciągania.

Przesuwanie punktów zatrzymywania jest przydatne w przypadku aplikacji, takich jak przeglądarki internetowe i albumy fotograficzne, które emulują zawartość z podziałem na strony lub mają logiczne grupowania elementów, które mogą być dynamicznie przegrupowane w celu dopasowania do obszaru widoku lub ekranu.

Na poniższych diagramach pokazano, jak przesuwanie do określonego punktu i zwalnianie powoduje automatyczne przesuwanie zawartości do lokalizacji logicznej.

Rails Zawartość może być szersza i wyższa niż wymiary i rozdzielczość urządzenia wyświetlającego. Z tego powodu dwuwymiarowe przesuwanie (poziome i pionowe) jest często konieczne. Szyny usprawniają doświadczenie użytkownika w tych przypadkach, podkreślając przesuwanie wzdłuż osi ruchu (pionowej lub poziomej).

Na poniższym diagramie przedstawiono koncepcję szyn.

Łączenie osadzonej lub zagnieżdżonej zawartości

Gdy użytkownik osiągnie limit powiększenia lub przewijania elementu, który został zagnieżdżony w innym elemercie powiększalnym lub przewijanym, możesz określić, czy ten element nadrzędny powinien kontynuować operację powiększania lub przewijania rozpoczętą w elemecie podrzędnym. Jest to nazywane powiększaniem lub łańcuchem przewijania.

Łączenie służy do przesuwania w obrębie jednowymiarowego obszaru zawartości, który zawiera jeden lub więcej jednowymiarowych lub dowolnych obszarów przesuwania, gdy dotyk kontaktowy znajduje się w jednym z tych obszarów podrzędnych. Gdy granica przesuwania regionu podrzędnego zostanie osiągnięta w określonym kierunku, przesuwanie jest następnie aktywowane w regionie nadrzędnym w tym samym kierunku.

Gdy obszar przewijalny jest zagnieżdżony w innym obszarze przewijalnym, należy zapewnić wystarczającą ilość miejsca między kontenerem a osadzoną zawartością. Na poniższych diagramach jeden obszar, który można przesuwać, znajduje się wewnątrz innego przesuwanego obszaru, a każdy z nich przesuwa się w kierunku prostopadłym. Jest dużo miejsca dla użytkowników, aby panoramować w każdym regionie.

Bez wystarczającej ilości miejsca, jak pokazano na poniższym diagramie, osadzony region z możliwością przesuwania może zakłócać przesuwanie w kontenerze i powodować niezamierzone przesuwanie w co najmniej jednym regionie z możliwością przesuwania.

Te wskazówki są również przydatne w przypadku aplikacji, takich jak albumy zdjęć lub aplikacje mapowania, które obsługują nieograniczone przesuwanie w obrębie pojedynczego obrazu lub mapy, a także obsługę przesuwania na jednej osi w albumie (do poprzednich lub następnych obrazów) lub obszaru szczegółów. W aplikacjach, które udostępniają obszar szczegółów lub opcji odpowiadający dowolnemu przesuwaniu obrazu lub mapy, zalecamy, aby układ strony rozpoczynał się od obszaru szczegółów i opcji, ponieważ nieograniczone przesuwanie obrazu lub mapy może zakłócać przesuwanie do obszaru szczegółów.

Powiązane artykuły

• Niestandardowe interakcje użytkowników
• Optymalizacja ListView i GridView
• Dostępność klawiatury

Próbki

• Podstawowy przykład danych wejściowych
• Przykład danych wejściowych o małym opóźnieniu
• Przykład trybu interakcji użytkownika
• Przykładowe wizualizacje stanu fokusu

Przykłady archiwum

• Dane wejściowe: przykładowe zdarzenia wejściowe użytkownika XAML
• Dane wejściowe: przykład możliwości urządzenia
• Dane wejściowe: przykład testu trafień dotykowych
• Przykład XAML na przewijanie, przesuwanie i powiększanie
• Dane wejściowe: uproszczona próbka tuszu
• Dane wejściowe: próbka manipulacji i gestów
• Przykład obsługi dotyku DirectX