Contattaci

FLUENT UI per Web Designer

fluent ui
  • Data: 9 Maggio 2022
  • Autore: Elena Granchi
  • Categorie

  • Giuneco Tech

    Il nostro settore richiede uno studio continuo e una forte attenzione all’innovazione. Incentiviamo quindi dei programmi formativi annuali per tutti i componenti del team, con ore dedicate (durante l’orario di lavoro) e serate formative sia online che in presenza. Sponsorizziamo eventi, sia come partner che semplicemente come partecipanti, e scriviamo articoli su quello che abbiamo imparato per essere, a nostra volta, dei divulgatori.

    Vai alla sezione Team
  • Fluent UI per Web Designer

    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. 

    Colori:

    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. 

    fluent ui colors

    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

     

    Temi e Tool per customizzarli

    Anche il tool per la generazione di temi offre la validazione dei contrasti in tempo reale, per soddisfare al meglio i criteri di accessibilità: 

    accessibility tool

    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

    Profondità (Ombre)

    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) 

    Set di Icone

    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. 

    Layout

    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. 

    Animazioni

    Vai alla documentazione sulle animazioni

    Le animazioni seguono i principi della Fluent Motion di Microsoft: 

    • Physical: gli oggetti animati si comportano come quelli del mondo reale, per rendere l’esperienza più naturale possibile, quindi nel caso ad esempio di una interazione touch screen, il movimento dell’interfaccia seguirà la stessa velocità dell’interazione 
    • Functional: il movimento ha uno scopo, ad esempio ottimizza l’esperienza dell’utente nascondendo la latenza percepita al caricamento di nuove pagine o contenuti. 
    • Continuous: un movimento fluido che colleghi due punti dello schermo permette di guidare l’occhio dell’utente attraverso un percorso di continuità 
    • Contextual: il movimento esalta il feedback in risposta ad una interazione dell’utente (ad esempio all’apertura di un dropdown menù) 

    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)

    Animazioni Base

    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 

    Durata e Timing

    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

    Caratteri tipografici e Lingue

    Caratteri tipografici

    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. 

    Localizzazioni e layout RTL

    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.

     

    Conclusioni

    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.