Fluent Design System
Fluent Design System (nome in codice Project Neon)[1], 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 a Windows nel tempo.
Lo scopo della luce è attirare l'attenzione e illuminare le informazioni. Al passaggio del mouse, l'evidenziazione Rivela illumina i bordi nascosti nelle vicinanze su oggetti come gli elenchi e i pulsanti del menu di navigazione per hamburger. Alla selezione, ad esempio facendo clic o toccando, viene rapidamente visualizzato un effetto di illuminazione circolare bianca. Inoltre, nell'ambiente olografico di Windows, esiste un puntatore bianco arrotondato.
Il 6 novembre 2017, David Haz (impiegato della Microsoft) ha dichiarato che esistono piani per applicare l'evidenziazione di rivelazione alla barra delle applicazioni, ma a partire da marzo 2018 non si è verificato.
Sono presenti elementi focalizzabili con bagliore del bordo tramite la visuale di messa a fuoco.
L'aggiunta della profondità utilizza l'asse z e consente la differenziazione del contenuto tramite stratificazione. La profondità viene presentata tramite ombre esterne e stratificazione Z.
Motion stabilisce invece una relazione tra gli elementi dell'interfaccia utente e fornisce una continuità nell'esperienza.
Le animazioni connesse sono transizioni di oggetti. Durante una modifica del contenuto, sembra che un elemento continui a volare attraverso l'app.
La parallasse sposta gli oggetti a velocità diverse. Lo sfondo si sposta più lentamente del contenuto sopra di esso. Ad esempio, una lista scorrerà più velocemente rispetto all'immagine di sfondo, creando un effetto di profondità oltre al movimento.
Quando si preme un oggetto, esso si sposta momentaneamente sullo sfondo e quindi ripristina la posizione originale. Esempi di feedback della stampa includono i riquadri dal vivo del menu Start, le azioni rapide di Action Center e i pulsanti della barra degli indirizzi di Microsoft Edge.
Il materiale acrilico crea un effetto traslucido e sfocato con un leggero effetto di disturbo. Una gerarchia visiva può essere creata usando diverse opacità. Ad esempio, in un'app, le superfici del contenuto primario sono spesso opache (ad eccezione dei widget o delle app leggere come Calcolatrice), un riquadro secondario può avere l'80% di sfondo in acrilico e il pannello terziario può avere il 60% di sfondo acrilico. Sfondo L'acrilico sfoca tutti gli oggetti dietro il materiale acrilico attivo. L'Acrilico in-app offusca i contenuti all'interno dell'app.
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. 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)
Note
- ^ Fluent Design is Microsoft's new modern UI for Windows and more, su The Verge, 11 maggio 2017. URL consultato l'11 maggio 2017.
Collegamenti esterni
- (EN) Sito ufficiale, su microsoft.com.
