Gesti, manipolazioni e interazioni (HTML)

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Con le interazioni tramite tocco, la tua app può tradurre e usare i gesti fisici per emulare la manipolazione diretta degli elementi dell'interfaccia utente.

Le interazioni tocco offrono un'esperienza reale naturale quando gli utenti interagiscono con gli elementi sullo schermo. L'interazione con un oggetto attraverso la relativa finestra di proprietà o un'altra finestra di dialogo è, invece, considerata una manipolazione indiretta. Windows supporta inoltre le interazioni tocco tra dispositivi e modalità di input, ad esempio tocco, mouse e penna.

Le API della piattaforma Windows Runtime supportano le interazioni dell'utente tramite tre tipi di eventi di interazione: puntatore, gesto e manipolazione.

  • Gli eventi puntatore vengono usati per ottenere informazioni di contatto di base, ad esempio posizione e tipo di dispositivo, e informazioni estese, quali pressione e geometria di contatto, oltre che per supportare altre interazioni complesse.
  • Gli eventi gesto vengono usati per gestire interazioni con un solo dito statiche, quali il tocco e la pressione prolungata (il doppio tocco e il tocco con due dita derivano da questi gesti di base).
  • Gli eventi di manipolazione vengono usati per interazioni dinamiche multitocco, come l'avvicinamento e l'allontanamento delle dita, e per interazioni che usano dati relativi a inerzia e velocità, come la panoramica, lo scorrimento, lo zoom e la rotazione. Nota  Le informazioni fornite dagli eventi di manipolazione non identificano l'interazione. Specificano invece dati di input come posizione, delta di conversione e velocità. Questi dati vengono quindi usati per determinare la manipolazione ed eseguire l'interazione.  

Per altre informazioni, vedi le seguenti guide introduttive:

Verranno poi descritte le relazioni tra gesti, manipolazioni e interazioni.

Gesti

Un gesto è un atto fisico o un movimento eseguito su o tramite il dispositivo di input (dito, dita, penna/stilo, mouse e così via). Ad esempio, per avviare, attivare o richiamare un comando userai il tocco con un solo dito nel caso di un dispositivo di tocco o touchpad (equivalente a un clic con il pulsante sinistro del mouse, un tocco con la penna o la pressione del tasto INVIO sulla tastiera).

Ecco l'elenco dei gesti di base utilizzati per manipolare l'interfaccia utente ed eseguire un'interazione.

Nome Tipo Descrizione
Toccare Movimento statico Un dito tocca lo schermo e si solleva.
Tenere premuto Movimento statico Un dito tocca lo schermo e rimane in posizione.
Scorrere Movimento di manipolazione Uno o più dita toccano lo schermo e si muovono nella stessa direzione.
Scorrere rapidamente Movimento di manipolazione Uno o più dita toccano lo schermo e si muovono per una breve distanza nella stessa direzione.
Ruotare Movimento di manipolazione Uno o più dita toccano lo schermo e si muovono ad arco in senso orario o antiorario.
Avvicinare le dita Movimento di manipolazione Uno o più dita toccano lo schermo e si avvicinano tra di loro.
Allontanare le dita Movimento di manipolazione Uno o più dita toccano lo schermo e si allontanano tra di loro.

 

Manipolazioni

Una manipolazione è la reazione o la risposta immediata e continua di un oggetto o dell'interfaccia utente a un gesto. I gesti scorrimento e scorrimento rapido, ad esempio, provocano in genere lo spostamento di un oggetto o dell'interfaccia utente.

Il risultato finale di una manipolazione, ovvero il modo in cui si manifesta tramite l'oggetto sullo schermo e nell'interfaccia utente, si chiama interazione.

Interazioni

Le interazioni dipendono dal modo in cui viene interpretata una manipolazione e dal comando o dall'azione che genera. Gli oggetti possono, ad esempio, essere spostati tramite gesti scorrimento e scorrimento rapido, ma i risultati cambiano a seconda del fatto che venga superata o meno una soglia di distanza. Lo scorrimento può essere usato per trascinare un oggetto o eseguire una panoramica della visualizzazione, lo scorrimento rapido per selezionare un elemento o visualizzare il controllo AppBar.

La sezione seguente descrive alcune interazioni comuni.

Apprendimento

Il gesto pressione prolungata consente di visualizzare informazioni dettagliate o elementi visivi a scopo didattico, ad esempio una descrizione comandi o un menu di scelta rapida, senza dover eseguire un'azione o un comando specifico. Se durante la visualizzazione dell'elemento visivo si avvia un gesto di scorrimento è possibile eseguire una panoramica. Per altre info, vedi Linee guida per il feedback visivo.

Interazione di apprendimento

