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[2]. 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[3][4].

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[5][6][7][8]. Altri aspetti di Fluent saranno introdotti su Windows nel tempo[9].

Rispetto a Metro e Aero

[modifica | modifica wikitesto]

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[10].

Applicazioni di Fluent

[modifica | modifica wikitesto]

Luce

[modifica | modifica wikitesto]

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.[11]

Rivela il momento saliente

[modifica | modifica wikitesto]

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

[modifica | modifica wikitesto]

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

Profondità

[modifica | modifica wikitesto]

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[13][14]. Ciò è particolarmente evidente nell'app di Office riprogettata nel 2019.

Motion

[modifica | modifica wikitesto]

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

Aggiungi/elimina animazioni

[modifica | modifica wikitesto]

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

Animazioni collegate

[modifica | modifica wikitesto]

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

Transizione dei contenuti

[modifica | modifica wikitesto]

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

Drill

[modifica | modifica wikitesto]

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

Dissolvenza

[modifica | modifica wikitesto]

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

Parallax

[modifica | modifica wikitesto]

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[19].

Press Feedback

[modifica | modifica wikitesto]

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[20].

Materiale

[modifica | modifica wikitesto]

Acrilico

[modifica | modifica wikitesto]

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[21][22]. Versioni preliminari delle icone finali sono state individuate nel video "Meet the New icons for Office 365"[23], prima che ne venissero individuate altre quando Windows 10X[24] è stato presentato, prima di essere ufficialmente rivelato il 12 dicembre 2019[25]. Queste icone hanno iniziato ad apparire tramite gli aggiornamenti di Microsoft Store per quelle app, a cominciare da Posta e Calendario[26][27].

Icona di Microsoft Defender 2020: un esempio di Fluent Design
Icona di Microsoft Defender 2020: un esempio di Fluent Design

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[28].

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[29][30]. I controlli coscienti sono anche classificati in Scala (ad esempio barre di scorrimento e input che si adattano a diversi metodi di invocazione)[31][32].

Scala

[modifica | modifica wikitesto]

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).

Note

[modifica | modifica wikitesto]
  1. ^ Fluent Design is Microsoft's new modern UI for Windows and more, su The Verge, 11 maggio 2017. URL consultato l'11 maggio 2017.
  2. ^ (EN) Windows Developer on Twitter, su Twitter. URL consultato l'11 maggio 2017.
  3. ^ Fluent Design Language, su Microsoft. URL consultato il 12 maggio 2017.
  4. ^ New Windows look and feel, Neon, is officially the "Microsoft Fluent Design System", su Ars Technica. URL consultato l'11 maggio 2017.
  5. ^ Microsoft shows off its Fluent Design changes to Windows 10, in The Verge. URL consultato il 29 ottobre 2017.
  6. ^ (EN) Microsoft's Fluent Design System threatens to make Windows look good, in Ars Technica. URL consultato il 29 ottobre 2017.
  7. ^ A major new Xbox One update overhauls the dashboard with Fluent Design, in The Verge. URL consultato il 29 ottobre 2017.
  8. ^ The Xbox One is getting a major update today, including a faster dashboard, in The Verge. URL consultato il 29 ottobre 2017.
  9. ^ Instagram, 19 marzo 2020, https://www.instagram.com/p/B97VqkXg0iN/. URL consultato il 19 aprile 2020.
  10. ^ (EN) No Fluent Design Reveal Highlight in Start Menu - Fall Creator's Update, su answers.microsoft.com. URL consultato il 26 dicembre 2017.
  11. ^ Fluent Design, molto più di semplici effetti di trasparenza, su windowsblogitalia.com. URL consultato il 6 maggio 2022.
  12. ^ (EN) cphilippona, Reveal focus - UWP app developer, su docs.microsoft.com. URL consultato il 30 marzo 2018.
  13. ^ Microsoft shows off 'Z-depth layering' 3D feature in its Fluent Design System, in Windows Central. URL consultato il 22 dicembre 2017.
  14. ^ (EN) Microsoft Reveal Z-Depth Layering for Windows 10 Mixed Reality Devices, in VRFocus. URL consultato il 22 dicembre 2017 (archiviato dall'url originale il 13 agosto 2020).
  15. ^ (EN) mijacobs, Motion and animation in UWP apps - UWP app developer, su docs.microsoft.com. URL consultato il 22 dicembre 2017.
  16. ^ a b c (EN) mijacobs, Motion and animation in UWP apps - UWP app developer, su docs.microsoft.com. URL consultato il 30 marzo 2018.
  17. ^ (EN) mijacobs, Connected animation - UWP app developer, su docs.microsoft.com. URL consultato il 31 dicembre 2017.
  18. ^ (EN) davidvkimball, Page transitions in WUP apps - UWP apps, su docs.microsoft.com. URL consultato il 27 novembre 2019.
  19. ^ (EN) mijacobs, How to use the ParallaxView control to add depth and movement to your app. - UWP app developer, su docs.microsoft.com. URL consultato il 22 dicembre 2017.
  20. ^ (EN) mijacobs, Pointer click animations in UWP apps - UWP app developer, su docs.microsoft.com. URL consultato il 31 dicembre 2017.
  21. ^ Redesigning the Office App Icons to Embrace a New World of Work, su Medium, 29 novembre 2018. URL consultato il 19 aprile 2020.
  22. ^ Microsoft unveils new Edge browser logo that no longer looks like Internet Explorer, in The Verge, 2 novembre 2019. URL consultato il 19 aprile 2020.
  23. ^ Meet the new icons for Office 365 [collegamento interrotto], su youtube.com, 29 novembre 2018. URL consultato il 19 aprile 2020.
  24. ^ #MicrosoftEvent Live [collegamento interrotto], su youtube.com, 2 ottobre 2019. URL consultato il 19 aprile 2020.
  25. ^ The Icon Kaleidoscope, su Medium, 12 dicembre 2019. URL consultato il 19 aprile 2020.
  26. ^ Iconic Icons: Designing the World of Windows, su Medium, 20 febbraio 2020. URL consultato il 19 aprile 2020.
  27. ^ Microsoft rolls out colorful new Windows 10 icons, in The Verge, 20 febbraio 2020. URL consultato il 19 aprile 2020.
  28. ^ (EN) mijacobs, Acrylic material - UWP app developer, su docs.microsoft.com. URL consultato il 22 dicembre 2017.
  29. ^ (EN) Fluent Design System, su fluent.microsoft.com. URL consultato il 18 febbraio 2018 (archiviato dall'url originale il 1º marzo 2018).
  30. ^ (EN) Adarsh Verma, What Is Fluent Design System? How Is Microsoft Building The Most Beautiful Operating System?, in Fossbytes, 12 maggio 2017. URL consultato il 18 febbraio 2018.
  31. ^ (EN) muhsinking, Scroll viewer controls - UWP app developer, su docs.microsoft.com. URL consultato il 22 dicembre 2017.
  32. ^ What's new with Microsoft Fluent Design System 'wave one' for Windows 10, in Windows Central, 29 giugno 2017. URL consultato il 22 dicembre 2017.

Collegamenti esterni

[modifica | modifica wikitesto]
  Portale Informatica
  Portale Microsoft