Nota
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare ad accedere o modificare le directory.
L'accesso a questa pagina richiede l'autorizzazione. È possibile provare a modificare le directory.
Il moto descrive il modo in cui l'interfaccia anima e risponde all'interazione dell'utente. Il moto in Windows è reattivo, diretto e rispondente al contesto. Fornisce feedback all'input dell'utente e rafforza i paradigmi spaziali che supportano l'orientamento.
Suggerimento
Questo articolo descrive come viene applicato il linguaggio Fluent Design alle app di Windows. Per altre informazioni, vedere Fluent Design - Motion.
Principi del movimento
Questi principi guidano l'uso del movimento in Windows.
Connesso: gli elementi delle azioni si connettono senza problemi
Gli elementi che cambiano posizione e dimensioni devono connettersi visivamente da uno stato a un altro, anche se non sono collegati sotto le quinte. Gli utenti sono guidati a seguire gli elementi che vanno dal punto al punto, riducendo il carico cognitivo delle modifiche dello stato statico.
Esempio: Quando una finestra passa da flottante a ancorata e a ingrandita, sembra sempre la stessa finestra.
Suggerimento
Per migliorare l'accessibilità e la leggibilità, questa pagina utilizza immagini statiche nella visualizzazione predefinita. È possibile fare clic su un'immagine per visualizzare la versione animata.
Coerente: gli elementi devono comportarsi in modo simile quando si condividono i punti di ingresso
Le superfici che condividono lo stesso punto di ingresso dell'interfaccia utente devono richiamare e ignorare lo stesso modo per portare coerenza alle interazioni. Ogni transizione deve rispettare la tempistica, l'interpolazione e la direzione di altri elementi in modo che la superficie appaia coesa.
Esempio: tutti i riquadri a comparsa della barra delle applicazioni si spostano verso l'alto quando vengono richiamati e si spostano verso il basso quando vengono ignorati.
Fare clic sull'immagine per visualizzarla animata.
Reattivo: il sistema risponde e si adatta all'input e alle scelte dell'utente
Gli indicatori chiari mostrano che il sistema riconosce e si adatta normalmente a input, posizioni e orientamenti diversi. Le App devono basarsi sui comportamenti del sistema operativo per risultare reattive, attive e per aiutare l'utilizzo in base ai metodi di input.
Esempio: le icone della barra delle applicazioni vengono distribuite quando le tastiere vengono scollegate. I bordi della finestra richiamano un aspetto visivo diverso a seconda del cursore o del tocco dell'utente.
Fare clic sull'immagine per visualizzarla animata.
Piacevole: momenti inaspettati di gioia significativa
Il movimento aggiunge personalità ed energia all'esperienza per trasformare semplici azioni in momenti di gioia. Questi momenti sono sempre brevi e sfuggenti e aiutano a rafforzare le azioni degli utenti.
Esempio: la riduzione al minimo di una finestra fa sì che un'icona dell'app rimbalzi verso il basso, mentre il ripristino fa rimbalzare un'icona dell'app verso l'alto.
Fare clic sull'immagine per visualizzarla animata.
Resourceful: usa i controlli esistenti per garantire la coerenza laddove possibile
Evitare animazioni personalizzate laddove possibile. Usare risorse di animazione come i controlli WinUI per le transizioni di pagina, la messa a fuoco nella pagina e le micro interazioni. Se non è possibile usare i controlli WinUI, simulare i comportamenti esistenti del sistema operativo in base alla posizione in cui risiede il punto di ingresso dell'app.
Esempio:transizioni di pagina, animazioni connesse e icone animate sono i controlli WinUI consigliati che aggiungono movimento delizioso e necessario alle app.
Fare clic sull'immagine per visualizzarla animata.
Esempi
L'app Raccolta WinUI 3 include esempi interattivi della maggior parte dei controlli e delle funzionalità di WinUI 3. Scaricare l'app da Microsoft Store od ottenere il codice sorgente su GitHub
Utilizzo
Proprietà dell'animazione
Il movimento di Windows è veloce, diretto e appropriato al contesto. La cronologia e le curve di alleggerimento vengono regolate in base allo scopo dell'animazione per creare un'esperienza coerente.
| Scopo | Definizione | Semplicità | Temporizzazione | Utilizzo |
|---|---|---|---|---|
| Ingresso diretto | Rapido - In | Cubic-bezier(0,0,0,1) | 167, 250, 333 | Posizione, Scala, Rotazione |
| Elementi esistenti | Punto a punto | Cubic-bezier(0.55,0.55,0,1) | 167, 250, 333 ms | Posizione, Scala, Rotazione |
| Uscita diretta | Veloce - Uscita | Cubic-bezier(0,0,0,1) | 167ms | Posizione, Scala, Rotazione (combinare SEMPRE con dissolvenza) |
| Uscita dolce | Soft – Out | Cubic-bezier(1,0,1,1) | 167ms | Posizione, Scala |
| Minimo | Dissolvenza – In + Out | Lineare | 83 ms | Opacità |
| Ingresso forte | Elastic In (3 fotogrammi chiave) | (3 valori seguenti) | (3 valori seguenti) | Posizione, Scala |
| Fotogramma chiave 1 | Cubic-Bezier(0.85, 0, 0, 1) | 167ms | ||
| Fotogramma chiave 2 | Cubic-Bezier(0.85, 0, 0.75, 1) | 167ms | ||
| Fotogramma chiave 3 | Cubic-Bezier(0.85, 0, 0, 1) | 333 millisecondi |
Controlli
Questa versione di Windows introduce micro-interazioni intenzionali nei controlli WinUI. Aggiungi questi controlli alla tua app per organizzare meglio le informazioni e aiutare gli utenti dell'app a passare da pagina a pagina, livello a livello e stato allo stato di un'interazione.
Transizione di pagina: transizioni da pagina a pagina all'interno della stessa superficie
Usa le transizioni di pagina per passare senza problemi dalla pagina alla pagina e configurare le direzioni di animazione per rispettare il flusso di un'app.
Le transizioni di pagina guidano gli occhi dell'utente al contenuto in ingresso e in uscita, riducendo il carico cognitivo.
Fare clic sull'immagine per visualizzarla animata.
Animazione connessa: Transizioni da livello a livello all'interno della stessa pagina
Usa le animazioni connesse per evidenziare parti specifiche di informazioni all'interno di una pagina o di una superficie, mantenendo al tempo stesso il contesto.
Le animazioni connesse mettono a fuoco gli elementi selezionati e passano senza soluzione di continuità tra gli stati focalizzati e non focalizzati.
Fare clic sull'immagine per visualizzarla animata.
Icona animata: aggiunge piacere e rivela informazioni tramite micro interazioni
Usa icone animate per implementare icone leggere e illustrazioni basate su vettori con movimento usando animazioni Lottie.
Le icone animate attirano l'attenzione su punti di ingresso specifici, forniscono feedback dallo stato allo stato e aggiungono piacere a un'interazione.
Fare clic sull'immagine per visualizzarla animata.
Collabora con noi su GitHub
L'origine di questo contenuto è disponibile in GitHub, in cui è anche possibile creare ed esaminare i problemi e le richieste pull. Per ulteriori informazioni, vedere la guida per i collaboratori.