Esecuzione di comandi

Il gesto tocco viene usato per richiamare un'azione principale, ad esempio per avviare un'applicazione o eseguire un comando.

Interazione di comando

Panoramica

Il gesto scorrimento viene usato principalmente per interazioni di tipo panoramica, ma può essere usato anche per operazioni di spostamento, disegno o scrittura. La panoramica è una tecnica per lo spostamento su brevi distanze e per l'esplorazione di piccoli insiemi di contenuto all'interno di una singola visualizzazione, quale la struttura delle cartelle di un computer, una raccolta di documenti o un album fotografico, ottimizzata per il tocco. Equivalente allo scorrimento tramite mouse o tastiera, la panoramica è necessaria solo quando la quantità di contenuto nella visualizzazione è tale da superare l'area visibile. Per altre info, vedi Linee guida per la panoramica.

Interazione di panoramica

Zoom

I movimenti di avvicinamento e allontanamento delle dita sono usati per tre tipi di interazioni: zoom ottico, ridimensionamento e zoom semantico.

Zoom ottico e ridimensionamento

Lo zoom ottico regola il livello di ingrandimento dell'intera area di contenuto per fornire una visualizzazione più dettagliata del contenuto. Il ridimensionamento, invece, è una tecnica per regolare la dimensione relativa di uno o più oggetti contenuti all'interno di un'area senza modificare la visualizzazione nell'area di contenuto. Le due immagini di esempio in alto mostrano un zoom ottico, mentre le due in basso mostrano il ridimensionamento di un rettangolo sullo schermo senza modificare la dimensione degli altri oggetti. Per altre info, vedi Linee guida per lo zoom ottico e il ridimensionamento.

Interazione di zoom ottico

Interazione di ridimensionamento

Zoom semantico

Lo zoom semantico è una tecnica ottimizzata per il tocco che consente di presentare ed esplorare contenuti o dati strutturati all'interno di una singola visualizzazione, come la struttura delle cartelle di un computer, una libreria di documenti o un album fotografico, senza dover ricorrere ai controlli di panoramica, scorrimento o visualizzazione ad albero. Lo zoom semantico fornisce due differenti visualizzazioni dello stesso contenuto, offrendoti una visualizzazione più o meno dettagliata con lo zoom avanti o lo zoom indietro. Per altre informazioni, vedi Linee guida per lo zoom semantico.

Interazione di zoom semantico

Rotazione

Il gesto di rotazione simula la rotazione di un pezzo di carta su una superficie piana. Per eseguire l'interazione, posiziona due dita sull'oggetto e ruota la mano nella direzione desiderata facendo girare un dito intorno a un altro o entrambe le dita intorno a un punto centrale. Puoi usare due dita della stessa mano o un dito per parte. Per altre informazioni, vedi Linee guida per la rotazione.

Interazione di rotazione

Selezione e spostamento

I gesti scorrimento e scorrimento rapido sono usati in una manipolazione di scorrimento trasversale: un movimento perpendicolare alla direzione panoramica dell'area del contenuto. Questo movimento viene interpretato come una selezione o, se si supera una soglia di distanza, come un'interazione di spostamento (trascinamento). Lo schema seguente illustra questi processi. Per altre info, vedi Linee guida per lo scorrimento trasversale.

Interazioni di selezione e trascinamento

Visualizzazione di barre dei comandi

Il gesto scorrimento rapido viene usato per visualizzare varie barre dei comandi o la schermata di accesso.

Facendo scorrere rapidamente un dito dal bordo inferiore o superiore dello schermo, vengono visualizzati i comandi dell'app. Usa la AppBar per visualizzare i comandi dell'app.

Visualizzare i comandi dell'app

Lo scorrimento dal bordo destro mostra i comandi di sistema, dal bordo sinistro le app usate di recente, dal bordo superiore a quello inferiore i comandi di ancoraggio e chiusura.

Visualizzare i comandi di sistema

Argomenti correlati

Informazioni concettuali

Risposta alle interazioni degli utenti

Progettazione delle interazioni tramite tocco

Riferimenti

Windows.UI.Core

Windows.UI.Input

Windows.UI.Xaml.Input

Esempi (DOM)

Esempio di controlli HTML di scorrimento, panoramica e zoom

Input: Esempio di gestione degli eventi relativi al puntatore DOM

Input: Esempio di gesti istanziabili

Esempi (API di app di Windows Store)

Input: gesti e manipolazioni con GestureRecognizer

Input: Esempio di eventi di input utente XAML

Esempio di scorrimento, panoramica e zoom con XAML

Esempi (DirectX)

Esempio di input tramite tocco DirectX

Input: Esempio di manipolazioni e gesti (C++)