Linee guida per la panoramica

  • Articolo

La panoramica o lo scorrimento consente agli utenti di spostarsi all'interno di una singola visualizzazione per mostrare il contenuto della visualizzazione che non rientra nel riquadro di visualizzazione. Esempi di visualizzazioni includono la struttura di cartelle di un computer, una raccolta di documenti o un album fotografico.

API importanti: Windows.UI.Input, Windows.UI.Xaml.Input

Procedure rischiose e procedure consigliate

Indicatori di panoramica e barre di scorrimento

  • Assicurarsi che sia possibile eseguire la panoramica o lo scorrimento prima di caricare il contenuto nell'app.

  • Visualizzare indicatori di panoramica e barre di scorrimento per fornire indizi su posizione e dimensioni. Nasconderli se si fornisce una funzionalità di spostamento personalizzata.

    Nota A differenza delle barre di scorrimento standard, gli indicatori di panoramica sono puramente informativi. Non sono esposti ai dispositivi di input e non possono essere manipolati in alcun modo.

     

Panoramica ad asse singolo (overflow unidimensionale)

  • Usare la panoramica ad asse singolo per le aree di contenuto che si estendono oltre il limite del riquadro di visualizzazione (verticale o orizzontale).

    • Panoramica verticale per un elenco unidimensionale di elementi.
    • Panoramica orizzontale per una griglia di elementi.

  • Non usare i punti di ancoraggio obbligatori con panoramica ad asse singolo se un utente deve essere in grado di eseguire la panoramica e di arrestarsi tra punti di ancoraggio. I punti di ancoraggio obbligatori consentono all'utente di arrestarsi su un punto di ancoraggio. Usare invece i punti di ancoraggio di prossimità.

Panoramica a mano libera (overflow bidimensionale)

  • Usare la panoramica a due assi per le aree di contenuto che si estendono oltre entrambi i limiti del riquadro di visualizzazione (verticale e orizzontale).

    • Eseguire l'override del comportamento predefinito delle guide e usare la panoramica a mano libera per il contenuto non strutturato in cui è probabile che l'utente si sposti in più direzioni.

  • La panoramica a mano libera è in genere adatta agli spostamenti all'interno di immagini o mappe.

Visualizzazione a pagine

  • Usare punti di ancoraggio obbligatori quando il contenuto è composto da elementi discreti o si vuole visualizzare un intero elemento. Sono incluse pagine di un libro o di una rivista, una colonna di elementi o singole immagini.

    • Un punto di ancoraggio deve essere posizionato in corrispondenza di ogni limite logico.
    • Ogni elemento deve essere ridimensionato in base alla visualizzazione.

Punti chiave e logici

  • Usare i punti di ancoraggio di prossimità se sono presenti punti chiave o posizioni logiche nel contenuto a cui un utente probabilmente si arresterà. Ad esempio, un'intestazione di sezione.

  • Se si definiscono limiti o vincoli di dimensione minimi o massimi, usare il feedback visivo per mostrare quando l'utente raggiunge o supera tali limiti.

Concatenamento di contenuto incorporato o nidificato

  • Usare la panoramica ad asse singolo (in genere orizzontale) e i layout di colonna per il contenuto basato su testo e griglia. In questi casi, il contenuto esegue in genere il wrapping e scorre naturalmente da una colonna a un'altra e mantiene l'esperienza utente coerente e riconoscibile nelle app Windows.

  • Non usare aree sottoponibili a panoramica incorporate per visualizzare testo o elenchi di elementi. Poiché gli indicatori di panoramica e le barre di scorrimento vengono visualizzati solo quando il contatto di input viene rilevato all'interno dell'area, l'esperienza utente è intuitiva o riconoscibile.

  • Non concatenare né posizionare un'area sottoponibile a panoramica all'interno di un'altra area se entrambe si trovano nella stessa direzione, come illustrato di seguito. Questo potrebbe comportare la panoramica involontaria dell'area padre quando viene raggiunto un limite per l'area figlio. Valutare la possibilità di rendere perpendicolare l'asse di panoramica.

    immagine che illustra un'area con panoramica incorporata che scorre nella stessa direzione del contenitore.

Indicazioni aggiuntive sull'uso

Quando si esegue una panoramica con tocco, un gesto scorrimento rapido con un dito o scorrimento con una o più dita equivale allo scorrimento con il mouse. L'interazione di panoramica è più simile alla rotazione della rotellina del mouse o all'uso della casella di scorrimento e non al clic sulla barra di scorrimento. A meno che non si faccia distinzione in un'API o sia richiesto da un'interfaccia utente di Windows specifica del dispositivo, si userà il termine panoramica per fare riferimento a entrambe le interazioni.

