Risposta alle interazioni tramite mouse (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 ]
Per rispondere all'input tramite mouse nelle app di Windows Store in C++, C# o Visual Basic, puoi gestire gli stessi eventi fondamentali del puntatore usati per l'input tramite tocco e penna.
Questi eventi comuni ti permettono di implementare funzionalità di input di base senza dovere scrivere codice per ogni dispositivo di input. Puoi comunque sfruttare le speciali funzionalità di ogni dispositivo, ad esempio gli eventi della rotellina del mouse, se necessario.
Suggerimento Le informazioni in questo argomento sono specifiche per lo sviluppo di app di Windows Store in JavaScript.
Per informazioni sulle app di Windows Store in C++, C# o Visual Basic, vedi Risposta alle interazioni con mouse (XAML).
Per informazioni sulle app di Windows Store che usano DirectX in C+, vedi Sviluppo di controlli per il mouse (DirectX e C++).
Prerequisiti: 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.
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
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 zoom ottico e il ridimensionamento
- Linee guida per la panoramica
- Linee guida per la rotazione
- Linee guida per lo zoom semantico
- Linee guida per il feedback visivo
Esempi: Per esaminare questa funzionalità in azione, vedi gli esempi di app di Windows Store.
Personalizzazione delle interazioni con l'utente, dall'inizio alla fine
Input: Esempio delle funzionalità del dispositivo
Input: Esempio di gesti istanziabili
Input: Gesti e manipolazioni con GestureRecognizer
Panoramica
L'input tramite mouse è particolarmente adatto alle interazioni che richiedono precisione nelle azioni di puntamento e clic. Questa precisione intrinseca è supportata naturalmente dall'interfaccia utente di Windows 8, che è ottimizzata per fare fronte alla naturale imprecisione del tocco. Ottimizza il design delle app di Windows Store per l'input tramite tocco e ottieni per impostazione predefinita il supporto di base del mouse.
L'ìnput tramite mouse e quello tramite tocco si differenziano per il fatto che il tocco è in grado di emulare la manipolazione diretta degli elementi dell'interfaccia utente sullo schermo attraverso l'esecuzione di gesti fisici quali scorrimento rapido, scorrimento, trascinamento, rotazione e così via.
Per supportare le interazioni tramite mouse negli scenari in cui prevale la manipolazione diretta, usa un'interfaccia utente specifica del mouse per fornire funzionalità equivalenti agli utenti dell'app indipendentemente dal dispositivo usato. Ad esempio, se viene rilevato un mouse usa una barra di scorrimento per emulare la panoramica oppure i pulsanti Indietro e Avanti per emulare il cambio pagina.
Consigli per il supporto delle interazioni con mouse
Ecco alcune linee guida per il supporto delle interazioni tramite mouse.
Il linguaggio mouse di Windows 8
Windows 8 offre un insieme circoscritto di interazioni tramite mouse che vengono usate coerentemente in tutto il sistema. L'applicazione coerente di questo linguaggio del mouse ti consente di realizzare un'app che risulti familiare agli utenti. L'app sarà quindi più facile da imparare e usare, con maggiore soddisfazione degli utenti.
| Termine | Descrizione |
|---|---|
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. |
Clic con il pulsante sinistro del mouse per l'azione principale |
Fare clic con il pulsante sinistro del mouse su un elemento per richiamare l'azione principale, ad esempio avviare un'applicazione o eseguire un comando. |
Scorrimento per cambiare visualizzazione |
Visualizzare le barre di scorrimento per spostarsi verso l'alto, verso il basso, a destra o a sinistra all'interno di un'area di contenuto. Gli utenti possono scorrere il contenuto facendo clic sulle barre di scorrimento o ruotando la rotellina del mouse. Le barre di scorrimento possono indicare la posizione della visualizzazione corrente nell'area del contenuto (eseguendo la panoramica tramite tocco viene visualizzata un'interfaccia utente simile). |
Clic con il pulsante destro del mouse per selezionare ed eseguire comandi |
Fare clic con il pulsante destro del mouse per visualizzare le barre dell'app con i comandi globali. Fai clic con il pulsante destro del mouse su un elemento per selezionarlo e visualizzare la barra dell'app con i comandi contestuali per l'elemento selezionato. Nota Fare clic con il pulsante destro del mouse 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. |
Comandi dell'interfaccia utente per lo zoom |
Visualizzare comandi dell'interfaccia utente nella barra dell'app (ad esempio + e -) o premere CTRL e ruotare la rotellina del mouse per emulare i movimenti di avvicinamento e allontanamento delle dita usati per lo zoom. |
Comandi dell'interfaccia utente per la rotazione |
Visualizzare comandi dell'interfaccia utente nella barra dell'app o premere CTRL+MAIUSC e ruotare la rotellina del mouse per emulare il gesto di rotazione. Ruotare il dispositivo per far ruotare l'intero schermo. |
Clic con il pulsante sinistro del mouse e trascinamento per riorganizzare i contenuti |
Fare clic con il pulsante sinistro del mouse su un elemento e trascinarlo per spostarlo. |
Clic con il pulsante sinistro del mouse e trascinamento per selezionare testo |
Fare clic con il pulsante sinistro del mouse all'interno di testo selezionabile e trascinare per selezionarlo. Fare doppio clic per selezionare una parola. |
Angoli e bordi per visualizzare i comandi di sistema |
Sposta il mouse nell'angolo superiore destro o inferiore destro nei layout da sinistra a destra (oppure nell'angolo sinistro nei layout da destra a sinistra) per visualizzare gli accessi contenenti i comandi di sistema. Sposta il mouse nell'angolo superiore sinistro nei layout da sinistra a destra (o superiore destro nei layout da destra a sinistra) per visualizzare l'anteprima delle app usate di recente. Fai clic con il pulsante sinistro del mouse o fai clic e trascina per scorrere le anteprime e passare alle app in esecuzione oppure trascina per ancorare l'app (se l'operazione è supportata alla risoluzione corrente dello schermo). Sposta il mouse nell'angolo inferiore sinistro nei layout da sinistra a destra (o inferiore destro nei layout da destra a sinistra) per visualizzare l'anteprima della schermata Start. Fare clic con il pulsante sinistro del mouse e trascinare dal bordo superiore a quello inferiore dello schermo per chiudere l'app corrente. Fai clic con il pulsante sinistro del mouse e trascina dal bordo superiore a quello inferiore, destro o sinistro per ancorare l'app corrente a quel bordo dello schermo. |
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 mouse. Per altre informazioni sull'esecuzione di query relative alle funzionalità dei dispositivi, vedi Guida introduttiva: Identificazione dei dispositivi di puntamento.
Alcuni mouse sono dotati di 5 pulsanti. Il quarto e il quinto, denominati pulsanti X, in genere consentono di spostarsi in avanti e all'indietro nei Web browser come Windows Internet Explorer. Associali correttamente agli elementi dell'interfaccia utente della tua app (pulsanti Indietro e Avanti).
Per i mouse dotati di rotellina, associa la rotazione in avanti o all'indietro allo scorrimento verticale (su e giù) nell'area del contenuto. Se l'area del contenuto non prevede lo scorrimento verticale, attiva lo scorrimento orizzontale (sinistra e destra). Se la rotellina presenta anche la funzionalità di inclinazione, essa dovrebbe attivare solo lo scorrimento orizzontale.
La rotellina del mouse dovrebbe attivare lo zoom (se la funzionalità è esposta) quando l'utente preme il tasto di modifica CTRL.
Risposta visiva
- Quando viene rilevato un mouse tramite eventi di spostamento o di passaggio, visualizza l'interfaccia utente specifici del mouse per indicare la funzionalità esposta dall'elemento. Se il mouse 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 mouse. 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 mouse, ma riservali alle interazioni tramite tastiera.
- Implementa feedback visivo simultaneo per tutti gli elementi che rappresentano la stessa destinazione dell'input.
- Implementa pulsanti (ad esempio + e -) per emulare le manipolazioni basate sul tocco, come panoramica, rotazione, zoom e così via.
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 mouse 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 (
.png "Cursore freccia")
) per gli elementi su cui è possibile fare clic. Non usare il cursore con la mano che indica (.png "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 (
.png "Cursore testo")
) per il testo selezionabile. - Usa il cursore di spostamento (
.png "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 (
.png "Cursore di ridimensionamento verticale")
, .png "Cursore di ridimensionamento orizzontale")
, .png "Cursore di ridimensionamento diagonale (da in basso a destra a in alto a sinistra)")
, .png "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 (
.png "Cursore con la mano che afferra (aperta)")
, .png "Cursore con la mano che afferra (chiusa)")
) per la panoramica di contenuti all'interno di un canvas fisso, come nel caso di una mappa.
Esecuzione di comandi
Un clic con il pulsante destro del mouse deve attivare la barra dell'app. Evita le zone morte nell'interfaccia utente dell'app, ossia quelle che non rispondono al clic con il pulsante destro del mouse. Per altre informazioni sulle barre dell'app, vedi Aggiunta di barre dell'app.