Wskazówki dotyczące przesuwania krzyżowego

ważne interfejsy API

Użyj przesuwu krzyżowego do obsługi zaznaczenia za pomocą gestu przesunięcia oraz interakcji przenoszenia przy użyciu gestu przesuwania.

Co robić, a czego unikać

  • Użyj przesuwu poprzecznego dla list lub kolekcji, które przewijają się w jednym kierunku.
  • Użyj slajdu krzyżowego do zaznaczenia elementu, gdy interakcja naciśnięcia jest używana do innego celu.
  • Nie używaj przesuwania w poprzek do dodawania elementów do kolejki.

Dodatkowe wskazówki dotyczące użycia

Zaznaczenie i przeciąganie jest możliwe tylko w obrębie obszaru zawartości, który można przesuwać w jednym kierunku (pionowym lub poziomym). Aby każda interakcja działała, należy zablokować jeden kierunek przesuwania, a gest musi być wykonywany w kierunku prostopadłym do kierunku przesuwania.

W tym miejscu przedstawiono wybieranie i przeciąganie obiektu przy użyciu slajdu krzyżowego. Na obrazie po lewej stronie pokazano, jak element jest zaznaczony, jeśli gest przesunięcia nie przekroczy progu odległości przed zakończeniem kontaktu i zwolnieniem obiektu. Obraz po prawej stronie przedstawia gest przesunięcia, który przekracza minimalną odległość i powoduje przeciągnięcie obiektu.

diagram przedstawiający procesy wybierania i przeciągania i upuszczania.

Na poniższym diagramie przedstawiono odległości progowe używane przez interakcję między slajdami.

zrzut ekranu przedstawiający procesy wybierania i przeciągania i upuszczania.

Aby zachować funkcjonalność przesuwania, należy przekroczyć mały próg 2,7 mm (około 10 pikseli w rozdzielczości docelowej), zanim zostanie aktywowana interakcja zaznaczenia lub przeciągania. Ten mały próg pomaga systemowi odróżnić przesuwanie krzyżowe od przesuwania, a także pomaga zapewnić, że gest naciśnięcia różni się zarówno od przesuwania krzyżowego, jak i przesuwania.

Na tym obrazie pokazano, jak użytkownik dotyka elementu w interfejsie użytkownika, ale w momencie dotyku nieznacznie przesuwa palcem w dół. Przy braku progu interakcja byłaby interpretowana jako przesunięcie poprzeczne ze względu na początkowy ruch pionowy. Po osiągnięciu progu ruch jest poprawnie interpretowany jako przesuwanie poziome.

zrzut ekranu przedstawiający próg rozróżniania zaznaczenia lub przeciągania i upuszczania.

Poniżej przedstawiono kilka wskazówek, które należy wziąć pod uwagę podczas dołączania funkcji przesuwania krzyżowego w aplikacji.

Użyj przesuwu poprzecznego dla list lub kolekcji, które przewijają się w jednym kierunku. Aby uzyskać więcej informacji, zobacz Dodawanie kontrolek ListView.

Nuta W przypadkach, gdy obszar zawartości można przesuwać w dwóch kierunkach, takich jak przeglądarki internetowe lub czytniki elektroniczne, interakcja z naciśnięciem i wstrzymaniem powinna być używana do wywoływania menu kontekstowego dla obiektów, takich jak obrazy i hiperlinki.

przesuwanie w poziomie, lista dwuwymiarowa

Przewijana poziomo dwuwymiarowa lista. Przeciągnij w pionie, aby wybrać lub przenieść element.

przesuwanie w pionie, jednowymiarowa lista

Lista jednowymiarowa z możliwością pionowego przewijania. Przeciągnij w poziomie, aby wybrać lub przenieść element.

Wybieranie

Zaznaczenie to oznaczanie bez uruchamiania lub aktywowania jednego lub więcej obiektów. Ta akcja jest analogiczna do jednego kliknięcia myszą lub naciśnięcia Shift i myszy na co najmniej jednym obiekcie.

Wybór między slajdami jest osiągany przez dotknięcie elementu i zwolnienie go po krótkiej interakcji przeciągania. Ta metoda wyboru rezygnuje zarówno z dedykowanego trybu wyboru, jak i z interakcji przytrzymania wymaganej przez inne interfejsy dotykowe i nie powoduje konfliktu z interakcją dotknięcia na potrzeby aktywacji.

