RotazioneRotation

Questo articolo descrive la nuova interfaccia utente di Windows per la rotazione e fornisce linee guida sull'esperienza utente da considerare quando si usa questo nuovo meccanismo di interazione nell'app di Windows.This article describes the new Windows UI for rotation and provides user experience guidelines that should be considered when using this new interaction mechanism in your Windows app.

API importanti: Windows. UI. input, Windows. UI. XAML. inputImportant APIs: Windows.UI.Input, Windows.UI.Xaml.Input

Cosa fare e cosa non fareDos and don'ts

  • Usa la rotazione per consentire agli utenti di ruotare direttamente gli elementi dell'interfaccia utente.Use rotation to help users directly rotate UI elements.

Istruzioni aggiuntive per l'usoAdditional usage guidance

Panoramica della rotazioneOverview of rotation

La rotazione è la tecnica ottimizzata per il tocco utilizzata dalle app di Windows per consentire agli utenti di trasformare un oggetto in una direzione circolare (in senso orario o antiorario).Rotation is the touch-optimized technique used by Windows apps to enable users to turn an object in a circular direction (clockwise or counter-clockwise).

A seconda del dispositivo di input, l'interazione di rotazione viene eseguita mediante:Depending on the input device, the rotation interaction is performed using:

  • Un mouse o una penna/uno stilo attivo per spostare la barretta verticale di ridimensionamento per la rotazione di un oggetto selezionato.A mouse or active pen/stylus to move the rotation gripper of a selected object.
  • Il tocco o una penna/uno stilo passivo per ruotare l'oggetto nella direzione desiderata usando il gesto di rotazione.Touch or passive pen/stylus to turn the object in the desired direction using the rotate gesture.

Quando usare la rotazioneWhen to use rotation

Usa la rotazione per consentire agli utenti di ruotare direttamente gli elementi dell'interfaccia utente.Use rotation to help users directly rotate UI elements. I diagrammi seguenti mostrano alcune posizioni delle dita supportate per l'interazione di rotazione.The following diagrams show some of the supported finger positions for the rotation interaction.

Diagramma che mostra varie posizioni delle dita supportate dalla rotazione.

Nota    Intuitivamente, e nella maggior parte dei casi, il punto di rotazione è uno dei due punti di tocco, a meno che l'utente non possa specificare un punto di rotazione non correlato ai punti di contatto, ad esempio in un'applicazione di disegno o layout.Note   Intuitively, and in most cases, the rotation point is one of the two touch points unless the user can specify a rotation point unrelated to the contact points (for example, in a drawing or layout application). Le immagini seguenti mostrano il possibile degrado dell'esperienza utente se il punto di rotazione non viene vincolato in questo modo.The following images demonstrate how the user experience can be degraded if the rotation point is not constrained in this way.

Questa prima immagine mostra i punti tocco iniziale (pollice) e secondario (indice). L'indice sta toccando un albero e il pollice sta toccando un ceppo.This first picture shows the initial (thumb) and secondary (index finger) touch points: the index finger is touching a tree and the thumb is touching a log.

Immagine che mostra i due punti tocco iniziali per il gesto di rotazione.image showing the two initial touch points for the rotation gesture. In questa seconda immagine la rotazione viene eseguita rispetto al punto tocco iniziale (pollice).In this second picture, rotation is performed around the initial (thumb) touch point. Dopo la rotazione l'indice sta ancora toccando il tronco dell'albero e il pollice sta ancora toccando il ceppo (il punto di rotazione).After the rotation, the index finger is still touching the tree trunk and the thumb is still touching the log (the rotation point).

