Zoom ottico e ridimensionamentoOptical zoom and resizing

Questo articolo descrive gli elementi di Windows per lo zoom e il ridimensionamento e offre linee guida relative all'esperienza utente per l'uso di questi meccanismi di interazione nelle app.This article describes Windows zooming and resizing elements and provides user experience guidelines for using these interaction mechanisms in your apps.

API importanti: Windows. UI. input, input (XAML)Important APIs: Windows.UI.Input, Input (XAML)

Lo zoom ottico permette agli utenti di ingrandire la visualizzazione del contenuto all'interno di un'area di contenuto (l'operazione viene eseguita sull'area di contenuto stessa), mentre il ridimensionamento consente di modificare la dimensione relativa di uno o più oggetti senza modificare la visualizzazione dell'area di contenuto (viene eseguito sugli oggetti all'interno dell'area).Optical zoom lets users magnify their view of the content within a content area (it is performed on the content area itself), whereas resizing enables users to change the relative size of one or more objects without changing the view of the content area (it is performed on the objects within the content area).

Sia l'interazione zoom ottico che quella di ridimensionamento si eseguono compiendo i movimenti di avvicinamento e allontanamento delle dita (allontanando le dita viene eseguito lo zoom avanti e avvicinandole viene eseguito lo zoom indietro), mantenendo premuto il tasto CTRL mentre si agisce sulla rotellina del mouse, oppure tenendo premuto il tasto CTRL (con il tasto MAIUSC se non è disponibile un tastierino numerico) e premendo i tasti + o - sulla tastiera.Both optical zoom and resizing interactions are performed through the pinch and stretch gestures (moving fingers farther apart zooms in and moving them closer together zooms out), or by holding the Ctrl key down while scrolling the mouse scroll wheel, or by holding the Ctrl key down (with the Shift key, if no numeric keypad is available) and pressing the plus (+) or minus (-) key.

Gli schemi seguenti mostrano le differenze tra il ridimensionamento e lo zoom ottico.The following diagrams demonstrate the differences between resizing and optical zooming.

Zoom ottico: l'utente seleziona un'area e quindi ingrandisce l'intera area.Optical zoom: User selects an area, and then zooms into the entire area.

Avvicinando le dita viene eseguito lo zoom avanti nell'area di contenuto, allontanandole viene eseguito lo zoom indietro

Ridimensionamento: l'utente seleziona un oggetto all'interno di un'area e lo ridimensiona.Resize: User selects an object within an area, and resizes that object.

Avvicinando le dita l'oggetto viene rimpicciolito, allontanandole viene ingrandito

Nota    Lo zoom ottico non dovrebbe essere confuso con lo zoom semantico.Note   Optical zoom shouldn't be confused with Semantic Zoom. Anche se usano gli stessi gesti per entrambe le interazioni, lo zoom semantico si riferisce alla presentazione e all'esplorazione di 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.Although the same gestures are used for both interactions, semantic zoom refers to the presentation and navigation of content organized within a single view (such as the folder structure of a computer, a library of documents, or a photo album).

 

Cosa fare e cosa non fareDos and don'ts

