Direzionalità e gravitàDirectionality and gravity

I segnali direzionali consentono di consolidare il modello mentale del percorso che un utente ha a che fare con le varie esperienze.Directional signals help to solidify the mental model of the journey a user takes across experiences. È importante che la direzione di qualsiasi movimento supporti sia la continuità dello spazio che l'integrità degli oggetti nello spazio.It is important that the direction of any motion support both the continuity of the space as well as the integrity of the objects in the space.

Lo spostamento direzionale è soggetto a forze come la gravità.Directional movement is subject to forces like gravity. L'applicazione di forze allo spostamento rinforza la sensazione naturale del movimento.Applying forces to movement reinforces the natural feel of the motion.

EsempiExamples

XAML controls gallery

Se hai l'app Raccolta di controlli XAML installata, fai clic qui per aprire l'app e vedere Motion in azione .If you have the XAML Controls Gallery app installed, click here to open the app and see Motion in action.

Direzione dello spostamentoDirection of movement

La direzione di spostamento corrisponde al movimento fisico.Direction of movement corresponds to physical motion. Proprio come per natura, gli oggetti possono essere spostati in qualsiasi asse globale-X, Y, Z.Just like in nature, objects can move in any world axis - X,Y,Z. Questo è il modo in cui si considera lo spostamento degli oggetti sullo schermo.This is how we think of the movement of objects on the screen. Quando si spostano gli oggetti, evitare collisioni non naturali.When you move objects, avoid unnatural collisions. Tenere presente la posizione in cui gli oggetti provengono da e passare a e supportare sempre costrutti di livello superiore che possono essere usati nella scena, ad esempio la direzione di scorrimento o la gerarchia del layout.Keep in mind where objects come from and go to, and alway support higher level constructs that may be used in the scene, such as scroll direction or layout hierarchy.

Breve video che mostra un cerchio, quindi l'aggiunta di un asse X, di un asse Y e di un asse Z.

Direzione di navigazioneDirection of navigation

La direzione di navigazione tra le scene nell'app è concettuale.The direction of navigation between scenes in your app is conceptual. Gli utenti si spostano in futuro e viceversa.Users navigate forward and back. Le scene si spostano in e fuori dalla visualizzazione.Scenes move in and out of view. Questi concetti si combinano con lo spostamento fisico per guidare l'utente.These concepts combine with physical movement to guide the user.

Quando la navigazione causa la trasmissione di un oggetto dalla scena precedente alla nuova scena, l'oggetto esegue un semplice spostamento da a a B sullo schermo.When navigation causes an object to travel from the previous scene to the new scene, the object makes a simple A-to-B move on the screen. Per assicurarsi che lo spostamento ritenga più fisico, viene aggiunto l'interpolazione standard, oltre alla sensazione di gravità.To ensure that the movement feels more physical, the standard easing is added, as well as the feeling of gravity.

Per lo spostamento indietro, lo spostamento è invertito (B-to-A).For back navigation, the move is reversed (B-to-A). Quando l'utente si sposta indietro, si prevede che venga restituito lo stato precedente il prima possibile.When the user navigates back, they have an expectation to be returned to the previous state as soon as possible. Il tempo è più rapido, più diretto e usa l'interpolazione decelerazione.The timing is quicker, more direct, and uses the decelerate easing.

In questo caso, questi principi vengono applicati quando l'elemento selezionato rimane sullo schermo durante lo spostamento avanti e indietro.Here, these principles are applied as the selected item stays on screen during forward and back navigation.

Esempio di interfaccia utente di movimento continuo

Quando la navigazione causa la sostituzione degli elementi sullo schermo, è importante indicare la posizione in cui si è verificata la scena di uscita e la provenienza della nuova scena.When navigation causes items on the screen to be replaced, its important to show where the exiting scene went to, and where the new scene is coming from.

Ciò comporta diversi vantaggi:This has several benefits:

  • Solidifica il modello mentale dell'utente dello spazio.It solidifies the user's mental model of the space.
  • La durata della scena in uscita offre più tempo per preparare il contenuto da animare in per la scena in arrivo.The duration of the exiting scene provides more time to prepare content to be animated in for the incoming scene.
  • Migliora le prestazioni percepite dell'app.It improves the perceived performance of the app.

Ci sono 4 direzioni discrete di navigazione da considerare.There are 4 discreet directions of navigation to consider.

Inoltri Celebrare il contenuto che si immette nella scena in modo che non entri in conflitto con il contenuto in uscita.Forward-In Celebrate content entering the scene in a manner that does not collide with outgoing content. Il contenuto decelera nella scena.Content decelerates into the scene.

direzione avanti in

In uscita Il contenuto viene chiuso rapidamente.Forward-Out Content exits quickly. Gli oggetti accelerano lo schermo.Objects accelerate off screen.

direzione in uscita

All'indietro Uguale a quello di avanzamento, ma invertito.Backward-In Same as Forward-In, but reversed.

Breve video che mostra un cerchio che si trova a destra del frame e si arresta all'interno del frame.

Indietro Uguale a quello in uscita, ma invertito.Backward-Out Same as Forward-Out, but reversed.

direzione indietro

GravitàGravity

La gravità rende le tue esperienze più naturali.Gravity makes your experiences feel more natural. Gli oggetti che si spostano sull'asse Z e che non sono ancorati alla scena da un'offerta sullo schermo hanno il potenziale impatto sulla gravità.Objects that move on the Z-axis and are not anchored to the scene by an onscreen affordance have the potential to be affected by gravity. Quando un oggetto si interrompe liberamente e prima di raggiungere la velocità di escape, la gravità estrae l'oggetto, creando una curva più naturale della traiettoria dell'oggetto durante lo spostamento.As an object breaks free of the scene and before it reaches escape velocity, gravity pulls down on the object, creating a more natural curve of the object trajectory as it moves.

Il Gravity si manifesta in genere quando un oggetto deve passare da una scena a un'altra.Gravity typically manifests when an object must jump from one scene to another. Per questo motivo, l'animazione connessa usa il concetto di gravità.Because of this, connected animation uses the concept of gravity.

In questo caso, un elemento nella prima riga della griglia è influenzato dalla gravità, causando un lieve calo quando lascia la posizione e si sposta in primo piano.Here, an element in the top row of the grid is affected by gravity, causing it to drop slightly as it leaves its place and moves to the front.

Breve video che mostra un elemento Rectangle che lascia la prima riga di una griglia, eliminando leggermente e quindi zoom avanti nella finestra.