Personalizzazione delle interazioni con l'utente, dall'inizio alla fine (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 ]
Puoi creare interazioni personalizzate intuitive e divertenti, ma allo stesso tempo efficienti e coerenti per tutti i dispositivi di input. Segui le linee guida, le procedure consigliate e gli esempi qui descritti per definire queste esperienze utente per la tua app di Windows Store.
Nota Ti consigliamo di usare le librerie di controlli della piattaforma (HTML e XAML), quando possibile. I controlli inclusi in queste librerie forniscono l'esperienza completa di interazione con l'utente in Windows 8.1, che include le interazioni standard, gli effetti fisici animati, il feedback visivo e l'accessibilità. Se non hai l'esigenza di supportare interazioni personalizzate, usa questi controlli predefiniti.
Le app di Windows Store possono elaborare l'input da svariate origini, inclusi tocco, touchpad, mouse, penna/stilo e tastiera. Queste app supportano anche l'elaborazione dell'input da un'ampia gamma di modalità dei dispositivi di input, ad esempio tastiera virtuale, rotellina del mouse e gomma per input penna. Mentre altre piattaforme sono progettate principalmente per l'input tocco, puoi creare il tipo di app di Windows Store che preferisci e senza vincoli: app di consumo, app di produttività, app ibride innovative per PC, laptop, tablet e praticamente per qualsiasi tipo di fattore di forma esistente.
Se hai bisogno di altre info sui controlli della piattaforma e i relativi comportamenti di interazione, vedi Interazioni con l'utente, dall'inizio alla fine (HTML).
Prerequisiti
Le linee guida, le attività e il codice di esempio qui descritti sono specifici per lo sviluppo di app di Windows Store con JavaScript. Per la versione specifica per le app di Windows Store create con C++, C# o Visual Basic, vedi Personalizzazione delle interazioni con l'utente (XAML).
Se non hai familiarità con lo sviluppo di app di Windows Store con JavaScript, ti consigliamo di leggere gli argomenti seguenti per scoprire di più sulle tecnologie descritte in questa guida.
Sviluppo di app di Windows Store con JavaScript
Migliora le tue conoscenze per ogni aspetto, dalla schermata Start al layout e i controlli dell'interfaccia utente, per le app di Windows Store scritte in JavaScript.
Creare la prima app di Windows Store in JavaScript
Come usare JavaScript con HTML5 e fogli di stile CSS (Cascading Style Sheets) per creare una semplice app di Windows Store.
Esempio di interazioni con l'utente
Oltre agli esempi e ai frammenti di codice inclusi negli argomenti indicati di seguito, faremo riferimento all'esempio di interazioni personalizzate con l'utente. Questo esempio mostra come usare e adattare le funzionalità e i concetti correlati alle interazioni nella tua app di Windows Store. L'esempio include i principi, le raccomandazioni e i dettagli di implementazione per controlli personalizzati, accessibilità dell'interfaccia utente e interazioni personalizzate. Con questo esempio potrai vedere come abbiamo messo in pratica le nostre linee guida.
Ecco una breve descrizione dell'esempio
In questo esempio creiamo un miscelatore di colori, in forma di un oggetto quadrato che accetta l'input diretto da touchscreen, touchpad, mouse, penna/stilo o tastiera. Questi dati vengono usati per specificare un colore RGB e un angolo di rotazione, che viene puoi convertito in un livello corrispondente di rosso, verde o blu.
Nell'esempio vengono dimostrate le funzionalità seguenti:
- Controllo personalizzato
- Supporto di personalizzazioni di base (HTML e XAML) dei comportamenti di interazione con l'utente
- Rilevamento, riconoscimento ed elaborazione di gesti personalizzati
Ecco un diagramma wireframe che illustra a grandi linee il funzionamento dell'esempio e le funzionalità di interazione con l'utente implementate.
L'esempio contiene tre pagine (da sinistra a destra): una pagina iniziale, una seconda pagina con un controllo personalizzato che supporta la rotazione basata su DOM e una terza pagina con un controllo personalizzato che implementa funzionalità aggiuntive tramite le API GestureRecognizer Windows.UI.Input. |
Di seguito proponiamo un semplice riepilogo strutturato delle attività per facilitarti la creazione di un'app conforme alle procedure consigliate per le interazioni con l'utente nelle app di Windows Store. Ogni attività include link a info corrispondenti nel centro per sviluppatori di app di Windows Store.
Se non hai familiarità con lo sviluppo di app di Windows Store o con le interazioni con l'utente, l'usabilità e l'accessibilità, troverai utile seguire ogni passaggio in ordine. Gli aspetti correlati dello sviluppo delle interazioni con l'utente sono raggruppati.
Pianificare la tua app
Prima di iniziare con la progettazione e lo sviluppo, è necessario pianificare l'app. Prenditi il tempo necessario per individuare le caratteristiche del tuo pubblico e le funzionalità e attività supportate dall'app.
Progetta l'interfaccia utente delle app di Windows Store principalmente per le interazioni tramite tocco. L'input tocco è intrinsecamente impreciso (e richiede un'area di input) rispetto agli altri tipi di input che offrono in genere una precisione a livello di pixel. I controlli ottimizzati per il tocco insieme a un set di API per le interazioni della piattaforma per l'elaborazione degli eventi basati su puntatore offrono funzionalità equivalenti per i diversi dispositivi con una quantità minima di codice aggiuntivo.
Scegli il modello di navigazione più adatto alla tua app e al relativo contenuto. Per altre info, vedi Modelli di navigazione. Nell'esempio di interazioni con l'utente a supporto di questa esercitazione, iniziamo con il modello di navigazione semplice. Scarica il modello e sperimenta mentre segui questi passaggi oppure lanciati e usa il modello per avviare la progettazione e lo sviluppo della tua app. |
|
Interfaccia utente delle app di Windows Store, dall'inizio alla fine (HTML). Progetta e definisci il layout degli elementi e del contenuto dell'interfaccia utente, come la finestra dell'app, i riquadri a comparsa, le finestre di dialogo e le barre dell'app. Facciamo riferimento a linee guida, procedure consigliate ed esempi per aiutarti a sfruttare al meglio tutte le funzionalità per l'interfaccia utente di Windows 8.1 e a creare un'interfaccia utente che sia intuitiva e coerente con quella delle altre app di Windows Store. |
|
Risposta alle interazioni degli utenti. Impara a conoscere la piattaforma di interazione con l'utente, le origini di input (tocco, touchpad, mouse, penna/stilo e tastiera), le modalità (tastiera virtuale, rotellina del mouse, gomma per input penna e così via) e le interazioni supportati dalle app di Windows Store. |
|
Modalità di interazione degli utenti con i dispositivi tocco. Confronta le interazioni comuni e i gesti corrispondenti per riprodurle tramite tocco, touchpad, mouse e tastiera. |
Dispositivi di input
Anche se è ottimizzata per l'input tocco, la piattaforma offre supporto completo per gli altri dispositivi di input qui elencati.
Risposta alle interazioni tramite mouse. Usa le interazioni tramite mouse per le app che richiedono azioni di puntamento e clic di precisione. |
|
Risposta alle interazioni tramite tastiera. La tastiera è indispensabile per le persone con determinate disabilità o per gli utenti che semplicemente la considerano un modo più efficiente di interagire con un'app. |
|
Risposta alle interazioni con stilo e penna. Si può usare una penna o uno stilo come dispositivo di puntamento e di disegno. Questi dispositivi sono in genere associati alla funzionalità di input penna digitale. |
|
Risposta alle interazioni tramite touchpad. I dispositivi touchpad uniscono l'input multitocco con l'input di precisione dei dispositivi di puntamento, come il mouse. Grazie a questa combinazione, il touchpad è indicato sia per l'interfaccia utente di Windows 8.1 ottimizzata per il tocco, sia per le destinazioni di dimensioni minori delle app di produttività e dell'ambiente desktop. |
Progettazione delle interazioni
Segui le linee guida per l'esperienza utente di Windows con creatività quando progetti le interazioni con l'utente. Scegli i dispositivi di input supportati dall'app e il modo in cui l'app risponde. Ottimizza l'esperienza utente su più dispositivi, supporta la gamma più ampia possibile di funzionalità e preferenze e attira il maggior numero possibile di clienti potenziali in Windows Store. In questo modo la tua app sarà più fruibile, portatile e accessibile.
Le linee guida per le interazioni con l'utente ti aiuteranno a offrire un'esperienza utente coinvolgente e Immersive coerente tra le diverse modalità di input:
|
Gestire le interazioni con l'utente
In questa sezione illustreremo le opzioni a tua disposizione per elaborare le interazioni con l'utente della tua app e rispondere alle interazioni. Esamineremo alcuni dei dettagli relativi all'interfaccia utente e alle funzionalità incluse nell'esempio di interazioni con l'utente.
Personalizza le interazioni con l'utente tramite gli eventi del puntatore. |
|
Guida introduttiva: Gesti e manipolazioni DOM Personalizza le interazioni con l'utente tramite eventi DOM (Document Object Model). |
|
Guida introduttiva: Gesti statici Guida introduttiva: Gesti di manipolazione Personalizza le interazioni con l'utente tramite GestureRecognizer. |
|
Animazione dell'interfaccia utente Integra l'aspetto di Windows 8 nella tua app di Windows Store tramite la libreria di animazioni della piattaforma (per gli eventi del puntatore o i gesti scorrimento rapido) oppure personalizza le animazioni con transizioni, animazioni e trasformazioni CSS3 (Cascading Style Sheets, livello 3 (CSS3). |
|
Implementazione dell'accessibilità da tastiera. Per molti utenti con problemi di vista o movimento, la tastiera rappresenta il solo mezzo utile per esplorare l'interfaccia utente delle app e accedere alle funzionalità disponibili. Se l'app non offre funzioni adeguate di accesso da tastiera, questi utenti potrebbero avere difficoltà a usarla o non riuscire affatto. |
|
Come rendere accessibili gli eventi di tocco. Puoi rendere accessibili gli eventi di tocco associando gli eventi del puntatore a eventi clic del mouse. |
|
Test dell'accessibilità dell'applicazione. Usa gli strumenti di testing dell'accessibilità inclusi in Windows Software Development Kit (SDK) per Windows 8, Inspect e UI Accessibility Checker (AccChecker), utili per verificare l'accessibilità della tua app. Per poter dichiarare l'app accessibile in Windows Store, devi risolvere tutti gli errori con priorità 1 segnalati da AccChecker con le verifiche Web tramite ARIA (Accessible Rich Internet Applications) abilitate. Nota: Assistente vocale supporta un set di movimenti di tocco personalizzati (descritti in questo argomento) per l'esplorazione e la lettura del contenuto dell'app. |
Operazioni finali
Certifica la tua app con il Kit di certificazione app Windows. Esegui il Kit di certificazione app Windows per assicurarti che la tua app soddisfi i requisiti per Windows Store. Esegui queste verifiche ogni volta che aggiungi una funzionalità principale alla tua app. |
|
Ecco fatto. La tua implementazione dovrebbe essere simile a quella dell'esempio di interazioni con l'utente. Non ti resta che goderti i risultati. |
Vuoi saperne di più?
Pianificazione di app di Windows Store
Quale esperienza vuoi offrire ai tuoi utenti?
Progettare per l'accessibilità
Offri funzionalità e contenuti in grado di rispondere alle esigenze della più vasta gamma possibile di abilità, disabilità e preferenze degli utenti.
Progettare per fattori di forma diversi
Scopri altro sulla gestione dei diversi dispositivi, metodi di input e orientamenti dello schermo.
Indice delle linee guida per l'esperienza utente
Consulta l'elenco completo delle linee guida per l'esperienza utente.
Esempi
DOM
- Input: Esempio di gestione degli eventi relativi al puntatore DOM
- Input: Esempio di gesti istanziabili
API di app di Windows Store