Windows 10 Fall Creators Update - Modifica del comportamento Per impostazione predefinita, invece di eseguire la selezione di testo, la penna attiva consente di seguire lo scorrimento/panoramica nelle app Windows, ad esempio tocco, touchpad e penna passiva. Se l'app dipende dal comportamento precedente, puoi ignorare lo scorrimento della penna e ripristinare il comportamento precedente. Per altri dettagli, vedi l'argomento di riferimento all'API per la classe ScrollViewer.

A seconda del dispositivo di input, l'utente esegue una panoramica all'interno di un'area sottoponibile a panoramica usando uno di questi elementi:

  • Mouse, touchpad o penna/stilo attivo per fare clic sulle frecce di scorrimento, trascinare la casella di scorrimento o fare clic all'interno della barra di scorrimento.
  • Rotellina del mouse per emulare il trascinamento della casella di scorrimento.
  • I pulsanti estesi (XBUTTON1 e XBUTTON2), se supportati dal mouse.
  • I tasti di direzione della tastiera per emulare il trascinamento della casella di scorrimento o i tasti pagina per emulare il clic all'interno della barra di scorrimento.
  • Tocco, touchpad o penna/stilo passivo per scorrere le dita nella direzione desiderata.

Lo scorrimento comporta lo spostamento lento delle dita nella direzione di panoramica. Questo comporta una relazione uno-a-uno, in cui il contenuto esegue la panoramica alla stessa velocità e alla stessa distanza delle dita. Lo scorrimento rapido, che comporta lo scorrimento rapido e il sollevamento delle dita, comporta l'applicazione dei seguenti principi di fisica all'animazione di panoramica:

  • Decelerazione (inerzia): il sollevamento delle dita comporta la decelerazione della panoramica. Può essere paragonato allo slittamento fino a una fermata su una superficie scivolosa.
  • Assorbimento: lo slancio di panoramica durante la decelerazione provoca un lieve effetto rimbalzo se viene raggiunto un punto di ancoraggio o un limite dell'area di contenuto.

Tipi di panoramica

Windows supporta tre tipi di panoramica:

  • Asse singolo: la panoramica è supportata in una sola direzione (orizzontale o verticale).
  • Guide: la panoramica è supportata in tutte le direzioni. Tuttavia, quando l'utente supera una soglia di distanza in una direzione specifica, la panoramica è limitata a quell'asse.
  • A mano libera: la panoramica è supportata in tutte le direzioni.

Interfaccia utente di panoramica

L'esperienza di interazione per la panoramica è specifica del dispositivo di input, pur fornendo una funzionalità simile.

In base al dispositivo di input rilevato, sono disponibili due modalità di visualizzazione panoramica:

  • Indicatori di panoramica per il tocco.
  • Barre di scorrimento per altri dispositivi di input, tra cui mouse, touchpad, tastiera e stilo.

Nota Gli indicatori di panoramica sono visibili solo quando il contatto tocco si trova all'interno dell'area sottoponibile a panoramica. Analogamente, la barra di scorrimento è visibile solo quando il cursore del mouse, il cursore penna/stilo o lo stato attivo della tastiera si trova all'interno dell'area scorrevole.

 

Indicatori di panoramica Gli indicatori di panoramica sono simili alla casella di scorrimento in una barra di scorrimento. Indicano la percentuale di contenuto visualizzato rispetto all'area sottoponibile a panoramica totale e la posizione relativa del contenuto visualizzato nell'area sottoponibile a panoramica.

Il diagramma seguente mostra due aree sottoponibili a panoramica di lunghezza diversa e i relativi indicatori di panoramica.

immagine che mostra due aree con panoramica di lunghezze diverse e i relativi indicatori di panoramica.

Comportamenti di panoramicaPunti di ancoraggio La panoramica con il gesto scorrimento rapido con un dito introduce il comportamento di inerzia nell'interazione quando il contatto tocco viene sollevato. Con l'inerzia, la panoramica del contenuto continua finché non viene raggiunta la soglia di distanza senza input diretto dell'utente. Usare i punti di ancoraggio per modificare questo comportamento di inerzia.