Oprócz progu odległości wybór między slajdami jest ograniczony do obszaru progu 90°, jak pokazano na poniższym diagramie. Jeśli obiekt jest przeciągany poza ten obszar, nie jest zaznaczony.

diagram przedstawiający obszar progu wyboru.

Interakcja między slajdami jest uzupełniana przez interakcję z naciśnięciem i wstrzymaniem, nazywaną również interakcją "samoujawniającą się". Ta dodatkowa interakcja aktywuje animację, która wskazuje, jaką akcję można wykonać na obiekcie. Aby uzyskać więcej informacji na temat interfejsu użytkownika do rozwiązywania niejasności, zobacz Wytyczne dotyczące informacji zwrotnej wizualnej.

Na poniższych zrzutach ekranu pokazano, jak działa animacja samoodkrywająca się.

  1. Naciśnij i przytrzymaj, aby zainicjować animację na potrzeby samoodkrywczej interakcji. Wybrany stan elementu ma wpływ na to, co zostało ujawnione przez animację: znaczek wyboru, jeśli element nie jest zaznaczony, i brak znaczka, jeśli element jest zaznaczony.

    zrzut ekranu przedstawiający stan niezaznaczony.

  2. Wybierz element za pomocą gestu przesunięcia (w górę lub w dół).

    zrzut ekranu przedstawiający animację do wyboru.

  3. Element jest teraz zaznaczony. Zastąp działanie zaznaczenia, używając gestu przesunięcia, aby przenieść element.

    zrzut ekranu przedstawiający animację przeciągania i upuszczania.

Użyj pojedynczego naciśnięcia do wyboru w aplikacjach, gdzie jest to jedyna akcja podstawowa. Animacja samoodkrywająca się podczas przewijania slajdów jest wyświetlana w celu odróżnienia tej funkcji od standardowej interakcji dotykowej do aktywacji i nawigacji.

Koszyk wyboru

Koszyk wyboru to wizualnie odrębna i dynamiczna reprezentacja elementów wybranych z listy podstawowej lub kolekcji w aplikacji. Ta funkcja jest przydatna do śledzenia wybranych elementów i powinna być używana przez aplikacje, w których:

  • Elementy można wybrać z wielu lokalizacji.
  • Można wybrać wiele elementów.
  • Akcja lub polecenie opiera się na liście wyboru.

Zawartość koszyka wyboru utrzymuje się niezależnie od operacji i poleceń. Jeśli na przykład wybierzesz serię zdjęć z galerii, zastosuj korektę kolorów do każdej fotografii i udostępnij zdjęcia w jakiś sposób, elementy pozostaną zaznaczone.

Jeśli w aplikacji nie jest używany koszyk zaznaczenia, bieżące zaznaczenie powinno zostać wyczyszczone po wykonaniu akcji lub polecenia. Na przykład, jeśli wybierzesz piosenkę z listy odtwarzania i ocenisz ją, wybór powinien zostać usunięty.

Również powinno być wyczyszczone bieżące zaznaczenie, gdy nie jest używany koszyk zaznaczenia i gdy inny element na liście lub w kolekcji jest aktywowany. Jeśli na przykład wybierzesz komunikat skrzynki odbiorczej, okienko podglądu zostanie zaktualizowane. Następnie, jeśli wybierzesz drugą wiadomość skrzynki odbiorczej, wybór poprzedniej wiadomości zostanie anulowany, a okienko podglądu zostanie zaktualizowane.

Queues

Kolejka nie jest równoważna liście koszyków wyboru i nie powinna być traktowana jako taka. Podstawowe różnice obejmują:

  • Lista elementów w koszyku wyboru jest tylko reprezentacją wizualną; elementy w kolejce są zbierane z myślą o konkretnej akcji.
  • Elementy mogą być reprezentowane tylko raz w koszyku wyboru, ale wiele razy w kolejce.
  • Kolejność elementów w koszyku wyborów reprezentuje kolejność wyborów. Kolejność elementów w kolejce jest bezpośrednio powiązana z funkcjami.

Z tych powodów interakcja wyboru krzyżowego nie powinna być używana do dodawania elementów do kolejki. Zamiast tego elementy należy dodać do kolejki poprzez przeciąganie.

Drag

Przeciągnij, aby przenieść jeden lub więcej obiektów z jednej lokalizacji do innej.

Jeśli trzeba przenieść więcej niż jeden obiekt, pozwól użytkownikom wybrać wiele elementów, a następnie przeciągnąć wszystko jednocześnie.

Samples

Próbki archiwalne

 

  • Last updated on