Condividi tramite

Zoom ottico e ridimensionamento

Questo articolo descrive gli elementi di zoom e ridimensionamento di Windows e fornisce linee guida per l'esperienza utente per l'uso di questi meccanismi di interazione nelle app.

API importanti: Windows.UI.Input, Input (XAML)

Lo zoom ottico consente agli utenti di ingrandire la visualizzazione del contenuto all'interno di un'area di contenuto (viene eseguita sull'area del contenuto stessa), mentre il ridimensionamento consente agli utenti di modificare le dimensioni relative di uno o più oggetti senza modificare la visualizzazione dell'area del contenuto (viene eseguita sugli oggetti all'interno dell'area del contenuto).

Le interazioni di zoom ottico e ridimensionamento vengono eseguite tramite i gesti di avvicinamento e allontanamento delle dita (muovendo le dita più lontano si ingrandisce e avvicinandole si rimpicciolisce), oppure tenendo premuto il tasto Ctrl mentre si scorre la rotellina del mouse, o tenendo premuto il tasto Ctrl (con il tasto Shift, se non è disponibile alcun tastierino numerico) e premendo il tasto più (+) o meno (-).

I diagrammi seguenti illustrano le differenze tra il ridimensionamento e lo zoom ottico.

Zoom ottico: l'utente seleziona un'area e quindi esegue lo zoom nell'intera area.

avvicinando le dita si esegue lo zoom in sull'area del contenuto e allontanandole si esegue lo zoom out

Ridimensiona: l'utente seleziona un oggetto all'interno di un'area e lo ridimensiona.

Avvicinando le dita tra loro si riduce un oggetto e allontanandole lo si ingrandisce

Nota Lo zoom ottico non deve essere confuso con lo zoom semantico. Anche se gli stessi movimenti vengono usati per entrambe le interazioni, lo zoom semantico si riferisce alla presentazione e allo spostamento del contenuto organizzato all'interno di una singola visualizzazione (ad esempio la struttura di cartelle di un computer, una raccolta di documenti o un album fotografico).

 

Procedure rischiose e procedure consigliate

Usare le linee guida seguenti per le app che supportano il ridimensionamento o lo zoom ottico:

  • Se vengono definiti vincoli di dimensione massima e minima o limiti, usare il feedback visivo per dimostrare quando l'utente raggiunge o supera tali limiti.

  • Usare i punti di ancoraggio per influenzare il comportamento di zoom e ridimensionamento fornendo punti logici in cui arrestare la manipolazione e assicurarsi che nel riquadro di visualizzazione venga visualizzato un subset specifico di contenuto. Fornire punti di ancoraggio per i livelli di zoom comuni o le visualizzazioni logiche per semplificare la selezione di tali livelli da parte di un utente. Ad esempio, le app di foto potrebbero fornire un punto di ancoraggio di ridimensionamento al 100% o, nel caso delle app di mappatura, i punti di ancoraggio potrebbero essere utili nelle visualizzazioni città, stato e paese/regione.

    I punti di ancoraggio consentono agli utenti di essere imprecisi e di raggiungere ancora i propri obiettivi. Se usi XAML, vedi le proprietà dei punti di ancoraggio di ScrollViewer.

    Esistono due tipi di punti di ancoraggio:

    • Prossimità: dopo che il contatto è stato sollevato, viene selezionato un punto di aggancio se l'inerzia si arresta entro una soglia di distanza dal punto di aggancio. I punti di cattura di prossimità consentono comunque di terminare uno zoom o un ridimensionamento tra i punti di cattura.
    • 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). Una manipolazione deve terminare su un punto di ancoraggio obbligatorio.

  • Usare la fisica dell'inerzia. Questi includono:

    • Decelerazione: si verifica quando l'utente smette di pizzicare o allontanare le dita. Questo è simile allo scivolamento fino a fermarsi su una superficie scivolosa.
    • Rimbalzo: un leggero effetto di rimbalzo si verifica quando viene passato un vincolo o un limite di dimensioni.

  • Controlli dello spazio secondo le linee guida per il puntamento.

  • Fornire maniglie per il ridimensionamento con vincoli. Il ridimensionamento isometrico o proporzionale rappresenta l'opzione predefinita se gli handle non vengono specificati.

  • Non usare lo zoom per spostarsi nell'interfaccia utente o esporre controlli aggiuntivi all'interno dell'app, usare invece un'area di panoramica. Per altre info sulla panoramica, vedi Linee guida per la panoramica.

  • Non inserire oggetti ridimensionabili all'interno di un'area di contenuto ridimensionabile. Le eccezioni a questo includono:

    • Applicazioni di disegno in cui gli elementi ridimensionabili possono essere visualizzati su una tela ridimensionabile o su una tavola da disegno.
    • Pagine Web con un oggetto incorporato, ad esempio una mappa.

    Nota In tutti i casi, l'area del contenuto viene ridimensionata a meno che tutti i punti di tocco non si trovino all'interno dell'oggetto ridimensionabile.

Samples

Esempi di archivio

  • Last updated on