|
'''Fluent Design System''' (nome in codice '''Project Neon''')<ref>{{Cita web|url=https://www.theverge.com/2017/5/11/15615812/microsoft-fluent-design-system-project-neon-features|titolo=Fluent Design is Microsoft's new modern UI for Windows and more|data=11 maggio 2017|sito=The Verge|accesso=11 maggio 2017}}</ref>, ufficialmente presentato come '''Microsoft Fluent Design System''', è un linguaggio di progettazione sviluppato nel [[2017]] da [[Microsoft]]<ref>{{CiteCita web|url=https://twitter.com/windowsdev/status/862698458469122049|titletitolo=Windows Developer on Twitter|websitesito=Twitter|languagelingua=en|access-dateaccesso=2017-05-11 maggio 2017}}</ref>. 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 [[Microsoft Windows|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<ref>{{CiteCita web|url=http://fluent.microsoft.com|titletitolo=Fluent Design Language|websitesito=Microsoft|access-dateaccesso=2017-05-12 maggio 2017}}</ref><ref name="ars-fluentdesign">{{citeCita web|titletitolo=New Windows look and feel, Neon, is officially the "Microsoft Fluent Design System"|url=https://arstechnica.com/information-technology/2017/05/new-windows-look-and-feel-neon-is-officially-the-microsoft-fluent-design-system/|websitesito=Ars Technica|accessdateaccesso=11 Maymaggio 2017}}</ref>.
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<ref>{{CiteCita news|url=https://www.theverge.com/2017/10/16/16481202/microsoft-windows-10-fall-creators-update-fluent-design|titletitolo=Microsoft shows off its Fluent Design changes to Windows 10|workopera=The Verge|access-dateaccesso=29 ottobre 2017-10-29}}</ref><ref>{{CiteCita news|url=https://arstechnica.com/information-technology/2017/05/taking-a-closer-look-at-microsofts-fluent-design-system/|titletitolo=Microsoft's Fluent Design System threatens to make Windows look good|workopera=Ars Technica|access-dateaccesso=29 ottobre 2017-10-29|languagelingua=en-us}}</ref><ref>{{CiteCita news|url=https://www.theverge.com/2017/8/7/16105986/microsoft-xbox-one-dashboard-update-fluent-design|titletitolo=A major new Xbox One update overhauls the dashboard with Fluent Design|workopera=The Verge|access-dateaccesso=29 ottobre 2017-10-29}}</ref><ref>{{CiteCita news|url=https://www.theverge.com/2017/10/16/16481340/microsoft-xbox-one-fall-dashboard-update|titletitolo=The Xbox One is getting a major update today, including a faster dashboard|workopera=The Verge|access-dateaccesso=29 ottobre 2017-10-29}}</ref>. Altri aspetti di Fluent saranno introdotti asu [[Windows]] nel tempo<ref>{{CiteCita web|url=https://www.instagram.com/p/B97VqkXg0iN/|datedata=March 19, marzo 2020|websitesito=Instagram|access-dateaccesso=April19 19,aprile 2020}}</ref>.
== 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 [[Modern UI|Metro]] e, pur preservando l'aspetto pulito introdotto da Metro, Fluent rinnova la grafica di Aero[[Windows Aero|Aero]], un design 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 [[Modern UI|Metro]] "finto" una volta scaricato<ref>{{CiteCita web|url=https://answers.microsoft.com/en-us/windows/forum/windows_10-start-win_general/no-fluent-design-reveal-highlight-in-start-menu/106f29b6-2653-4f40-9514-1497e3474459|titletitolo=No Fluent Design Reveal Highlight in Start Menu - Fall Creator's Update|websitesito=answers.microsoft.com|languagelingua=en-US|access-dateaccesso=26 dicembre 2017-12-26}}</ref>.
== 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 [[Windows Mixed Reality#Microsoft HoloLens|HoloLens]] per indicare il punto che si sta fissando ed è stato trasposto sui PC con un'interazione chiamata '''Rivelazione'''.<ref>{{Cita web|url=https://www.windowsblogitalia.com/2017/05/microsoft-fluent-design-interfaccia/|titolo=Fluent Design, molto più di semplici effetti di trasparenza|accesso=6 maggio 2022}}</ref>
==== Rivela il momento saliente ====
LoCome 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<ref>{{CiteCita web|url=https://docs.microsoft.com/en-us/windows/uwp/design/style/reveal-focus|titletitolo=Reveal focus - UWP app developer|lastcognome=cphilippona|websitesito=docs.microsoft.com|languagelingua=en-us|access-dateaccesso=30 marzo 2018-03-30}}</ref>.
=== 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<ref>{{CiteCita news|url=https://www.windowscentral.com/microsoft-shows-plans-z-depth-layering-wave-2-fluent-design|titletitolo=Microsoft shows off 'Z-depth layering' 3D feature in its Fluent Design System|workopera=Windows Central|access-dateaccesso=22 dicembre 2017-12-22}}</ref><ref>{{CiteCita news|url=https://www.vrfocus.com/2017/05/microsoft-reveal-z-depth-layering-for-windows-10-mixed-reality-devices/|titletitolo=Microsoft Reveal Z-Depth Layering for Windows 10 Mixed Reality Devices|workopera=VRFocus|access-dateaccesso=2017-12-22 dicembre 2017|languagelingua=en|dataarchivio=13 agosto 2020|urlarchivio=https://web.archive.org/web/20200813034545/https://www.vrfocus.com/2017/05/microsoft-USreveal-z-depth-layering-for-windows-10-mixed-reality-devices/|urlmorto=sì}}</ref>. 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<ref>{{CiteCita web|url=https://docs.microsoft.com/windows/uwp/design/motion/|titletitolo=Motion and animation in UWP apps - UWP app developer|lastcognome=mijacobs|websitesito=docs.microsoft.com|languagelingua=en-us|access-dateaccesso=22 dicembre 2017-12-22}}</ref>.
==== Aggiungi/elimina animazioni ====
Elenca le animazioni per l'inserimento e la rimozione di elementi da una raccolta<ref name="docs.microsoft.com">{{CiteCita web|url=https://docs.microsoft.com/windows/uwp/design/motion/|titletitolo=Motion and animation in UWP apps - UWP app developer|lastcognome=mijacobs|websitesito=docs.microsoft.com|languagelingua=en-us|access-dateaccesso=30 marzo 2018-03-30}}</ref>.
==== Animazioni collegate ====
Le animazioni connesse sono transizioni di elementi. Durante una modifica del contenuto, un elemento sembra continuare volando attraverso l'app<ref>{{CiteCita web|url=https://docs.microsoft.com/windows/uwp/design/motion/connected-animation|titletitolo=Connected animation - UWP app developer|lastcognome=mijacobs|websitesito=docs.microsoft.com|languagelingua=en-us|access-dateaccesso=31 dicembre 2017-12-31}}</ref>.
==== Transizione dei contenuti ====
Utilizzato quando cambierà solo una parte del contenuto di una pagina<ref>{{Cite web|urlname=https://"docs.microsoft.com/windows/uwp/design/motion/|title=Motion" and animation in UWP apps - UWP app developer|last=mijacobs|website=docs.microsoft.com|language=en-us|access-date=2018-03-30}}</ref>.
==== Drill ====
Drill viene utilizzato durante la navigazione più approfondita in un'app. Ad esempio, per visualizzare più informazioni dopo aver selezionato un elemento<ref>{{CiteCita web|url=https://docs.microsoft.com/en-us/windows/uwp/design/motion/page-transitions|titletitolo=Page transitions in WUP apps - UWP apps|lastcognome=davidvkimball|websitesito=docs.microsoft.com|languagelingua=en-us|access-dateaccesso=27 novembre 2019-11-27}}</ref>.
==== Dissolvenza ====
Dissolvenza in entrata e in uscita per inserire e chiudere gli elementi dalla vista<ref>{{Cite web|urlname=https://"docs.microsoft.com/windows/uwp/design/motion/|title=Motion" and animation in UWP apps - UWP app developer|last=mijacobs|website=docs.microsoft.com|language=en-us|access-date=2018-03-30}}</ref>.
==== 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<ref>{{CiteCita web|url=https://docs.microsoft.com/windows/uwp/design/motion/parallax|titletitolo=How to use the ParallaxView control to add depth and movement to your app. - UWP app developer|lastcognome=mijacobs|websitesito=docs.microsoft.com|languagelingua=en-us|access-dateaccesso=22 dicembre 2017-12-22}}</ref>.
==== 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<ref>{{CiteCita web|url=https://docs.microsoft.com/windows/uwp/design/motion/motion-pointer|titletitolo=Pointer click animations in UWP apps - UWP app developer|lastcognome=mijacobs|websitesito=docs.microsoft.com|languagelingua=en-us|access-dateaccesso=31 dicembre 2017-12-31}}</ref>.
=== 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<ref>{{CiteCita web|url=https://medium.com/microsoft-design/redesigning-the-office-app-icons-to-embrace-a-new-world-of-work-91d72608ee8f|titletitolo=Redesigning the Office App Icons to Embrace a New World of Work|datedata=November 29, novembre 2018|websitesito=Medium|access-dateaccesso=April19 19,aprile 2020}}</ref><ref>{{CiteCita news|url=https://www.theverge.com/2019/11/2/20944341/microsoft-edge-chromium-browser-logo-icon-wave-surf-new|titletitolo=Microsoft unveils new Edge browser logo that no longer looks like Internet Explorer|datedata=November 2, novembre 2019|workopera=The Verge|access-dateaccesso=April19 19,aprile 2020}}</ref>. Versioni preliminari delle icone finali sono state individuate nel video "Meet the New icons for Office 365"<ref>{{CiteCita web|url=https://youtube.com/YplAU5myNP4|titletitolo=Meet the new icons for Office 365|datedata=November 29, novembre 2018|access-dateaccesso=April 19, aprile 2020|urlmorto=sì}}</ref>, prima che ne venissero individuate altre quando Windows 10X<ref>{{CiteCita web|url=https://youtube.com/dmaioTs0NH8|titletitolo=#MicrosoftEvent Live|datedata=October 2, ottobre 2019|access-dateaccesso=April 19, aprile 2020|urlmorto=sì}}</ref> è stato presentato, prima di essere ufficialmente rivelato il 12 dicembre 2019<ref>{{CiteCita web|url=https://medium.com/microsoft-design/the-ripple-effect-expanding-our-icon-design-system-74b4d916b7a4|titletitolo=The Icon Kaleidoscope|datedata=December 12, dicembre 2019|websitesito=Medium|access-dateaccesso=April19 19,aprile 2020}}</ref>. Queste icone hanno iniziato ad apparire tramite gli aggiornamenti di Microsoft Store per quelle app, a cominciare da Posta e Calendario<ref>{{CiteCita web|url=https://medium.com/microsoft-design/iconic-icons-designing-the-world-of-windows-5e70e25e5416|titletitolo=Iconic Icons: Designing the World of Windows|datedata=February 20, febbraio 2020|websitesito=Medium|access-dateaccesso=April19 19,aprile 2020}}</ref><ref>{{CiteCita news|url=https://www.theverge.com/2020/2/20/21145157/microsoft-windows-10-new-icons-modern-release-update-apps|titletitolo=Microsoft rolls out colorful new Windows 10 icons|datedata=February 20, febbraio 2020|workopera=The Verge|access-dateaccesso=April19 19,aprile 2020}}</ref>.
[[File:Microsoft Defender 2020 Fluent Design iconWindows-defender.pngsvg|alt=Icona di Microsoft Defender 2020: un esempio di Fluent Design|miniatura|170x170px|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<ref>{{CiteCita web|url=https://docs.microsoft.com/windows/uwp/design/style/acrylic|titletitolo=Acrylic material - UWP app developer|lastcognome=mijacobs|websitesito=docs.microsoft.com|languagelingua=en-us|access-dateaccesso=22 dicembre 2017-12-22}}</ref>.
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<ref>{{CiteCita web|url=https://fluent.microsoft.com/|titletitolo=Fluent Design System|websitesito=fluent.microsoft.com|languagelingua=en|access-dateaccesso=18 febbraio 2018-02-18|archive-urlurlarchivio=https://web.archive.org/web/20180301050334/https://fluent.microsoft.com/|archive-datedataarchivio=1º marzo 2018-03-01|url-statusurlmorto=deads}}</ref><ref>{{CiteCita news|url=https://fossbytes.com/fluent-design-system-microsoft-windows-10/|titletitolo=What Is Fluent Design System? How Is Microsoft Building The Most Beautiful Operating System?|lastcognome=Verma|firstnome=Adarsh|datedata=12 maggio 2017-05-12|workopera=Fossbytes|access-dateaccesso=18 febbraio 2018-02-18|languagelingua=en-US}}</ref>. I controlli coscienti sono anche classificati in Scala (ad esempio barre di scorrimento e input che si adattano a diversi metodi di invocazione)<ref>{{CiteCita web|url=https://docs.microsoft.com/windows/uwp/design/controls-and-patterns/scroll-controls|titletitolo=Scroll viewer controls - UWP app developer|lastcognome=muhsinking|websitesito=docs.microsoft.com|languagelingua=en-us|access-dateaccesso=22 dicembre 2017-12-22}}</ref><ref>{{CiteCita news|url=https://www.windowscentral.com/whats-new-microsoft-fluent-design-system-wave-one-windows-10|titletitolo=What's new with Microsoft Fluent Design System 'wave one' for Windows 10|datedata=29 giugno 2017-06-29|workopera=Windows Central|access-dateaccesso=22 dicembre 2017-12-22}}</ref>.
=== 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. controlliControlli coscienti sono anche classificati all'interno di Scale (ad es. Barre di scorrimento e input che si adattano a diversi metodi di invocazione) .
==Note==
| 