Immagine che mostra un'immagine ruotata con il punto di rotazione vincolato a uno dei due punti tocco iniziali.image showing a rotated picture with the rotation point constrained to one of the two initial touch points. In questa terza immagine l'applicazione, o l'utente, ha definito come centro di rotazione il punto centrale dell'immagine.In this third picture, the center of rotation has been defined by the application (or set by the user) to be the center point of the picture. Dopo la rotazione, poiché l'immagine non ha ruotato intorno a una delle dita, l'illusione della manipolazione diretta si interrompe (a meno che l'utente non abbia selezionato questa impostazione).After the rotation, because the picture did not rotate around one of the fingers, the illusion of direct manipulation is broken (unless the user has chosen this setting).

Immagine che mostra un'immagine ruotata con il punto di rotazione vincolato al centro dell'immagine anziché a uno dei due punti tocco iniziali.image showing a rotated picture with the rotation point constrained to the center of the picture rather than either of the two initial touch points. In quest'ultima immagine l'applicazione, o l'utente, ha definito come centro di rotazione un punto a metà del bordo sinistro dell'immagine.In this last picture, the center of rotation has been defined by the application (or set by the user) to be a point in the middle of the left edge of the picture. Di nuovo, a meno che l'utente non abbia selezionato questa impostazione, l'illusione della manipolazione diretta si interrompe.Again, unless the user has chosen this setting, the illusion of direct manipulation is broken in this case.

Immagine che mostra un'immagine ruotata con il punto di rotazione vincolato al centro del bordo sinistro dell'immagine anziché a uno dei due punti tocco iniziali.

 

Windows 10 supporta tre tipi di rotazione: gratuito, vincolato e combinato.Windows 10 supports three types of rotation: free, constrained, and combined.

TypeType DescrizioneDescription
Rotazione liberaFree rotation

La rotazione gratuita consente a un utente di ruotare liberamente il contenuto ovunque si trovino in un arco di 360 gradi. Quando l'utente rilascia l'oggetto, l'oggetto rimane nella posizione scelta.Free rotation enables a user to rotate content freely anywhere in a 360 degree arc. When the user releases the object, the object remains in the chosen position. La rotazione libera è utile per le applicazioni di disegno e di layout, ad esempio Microsoft PowerPoint, Word, Visio e Paint, Adobe Photoshop, Illustrator e Flash.Free rotation is useful for drawing and layout applications such as Microsoft PowerPoint, Word, Visio, and Paint; and Adobe Photoshop, Illustrator, and Flash.

Rotazione vincolataConstrained rotation

La rotazione vincolata supporta la rotazione libera durante la manipolazione, ma impone punti di ancoraggio a incrementi di 90 gradi (0, 90, 180 e 270) al momento del rilascio.Constrained rotation supports free rotation during the manipulation but enforces snap points at 90 degree increments (0, 90, 180, and 270) upon release. Quando l'utente rilascia l'oggetto, quest'ultimo ruota automaticamente al punto di ancoraggio più vicino.When the user releases the object, the object automatically rotates to the nearest snap point.

La rotazione vincolata è il metodo di rotazione più comune e funziona in modo analogo allo scorrimento del contenuto.Constrained rotation is the most common method of rotation, and it functions in a similar way to scrolling content. I punti di ancoraggio consentono agli utenti di raggiungere lo scopo anche operando in modo impreciso.Snap points let a user be imprecise and still achieve their goal. La rotazione vincolata è utile per applicazioni come Web browser e album fotografici.Constrained rotation is useful for applications such as web browsers and photo albums.

Rotazione combinataCombined rotation

La rotazione combinata supporta la rotazione libera con zone (simili ai binari in Linee guida per la panoramica) in corrispondenza dei punti di ancoraggio a 90 gradi applicati dalla rotazione vincolata.Combined rotation supports free rotation with zones (similar to rails in Guidelines for panning) at each of the 90 degree snap points enforced by constrained rotation. Se l'utente rilascia l'oggetto all'esterno di una delle zone a 90°, l'oggetto resterà in quella posizione. In caso contrario, l'oggetto ruoterà automaticamente a un punto di ancoraggio.If the user releases the object outside of one of 90 degree zones, the object remains in that position; otherwise, the object automatically rotates to a snap point.

Nota    Una guida dell'interfaccia utente è una funzionalità in cui un'area intorno a una destinazione vincola lo spostamento verso un valore o una posizione specifica per influenzare la selezione. Note  A user interface rail is a feature in which an area around a target constrains movement towards some specific value or location to influence its selection.
 

EsempiSamples

Esempi di archivioArchive samples