Linee guida per il cross-slide

Applies to Windows and Windows Phone

Usa il cross-slide per supportare la selezione con il gesto scorrimento rapido e il trascinamento (spostamento) con il gesto scorrimento.

Per una dimostrazione pratica di questa funzionalità, vedi gli argomenti della serie Funzionalità delle app dall'inizio alla fine:  Interazione dell'utente: input tocco... e oltre.

Cosa fare e cosa non fare

  • Usa il cross-slide per elenchi o raccolte che scorrono in un'unica direzione.
  • Usa il cross-slide per la selezione di elementi quando l'interazione di tipo tocco è usata per altri scopi.
  • Non usare il cross-slide per l'aggiunta di elementi a una coda.

Istruzioni aggiuntive per l'uso

Selezione e trascinamento sono possibili solo all'interno di un'area di contenuto di cui è possibile eseguire la panoramica in una direzione (orizzontalmente o verticalmente). Perché le interazioni funzionino, una delle direzioni della panoramica deve essere bloccata e il gesto deve essere eseguito perpendicolarmente alla direzione della panoramica.

Qui di seguito dimostriamo la selezione e il trascinamento di un oggetto con lo scorrimento trasversale. L'immagine a sinistra mostra come viene selezionato un elemento se un gesto di scorrimento rapido non supera una soglia di distanza prima che il contatto venga sollevato e l'oggetto rilasciato. L'immagine a destra mostra un gesto di scorrimento che supera una soglia di distanza e causa lo spostamento dell'oggetto.

Diagramma che illustra i processi di selezione e trascinamento.

Le distanze soglia usate dall'interazione di scorrimento trasversale sono illustrate nel diagramma seguente.

Cattura di schermata che illustra i processi di selezione e trascinamento.

Per mantenere la funzionalità di panoramica è necessario superare una piccola soglia pari a 2,7 mm (circa 10 pixel alla risoluzione di destinazione) prima che venga attivata un'interazione di selezione o di trascinamento. Questa piccola soglia aiuta il sistema a distinguere tra cross-slide e panoramica e inoltre garantisce che un gesto tocco venga distinto sia dal cross-slide che dalla panoramica.

Questa immagine mostra il modo in cui l'utente tocca un elemento dell'interfaccia, spostando leggermente il dito verso il basso non appena tocca lo schermo. Senza soglia, l'interazione verrebbe interpretata come scorrimento trasversale a causa del movimento verticale iniziale. Con la soglia, il movimento viene interpretato correttamente come panoramica orizzontale.

Cattura di schermata che illustra la soglia per evitare l'ambiguità tra selezione e trascinamento.

Ecco alcune linee guida di cui tenere conto quando includi la funzionalità di scorrimento trasversale nelle tue app.

Usa lo scorrimento trasversale per elenchi o raccolte che scorrono in un'unica direzione. Per altre informazioni, vedi l'argomento relativo all'aggiunta di controlli ListView.

Nota  Nei casi in cui è possibile eseguire la panoramica dell'area del contenuto in due direzioni, ad esempio nei Web browser o nei lettori elettronici, per richiamare il menu contestuale per oggetti come immagini e collegamenti ipertestuali deve essere usata l'interazione di pressione prolungata a tempo.

Panoramica orizzontale, elenco a due dimensioniPanoramica verticale, elenco a una dimensione
Elenco a due dimensioni con panoramica orizzontale. Trascinando verticalmente è possibile selezionare o spostare un elemento.Elenco a una dimensione con panoramica verticale. Trascinando orizzontalmente è possibile selezionare o spostare un elemento.

 

Selezione

La selezione consiste nel contrassegnare, senza avviare o attivare, uno o più oggetti. Questa azione è analoga a un singolo clic del mouse, o alla pressione del tasto MAIUSC mentre si fa clic con il mouse, su uno o più oggetti.

La selezione tramite scorrimento trasversale viene ottenuta toccando un elemento e rilasciandolo dopo una breve interazione di trascinamento. Questo metodo di selezione esonera sia dalla modalità di selezione dedicata che dall'interazione di pressione prolungata a tempo necessarie nelle altre interfacce a tocco e non entra in conflitto con l'interazione tramite tocco per l'attivazione.

Oltre che dalla soglia di distanza, la selezione tramite scorrimento trasversale è limitata a un'area di soglia di 90°, come illustrato nel diagramma seguente. Se l'oggetto viene trascinato al di fuori di quest'area, non viene selezionato.

Diagramma che illustra l'area di soglia della selezione.

L'interazione di scorrimento trasversale è integrata da un'interazione di pressione prolungata a tempo, anche detta interazione "autorivelante". Questa interazione supplementare attiva un'animazione che indica quale azione può essere eseguita sull'oggetto. Per altre informazioni sull'interfaccia utente per la rimozione delle ambiguità, vedi Linee guida per il feedback visivo.

