Risposta alle interazioni degli utenti (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 ]
Informazioni sulla piattaforma di interazione utente, le origini di input (tocco, touchpad, mouse, penna/stilo e tastiera), le modalità (tastiera virtuale, rotellina del mouse, penna, gomma e così via) e le interazioni utente supportate da Windows, dalle app di Windows Store e dalle app di Windows Phone.
Aggiornamenti per Windows 8.1: In Windows 8.1 vengono introdotti diversi aggiornamenti e miglioramenti alle API di input tramite puntatore. Per altre informazioni, vedi Modifiche delle API per Windows 8.1.
Verrà spiegato in che modo le funzionalità di input e di interazione di base vengono fornite gratuitamente con i controlli incorporati dei framework dei linguaggi (app che usano JavaScript, app che usano C++, C# o Visual Basic e app che usano DirectX con C++), in che modo i modelli di interazione sono condivisi tra i framework dei linguaggi e in che modo personalizzare l'esperienza di interazione utente.
Mediante linee guida, procedure consigliate ed esempi, verrà spiegato come sfruttare appieno le funzionalità di interazione di Windows per creare app con esperienze utente intuitive, coinvolgenti e Immersive.
Suggerimento Le informazioni in questo argomento sono specifiche per lo sviluppo di app con JavaScript.
Per le app che usano C++, C# o Visual Basic, vedi Risposta alle interazioni degli utenti (XAML).
Per informazioni sulle app che usano DirectX in C++, vedi Risposta alle interazioni degli utenti (DirectX e C++).
Prerequisiti: Se non hai familiarità con lo sviluppo di app mediante JavaScript, puoi leggere gli argomenti seguenti per scoprire di più sulle tecnologie descritte in questa guida.
Creare la prima app di Windows Store in JavaScript
Roadmap per app di Windows Store scritte in JavaScript
Informazioni sugli eventi sono disponibili in Guida introduttiva: Aggiunta di controlli HTML e gestione degli eventi e Acquisizione e bubbling di eventi con gli eventi DOM
Funzionalità delle app dall'inizio alla fine: Per conoscere meglio questa funzionalità, vedi gli argomenti della serie Funzionalità dell'app dall'inizio alla fine
Interazioni con l'utente, dall'inizio alla fine (HTML)
Personalizzazione delle interazioni con l'utente, dall'inizio alla fine (HTML)
Linee guida per l'esperienza utente:
Le raccolte di controlli della piattaforma (HTML e XAML) forniscono l'esperienza di interazione utente Windows completa, oltre a interazioni standard, effetti fisici animati e feedback visivo. Se non hai l'esigenza di supportare interazioni personalizzate, usa questi controlli predefiniti.
Se i controlli della piattaforma non sono sufficienti, queste linee guida ti aiuteranno a offrire un'esperienza di interazione coinvolgente e Immersive coerente tra le diverse modalità di input. Queste linee guida sono incentrate principalmente sull'input tocco, ma sono rilevanti anche per input di tipo tocco, mouse, tastiera e stilo.
- Linee guida per interazioni utente comuni
- Linee guida per lo scorrimento rapido
- Linee guida per lo zoom ottico e il ridimensionamento
- Linee guida per la panoramica
- Linee guida per la rotazione
- Linee guida per lo zoom semantico
- Linee guida per la selezione di testo e immagini
- Linee guida per la selezione della destinazione
- Linee guida per il riscontro visivo
Esempi: Per esaminare questa funzionalità in azione, vedi gli esempi di app.
Personalizzazione delle interazioni con l'utente, dall'inizio alla fine
Input: Esempio delle funzionalità del dispositivo
Esempio di controlli HTML di scorrimento, panoramica e zoom
Input: Esempio di gestione degli eventi relativi al puntatore DOM
Input: Esempio di gesti istanziabili
Input: gesti e manipolazioni con GestureRecognizer
Input: Esempio di input penna semplificato
Panoramica della piattaforma di interazione utente di Windows 8
Progetta le tue app tenendo conto delle interazioni tramite tocco. L'input tocco è supportato da un numero sempre maggiore e variegato di dispositivi e le interazioni tramite tocco costituiscono un aspetto fondamentale dell'esperienza di Windows.
Poiché il tocco è una delle modalità di interazione principali per gli utenti di Windows e Windows Phone, la nuova piattaforma è ottimizzata per l'input tocco per garantire velocità di risposta, precisione e facilità d'uso. Le modalità di input già collaudate come mouse, penna e tastiera sono comunque completamente supportate e dal punto di vista funzionale sono coerenti con il tocco (vedi Gesti, manipolazioni e interazioni). La velocità, l'accuratezza e la risposta tattile di questi metodi di input tradizionali sono conosciuti e apprezzati da molti utenti. Queste esperienze di interazione uniche e inconfondibili sono state interamente preservate.
Per progettare l'esperienza di interazione dell'utente, fai ricorso alla tua creatività. Supporta la gamma più vasta di funzionalità e preferenze per attirare l'interesse del maggior numero di persone possibile e attrarre un maggior numero di clienti.
Dai controlli predefiniti alla personalizzazione completa, la piattaforma di interazione utente è basata su livelli di funzionalità caratterizzati da una flessibilità e una potenza progressive.
Controlli predefiniti
Sfrutta i vantaggi dei controlli predefiniti per fornire un'esperienza di interazione utente comune che funzioni bene per la maggior parte delle app di Windows e Windows Phone.
I controlli predefiniti sono interamente progettati in modo da essere ottimizzati per il tocco e garantire allo stesso tempo esperienze di interazione coerenti e coinvolgenti in tutte le modalità di input. Supportano una gamma completa di gesti, ovvero pressione prolungata, tocco, scorrimento, scorrimento rapido, avvicinamento delle dita, allontanamento delle dita e rotazione. Associando questi gesti alle manipolazioni dirette, come panoramica, zoom, rotazione, trascinamento e comportamenti di inerzia realistici, è possibile ottenere un'esperienza di interazione conforme alle procedure ottimali e uniforme nell'intera piattaforma Windows.
Per altre info sulla libreria di controlli, vedi Aggiunta di controlli e contenuto.
Visualizzazioni
Per ottimizzare l'esperienza di interazione degli utenti, usa le impostazioni per panoramica/scorrimento e zoom delle visualizzazioni dell'app. La visualizzazione dell'app determina il modo in cui l'utente accede all'app e ai suoi contenuti e li manipola. Le visualizzazioni forniscono anche alcuni comportamenti, ad esempio inerzia, rimbalzo dei limiti del contenuto e punti ancorati.
Le impostazioni di panoramica e scorrimento definiscono la modalità di spostamento degli utenti all'interno di una singola visualizzazione, quando il contenuto della visualizzazione supera i limiti del riquadro di visualizzazione. Una singola visualizzazione può essere, ad esempio, la pagina di una rivista o di un libro, la struttura di cartelle di un computer, una raccolta di documenti o un album fotografico.
Le impostazioni dello zoom riguardano sia lo zoom ottico che il controllo SemanticZoom. Lo zoom semantico è una tecnica ottimizzata per il tocco che consente di presentare ed esplorare grandi set di dati o contenuti correlati all'interno di un'unica visualizzazione. Usa due diverse modalità di classificazione, o livelli di zoom ed è analogo alla panoramica o allo scorrimento all'interno di una singola visualizzazione. Panoramica e scorrimento si possono utilizzare insieme allo zoom semantico.
Usa le visualizzazioni delle app e le seguenti proprietà CSS (Cascading Style Sheets), gli attributi Document Object Model (DOM) e gli eventi DOM per modificare i comportamenti di panoramica/scorrimento e zoom. In questo modo potrai garantire un'esperienza di interazione più fluida di quanto sia possibile attraverso la gestione degli eventi relativi al puntatore e ai gesti.
| Superficie API | Proprietà CSS | Attributi DOM | Eventi DOM |
|---|---|---|---|
| touch-action specifica se una data area può essere manipolata tramite panoramica o zoom. | |||
| Panoramica/scorrimento | |||
| Zoom | msContentZoomFactor | onmscontentzoom | |
| Entrambi | onmsmanipulationstatechanged | ||
Per altre informazioni sulle visualizzazioni dell'app, vedi Definizione di layout e visualizzazioni.
Per altre informazioni sullo zoom, vedi Linee guida per lo zoom ottico e il ridimensionamento o Linee guida per lo zoom semantico.
Per altre informazioni su panoramica/scorrimento, vedi Linee guida per la panoramica.
Eventi relativi al puntatore e ai gesti DOM
Il puntatore è un tipo di input generico con meccanismo di evento unificato che espone informazioni di base, ad esempio la posizione nella schermata, sull'origine di input attiva, che può essere touchpad, mouse o penna. Per gesti si intendono sia semplici interazioni statiche, ad esempio il tocco, che manipolazioni più complesse quali zoom, panoramica e rotazione. Per altre informazioni, vedi Gesti, manipolazioni e interazioni.
Nota
Gli eventi gesti statici vengono attivati al completamento di un'interazione. Gli eventi gesti di manipolazione indicano un'interazione utente continua. La generazione degli eventi gesti di manipolazione inizia quando l'utente tocca l'elemento e continua finché l'utente solleva il dito o la manipolazione viene annullata.
L'accesso agli eventi puntatore e gesti ti consente di usare il linguaggio di progettazione delle interazioni tramite tocco di Windows 8 per:
- Giochi
- Controlli personalizzati ed elementi visivi di risposta
- Interazioni personalizzate
Sfrutta la funzionalità predefinita di riconoscimento dei gesti fornita attraverso gli eventi gesti DOM seguenti:
| Tipo | Eventi gesti DOM |
|---|---|
| Eventi generali | MSManipulationStateChanged |
| Eventi del puntatore | |
| Eventi gesti statici | |
| Eventi di movimento di modifica |
Per altre informazioni sulla gestione di eventi del puntatore e relativi ai gesti, vedi la guida introduttiva alla gestione dei puntatori e la guida introduttiva alla gestione dei gesti DOM di base.
Personalizza l'esperienza utente
Per personalizzare e controllare completamente l'esperienza di interazione della tua app, usa le API della piattaforma Windows Runtime. Con queste API puoi abilitare interazioni utente personalizzate e gestire opzioni di configurazione e funzionalità hardware aggiuntive, ad esempio dispositivi mouse dotati di pulsante destro, rotellina, rotellina con funzionalità di inclinazione o pulsanti X e dispositivi di tipo penna con pulsanti e uso della punta della penna per cancellare.
La maggior parte delle API di interazione viene fornita dai tipi Windows.UI.Core, Windows.UI.Input e Windows.UI.Input.Inking, mentre i dati dei dispositivi di input sono esposti tramite Windows.Devices.Input.
Noterai che le classi GestureRecognizer, PointerPoint e PointerPointProperties sono utili soprattutto quando si tratta di gesti e manipolazioni.
Prima di fornire esperienze di interazione personalizzate tramite manipolazioni e gesti nuovi o modificati, considera quanto segue:
- Un gesto esistente fornisce l'esperienza richiesta dall'app? Non fornire un gesto personalizzato per eseguire lo zoom o la panoramica quando puoi limitarti ad adattare la tua app per supportare o interpretare un gesto esistente.
- Il gesto personalizzato comporta una potenziale incoerenza tra le app?
- Il gesto richiede uno specifico supporto hardware, ad esempio il numero di contatti?
- Esiste un controllo, ad esempio SemanticZoom, che fornisce l'esperienza di interazione necessaria? Se un controllo può intrinsecamente gestire l'input dell'utente, è necessario includere una manipolazione o un gesto personalizzato?
- La manipolazione o il gesto personalizzato comporta un'esperienza di interazione fluida e naturale?
- L'esperienza di interazione è opportuna? Se l'interazione dipende da aspetti come il numero di contatti, la velocità, il tempo (non consigliato) e l'inerzia, assicurati che questi vincoli e queste dipendenze siano coerenti e riconoscibili. Ad esempio, l'interpretazione di velocità e lentezza da parte di un utente può influire direttamente sulla funzionalità dell'app e sulla soddisfazione dell'utente nei confronti dell'esperienza.
- Il gesto o la manipolazione dipende dalle abilità fisiche dell'utente? È accessibile?
- Sarà sufficiente un comando della barra dell'app o un altro comando dell'interfaccia utente?
In breve, crea manipolazioni e gesti personalizzati solo in presenza di un requisito chiaro e ben definito e quando non puoi usare un gesto di base per il tuo scenario.
Per altre informazioni sulle interazioni personalizzate, vedi Guida introduttiva: Gesti statici e Guida introduttiva: Gesti di manipolazione.
Argomenti correlati
Informazioni concettuali