Fluent Design System: differenze tra le versioni

Versione delle 18:19, 24 nov 2020

Versione delle 17:08, 4 mar 2021

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>{{Cite web|url=https://twitter.com/windowsdev/status/862698458469122049|title=Windows Developer on Twitter|website=Twitter|language=en|access-date=2017-05-11}}</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>{{Cite web|url=http://fluent.microsoft.com|title=Fluent Design Language|website=Microsoft|access-date=2017-05-12}}</ref><ref name="ars-fluentdesign">{{cite web|title=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/|website=Ars Technica|accessdate=11 May 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>{{Cite news|url=https://www.theverge.com/2017/10/16/16481202/microsoft-windows-10-fall-creators-update-fluent-design|title=Microsoft shows off its Fluent Design changes to Windows 10|work=The Verge|access-date=2017-10-29}}</ref><ref>{{Cite news|url=https://arstechnica.com/information-technology/2017/05/taking-a-closer-look-at-microsofts-fluent-design-system/|title=Microsoft's Fluent Design System threatens to make Windows look good|work=Ars Technica|access-date=2017-10-29|language=en-us}}</ref><ref>{{Cite news|url=https://www.theverge.com/2017/8/7/16105986/microsoft-xbox-one-dashboard-update-fluent-design|title=A major new Xbox One update overhauls the dashboard with Fluent Design|work=The Verge|access-date=2017-10-29}}</ref><ref>{{Cite news|url=https://www.theverge.com/2017/10/16/16481340/microsoft-xbox-one-fall-dashboard-update|title=The Xbox One is getting a major update today, including a faster dashboard|work=The Verge|access-date=2017-10-29}}</ref>. Altri aspetti di Fluent saranno introdotti a [[Windows]] nel tempo<ref>{{Cite web|url=https://www.instagram.com/p/B97VqkXg0iN/|date=March 19, 2020|website=Instagram|access-date=April 19, 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 Metro e, pur preservando l'aspetto pulito introdotto da Metro, Fluent rinnova la grafica di Aero , un design approccio 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<ref>{{Cite 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|title=No Fluent Design Reveal Highlight in Start Menu - Fall Creator's Update|website=answers.microsoft.com|language=en-US|access-date=2017-12-26}}</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.

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

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 partireluglio da marzo 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>{{Cite web|url=https://docs.microsoft.com/en-us/windows/uwp/design/style/reveal-focus|title=Reveal focus - UWP app developer|last=cphilippona|website=docs.microsoft.com|language=en-us|access-date=2018-03-30}}</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>{{Cite news|url=https://www.windowscentral.com/microsoft-shows-plans-z-depth-layering-wave-2-fluent-design|title=Microsoft shows off 'Z-depth layering' 3D feature in its Fluent Design System|work=Windows Central|access-date=2017-12-22}}</ref><ref>{{Cite news|url=https://www.vrfocus.com/2017/05/microsoft-reveal-z-depth-layering-for-windows-10-mixed-reality-devices/|title=Microsoft Reveal Z-Depth Layering for Windows 10 Mixed Reality Devices|work=VRFocus|access-date=2017-12-22|language=en-US}}</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>{{Cite web|url=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=2017-12-22}}</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>{{Cite web|url=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>.

==== 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>{{Cite web|url=https://docs.microsoft.com/windows/uwp/design/motion/connected-animation|title=Connected animation - UWP app developer|last=mijacobs|website=docs.microsoft.com|language=en-us|access-date=2017-12-31}}</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>{{Cite web|url=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 visualizzare più informazioni dopo aver selezionato un elemento<ref>{{Cite web|url=https://docs.microsoft.com/en-us/windows/uwp/design/motion/page-transitions|title=Page transitions in WUP apps - UWP apps|last=davidvkimball|website=docs.microsoft.com|language=en-us|access-date=2019-11-27}}</ref>.

==== Dissolvenza ====

Dissolvenza in entrata e in uscita per inserire e chiudere gli elementi dalla vista<ref>{{Cite web|url=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 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>{{Cite web|url=https://docs.microsoft.com/windows/uwp/design/motion/parallax|title=How to use the ParallaxView control to add depth and movement to your app. - UWP app developer|last=mijacobs|website=docs.microsoft.com|language=en-us|access-date=2017-12-22}}</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>{{Cite web|url=https://docs.microsoft.com/windows/uwp/design/motion/motion-pointer|title=Pointer click animations in UWP apps - UWP app developer|last=mijacobs|website=docs.microsoft.com|language=en-us|access-date=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>{{Cite web|url=https://medium.com/microsoft-design/redesigning-the-office-app-icons-to-embrace-a-new-world-of-work-91d72608ee8f|title=Redesigning the Office App Icons to Embrace a New World of Work|date=November 29, 2018|website=Medium|access-date=April 19, 2020}}</ref><ref>{{Cite news|url=https://www.theverge.com/2019/11/2/20944341/microsoft-edge-chromium-browser-logo-icon-wave-surf-new|title=Microsoft unveils new Edge browser logo that no longer looks like Internet Explorer|date=November 2, 2019|work=The Verge|access-date=April 19, 2020}}</ref>. Versioni preliminari delle icone finali sono state individuate nel video "Meet the New icons for Office 365"<ref>{{Cite web|url=https://youtube.com/YplAU5myNP4|title=Meet the new icons for Office 365|date=November 29, 2018|access-date=April 19, 2020}}</ref>,  prima che ne venissero individuate altre quando Windows 10X<ref>{{Cite web|url=https://youtube.com/dmaioTs0NH8|title=#MicrosoftEvent Live|date=October 2, 2019|access-date=April 19, 2020}}</ref> è stato presentato, prima di essere ufficialmente rivelato il 12 dicembre 2019<ref>{{Cite web|url=https://medium.com/microsoft-design/the-ripple-effect-expanding-our-icon-design-system-74b4d916b7a4|title=The Icon Kaleidoscope|date=December 12, 2019|website=Medium|access-date=April 19, 2020}}</ref>. Queste icone hanno iniziato ad apparire tramite gli aggiornamenti di Microsoft Store per quelle app, a cominciare da Posta e Calendario<ref>{{Cite web|url=https://medium.com/microsoft-design/iconic-icons-designing-the-world-of-windows-5e70e25e5416|title=Iconic Icons: Designing the World of Windows|date=February 20, 2020|website=Medium|access-date=April 19, 2020}}</ref><ref>{{Cite news|url=https://www.theverge.com/2020/2/20/21145157/microsoft-windows-10-new-icons-modern-release-update-apps|title=Microsoft rolls out colorful new Windows 10 icons|date=February 20, 2020|work=The Verge|access-date=April 19, 2020}}</ref>.

[[File:Microsoft Defender 2020 Fluent Design icon.png|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>{{Cite web|url=https://docs.microsoft.com/windows/uwp/design/style/acrylic|title=Acrylic material - UWP app developer|last=mijacobs|website=docs.microsoft.com|language=en-us|access-date=2017-12-22}}</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>{{Cite web|url=https://fluent.microsoft.com/|title=Fluent Design System|website=fluent.microsoft.com|language=en|access-date=2018-02-18|archive-url=https://web.archive.org/web/20180301050334/https://fluent.microsoft.com/|archive-date=2018-03-01|url-status=dead}}</ref><ref>{{Cite news|url=https://fossbytes.com/fluent-design-system-microsoft-windows-10/|title=What Is Fluent Design System? How Is Microsoft Building The Most Beautiful Operating System?|last=Verma|first=Adarsh|date=2017-05-12|work=Fossbytes|access-date=2018-02-18|language=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>{{Cite web|url=https://docs.microsoft.com/windows/uwp/design/controls-and-patterns/scroll-controls|title=Scroll viewer controls - UWP app developer|last=muhsinking|website=docs.microsoft.com|language=en-us|access-date=2017-12-22}}</ref><ref>{{Cite news|url=https://www.windowscentral.com/whats-new-microsoft-fluent-design-system-wave-one-windows-10|title=What's new with Microsoft Fluent Design System 'wave one' for Windows 10|date=2017-06-29|work=Windows Central|access-date=2017-12-22}}</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  controlli coscienti sono anche classificati inall'interno Scaladi Scale (ad esempioes. barreBarre di scorrimento e input che si adattano a diversi metodi di invocazione)

==Note==