Fluent Design System: differenze tra le versioni

Versione delle 18:19, 24 nov 2020

Versione attuale delle 05:13, 23 mag 2024

(16 versioni intermedie di 10 utenti non mostrate)

Riga 1:

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

{{W|informatica|luglio 2018}}

{{F|informatica|luglio 2018|}}

'''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]]. 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.

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 asu [[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 ==

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.

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 ==

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.

=== Luce ===

Sono presenti elementi focalizzabili con bagliore del bordo tramite la visuale di messa a fuoco.

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 ====

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.

LoCome accennato sopra, lo scopo della luce è attirare l'attenzione e illuminare le informazioni. Al passaggio del mouse, l'evidenziazione Riveladi Reveal illumina i bordi nascosti nelle vicinanzevicini su oggetti come gli elenchi e i pulsanti del menu di navigazione per dell'hamburger. AllaDopo la selezione, ad esempio facendo clic o toccando, viene rapidamente visualizzato rapidamente un effetto di illuminazione circolare bianca. Inoltre, nell'ambiente olografico di Windows, esiste un puntatore bianco arrotondato.

Il 6 novembre 2017, Davidil Hazdipendente (impiegatoMicrosoft dellaDavid Microsoft)Haz ha dichiarato che esistono piani per applicare l'evidenziazione di rivelazione alla barra delle applicazioni, ma a partire da marzoluglio 20182019 non si è verificato.

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

==== Rivela il focus ====

Le animazioni connesse sono transizioni di oggetti. Durante una modifica del contenuto, sembra che un elemento continui a volare attraverso l'app.

Elementi "focalizzabili" con bordo che si illumina tramite la visuale del fuoco<ref>{{Cita web|url=https://docs.microsoft.com/en-us/windows/uwp/design/style/reveal-focus|titolo=Reveal focus - UWP app developer|cognome=cphilippona|sito=docs.microsoft.com|lingua=en|accesso=30 marzo 2018}}</ref>.

=== Profondità ===

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.

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 ===

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 movimento stabilisce una relazione tra gli elementi dell'interfaccia utente e fornisce una continuità nell'esperienza<ref>{{Cita web|url=https://docs.microsoft.com/windows/uwp/design/motion/|titolo=Motion and animation in UWP apps - UWP app developer|cognome=mijacobs|sito=docs.microsoft.com|lingua=en|accesso=22 dicembre 2017}}</ref>.

==== Aggiungi/elimina animazioni ====

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.

Elenca le animazioni per l'inserimento e la rimozione di elementi da una raccolta<ref name="docs.microsoft.com">{{Cita web|url=https://docs.microsoft.com/windows/uwp/design/motion/|titolo=Motion and animation in UWP apps - UWP app developer|cognome=mijacobs|sito=docs.microsoft.com|lingua=en|accesso=30 marzo 2018}}</ref>.

==== Animazioni collegate ====

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 animazioni connesse sono transizioni di elementi. Durante una modifica del contenuto, un elemento sembra continuare volando attraverso l'app<ref>{{Cita web|url=https://docs.microsoft.com/windows/uwp/design/motion/connected-animation|titolo=Connected animation - UWP app developer|cognome=mijacobs|sito=docs.microsoft.com|lingua=en|accesso=31 dicembre 2017}}</ref>.

==== Transizione dei contenuti ====

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)

Utilizzato quando cambierà solo una parte del contenuto di una pagina<ref name="docs.microsoft.com" />.

==== Drill ====

Drill viene utilizzato durante la navigazione più approfondita in un'app. Ad esempio, per visualizzare più informazioni dopo aver selezionato un elemento<ref>{{Cita web|url=https://docs.microsoft.com/en-us/windows/uwp/design/motion/page-transitions|titolo=Page transitions in WUP apps - UWP apps|cognome=davidvkimball|sito=docs.microsoft.com|lingua=en|accesso=27 novembre 2019}}</ref>.

==== Dissolvenza ====

Dissolvenza in entrata e in uscita per inserire e chiudere gli elementi dalla vista<ref name="docs.microsoft.com" />.

==== Parallax ====

La parallasse sposta gli oggetti a velocità diverse. Lo sfondo si spostamuove più lentamente del contenuto sopra di esso. Ad esempio, unaun listaelenco scorrerà più velocemente rispetto alldell'immagine di sfondo, creando un effetto di profondità oltre al movimento<ref>{{Cita web|url=https://docs.microsoft.com/windows/uwp/design/motion/parallax|titolo=How to use the ParallaxView control to add depth and movement to your app. - UWP app developer|cognome=mijacobs|sito=docs.microsoft.com|lingua=en|accesso=22 dicembre 2017}}</ref>.

==== Press Feedback ====

Quando siun premeelemento unviene oggettopremuto, esso si spostaretrocede momentaneamente sullo sfondo e quindi ripristina la sua posizione originale. Esempi di press feedback della stampa includono i riquadri dal vivolive del menu Start, le azioni rapide didel ActionCentro Centeroperativo e i pulsanti della barra degli indirizzi di [[Microsoft Edge]]<ref>{{Cita web|url=https://docs.microsoft.com/windows/uwp/design/motion/motion-pointer|titolo=Pointer click animations in UWP apps - UWP app developer|cognome=mijacobs|sito=docs.microsoft.com|lingua=en|accesso=31 dicembre 2017}}</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>{{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:Windows-defender.svg|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. UnaÈ gerarchiapossibile visivacreare puòuna esseregerarchia creatavisiva usandoutilizzando diverse opacità. Ad esempio, in un'app, le superfici deldei contenutocontenuti primarioprimari sono spesso opache (ad eccezione dei widget o delle app leggere come Calcolatrice ), un riquadro secondario può avere l'80% diuno sfondo in acrilico all'80% e il pannelloriquadro terziario può avere iluno 60%sfondo diacrilico sfondodel acrilico60%. Sfondo L'acrilico sfocadi sfondo sfuma tutti gli oggettielementi dietro il materiale acrilico attivo. L'Acrilicoacrilico in-app offuscasfoca 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>.

AcrilicoL'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. SfondoLo Acrilicosfondo 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>.

=== Scala ===

Le app scalanosi suadattano a diversi fattori di forma, dimensioni di visualizzazione e da 0D a 3D. Gli elementi si adattano alle dimensioni dello schermo e sono disponibili suin più dimensioni. I controlliControlli coscienti sono anche classificati inall'interno Scaladi Scale (ad esempioes. barreBarre di scorrimento e input che si adattano a diversi metodi di invocazione) .

==Note==