[Video] Nuovi progressi per Fluent Design annunciati da Microsoft

Come la nuova interfaccia Microsoft per servizi e software sarà a disposizione di utenti e sviluppatori su larga scala.

Microsoft annuncia nuovi progressi e possibilità di implementazione del suo linguaggio stilistico universale per Windows 10, Web e Microsoft 365.

Microsoft ha sviluppato le app di produttività preferite al mondo per decenni. Strumenti potenti come Office, Outlook, OneDrive e Teams consentono alle persone di tutto il mondo di ottenere di più. L'interfaccia utente fluida, una raccolta di framework UX, è il modo in cui forniremo queste esperienze ai nostri clienti.

Sì, c'è un team dedicato che supporta l'interfaccia utente fluida. Ma la bellezza del nostro approccio open source è che le persone che mangiano, vivono e respirano i nostri prodotti contribuiscono e migliorano il Fluent Design System per tutti. È il modo in cui coltiviamo e supportiamo grandi idee da tutta l'azienda (e oltre) che ci spingono avanti.
È simile alla biodiversità in natura; il suolo più ricco deriva da una vasta gamma di organismi che si intrecciano in un ambiente florido.

Ecco perché siamo focalizzati sul laser per migliorare il modo in cui costruiamo esperienze insieme. Come forse saprai, Microsoft ha recentemente annunciato un'interfaccia utente fluida , unificando le nostre librerie dell'interfaccia utente Web e mobile in una carta condivisa. Non è stata un'impresa da poco! E quest'anno, miriamo a colmare il divario tra design e codice, iniziando con un sistema di token di progettazione. Continua a leggere per saperne di più su ciò che stiamo facendo con l'interfaccia utente fluida, perché siamo investiti in esso e come puoi essere coinvolto.

Nuova libreria multipiattaforma

La UI fluente è molto più di una raccolta di framework UX per la creazione di app Web e mobili che condividono codice, design e comportamento dell'interazione. È un nuovo approccio al modo in cui lavoriamo attraverso le discipline e i team di prodotto per offrire esperienze più fluide e naturali sui dispositivi che i nostri clienti usano durante la loro giornata.

Stiamo semplificando il nostro ecosistema di sviluppatori, in modo che tutti i tipi di partner possano sfruttare e contribuire a questi framework per costruire le proprie esperienze.

L'utilizzo di componenti dalle nostre librerie Fluent UI React (web), Fluent UI Apple (iOS e macOS) e Fluent UI Android GitHub assicura che le nostre app e servizi Microsoft 365 rimangano potenti strumenti pur sentendosi più intuitivi e coerenti su tutte le piattaforme. Con l'aggiunta della nostra nuova libreria Native React NI fluente , stiamo creando componenti multipiattaforma, rendendo più semplice per gli sviluppatori JavaScript fornire esperienze tra dispositivi ai clienti più rapidamente.
Per gli sviluppatori che creano esperienze Windows native, WinUI continua a incarnare il Fluent Design System.

Nativo di ogni dispositivo, ancora perfettamente unico

Riteniamo che i software di produttività debbano prima di tutto elevare la creatività umana. Deve togliersi di mezzo e rendere l'attività a portata di mano, sia sul telefono, sul tablet, sul laptop o sul grande schermo.

Come nel design automobilistico, riteniamo che siano necessari solo pochi elementi distintivi del design per ciascun prodotto per dare l'impressione di un'esperienza di marca nella mente delle persone. Questi elementi "essenziali" creano chiarezza e struttura, quindi le persone capiscono come utilizzare un prodotto indipendentemente dal dispositivo su cui si trovano. Il nostro logo Microsoft, le icone delle app familiari, i nomi delle app riconoscibili e i colori distintivi del marchio delle app danno forma alle impressioni delle persone sulle nostre esperienze con il marchio. Ma ci sono anche componenti dell'interfaccia utente più specifici che rendono le nostre app straordinariamente fluide. Ad esempio, la nostra barra di navigazione personalizzata offre alle nostre app mobili un tocco familiare.

Barra di navigazione personalizzata dell'interfaccia utente fluida che si adatta naturalmente alle piattaforme native iOS e Android

Per noi, la creazione di esperienze coerenti su tutte le piattaforme non riguarda le travolgenti regole della guida di stile o l'interfaccia utente identica a ogni pixel. Invece, ci concentriamo sul comportamento di ciascuna piattaforma e su cosa sono abituati i nostri clienti. In generale, ci riferiamo alla regola 80/20: utilizziamo modelli nativi l'80% delle volte, concentrando la nostra energia su componenti personalizzati che migliorano l'esperienza del cliente.

Offrire un'esperienza più coerente e produttiva

