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:
- Guida introduttiva: Puntatori
- Guida introduttiva: Gesti e manipolazioni DOM
- Guida introduttiva: Gesti statici
- Guida introduttiva: Gesti di manipolazione
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.
Esecuzione di comandi
Il gesto tocco viene usato per richiamare un'azione principale, ad esempio per avviare un'applicazione o eseguire un 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.
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.
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.
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.
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.
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.
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.
Argomenti correlati
Informazioni concettuali
Risposta alle interazioni degli utenti
Progettazione delle interazioni tramite tocco
Riferimenti
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)