I punti di ancoraggio specificano le interruzioni logiche nel contenuto dell'app. In modo cognitivo, i punti di ancoraggio fungono da meccanismo di paging per l'utente e riducono al minimo l'affaticamento causato da un eccessivo scorrimento o scorrimento rapido in grandi aree sottoponibili a panoramica. Con essi, è possibile gestire l'input dell'utente impreciso e garantire la visualizzazione di un sottoinsieme specifico di contenuto o informazioni chiave nel riquadro di visualizzazione.

Esistono due tipi di punti di ancoraggio:

  • Prossimità: dopo aver sollevato il contatto, viene selezionato un punto di ancoraggio se l'inerzia si arresta entro una soglia di distanza del punto di ancoraggio. La panoramica può comunque interrompersi tra i punti di ancoraggio di prossimità.
  • Obbligatorio: il punto di ancoraggio selezionato è quello che precede o segue immediatamente l'ultimo punto di ancoraggio attraversato prima che il contatto sia stato sollevato (a seconda della direzione e della velocità del movimento). La panoramica deve essere interrotta a un punto di ancoraggio obbligatorio.

I punti di ancoraggio di panoramica sono utili per applicazioni come Web browser e album fotografici che emulano contenuto impaginato o hanno raggruppamenti logici di elementi che possono essere raggruppati dinamicamente per essere adattati al riquadro di visualizzazione.

I diagrammi seguenti illustrano come la panoramica a un determinato punto e il rilascio provocano la panoramica automatica del contenuto in una posizione logica.

immagine che mostra un'area con panoramica.

Scorrere rapidamente per eseguire la panoramica.

immagine che mostra un'area con panoramica a sinistra.

Sollevare il contatto tocco.

immagine che mostra un'area con panoramica che ha interrotto la panoramica in corrispondenza di un punto di ancoraggio logico.

L'area sottoponibile a panoramica si arresta al punto di ancoraggio, non dove è stato sollevato il contatto tocco.

Guide Il contenuto può essere più ampio in larghezza e altezza rispetto alle dimensioni e alla risoluzione di un dispositivo di visualizzazione. Per questo motivo, è spesso necessario eseguire una panoramica bidimensionale (orizzontale e verticale). Le guide migliorano l'esperienza utente in questi casi evidenziando la panoramica lungo l'asse del movimento (verticale o orizzontale).

Il diagramma seguente illustra il concetto di guide.

diagramma di uno schermo con guide che vincolano la panoramica

Concatenamento di contenuto incorporato o nidificato

Dopo che un utente raggiunge un limite di zoom o scorrimento su un elemento nidificato all'interno di un altro elemento sottoponibile a zoom o scorrimento, è possibile specificare se l'elemento padre deve continuare l'operazione di zoom o scorrimento iniziata nel relativo elemento figlio. Questa operazione è denominata concatenamento di zoom o scorrimento.

Il concatenamento viene usato per la panoramica all'interno di un'area di contenuto ad asse singolo che contiene una o più aree di panoramica ad asse singolo o a mano libera (quando il contatto tocco si trova all'interno di una di queste aree figlio). Quando il limite di panoramica dell'area figlio viene raggiunto in una direzione specifica, la panoramica viene attivata nell'area padre nella stessa direzione.

Quando un'area sottoponibile a panoramica è nidificata all'interno di un'altra area sottoponibile a panoramica, è importante specificare spazio sufficiente tra il contenitore e il contenuto incorporato. Nei diagrammi seguenti, un'area sottoponibile a panoramica viene posizionata all'interno di un'altra area, ognuna in direzioni perpendicolari. Gli utenti hanno a disposizione molto spazio per panoramiche in ciascuna area.

immagine che illustra un'area con panoramica incorporata.

Senza spazio sufficiente, come illustrato nel diagramma seguente, l'area sottoponibile a panoramica incorporata può interferire con la panoramica nel contenitore e causare una panoramica involontaria in una o più aree sottoponibili a panoramica.

immagine che dimostra una spaziatura interna insufficiente per un'area con panna incorporata.

Queste indicazioni sono utili anche per le app come album fotografici o di mappatura che supportano la panoramica senza vincoli all'interno di una singola immagine o mappa, supportando al tempo stesso la panoramica ad asse singolo all'interno dell'album (alle immagini precedenti o successive) o dell'area dei dettagli. Nelle app che forniscono un'area di dettaglio o di opzioni corrispondente a una mappa o un'immagine di panoramica a mano libera, è preferibile che il layout della pagina inizi con l'area di dettaglio o di opzioni poiché l'area di panoramica senza vincoli dell'immagine o della mappa potrebbe interferire con la panoramica dell'area dei dettagli.

Esempi

Esempi di archivio