Fluent Design System: differenze tra le versioni

Versione delle 15:28, 6 mag 2022

Versione attuale delle 05:13, 23 mag 2024

(9 versioni intermedie di 6 utenti non mostrate)

Riga 1:

<ref></ref>'''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>{{Cita web|url=https://twitter.com/windowsdev/status/862698458469122049|titolo=Windows Developer on Twitter|sito=Twitter|lingua=en|accesso=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>{{Cita web|url=http://fluent.microsoft.com|titolo=Fluent Design Language|sito=Microsoft|accesso=12 maggio 2017}}</ref><ref name="ars-fluentdesign">{{Cita web|titolo=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/|sito=Ars Technica|accesso=11 maggio 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>{{Cita news|url=https://www.theverge.com/2017/10/16/16481202/microsoft-windows-10-fall-creators-update-fluent-design|titolo=Microsoft shows off its Fluent Design changes to Windows 10|opera=The Verge|accesso=29 ottobre 2017}}</ref><ref>{{Cita news|url=https://arstechnica.com/information-technology/2017/05/taking-a-closer-look-at-microsofts-fluent-design-system/|titolo=Microsoft's Fluent Design System threatens to make Windows look good|opera=Ars Technica|accesso=29 ottobre 2017|lingua=en}}</ref><ref>{{Cita news|url=https://www.theverge.com/2017/8/7/16105986/microsoft-xbox-one-dashboard-update-fluent-design|titolo=A major new Xbox One update overhauls the dashboard with Fluent Design|opera=The Verge|accesso=29 ottobre 2017}}</ref><ref>{{Cita news|url=https://www.theverge.com/2017/10/16/16481340/microsoft-xbox-one-fall-dashboard-update|titolo=The Xbox One is getting a major update today, including a faster dashboard|opera=The Verge|accesso=29 ottobre 2017}}</ref>. Altri aspetti di Fluent saranno introdotti su [[Windows]] nel tempo<ref>{{Cita web|url=https://www.instagram.com/p/B97VqkXg0iN/|data=19 marzo 2020|sito=Instagram|accesso=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 [[Windows Aero|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 [[Modern UI|Metro]] "finto" una volta scaricato<ref>{{Cita 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|titolo=No Fluent Design Reveal Highlight in Start Menu - Fall Creator's Update|sito=answers.microsoft.com|lingua=en|accesso=26 dicembre 2017}}</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 ====

Riga 20:

=== 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>{{Cita news|url=https://www.windowscentral.com/microsoft-shows-plans-z-depth-layering-wave-2-fluent-design|titolo=Microsoft shows off 'Z-depth layering' 3D feature in its Fluent Design System|opera=Windows Central|accesso=22 dicembre 2017}}</ref><ref>{{Cita news|url=https://www.vrfocus.com/2017/05/microsoft-reveal-z-depth-layering-for-windows-10-mixed-reality-devices/|titolo=Microsoft Reveal Z-Depth Layering for Windows 10 Mixed Reality Devices|opera=VRFocus|accesso=22 dicembre 2017|lingua=en|dataarchivio=13 agosto 2020|urlarchivio=https://web.archive.org/web/20200813034545/https://www.vrfocus.com/2017/05/microsoft-reveal-z-depth-layering-for-windows-10-mixed-reality-devices/|urlmorto=sì}}</ref>. Ciò è particolarmente evidente nell'app di Office riprogettata nel 2019.

=== Motion ===

Riga 49:

==== 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>{{Cita web|url=https://medium.com/microsoft-design/redesigning-the-office-app-icons-to-embrace-a-new-world-of-work-91d72608ee8f|titolo=Redesigning the Office App Icons to Embrace a New World of Work|data=29 novembre 2018|sito=Medium|accesso=19 aprile 2020}}</ref><ref>{{Cita news|url=https://www.theverge.com/2019/11/2/20944341/microsoft-edge-chromium-browser-logo-icon-wave-surf-new|titolo=Microsoft unveils new Edge browser logo that no longer looks like Internet Explorer|data=2 novembre 2019|opera=The Verge|accesso=19 aprile 2020}}</ref>. Versioni preliminari delle icone finali sono state individuate nel video "Meet the New icons for Office 365"<ref>{{Cita web|url=https://youtube.com/YplAU5myNP4|titolo=Meet the new icons for Office 365|data=29 novembre 2018|accesso=19 aprile 2020|urlmorto=sì}}</ref>, prima che ne venissero individuate altre quando Windows 10X<ref>{{Cita web|url=https://youtube.com/dmaioTs0NH8|titolo=#MicrosoftEvent Live|data=2 ottobre 2019|accesso=19 aprile 2020|urlmorto=sì}}</ref> è stato presentato, prima di essere ufficialmente rivelato il 12 dicembre 2019<ref>{{Cita web|url=https://medium.com/microsoft-design/the-ripple-effect-expanding-our-icon-design-system-74b4d916b7a4|titolo=The Icon Kaleidoscope|data=12 dicembre 2019|sito=Medium|accesso=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>{{Cita web|url=https://medium.com/microsoft-design/iconic-icons-designing-the-world-of-windows-5e70e25e5416|titolo=Iconic Icons: Designing the World of Windows|data=20 febbraio 2020|sito=Medium|accesso=19 aprile 2020}}</ref><ref>{{Cita news|url=https://www.theverge.com/2020/2/20/21145157/microsoft-windows-10-new-icons-modern-release-update-apps|titolo=Microsoft rolls out colorful new Windows 10 icons|data=20 febbraio 2020|opera=The Verge|accesso=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>{{Cita web|url=https://docs.microsoft.com/windows/uwp/design/style/acrylic|titolo=Acrylic material - UWP app developer|cognome=mijacobs|sito=docs.microsoft.com|lingua=en|accesso=22 dicembre 2017}}</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>{{Cita web|url=https://fluent.microsoft.com/|titolo=Fluent Design System|sito=fluent.microsoft.com|lingua=en|accesso=18 febbraio 2018|urlarchivio=https://web.archive.org/web/20180301050334/https://fluent.microsoft.com/|dataarchivio=1º marzo 2018|urlmorto=s}}</ref><ref>{{Cita news|url=https://fossbytes.com/fluent-design-system-microsoft-windows-10/|titolo=What Is Fluent Design System? How Is Microsoft Building The Most Beautiful Operating System?|cognome=Verma|nome=Adarsh|data=12 maggio 2017|opera=Fossbytes|accesso=18 febbraio 2018|lingua=en}}</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>{{Cita web|url=https://docs.microsoft.com/windows/uwp/design/controls-and-patterns/scroll-controls|titolo=Scroll viewer controls - UWP app developer|cognome=muhsinking|sito=docs.microsoft.com|lingua=en|accesso=22 dicembre 2017}}</ref><ref>{{Cita news|url=https://www.windowscentral.com/whats-new-microsoft-fluent-design-system-wave-one-windows-10|titolo=What's new with Microsoft Fluent Design System 'wave one' for Windows 10|data=29 giugno 2017|opera=Windows Central|accesso=22 dicembre 2017}}</ref>.