Microsoft annoncerer opdateringer til Fluent Design for udviklere og brugere

I et blogindlæg, Microsoft har annonceret nye forbedringer af Fluent Design-oplevelsen for udviklere og brugere.

Designrammen bruges i øjeblikket i apps som Outlook, Teams og OneDrive og Microsoft for nylig annonceret Fluent UI, der forener deres web- og mobile UI-biblioteker under et fælles charter.

Microsoft har annonceret en udvikling af deres udviklerrammer med input fra designere, udviklere, tilgængeligheds- og internationaliseringseksperter og forfattere. De har identificeret områder for forbedring, og i år sigter de på at lukke kløften mellem design og kode, begyndende med et design-token-system.

Nyt bibliotek på tværs af platforme

Fluent UI er en samling af UX-rammer til at skabe web- og mobilapps, der deler kode, design og interaktionsadfærd.

Bruger komponenter fra Microsofts Flydende UI React (web), Flydende brugergrænseflade Apple (iOS og macOS), og Flydende brugergrænseflade Android GitHub-biblioteker sikrer, at deres Microsoft 365-apps og -tjenester forbliver kraftfulde værktøjer, mens de føles mere intuitive og sammenhængende på tværs af platforme. Med tilføjelsen af ​​deres nye Flydende UI React Native bibliotek, skaber Microsoft komponenter på tværs af platforme - hvilket gør det nemmere for JavaScript-udviklere at levere oplevelser på tværs af enheder til kunder hurtigere.

For udviklere, der bygger native Windows-oplevelser, WinUI fortsætter med at inkorporere Fluent Design System.

Native til hver enhed, stadig unikt flydende

Microsoft siger, at de mener, at deres Fluent Design-elementer, såsom den brugerdefinerede navigationslinje, får apps til at føles unikt Flydende og sammenhængende på tværs af platforme, mens de stadig passer ind i native iOS- og Android-platforme.

Levere en mere sammenhængende, produktiv oplevelse

Ved at bruge det samme designsprog til alle Microsoft 365-apps kan brugerne også nemt flytte fra en app til en anden og få en ret god idé, hvordan man navigerer i den og får tingene gjort. Det samme gælder platforme. Microsoft bemærker, at folk ofte starter en opgave på én enhed og afslutter den fra en anden, så at skabe sammenhængende oplevelser på tværs af platforme reducerer kognitiv overbelastning for deres kunder.

Modernisering af Microsofts temaarkitektur

I øjeblikket bruger Microsoft-produkter alle afbrudte temametoder.

Microsoft søger at modernisere sin temaarkitektur for at skabe et skalerbart, fremtidssikret designsystem. Fremtidige temaer vil gøre det nemmere og hurtigere at opdatere designværdier på tværs af alle platforme ved hjælp af en fælles temainfrastruktur, taksonomi og centraliseret sæt af tværplatformsstilbiblioteker på tværs af Microsoft-frameworks.

For at gøre dette bevæger de sig væk fra faste værdier og mod mere agnostiske variabler eller design-tokens. Designtokens definerer de visuelle attributter for en UI-overflade og linker design til kode ved hjælp af en fælles syntaks. Centraliserede stilbiblioteker, tilgængelige med både design- og udviklingsværktøjer, vil tjene som stedet for at lave opdateringer uden at skulle revidere kodede komponenter.

For at afsløre styrken af ​​tokens og mindske deres kompleksitet, undersøger Microsoft måder at møde designere på i deres eksisterende designværktøjer. Da de fleste designere hos Microsoft bruger Figma, søgte Microsoft efter måder at udvide værktøjets muligheder for at understøtte deres design-tokens med lidt eller ingen friktion.

Resultatet var et Figma plug-in, som erstatter panelet med native egenskaber. I stedet for at skabe design ved at tildele farver eller stregbredder via egenskabspanelet, vil designere tildele tokens til deres lag. De kan omlægge disse tokens til en anden værdi, hvis det er nødvendigt, så eventuelle ændringer kan forplante sig gennem designet. Microsoft bygger også udviklingspipeline, der oversætter disse designtokens til platformspecifikke værdier.

Tilsammen hjælper disse bestræbelser med at distribuere designværdier direkte ind i kodebasen, hvilket tilbyder produktdesignere og udviklere en fuldstændig integreret design-til-kode-workflow.

Dette har en afsmittende effekt for slutbrugere. Folk vil nemt kunne tilmelde sig temabiblioteker for apps, de opretter. De kunne derefter tilpasse disse biblioteker, så de bedre afspejler deres produkts brand eller service og føles mere sammenhængende på tværs af økosystemet.

https://vimeo.com/417688279

Udviklere, der leder efter et designsystem, der respekterer det oprindelige udseende og fornemmelse og omfatter UX-komponenter, som hundredvis af udviklere og millioner af forbrugere bruger hver dag, kan prøv Fluent her. Både interne og eksterne udviklere kan dykke ned i Flydende brugergrænseflade Microsoft GitHub-organisation og begynde at skabe.

Microsoft vil fortælle mere om Fluent UI og deres fremtidige ambitioner for Fluent Design System på online Microsoft Build 2020-konference den 19-20 maj som er gratis og åben for alle.