Le catture di schermata seguenti illustrano in che modo funziona l'animazione autorivelante.

  1. Tieni premuto per avviare l'animazione dell'interazione autorivelante. Lo stato selezionato dell'elemento influisce su quanto viene rivelato dall'animazione, ossia un segno di spunta se non è selezionato e nessun segno di spunta se è selezionato.

    Cattura di schermata che illustra uno stato non selezionato.
  2. Seleziona l'elemento usando il gesto scorrimento rapido (verso l'alto o verso il basso).

    Cattura di schermata che illustra l'animazione per la selezione.
  3. L'elemento è ora selezionato. Ignora il comportamento di selezione usando il gesto scorrimento per spostare l'elemento.

    Cattura di schermata che illustra l'animazione per il trascinamento.

Usa il tocco singolo per la selezione in applicazioni in cui è l'unica azione principale. L'animazione autorivelante di scorrimento trasversale viene visualizzata per rimuovere l'ambiguità tra questa funzionalità e l'interazione di tocco standard per l'attivazione e lo spostamento.

Carrello selezioni

Il carrello selezioni è una rappresentazione dinamica visivamente distinta degli elementi selezionati nella raccolta o nell'elenco principale nell'applicazione. Questa funzionalità è utile per tenere traccia degli elementi selezionati e deve essere usata nelle applicazioni in cui:

  • È possibile selezionare gli elementi da più posizioni.
  • È possibile selezionare più elementi.
  • Un'azione o un comando dipende dall'elenco di selezione.

Il contenuto del carrello selezioni persiste in seguito ad azioni e comandi. Se, ad esempio, selezioni una serie di fotografie in una raccolta, applichi una correzione del colore a ogni fotografia e condividi in qualche modo le fotografie, gli elementi rimangono selezionati.

Se in un'applicazione non viene usato un carrello selezioni, la selezione corrente deve essere cancellata dopo un'azione o un comando. Se, ad esempio, selezioni una canzone da una playlist e la valuti, la selezione deve essere cancellata.

La selezione corrente deve essere cancellata anche quando non viene usato un carrello selezioni e viene attivato un altro elemento dell'insieme o della raccolta. Se, ad esempio, selezioni un messaggio della posta in arrivo, il riquadro di anteprima viene aggiornato. Se quindi selezioni un secondo messaggio della posta in arrivo, la selezione del messaggio precedente viene cancellata e il riquadro di anteprima viene aggiornato.

Code

Una coda non equivale all'elenco del carrello selezioni e non deve essere trattata come tale. Le differenze principali includono:

  • L'elenco di elementi nel carrello selezioni è solo una rappresentazione visiva. Gli elementi di una coda sono assemblati per un'azione specifica.
  • Gli elementi possono essere rappresentati una sola volta nel carrello selezioni ma più volte in una coda.
  • L'ordine degli elementi nel carrello selezioni rappresenta l'ordine della selezione. L'ordine degli elementi in una coda è direttamente correlato alla funzionalità.

Per questi motivi, l'interazione di selezione tramite scorrimento trasversale non deve essere usata per aggiungere elementi a una coda. Gli elementi devono invece essere aggiunti a una coda tramite un'azione di trascinamento.

Trascinamento

Usa il trascinamento per spostare uno o più oggetti da una posizione a un'altra.

Se bisogna spostare più di un oggetto, consenti agli utenti di selezionare più elementi e di trascinarli tutti contemporaneamente.

Argomenti correlati

Per progettisti
Linee guida per interazioni utente comuni
Linee guida per la panoramica
Progettazione delle interazioni tramite tocco
Per sviluppatori (HTML)
Guida introduttiva: Puntatori
Guida introduttiva: Gesti e manipolazioni DOM
Guida introduttiva: Gesti statici
Guida introduttiva: Gesti di manipolazione
GestureRecognizer.CrossSliding
Per sviluppatori (XAML)
Guida introduttiva: Input tocco
Guida introduttiva: Gestione di input puntatore
GestureRecognizer.CrossSliding
Per sviluppatori (app di Windows Runtime in DirectX con C++)
Risposta all'input tramite tocco (DirectX e C++)
GestureRecognizer.CrossSliding
Esempi
Input: Esempio di gesti e manipolazioni con GestureRecognizer
Esempio di scorrimento, panoramica e zoom HTML
Input: Esempio di gesti istanziabili (con MSGesture)
Input: Esempio di eventi di input utente XAML
Esempio di scorrimento, panoramica e zoom con XAML
Esempio di input tramite tocco DirectX

 

 

Mostra:
© 2014 Microsoft