Linguaggio: HTML | XAML

Risposta all'input tramite touchpad

Applies to Windows only

Progetta e crea app di Windows Store con cui gli utenti possono interagire tramite touchpad.

Questa documentazione interessa gli sviluppatori che creano app di Windows Store per tablet e computer a cui è collegato un digitalizzatore che accetta l'input penna. Il digitalizzatore può trovarsi sotto la superficie dello schermo o essere collegato come una periferica.

Suggerimento  Le informazioni in questo argomento sono specifiche per lo sviluppo di app di Windows Store in C++, C# o Visual Basic.

Per informazioni sulle app di Windows Store in JavaScript, vedi, Risposta alle interazioni tramite touchpad (HTML).

Prerequisiti:  Se non hai familiarità con lo sviluppo di app di Windows Store con C++, C# o Visual Basic, ti consigliamo di leggere gli argomenti seguenti per scoprire di più sulle tecnologie descritte in questa guida.

Creare la prima app di Windows Store in C# o Visual Basic

Creare la prima app di Windows Store in C++

Roadmap per app di Windows Runtime in C# o Visual Basic

Roadmap per app di Windows Store in C++

Per informazioni aggiuntive sugli eventi, vedi Panoramica degli eventi e degli eventi indirizzati

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 (XAML)

Personalizzazione delle interazioni con l'utente, dall'inizio alla fine (XAML)

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 di Windows Store.

Input: Esempio di gesti di Windows 8

Input: Esempio di eventi di input utente XAML

Esempio di scorrimento, panoramica e zoom con XAML

Panoramica

I dispositivi touchpad uniscono l'input multitouch indiretto 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. Ottimizza il design delle app di Windows Store per l'input tramite tocco e ottieni per impostazione predefinita il supporto del touchpad.

Data la convergenza delle esperienze di interazione supportate dai touchpad, oltre al supporto predefinito per l'input tocco ti consigliamo di usare l'evento PointerEnteredper aggiungere comandi dell'interfaccia utente tipo mouse. Ad esempio, usa i pulsanti Indietro e Avanti per consentire agli utenti di cambiare pagina o di eseguire una panoramica del contenuto.

Siccome questa convergenza dei tipi di input è assolutamente inedita, è stato sviluppato un set di movimenti tocco appositi per l'input tramite touchpad. Grazie ai gesti e alle linee guida illustrati in questo argomento potrai fare in modo che la tua app supporti l'input tramite touchpad senza problemi, con la semplice aggiunta di codice di base.

Linee guida per supportare le interazioni tramite touchpad nell'interfaccia utente

Ecco alcune linee guida per il supporto delle interazioni tramite touchpad.

Il linguaggio touchpad di Windows 8.1

Windows 8.1 offre un insieme circoscritto di interazioni tramite touchpad che vengono usate coerentemente in tutto il sistema. Ottimizzandola per l'input tramite tocco e mouse, la tua app risulterà immediatamente familiare agli utenti, che ne apprenderanno il funzionamento e la utilizzeranno con maggior fiducia e facilità.

TermineDescrizione

Informazioni al passaggio del mouse

Passare con il mouse su un elemento per visualizzare informazioni più dettagliate o elementi visivi a scopo didattico, ad esempio una descrizione comando, senza dover necessariamente eseguire un'azione. Per altre informazioni sulle descrizioni comando, vedi Aggiunta di descrizioni comando.

Tocco con un solo dito per le azioni principali

Tocca con un solo dito un elemento per richiamare l'azione principale, ad esempio avviare un'applicazione o eseguire un comando.

Tocco con due dita per il clic con il pulsante destro del mouse

Tocca con due dita contemporaneamente per visualizzare la barra dell'app con i comandi globali oppure un elemento per selezionarlo e visualizzare la barra dell'app con i comandi contestuali.

Nota  Tocca con due dita per visualizzare un menu contestuale nei casi in cui i comportamenti di selezione o visualizzazione dei comandi della barra dell'app non sono appropriati. Ti consigliamo vivamente, tuttavia, di usare la barra dell'app per tutti i comportamenti relativi ai comandi.

Scorrimento con due dita per eseguire la panoramica

Lo scorrimento viene usato principalmente per interazioni di tipo panoramica, ma può essere usato anche per operazioni di spostamento, disegno o scrittura.

Avvicinamento e allontanamento delle dita per operazioni di zoom

