Microsoft kunngjør oppdateringer til Fluent Design for utviklere og brukere

I et blogginnlegg, har Microsoft annonsert nye forbedringer av Fluent Design-opplevelsen for utviklere og brukere.

Designrammeverket brukes for tiden i apper som Outlook, Teams og OneDrive, og Microsoft nylig annonsert Fluent UI, som forener nett- og mobilbibliotekene deres under et delt charter.

Microsoft har annonsert en utvikling av deres utviklerrammeverk, med innspill fra designere, utviklere, tilgjengelighets- og internasjonaliseringseksperter og forfattere. De har identifisert områder for forbedring, og i år har de som mål å lukke gapet mellom design og kode, og starter med et designtokensystem.

Nytt bibliotek på tvers av plattformer

Fluent UI er en samling av UX-rammeverk for å lage nett- og mobilapper som deler kode, design og interaksjonsatferd.

Bruker komponenter fra Microsofts Flytende UI React (nett), Flytende brukergrensesnitt Apple (iOS og macOS), og Flytende brukergrensesnitt Android GitHub-biblioteker sikrer at deres Microsoft 365-apper og -tjenester forblir kraftige verktøy samtidig som de føles mer intuitive og sammenhengende på tvers av plattformer. Med tillegg av deres nye Flytende UI React Native biblioteket, lager Microsoft komponenter på tvers av plattformer – noe som gjør det enklere for JavaScript-utviklere å levere opplevelser på tvers av enheter til kunder raskere.

For utviklere som bygger opprinnelige Windows-opplevelser, WinUI fortsetter å legemliggjøre Fluent Design System.

Innfødt til hver enhet, fortsatt unikt flytende

Microsoft sier at de tror Fluent Design-elementene deres, for eksempel den tilpassede navigasjonslinjen, gjør at apper føles unikt flytende og sammenhengende på tvers av plattformer, samtidig som de passer inn i de opprinnelige iOS- og Android-plattformene.

Levere en mer sammenhengende, produktiv opplevelse

Ved å bruke samme designspråk for alle Microsoft 365-apper kan brukere enkelt flytte fra en app til en annen og ha en ganske god idé om hvordan de skal navigere i den og få ting gjort. Det samme gjelder plattformer. Microsoft bemerker at folk ofte starter en oppgave på én enhet og fullfører den fra en annen, så å skape sammenhengende opplevelser på tvers av plattformer reduserer kognitiv overbelastning for kundene deres.

Modernisering av Microsofts temaarkitektur

For øyeblikket bruker alle Microsoft-produkter frakoblede tematilnærminger.

Microsoft ønsker å modernisere sin temaarkitektur for å skape et skalerbart, fremtidssikkert designsystem. Fremtidige temaer vil gjøre det enklere og raskere å oppdatere designverdier på tvers av alle plattformer ved å bruke en felles temainfrastruktur, taksonomi og sentralisert sett med biblioteker på tvers av plattformer på tvers av Microsoft-rammeverk.

For å gjøre dette beveger de seg bort fra faste verdier og mot mer agnostiske variabler, eller design-tokens. Designtokens definerer de visuelle egenskapene til en UI-overflate og kobler design til kode ved hjelp av en felles syntaks. Sentraliserte stilbiblioteker, tilgjengelige for både design- og utviklingsverktøy, vil tjene som stedet for oppdateringer uten å måtte revidere kodede komponenter.

For å avsløre kraften til tokens og redusere kompleksiteten deres, utforsker Microsoft måter å møte designere på i deres eksisterende designverktøy. Siden de fleste designere hos Microsoft bruker Figma, søkte Microsoft etter måter å utvide mulighetene til dette verktøyet for å støtte designsymbolene deres med liten eller ingen friksjon.

Resultatet ble en Figma plug-in som vil erstatte det opprinnelige egenskapspanelet. I stedet for å lage design ved å tilordne farger eller strekbredder via egenskapspanelet, vil designere tildele tokens til lagene deres. De kan tilordne disse tokenene til en annen verdi om nødvendig, slik at eventuelle endringer kan forplante seg gjennom hele designet. Microsoft bygger også utviklingspipeline som oversetter disse designtokenene til plattformspesifikke verdier.

Sammen bidrar disse tiltakene til å distribuere designverdier direkte inn i kodebasen, og tilbyr produktdesignere og utviklere en fullstendig integrert design-til-kode arbeidsflyt.

Dette har en avsmittende effekt for sluttbrukere. Folk vil enkelt kunne velge temabiblioteker for apper de lager. De kan deretter tilpasse disse bibliotekene for å bedre gjenspeile produktets merkevare eller tjeneste og føle seg mer sammenhengende på tvers av økosystemet.

https://vimeo.com/417688279

Utviklere som leter etter et designsystem som respekterer det opprinnelige utseendet og følelsen og inkluderer UX-komponenter hundrevis av utviklere og millioner av forbrukere bruker hver dag, kan prøv Fluent her. Både interne og eksterne utviklere kan dykke ned i Flytende brukergrensesnitt Microsoft GitHub-organisasjon og begynn å lage.

Microsoft vil snakke mer om Fluent UI og deres fremtidige ambisjoner for Fluent Design System på nettet Microsoft Build 2020-konferanse 19-20 mai som er gratis og åpent for alle.