Interazioni tramite mouse
Ottimizza la progettazione dell'app di Windows per l'input tramite tocco e ottieni il supporto di base del mouse per impostazione predefinita.
L'input del mouse è più adatto alle interazioni dell'utente che richiedono precisione quando si punta e si fa clic. Questa precisione intrinseca è naturalmente supportata dall'interfaccia utente di Windows, ottimizzata per la natura imprecisa del tocco.
Dove l'input tramite il mouse e il tocco divergono è la possibilità di emulare in modo più preciso la manipolazione diretta degli elementi dell'interfaccia utente sullo schermo tramite movimenti fisici eseguiti direttamente su tali oggetti (ad esempio scorrimento rapido, scorrimento, trascinamento, rotazione e così via). Le manipolazioni con un mouse richiedono in genere un altro ausilio dell'interfaccia utente, ad esempio l'uso di handle per ridimensionare o ruotare un oggetto.
In questa sezione vengono descritte le considerazioni di progettazione per le interazioni con il mouse.
Il linguaggio del mouse per le app UWP
Un set conciso di interazioni del mouse viene usato in modo coerente in tutto il sistema.
Termine | Descrizione |
---|---|
Passare il puntatore del mouse per ulteriori informazioni |
Passare il puntatore del mouse su un elemento per visualizzare informazioni più dettagliate o visualizzare oggetti visivi informativi, come ad esempio una descrizione del comando, senza impegnarsi in un'azione. |
Fare clic con il pulsante sinistro del mouse per l'azione primaria |
Fare clic con il pulsante sinistro del mouse su un elemento per richiamare l'azione principale, ad esempio l'avvio di un'app o l'esecuzione di un comando. |
Scorrere per modificare la visualizzazione |
Visualizzare le barre di scorrimento per spostarsi verso l'alto, verso il basso, verso sinistra e verso destra all'interno di un'area di contenuto. Gli utenti possono scorrere facendo clic sulle barre di scorrimento o ruotando la rotellina del mouse. Le barre di scorrimento possono indicare la posizione della visualizzazione corrente all'interno dell'area del contenuto (la panoramica con tocco visualizza un'interfaccia utente simile). |
Fare clic con il pulsante destro del mouse per selezionare un comando |
Fare clic con il pulsante destro del mouse per visualizzare la barra di spostamento (se disponibile) e la barra dell'app con i comandi globali. Fare clic con il pulsante destro del mouse su un elemento per selezionarlo e visualizzare la barra dell'app con comandi contestuali per l'elemento selezionato.
Nota Fare clic con il pulsante destro del mouse per visualizzare un menu di scelta rapida se i comandi di selezione o nella barra dell'app non sono comportamenti appropriati dell'interfaccia utente. È tuttavia consigliabile usare la barra dell'app per tutti i comportamenti dei comandi.
|
Comandi dell'interfaccia utente per lo zoom |
Visualizzare i 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 incremento e decremento dello zoom. |
Comandi dell'interfaccia utente per la rotazione |
Visualizzare i comandi dell'interfaccia utente nella barra dell'app o premere Ctrl+Maiusc e ruotare la rotellina del mouse per emulare il movimento di rotazione. Ruotare il dispositivo stesso per ruotare l'intero schermo. |
Fare clic con il pulsante sinistro del mouse e trascinare per riorganizzare |
Fare clic con il pulsante sinistro del mouse e trascinare un elemento per spostarlo. |
Fare clic con il pulsante sinistro del mouse e trascinare per selezionare il 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. |
Eventi di input del mouse
La maggior parte degli input del mouse può essere gestita tramite gli eventi di input indirizzati comuni supportati da tutti gli oggetti UIElement. tra cui:
- BringIntoViewRequested
- CharacterReceived
- ContextCanceled
- ContextRequested
- DoubleTapped
- DragEnter
- DragLeave
- DragOver
- DragStarting
- Drop
- DropCompleted
- GettingFocus
- GotFocus
- Holding
- KeyDown
- KeyUp
- LosingFocus
- LostFocus
- ManipulationCompleted
- ManipulationDelta
- ManipulationInertiaStarting
- ManipulationStarted
- ManipulationStarting
- NoFocusCandidateFound
- PointerCanceled
- PointerCaptureLost
- PointerEntered
- PointerExited
- PointerMoved
- PointerPressed
- PointerReleased
- PointerWheelChanged
- PreviewKeyDown
- PreviewKeyUp
- RightTapped
- Tapped
Tuttavia, è possibile sfruttare le funzionalità specifiche di ogni dispositivo, come ad esempio gli eventi della rotellina del mouse, usando gli eventi puntatore, movimento e manipolazione in Windows.UI.Input.
Esempi: consultare l'esempio BasicInput.
Linee guida per il feedback visivo
- Quando viene rilevato un mouse (tramite eventi di spostamento o passaggio del mouse), mostrare un'interfaccia utente specifica del mouse per indicare le funzionalità esposte dall'elemento. Se il mouse non si sposta per un certo periodo di tempo o se l'utente avvia un'interazione tramite tocco, dissolvere gradualmente l'interfaccia utente del mouse. In questo modo l'interfaccia utente si mantiene pulita e ordinata.
- Non usare il cursore per il feedback al passaggio del mouse, il feedback fornito dall'elemento è sufficiente (vedere Cursori di seguito).
- Non visualizzare il feedback visivo se un elemento, come ad esempio il testo statico, non supporta l'interazione.
- Non usare rettangoli di stato attivo con interazioni del mouse. Riservarli alle interazioni tramite tastiera.
- Visualizzare il feedback visivo simultaneamente per tutti gli elementi che rappresentano la stessa destinazione di input.
- Fornire pulsanti (ad esempio + e -) per simulare manipolazioni basate sul tocco, ad esempio panoramica, rotazione, zoom e così via.
Per indicazioni più generali sul feedback visivo, consultare Linee guida per il feedback visivo .
Cursori
Per un puntatore del mouse è disponibile un set di cursori standard. Questi vengono usati per indicare l'azione principale di un elemento.
A ogni cursore standard è associata un'immagine predefinita corrispondente. L'utente o un'app possono sostituire l'immagine predefinita associata a qualsiasi cursore standard in qualsiasi momento. Specificare un'immagine del cursore tramite la funzione PointerCursor.
Se è necessario personalizzare il cursore del mouse:
- Usare sempre il cursore freccia () per gli elementi selezionabili. Non usare il cursore della mano che indica () per i collegamenti o altri elementi interattivi. Usare invece gli effetti al passaggio del mouse (descritti in precedenza).
- Usare il cursore di testo () per il testo selezionabile.
- Usare il cursore di spostamento () quando lo spostamento è l'azione principale, ad esempio nel caso di trascinamento o ritaglio. Non usare il cursore di spostamento per gli elementi in cui l'azione principale è la navigazione (ad esempio, i riquadri Start).
- Usare i cursori di ridimensionamento orizzontale, verticale e diagonale (, , , ) quando un oggetto è ridimensionabile.
- Usare i cursori con la mano che afferra (, ) durante la panoramica del contenuto all'interno di un'area di disegno fissa, ad esempio una mappa.
Articoli correlati
- Gestire l'input del puntatore
- Identificare i dispositivi di input
- Panoramica degli eventi e degli eventi indirizzati