Condividi tramite


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.

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

Input: Esempio di input penna

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 APIProprietà CSSAttributi DOMEventi DOM
touch-action specifica se una data area può essere manipolata tramite panoramica o zoom.
Panoramica/scorrimento

-ms-overflow-style

-ms-scroll-chaining

-ms-scroll-limit

-ms-scroll-limit-x-max

-ms-scroll-limit-x-min

-ms-scroll-limit-y-max

-ms-scroll-limit-y-min

-ms-scroll-rails

-ms-scroll-snap-points-x

-ms-scroll-snap-points-y

-ms-scroll-snap-type

-ms-scroll-snap-x

-ms-scroll-snap-y

-ms-scroll-translation

scroll

scrollHeight

scrollLeft

scrollTop

scrollWidth

onscroll

Zoom

-ms-content-zoom-chaining

-ms-content-zooming

-ms-content-zoom-limit

-ms-content-zoom-limit-max

-ms-content-zoom-limit-min

-ms-content-zoom-snap

-ms-content-zoom-snap-points

-ms-content-zoom-snap-type

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

gotpointercapture

lostpointercapture

pointercancel

pointerdown

pointermove

pointerout

pointerover

pointerup

Eventi gesti statici

MSGestureHold

MSGestureTap

Eventi di movimento di modifica

MSGestureChange

MSGestureEnd

MSGestureStart

MSInertiaStart

 

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

Sviluppo di app di Windows Store (JavaScript e HTML)

Progettazione delle interazioni tramite tocco