Può essere frustrante quando le cose funzionano diversamente per nessun motivo (o qualche motivo inspiegabile). Frustra i nostri clienti, ci frustra e ci motiva a migliorarlo. Radunare attorno al Fluent Design System ci aiuta a semplificare e diventare più efficienti come azienda, il che è fantastico. Ma ci consente anche di offrire esperienze più coerenti e connesse per i nostri clienti. Vinci, vinci.

Ciò significa che quando impari un'app di Microsoft 365, puoi prenderne facilmente un'altra e avere un'idea abbastanza buona di come spostarla e fare le cose. Lo stesso vale per le piattaforme. Si tratta di lavorare dove vuoi e come vuoi, quando vuoi. Le persone spesso iniziano un'attività su un dispositivo e finiscono da un altro, quindi la creazione di esperienze coerenti su tutte le piattaforme riduce il sovraccarico cognitivo per i nostri clienti.

In parole povere, Fluent parla di designer e sviluppatori che lavorano meglio insieme per creare le migliori esperienze di classe che danno potere ai nostri clienti.

L'anatomia dei nostri componenti dell'interfaccia utente

Modernizzare la nostra architettura a tema

Oggi, i prodotti Microsoft coprono il Web e le piattaforme Windows, Android, iOS e macOS e utilizzano tutti approcci tematici disconnessi. La creazione di esperienze coerenti su tutte le piattaforme richiede a progettisti e sviluppatori di aggiornare le modifiche in modo indipendente.
Stiamo cercando di modernizzare la nostra architettura a tema per creare un sistema di progettazione scalabile e a prova di futuro. I temi futuri renderanno più semplice e veloce l'aggiornamento dei valori di progettazione su tutte le piattaforme utilizzando un'infrastruttura a tema comune, una tassonomia e una serie centralizzata di librerie di stili multipiattaforma in tutti i framework Microsoft.

Per fare ciò, ci stiamo allontanando da valori fissi e verso variabili più agnostiche o token di progettazione. I token di progettazione definiscono gli attributi visivi di una superficie dell'interfaccia utente e collegano la progettazione al codice utilizzando una sintassi comune. Le librerie di stile centralizzate, accessibili da strumenti di progettazione e sviluppo, serviranno come luogo per effettuare aggiornamenti senza dover rivedere i componenti codificati.

Per esporre il potere dei token e mitigarne la complessità, abbiamo esplorato i modi per incontrare i designer all'interno dei loro strumenti di progettazione esistenti. Poiché la maggior parte dei progettisti di Microsoft utilizza Figma, abbiamo cercato modi per estendere le funzionalità di tale strumento per supportare i nostri token di progettazione con un attrito minimo o nullo.

Il nostro plug-in Figma sostituirà il pannello delle proprietà native. Invece di creare disegni assegnando colori o larghezze di tratto tramite il pannello delle proprietà, i progettisti assegneranno i token ai loro livelli. Se necessario, possono rimappare questi token a un valore diverso, consentendo a qualsiasi modifica di propagarsi durante il progetto. Stiamo inoltre creando la pipeline di sviluppo che traduce questi token di progettazione in valori specifici della piattaforma.

Insieme, questi sforzi ci aiutano a distribuire i valori di progettazione direttamente nella base di codice, offrendo ai progettisti e agli sviluppatori di prodotti un flusso di lavoro da progettazione a codice completamente integrato.

Tutta questa bontà verrà trasmessa ai clienti, ovviamente. Le persone saranno in grado di accedere facilmente alle librerie di temi per le app che creano. Possono quindi personalizzare queste librerie per riflettere meglio il marchio o il servizio dei loro prodotti e sentirsi più coerenti in tutto l'ecosistema.



Quello che stai vedendo è l'evoluzione dei nostri framework di sviluppatori, con il contributo di designer, sviluppatori, esperti di accessibilità e internazionalizzazione e scrittori. Identifichiamo le aree di miglioramento, le aree in cui i clienti hanno bisogno di più da noi e ci stiamo impegnando.

Se stai cercando un sistema di progettazione che rispetti l'aspetto nativo e includa componenti UX centinaia di sviluppatori e milioni di consumatori usano ogni giorno, forse prova Fluent.

Siamo entusiasti che sia gli sviluppatori interni che quelli esterni si immergano nell'organizzazione Microsoft GitHub dell'interfaccia utente fluida e inizino a creare.

Puoi saperne di più sull'interfaccia utente Fluent e sulle nostre aspirazioni future per il Fluent Design System alla conferenza Microsoft Build 2020 del 19-20 maggio. Questa conferenza online è gratuita e aperta a tutti e ci piacerebbe che tu ti unissi a noi.

Articolo di HTNovo