# Fluent Design System

Fluent Design System (nome in codice Project Neon), ufficialmente presentato come Microsoft Fluent Design System, è un linguaggio di progettazione sviluppato nel 2017 da Microsoft. Fluent Design è un revamp di Microsoft Design Language 2 che include le linee guida per i design e le interazioni utilizzate all'interno del software progettato per tutti i dispositivi e la piattaforma Windows 10. Il sistema si basa su cinque componenti chiave: luce, profondità, movimento, materiale e scala. Il nuovo linguaggio di progettazione include un uso più prominente degli effetti di movimento, profondità e traslucenza.
La transizione a Fluent è un progetto a lungo termine; aspetti preliminari del design (in particolare gli effetti di traslucenza "Acrilico" e "rivelazione" di effetti sui pulsanti) sono stati incorporati in Windows 10, in particolare all'interno del "Fall Creators Update" pubblicato nell'ottobre 2017, oltre a un aggiornamento di Xbox Un software di sistema rilasciato accanto ad esso. Altri aspetti di Fluent saranno introdotti su Windows nel tempo.

## Rispetto a Metro e Aero

I principi chiave di Fluent, o "blocchi" (Luce, Profondità, Movimento, Materiale e Scala), si allontanano dal concetto piatto definito da Metro e, pur preservando l'aspetto pulito introdotto da Metro, Fluent rinnova la grafica di Aero, un approccio di design che è stato introdotto in Windows Vista e Windows 7, inclusi traslucenza sfocata, motivi animati parallasse, ombreggiatura, effetti di evidenziazione che seguono il puntatore del mouse o movimenti di gesti di input e Metro "finto" una volta scaricato.

## Applicazioni di Fluent
### Luce

L'obiettivo principale è quello di attirare l'attenzione su un oggetto o un'informazione. Il concetto è stato ripreso dalla luce utilizzata in HoloLens per indicare il punto che si sta fissando ed è stato trasposto sui PC con un'interazione chiamata Rivelazione.

#### Rivela il momento saliente

Come accennato sopra, lo scopo della luce è attirare l'attenzione e illuminare le informazioni. Al passaggio del mouse, l'evidenziazione di Reveal illumina i bordi nascosti vicini su oggetti come elenchi e pulsanti del menu di navigazione dell'hamburger. Dopo la selezione, ad esempio facendo clic o toccando, viene visualizzato rapidamente un effetto di illuminazione circolare bianca. Inoltre, nell'ambiente olografico di Windows, esiste un puntatore bianco arrotondato.
Il 6 novembre 2017, il dipendente Microsoft David Haz ha dichiarato che esistono piani per applicare l'evidenziazione di rivelazione alla barra delle applicazioni, ma a luglio 2019 non si è verificato.

#### Rivela il focus

Elementi "focalizzabili" con bordo che si illumina tramite la visuale del fuoco.

### Profondità

L'aggiunta di profondità utilizza l'asse Z e consente la differenziazione del contenuto tramite la stratificazione. La profondità viene presentata tramite ombre esterne e stratificazione con profondità Z. Ciò è particolarmente evidente nell'app di Office riprogettata nel 2019.

### Motion

Il movimento stabilisce una relazione tra gli elementi dell'interfaccia utente e fornisce una continuità nell'esperienza.

#### Aggiungi/elimina animazioni

Elenca le animazioni per l'inserimento e la rimozione di elementi da una raccolta.

#### Animazioni collegate

Le animazioni connesse sono transizioni di elementi. Durante una modifica del contenuto, un elemento sembra continuare volando attraverso l'app.

#### Transizione dei contenuti

Utilizzato quando cambierà solo una parte del contenuto di una pagina.

#### Drill

Drill viene utilizzato durante la navigazione più approfondita in un'app. Ad esempio, per visualizzare più informazioni dopo aver selezionato un elemento.

#### Dissolvenza

Dissolvenza in entrata e in uscita per inserire e chiudere gli elementi dalla vista.

#### Parallax

La parallasse sposta gli oggetti a velocità diverse. Lo sfondo si muove più lentamente del contenuto sopra di esso. Ad esempio, un elenco scorrerà più velocemente dell'immagine di sfondo, creando un effetto di profondità oltre al movimento.

#### Press Feedback

Quando un elemento viene premuto, retrocede momentaneamente sullo sfondo e quindi ripristina la sua posizione originale. Esempi di press feedback includono i riquadri live del menu Start, le azioni rapide del Centro operativo e i pulsanti della barra degli indirizzi di Microsoft Edge.

### Materiale
#### Acrilico

Nuove icone con materiali acrilici sono state create per i programmi Microsoft, a partire dalle app di Office e dal Microsoft Edge basato su Chromium nel 2018 e nel 2019, rispettivamente. Versioni preliminari delle icone finali sono state individuate nel video "Meet the New icons for Office 365", prima che ne venissero individuate altre quando Windows 10X è stato presentato, prima di essere ufficialmente rivelato il 12 dicembre 2019. Queste icone hanno iniziato ad apparire tramite gli aggiornamenti di Microsoft Store per quelle app, a cominciare da Posta e Calendario.
Il materiale acrilico crea un effetto traslucido e sfocato con un leggero effetto di disturbo. È possibile creare una gerarchia visiva utilizzando diverse opacità. Ad esempio, in un'app, le superfici dei contenuti primari sono spesso opache (ad eccezione dei widget o delle app leggere come Calcolatrice ), un riquadro secondario può avere uno sfondo acrilico all'80% e il riquadro terziario può avere uno sfondo acrilico del 60%. L'acrilico di sfondo sfuma tutti gli elementi dietro il materiale acrilico attivo. L'acrilico in-app sfoca i contenuti all'interno dell'app.
L'acrilico è disabilitato in una finestra specifica quando l'app non è più selezionata. Entrambi i tipi di acrilico sono disabilitati a livello di sistema quando la trasparenza è disabilitata, quando la modalità Risparmio batteria è abilitata o su hardware di fascia bassa. Lo sfondo acrilico è disabilitato quando una finestra è deselezionata o in modalità Windows 10 Mobile, HoloLens o tablet.
Le app scalano su diversi fattori di forma, dimensioni di visualizzazione e da 0D a 3D. Gli elementi si adattano alle dimensioni dello schermo e sono disponibili su più dimensioni. I controlli coscienti sono anche classificati in Scala (ad esempio barre di scorrimento e input che si adattano a diversi metodi di invocazione).

### Scala

Le app si adattano a diversi fattori di forma, dimensioni di visualizzazione e da 0D a 3D. Gli elementi si adattano alle dimensioni dello schermo e sono disponibili in più dimensioni. Controlli coscienti sono anche classificati all'interno di Scale (ad es. Barre di scorrimento e input che si adattano a diversi metodi di invocazione).