Movimento per le app di Windows

Il movimento Fluent ha una finalità nella tua app. Fornisce un feedback intelligente basato sul comportamento dell'utente, mantiene attiva l'interfaccia utente e guida l'esplorazione dell'utente all'interno dell'app. Il movimento Fluent genera una connessione emotiva tra un utente e la sua esperienza digitale. Questa funzionalità si basa sul movimento naturale che l'utente conosce già dal mondo fisico ed estende il sistema da questo punto.

Esempi

Se si ha l'app WinUI 2 Gallery installata, fare clic qui per aprire l'app e vedere Motion in azione . Scarica l'app WinUI 2 Gallery (Microsoft Store) Ottieni il codice sorgente (GitHub)

Principi del movimento Fluent

Fisico

Gli oggetti in movimento mostrano i comportamenti degli oggetti nel mondo reale. Il movimento fluido e reattivo rende l'esperienza naturale, creando connessioni emotive e aggiungendo personalità.

Quando interagisci con l'interfaccia utente tramite tocco, il movimento dell'interfaccia utente è direttamente correlato alla velocità dell'interazione. E poiché il tocco è manipolazione diretta, l'oggetto con cui interagisci influenza gli oggetti che lo circondano.

Funzionale

Il movimento ha una finalità e una funzione di direzione. Guida l'utente attraverso la complessità e lo aiuta a stabilire una gerarchia. Il movimento dà l'impressione di prestazioni migliorate e ottimizza l'esperienza utente nascondendo la latenza percepita.

Le transizioni di pagina svolgono una funzione. Forniscono suggerimenti su come le pagine sono correlate tra loro. Si spostano in un modo che viene percepito come veloce anche quando le prestazioni non sono ottimali.

Continuo

Il movimento fluido da punto a punto traccia la traiettoria visiva in modo naturale e guida l'utente. Assembla elegantemente le attività dell'utente, rendendolo più semplice da utilizzare.

Gli oggetti possono passare da una scena all'altra o modificarsi all'interno di una scena per offrire continuità e aiutare l'utente a mantenere il contesto.

Contestuale

Il movimento intelligente fornisce feedback all'utente in un modo allineato con la modalità con cui ha manipolato l'interfaccia utente. L'interazione è incentrata sull'utente. Il movimento è appropriato al fattore di forma ed è progettato intorno allo scenario. Dovrebbe essere comodo per ogni utente.

L'animazione dovrebbe essere legata all'interazione dell'utente. Un menu contestuale viene distribuito da un punto in cui l'utente lo ha attivato.

Articoli sul movimento

Tempistica e interpolazione

La tempistica e l'interpolazione sono elementi importanti per rendere il movimento naturale per gli oggetti che entrano, escono o si spostano all'interno dell'interfaccia utente.

Direzionalità e gravità

I segnali direzionali permettono di fornire un solido modello mentale del viaggio dell'utente nelle esperienze. Lo spostamento direzionale è soggetto a forze come la gravità, che rafforza la sensazione naturale del movimento.

Transizioni di pagina

Le transizioni di pagina dirigono gli utenti tra le pagine di un'app, fornendo commenti sulla relazione tra le pagine. Consentono agli utenti di capire dove si trovano nella gerarchia di navigazione.

Animazioni connesse

Le animazioni connesse consentono di creare un'esperienza di spostamento dinamica e convincente attraverso l'aggiunta di un'animazione alla transizione di un elemento tra due diverse viste.