Linee guida per il cross-slide

API importanti

• CrossSliding
• CrossSlideThresholds
• Windows.UI.Input

Usare il cross-slide per supportare la selezione con le interazioni gesto di scorrimento rapido e trascinamento (spostamento) con il gesto scorrimento con un dito.

Procedure rischiose e procedure consigliate

• Usare il cross-slide per elenchi o raccolte che scorrono in una singola direzione.
• Usare il cross-slide per la selezione di elementi quando si usa l'interazione con il tocco per un altro scopo.
• Non usare il cross-slide per aggiungere elementi a una coda.

Indicazioni aggiuntive sull'uso

La selezione e il trascinamento sono possibili solo all'interno di un'area di contenuto di cui è possibile fare una panoramica in una sola direzione (verticale o orizzontale). Affinché una o l'altra interazione funzioni, è necessario bloccare una direzione di panoramica ed eseguire il gesto nella direzione perpendicolare alla direzione di panoramica.

Qui viene mostrato come selezionare e trascinare un oggetto tramite cross-slide. L'immagine a sinistra mostra come selezionare un elemento se il gesto scorrimento rapido con un dito non supera una soglia di distanza prima che il contatto venga sollevato e l'oggetto rilasciato. L'immagine a destra mostra un gesto scorrimento con un dito che supera una soglia di distanza e determina il trascinamento dell'oggetto.

Le soglie di distanza usate dall'interazione cross-slide sono illustrate nel diagramma seguente.

Per preservare la funzionalità di panoramica, è necessario superare una piccola soglia di 2,7 mm (circa 10 pixel alla risoluzione di destinazione) prima che venga attivata un'interazione di selezione o trascinamento. Questa piccola soglia consente al sistema di distinguere il cross-slide dalla panoramica e il gesto tocco dal cross-slide e dalla panoramica.

Questa immagine mostra come un utente tocca un elemento nell'interfaccia utente, ma sposta il dito in basso verso il contatto. Senza soglia, l'interazione verrebbe interpretata come un cross-slide a causa del movimento verticale iniziale. Con la soglia, il movimento viene interpretato correttamente come panoramica orizzontale.

Ecco alcune linee guida da considerare per includere la funzionalità cross-slide nell'app.

Usare il cross-slide per elenchi o raccolte che scorrono in una singola direzione. Per altre informazioni, vedere Aggiunta di controlli ListView.

Nota Nei casi in cui sia possibile eseguire una panoramica dell'area di contenuto in due direzioni, ad esempio Web browser o lettori per e-book, è necessario usare l'interazione pressione prolungata a tempo per richiamare il menu di scelta rapida per oggetti quali immagini e collegamenti ipertestuali.

Elenco bidimensionale di una panoramica orizzontale. Trascinare verticalmente per selezionare o spostare un elemento.

Elenco unidimensionale di una panoramica verticale. Trascinare orizzontalmente per selezionare o spostare un elemento.

Selezionare:

La selezione è il contrassegno, senza avvio o attivazione, di uno o più oggetti. Questa azione è analoga a un singolo clic del mouse o alla pressione del tasto Maiusc + clic del mouse su uno o più oggetti.

La selezione cross-slide si ottiene toccando un elemento e rilasciandolo dopo una breve interazione di trascinamento. Questo metodo di selezione consente di evitare sia la modalità di selezione dedicata sia l'interazione pressione prolungata a tempo richieste da altre interfacce tattili e non è in conflitto con l'interazione tattile per l'attivazione.

Oltre alla soglia di distanza, la selezione cross-slide è vincolata a un'area di soglia di 90°, come illustrato nel diagramma seguente. Se l'oggetto viene trascinato all'esterno di questa area, non viene selezionato.

L'interazione cross-slide è integrata da un'interazione pressione prolungata a tempo, nota anche come interazione "self-revealing". Questa interazione supplementare attiva un'animazione che indica quale azione può essere eseguita sull'oggetto. Per altre informazioni sull'interfaccia utente di risoluzione ambiguità, vedere Linee guida per il feedback visivo.

Le schermate seguenti illustrano il funzionamento dell'animazione "self-revealing".

1. Premere e tenere premuto per avviare l'animazione per l'interazione "self-revealing". Lo stato selezionato dell'elemento determina quanto rivelato dall'animazione: un segno di spunta se non selezionato e nessun segno di spunta se selezionato.

   

2. Selezionare l'elemento usando il gesto scorrimento rapido (verso l'alto o verso il basso).

   

3. L'elemento è ora selezionato. Eseguire l'override del comportamento di selezione usando il gesto scorrimento per spostare l'elemento.

   

Usare un solo tocco per la selezione nelle applicazioni in cui è l'unica azione primaria. L'animazione "self-revealing" cross-slide viene visualizzata per risolvere le ambiguità di questa funzionalità dall'interazione tocco standard per l'attivazione e lo spostamento.

Basket di selezione

Il basket di selezione è una rappresentazione dinamica e visivamente distinta di elementi selezionati dalla raccolta o dall'elenco primario nell'applicazione. Questa funzionalità è utile per tenere traccia degli elementi selezionati e deve essere usata da applicazioni in cui:

• Gli elementi possono essere selezionati da più posizioni.
• È possibile selezionare molti elementi.
• Un'azione o comando si basa sull'elenco di selezione.

Il contenuto del basket di selezione persiste tra le azioni e i comandi. Ad esempio, se si seleziona una serie di fotografie da una raccolta, si applica una correzione di colore a ogni fotografia e si condividono in qualche modo le fotografie, gli elementi rimangono selezionati.

Se in un'applicazione non viene usato alcun basket di selezione, cancellare la selezione corrente dopo un'azione o un comando. Ad esempio, se si seleziona un brano da una playlist e lo si valuta, è necessario cancellare la selezione.

È necessario cancellare la selezione corrente anche quando non si usa alcun basket di selezione ed è attivato un altro elemento nell'elenco o nella raccolta. Ad esempio, se si seleziona un messaggio in arrivo, il riquadro anteprima viene aggiornato. Quindi, se si seleziona un secondo messaggio in arrivo, la selezione del messaggio precedente viene annullata e il riquadro anteprima viene aggiornato.

Code

Una coda non è equivalente all'elenco del basket di selezione e non deve essere considerata come tale. Le principali distinzioni includono:

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

Per questi motivi, l'interazione di selezione cross-slide non deve essere usata per aggiungere elementi a una coda. Gli elementi devono invece essere aggiunti a una coda attraverso un'azione di trascinamento.

Trascinamento

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

Se è necessario spostare più oggetti, consentire agli utenti di selezionare più elementi e di trascinarli contemporaneamente.

Articoli correlati

Esempi

• Esempio di input di base
• Esempio di input a bassa latenza
• Esempio di modalità di interazione utente
• Esempio di indicatori visivi di stato attivo

Esempi di archivio

• Input: esempio di eventi di input utente XAML
• Input: esempio di funzionalità del dispositivo
• Input: esempio di hit test tocco
• Esempio di scorrimento, panoramica e zoom XAML
• Input: esempio di input penna semplificato
• Input: esempio di manipolazioni e movimenti
• Esempio di input tocco DirectX