I gesti di avvicinamento e allontanamento delle dita in genere vengono usati per il ridimensionamento e lo zoom semantico.

Pressione e scorrimento con un dito per ridisporre

Consente di trascinare un elemento.

Pressione e scorrimento con un dito per selezionare testo

Premi il dito all'interno di testo selezionabile e scorri per selezionarlo. Doppio tocco per selezionare una parola.

Bordi per accedere ai comandi di sistema

Facendo scorrere rapidamente un dito dal bordo destro dello schermo (o dal bordo sinistro nei layout da destra a sinistra) viene visualizzata la barra dei pulsanti di accesso rapido che contiene i comandi di sistema.

Facendo scorrere rapidamente un dito dal bordo sinistro dello schermo (o dal bordo destro nei layout da destra a sinistra) viene visualizzato un elenco delle app in esecuzione.

Area di clic con pulsante destro e sinistro

Emula la funzionalità dei pulsanti destro e sinistro di un dispositivo mouse.

 

Hardware

Esegui una query sulle funzionalità del dispositivo mouse (MouseCapabilities) per individuare gli aspetti dell'interfaccia utente della tua app direttamente accessibili mediante l'hardware del touchpad. Ti consigliamo di prevedere un'interfaccia utente sia per l'input tramite tocco che per quello tramite mouse.

Per altre informazioni sull'esecuzione di query relative alle funzionalità dei dispositivi, vedi Guida introduttiva: Identificazione dei dispositivi di puntamento.

Risposta visiva

  • Quando viene rilevato un cursore di touchpad tramite eventi di spostamento o di passaggio, visualizza l'interfaccia utente specifica del mouse per indicare la funzionalità esposta dall'elemento. Se il cursore del touchpad non viene spostato per un determinato intervallo di tempo, o se l'utente avvia un'interazione tramite tocco, imposta la dissolvenza graduale degli elementi di interfaccia utente del touchpad. In questo modo manterrai pulita e sgombra l'interfaccia utente.
  • Non usare il cursore per la risposta al passaggio del mouse, poiché quella fornita dall'elemento in questione è sufficiente (vedi Cursori).
  • Se un elemento non supporta l'interazione, come nel caso del testo statico, non fornire feedback visivo.
  • Non usare i rettangoli di selezione per le interazioni tramite touchpad, ma riservali alle interazioni tramite tastiera.
  • Implementa feedback visivo simultaneo per tutti gli elementi che rappresentano la stessa destinazione dell'input.

Per altre informazioni generali sulla risposta visiva, vedi Linee guida per la risposta visiva.

Cursori

È disponibile un set di cursori standard da usare come puntatori del touchpad per indicare l'azione principale di un elemento.

A ogni cursore standard è associata un'immagine predefinita. Le immagini predefinite associate ai cursori standard possono essere sostituite in qualsiasi momento dall'utente o dall'app. Le app di Windows Store specificano un'immagine cursore mediante la funzione PointerCursor.

Se vuoi personalizzare il cursore del mouse:

  • Usa sempre il cursore freccia (Cursore freccia) per gli elementi su cui è possibile fare clic. Non usare il cursore con la mano che indica (Cursore a forma di mano puntato) per i link o altri elementi interattivi. Usa invece gli effetti al passaggio del mouse descritti in precedenza.
  • Usa il cursore testo (Cursore testo) per il testo selezionabile.
  • Usa il cursore di spostamento (Cursore di spostamento) quando lo spostamento è l'azione principale, ad esempio nel caso del trascinamento o del ritaglio. Non usare il cursore di spostamento per elementi la cui azione principale è l'esplorazione, ad esempio per i riquadri della schermata Start.
  • Usa i cursori di ridimensionamento orizzontale, verticale e diagonale (Cursore di ridimensionamento verticale, Cursore di ridimensionamento orizzontale, Cursore di ridimensionamento diagonale (da in basso a destra a in alto a sinistra), Cursore di ridimensionamento diagonale (da in alto a sinistra a in basso a destra)) quando un oggetto è ridimensionabile.
  • Usa i cursori con la mano che afferra (Cursore con la mano che afferra (aperta), Cursore con la mano che afferra (chiusa)) per la panoramica di contenuti all'interno di un canvas fisso, come nel caso di una mappa.

Argomenti correlati

Informazioni concettuali
Risposta alle interazioni degli utenti

 

 

Mostra:
© 2014 Microsoft