Segui le linee guida di seguito per le app che supportano il ridimensionamento o lo zoom ottico:Use the following guidelines for apps that support either resizing or optical zooming:

  • Se sono stati definiti limiti o vincoli di dimensione massima e minima, usa il feedback visivo per segnalare quando l'utente raggiunge o supera tali limiti.If maximum and minimum size constraints or boundaries are defined, use visual feedback to demonstrate when the user reaches or exceeds those boundaries.

  • Usa i punti di ancoraggio per influire sul comportamento di ridimensionamento e zoom fornendo punti logici in corrispondenza dei quali arrestare la manipolazione in modo da assicurare che nel riquadro di visualizzazione venga visualizzato uno specifico subset di contenuto.Use snap points to influence zooming and resizing behavior by providing logical points at which to stop the manipulation and ensure a specific subset of content is displayed in the viewport. Specifica punti di ancoraggio per i livelli di zoom comuni o per le visualizzazioni logiche, per semplificarne la selezione.Provide snap points for common zoom levels or logical views to make it easier for a user to select those levels. Ad esempio, le app per le foto potrebbero fornire un punto di ancoraggio al 100% per il ridimensionamento oppure, nel caso di app di mapping, i punti di ancoraggio potrebbero essere utili nelle visualizzazioni città, provincia e paese.For example, photo apps might provide a resizing snap point at 100% or, in the case of mapping apps, snap points might be useful at city, state, and country views.

    I punti di ancoraggio consentono agli utenti di raggiungere lo scopo anche operando in modo impreciso.Snap points enable users to be imprecise and still achieve their goals. Se usi XAML, vedi le proprietà relative ai punti di ancoraggio di ScrollViewer.If you're using XAML, see the snap points properties of ScrollViewer. Per JavaScript e HTML, usare -ms-content-zoom-snap-points.For JavaScript and HTML, use -ms-content-zoom-snap-points.

    Esistono due tipi di punti di ancoraggio:There are two types of snap-points:

    • Prossimità: dopo aver sollevato il contatto, se l'inerzia si interrompe entro la soglia di distanza di un punto di ancoraggio, viene selezionato un punto di ancoraggioProximity - After the contact is lifted, a snap point is selected if inertia stops within a distance threshold of the snap point. I punti di ancoraggio di prossimità consentono l'interruzione di un'operazione di ridimensionamento o zoom tra punti di ancoraggio.Proximity snap points still allow a zoom or resize to end between snap points.
    • Obbligatori: il punto di ancoraggio selezionato è quello che precede o segue immediatamente l'ultimo punto di ancoraggio attraversato prima che il contatto venga sollevato (a seconda della direzione e della velocità del gesto).Mandatory - The snap point selected is the one that immediately precedes or succeeds the last snap point crossed before the contact was lifted (depending on the direction and velocity of the gesture). Una manipolazione deve terminare su un punto di ancoraggio obbligatorio.A manipulation must end on a mandatory snap point.
  • Usa l'inerzia fisica,Use inertia physics. tra cui:These include the following:

    • Decelerazione: si verifica quando l'utente smette di avvicinare o allontanare le dita.Deceleration: Occurs when the user stops pinching or stretching. L'effetto ottenuto è simile al movimento su una superficie scivolosa fino all'arresto.This is similar to sliding to a stop on a slippery surface.
    • Rimbalzo: leggero effetto di rimbalzo che si ottiene quando viene superato un limite o un vincolo di dimensione.Bounce: A slight bounce-back effect occurs when a size constraint or boundary is passed.
  • Creare spazi tra i controlli in base alle Linee guida per la selezione della destinazione.Space controls according to the Guidelines for targeting.

  • Fornisci punti di controllo per il ridimensionamento vincolato.Provide scaling handles for constrained resizing. Se non specifichi punti di controllo di ridimensionamento, per impostazione predefinita viene eseguito il ridimensionamento isometrico o proporzionale.Isometric, or proportional, resizing is the default if the handles are not specified.

  • Non usare lo zoom per esplorare l'interfaccia utente o per esporre altri controlli all'interno dell'app. Usa, invece un'area di panoramica.Don't use zooming to navigate the UI or expose additional controls within your app, use a panning region instead. Per altre informazioni sulla panoramica, vedi Linee guida per la panoramica.For more info on panning, see Guidelines for panning.

  • Non inserire oggetti ridimensionabili in un'area di contenuto ridimensionabile.Don't put resizable objects within a resizable content area. Alcune eccezioni:Exceptions to this include:

    • Applicazioni di disegno in cui gli elementi ridimensionabili possono essere visualizzati su un Canvas o su una tavola da disegno ridimensionabile.Drawing applications where resizable items can appear on a resizable canvas or art board.
    • Pagine Web con un oggetto incorporato, ad esempio una mappa.Webpages with an embedded object such as a map.

    Nota    In tutti i casi, l'area del contenuto viene ridimensionata, a meno che tutti i punti di tocco non rientrino nell'oggetto ridimensionabile.Note   In all cases, the content area is resized unless all touch points are within the resizable object.

EsempiSamples

Esempi di archivioArchive samples