Menu
Contattaci
Fluent UI è uno strumento che permette di donare ad applicazioni crossplatform uno stile uniforme, diciamo lo stile di Microsoft, e mette a disposizione anche componenti per facilitare lo sviluppo frontend.
Esiste quindi la possibilità di usare Fluent UI in più modi, a partire dall’utilizzo più completo con React fino alla libreria di classi e mixin Sass detta Fabric Core, utilizzabile anche agilmente su siti statici.
Vai alla documentazione sui colori
La Fluent UI ci offre delle palette colori, suddivise sia in riferimento ai prodotti microsoft (quindi troveremo la palette di Teams, di PowerPoint, di Excel, etc.), sia per utilizzo in base ad esempio a funzionalità specifiche crossplatform (ad esempio i colori legati agli status nella messaggistica), oltre a gruppi di colori generici.
Per ogni colore fornisce, oltre agli esadecimali e i codici RGB, la classe per poterli utilizzare con i framework.
Microsoft inoltre offre una piccola guida pdf all’uso in modo accessibile, per gestire ogni palette in modo da mantenere un contrasto ottimale per la lettura e la fruizione da parte di tutti
Anche il tool per la generazione di temi offre la validazione dei contrasti in tempo reale, per soddisfare al meglio i criteri di accessibilità:
Una volta inserita la palette di colori per noi ottimale, il tema può essere esportato in diversi formati utili a seconda di dove deve essere usato
Ma di fatto, cos’è un tema? Come si evince dall’immagine dell’esportazione, si tratta di una raccolta di variabili valorizzate (dette theme slots), che permettono di assegnare colori a elementi standard della Fluent UI.
I Theme Slots possono essere di due tipi: appartenenti alla Palette UI o semantici
I primi hanno nomi descrittivi del colore, ad esempio “greenLight”, o fanno riferimento al colore del tema (ad es. “themeLighter”) mentre i secondi sono denominati semanticamente in base allo scopo che devono esplicare, con questo criterio: [category name][element name][Checked][Hovered/Pressed/Disabled state] dove Category name si riferisce alla “famiglia”: bottoni, errori, campi input, liste, etc.
Element Name sta per il punto specifico su cui vogliamo agire, ad esempio il bordo o il background, successivamente abbiamo lo status: sia il concetto di selezionato o meno, sia quello riferito a altre situazioni come hover, disabled, etc.
Quando il colore ha espressamente un significato (ad esempio il rosso di un messaggio di errore), le linee guida di Fluent UI suggeriscono caldamente di non modificarlo per non perdere la specifica uniformità tra applicazioni che caratterizza questo strumento.
L’implementazione del tema avviene (per Fabric Core) utilizzando classi con la naming convention corretta:
Elevation
Vai alla documentazione sulla profondità e le ombre (elevation)
Nella Fluent UI é previsto che un determinato livello di profondità (che si traduce all’atto pratico con l’estensione della boxshadow) sia sempre associato ad uno specifico ruolo di un certo elemento, per cui ad esempio:
Thumbnail o Card avranno sempre depth 4
Comandi, menù e dropdown depth 8
Tooltip e hover sulle card, depth 16
Pannelli e pop-up, depth 64
Per l’implementazione possono essere utilizzate le classi con Fabric core (ad es. ms-depth-4) oppure le variabili con React (ad es. DefaultEffects.elevation4 o Depths.depth4)
Vai alla documentazione sulle icone
Fluent UI ha a disposizione un set di icone sia in formato font che SVG. Tutto l’assortimento di icone è censito in questo tool, grazie al quale è anche possibile estrarre un subset di icone
Per utilizzare un’icona con Fabric Core la classe è ms-icon, ad es:
<i class=“ms-Icon ms-Icon–Mail” aria-hidden=“true”></i>
Oltre alle icone utilizzabili per scopi vari all’interno di una app in stile Microsoft, sono disponibili anche icone (SVG e PNG in vari formati) per rappresentare i prodotti ufficiali microsoft e le tipologie di file lette dai prodotti stessi.
Fluent UI dispone di un layout mobile-first e responsivo organizzato su 12 colonne come molti famosi framework (ad esempio Bootstrap) e un set di breakpoints:
small 320px – 479px
medium 480px – 639px
large 640px – 1023px
extra large 1024px – 1365px
extra extra large 1366px – 1919px
extra extra extra large 1920px e superiori
Per chiunque abbia un minimo di familiarità con Bootstrap, l’implementazione del layout a colonne è abbastanza intuitiva, es:
<div class="ms-Grid" dir="ltr">
<div class="ms-Grid-row">
<div class="ms-Grid-col ms-sm6 ms-md4 ms-lg2">A</div>
<div class="ms-Grid-col ms-sm6 ms-md8 ms-lg10">B</div>
</div>
</div> Esistono anche classi per la gestione del push/pull delle colonne in base al device e classi per gestire la visibilità su alcuni devices (es: ms-hiddenXlDown).
NB: questo layout è disponibile solo per Fabric Core. Nel caso stessimo utilizzando React dovremo invece affidarci a altri metodi; uno è utilizzare molto semplicemente il layout a griglia con i CSS (clicca qui pertutti i riferimenti utili sul grid layout ) altrimenti possiamo utilizzare Stack, un componente React che implementa un contenitore flexbox.
Vai alla documentazione sulle animazioni
Le animazioni seguono i principi della Fluent Motion di Microsoft:
Le animazioni base possono essere usate singolarmente o combinate in patterns associati a funzionalità specifiche (ad esempio, se eliminiamo un elemento da una lista di elementi potremmo utilizzare una animazione di fading per l’elemento eliminato e uno slide per gli altri elementi che si riposizionano)
Tutte le animazioni base hanno sia le variabili react sia classi e mixin per Core
Fade (Fade In – Fade Out) Classica animazione usata come default in Fluent UI per l’apparizione e la scomparsa di elementi.
es: Animation Fade in
Core variable/mixin/class: ms-motion-fadeIn
React variable: MotionAnimations.fadeIn
Scale (Scale down in – Scale down out) Animazione leggermente più “teatrale”, da usare quando si desidera amplificare l’enfasi dell’azione
es:
Animation Scale down in
Core variable/mixin/class: ms-motion-scaleDownIn
React variable: MotionAnimations.scaleDownIn
Slide (Slide up in, Slide up out, Slide right in, Slide right out, Slide down in, Slide down out, Slide left in, Slide left out) Utile quando si deve tracciare espressamente la destinazione di un file quando questo viene “tolto dalla visuale”. Permette all’utente di avere chiaro dove ritrovarlo.
es:
Animation Slide up in
Core variable/mixin/class: ms-motion-slideUpIn
React variable: MotionAnimations.slideUpIn
Possiamo gestire sia la durata che l’accelerazione dell’animazione grazie a un set di variabili, ad esempio:
Durata: 100s
Core variable: $ms-motion-duration-1
React variable: MotionDurations.duration1
oppure
Nome: Linear
Value: cubic-bezier(0, 0, 1, 1)
Core variable: $ms-motion-timing-linear
React variable: MotionTimings.linear
Fluent UI fornisce ben pochi suggerimenti per quanto riguarda l’aspetto tipografico; si limita infatti a suggerirci di usare solo regular, bold e semibold (con rispettive classi Core e variabili React: ms-fontWeight-regular, FontWeights.regular ) e a stabilire un dimensionamento fisso per titoli, sottotitoli, etc. in modo da risultare uniforme con i prodotti Office e Microsoft.
Dettaglio che può tornarci utile durante l’implementazione, il nome della classe o della variabile contiene il numero in pixel del font.
es:
la classe ms-fontSize-24 o la variabile FontSizes.size24 imposteranno un font a 24px.
Fluent UI supporta in modo nativo i layout RTL, ad esempio per siti scritti in Arabo o Ebraico. L’implementazione è semplicissima ed è sufficiente utilizzare l’attributo dir del tag html
<html dir=“rtl”>
<head>
<meta charset=“utf-8” />
</head>
…
</html>
La cosa interessante è che Fabric Core, se settato con dir=”rtl”, utilizza i mixin per rovesciare anche una gran parte di icone che altrimenti sarebbero posizionate in maniera errata.
In base alla lingua utilizzata, inoltre, Fluent UI utilizza un font specifico per renderla al meglio. Tutto l’elenco è consultabile qui.
Un po’ framework, un po’ linea guida, un po’ tool, in effetti può spiazzare un designer “classico”; tuttavia Fluent UI può rivelarsi uno strumento utile in aziende orientate al mondo microsoft, tanto più se l’obiettivo è sviluppare applicativi che debbano apparire il più possibile integrati con altri strumenti.
Si tratta inoltre di un bagaglio di conoscenze che si rivela utile anche in altre occasioni di design, per le quali avremo una informazione in più sulle abitudini di interazione standard dell’utente microsoft.