Selezione di testo e immagini
Questo articolo descrive la selezione e la modifica di testo, immagini e controlli e fornisce linee guida relative all'esperienza utente da considerare quando si usano questi meccanismi nelle app.
API importanti: Windows.UI.Xaml.Input, Windows.UI.Input
Procedure rischiose e procedure consigliate
Usare glifi dei tipi di carattere per implementare l'interfaccia utente del gripper. Il gripper è una combinazione di due tipi di carattere dell'interfaccia utente Segoe disponibili a livello di sistema. L'uso delle risorse dei tipi di carattere semplifica il rendering a dpi diversi e funziona bene con i valori di ridimensionamento predefiniti dell'interfaccia utente. Quando si implementano propri gripper, devono condividere le seguenti caratteristiche dell'interfaccia utente:
- Forma circolare
- Visibile su qualsiasi sfondo
- Dimensioni coerenti
Fornire un margine intorno al contenuto selezionabile per contenere l'interfaccia utente del gripper. Se l'app consente la selezione di testo in un'area che non supporta la panoramica e/o lo scorrimento, prevedere un margine del gripper di 1/2 sui lati sinistro e destro dell'area di testo e 1 altezza del gripper sui lati superiore e inferiore (come illustrato nelle immagini seguenti). In questo modo, si garantisce che l'intera interfaccia utente del gripper sia esposta all'utente e si riducono al minimo le interazioni indesiderate con altre interfacce utente basate sul bordo.
Nascondere l'interfaccia utente dei gripper durante l'interazione. Eliminare l'occlusione causata dai gripper durante l'interazione. Questo è utile quando un gripper non viene completamente oscurato dal dito o quando sono presenti più gripper di selezione del testo. In questo modo si eliminano gli artefatti visivi durante la visualizzazione delle finestre figlio.
Non consentire la selezione di elementi dell'interfaccia utente come controlli, etichette, immagini, contenuto proprietario e così via. In genere, le applicazioni Windows consentono la selezione di soli controlli specifici. I controlli come pulsanti, etichette e logo non sono selezionabili. Valutare se la selezione è un problema per l'app e, in quel caso, identificare le aree dell'interfaccia utente in cui impedire la selezione.
Indicazioni aggiuntive sull'uso
La selezione e la modifica del testo sono particolarmente vulnerabili ai problemi dell'esperienza utente introdotti dalle interazioni tocco. L'input mouse, penna/stilo e tastiera è altamente granulare: un clic del mouse o un contatto della penna/stilo viene in genere mappato a un singolo pixel, mentre un tasto viene premuto o non premuto. L'input tocco non è granulare; è difficile mappare l'intera superficie di un dito a una posizione x-y specifica sullo schermo per posizionare con precisione un cursore di testo.
Raccomandazioni e considerazioni
Usare i controlli predefiniti esposti tramite i framework di linguaggio in Windows per creare app in grado di offrire l'esperienza di interazione utente della piattaforma completa, inclusi i comportamenti di selezione e manipolazione. Si troverà la funzionalità di interazione dei controlli predefiniti sufficiente per la maggior parte delle app Windows.
Quando si usano controlli di testo standard di Windows, non è possibile personalizzare i comportamenti di selezione e gli oggetti visivi descritti in questo argomento.
Selezione del testo
Se l'app richiede un'interfaccia utente personalizzata che supporti la selezione di testo, è consigliabile seguire i comportamenti di selezione di Windows descritti qui.
Contenuto modificabile e non
Con il tocco, le interazioni di selezione vengono eseguite principalmente tramite gesti come il tocco per impostare un cursore di inserimento o selezionare una parola e lo scorrimento per modificare una selezione. Come per altre interazioni tocco di Windows, le interazioni a tempo sono limitate alla pressione prolungata per visualizzare l'interfaccia utente informativa. Per altre informazioni vedere Linee guida per il feedback visivo.
Windows riconosce due possibili stati per le interazioni di selezione, modificabili e non modificabili e regola di conseguenza l'interfaccia utente di selezione, il feedback e la funzionalità.
Contenuto modificabile
Se si tocca un punto nella metà sinistra di una parola si posiziona il cursore immediatamente a sinistra della stessa, mentre se si tocca un punto nella metà destra, si posiziona il cursore immediatamente a destra.
L'immagine seguente mostra come posizionare un cursore di inserimento iniziale con il gripper toccando un punto vicino all'inizio o alla fine di una parola.
L'immagine seguente mostra come regolare una selezione trascinando il gripper.
Le immagini seguenti mostrano come richiamare il menu di scelta rapida toccando un punto all'interno della selezione o su un gripper (è anche possibile usare la pressione prolungata).
Nota Queste interazioni variano in qualche modo nel caso di una parola digitata in modo errato. Se si tocca una parola contrassegnata come errata, l'intera parola viene evidenziata e viene richiamato il menu di scelta rapida suggerito dall'ortografia.
Contenuto non modificabile
L'immagine seguente mostra come selezionare una parola toccando un punto al suo interno (non sono inclusi spazi nella selezione iniziale).
Seguire le stesse procedure del testo modificabile per regolare la selezione e visualizzare il menu di scelta rapida.
Manipolazione di oggetti
Ove possibile, usare le stesse risorse gripper (o simili) della selezione del testo per implementare la manipolazione di oggetti personalizzata in un'app Windows. In questo modo, si offre un'esperienza di interazione coerente nella piattaforma.
Ad esempio, è possibile usare i gripper nelle app di elaborazione immagini che supportano il ridimensionamento e il ritaglio o le app media player che forniscono indicatori di stato regolabili, come mostrato nelle immagini seguenti.
Media player con indicatore di stato regolabile.
Editor di immagini con gripper di ritaglio.
Articoli correlati
Per sviluppatori
Esempi
- Esempio di input di base
- Esempio di input a bassa latenza
- Esempio di modalità di interazione utente
- Esempio di indicatori visivi di stato attivo
