Dela via


Design för Windows-appar

Här hittar du designriktlinjer och exempel för att skapa Windows-appupplevelser. Windows 11 innehåller Fluents designspråk och principer för ett sammanhängande utseende och en känsla som är unik för Microsoft.

Använd WinUI för att få byggstenarna för att skapa Windows-upplevelser. Dessa komponenter innehåller Fluents designspråk, så att du kan vara säker på att du skapar fantastiska upplevelser i Fluent-ekosystemet.

Designprinciper för Windows 11

olika designelement i Windows 11

Windows 11 markerar en visuell utveckling av operativsystemet. Vi har utvecklat vårt designspråk tillsammans med Fluent för att skapa en design som är mänsklig, universell och verkligen känns som Windows.

Designprinciperna nedan har guidat oss under hela resan för att göra Windows till den bästa implementeringen av Fluent.

Ansträngningslös

Windows 11 är snabbare och mer intuitivt. Det är lätt att göra det jag vill, med fokus och precision.

Lugn

Windows 11 är mjukare och rensat från onödigheter; det smälter in i bakgrunden för att hjälpa mig att hålla mig lugn och fokuserad. Upplevelsen känns varm, eterisk och lättillgänglig.

Personlig

Windows 11 anpassar sig sömlöst till hur jag använder min enhet. Det anpassar sig efter mina individuella behov och preferenser så att jag verkligen kan uttrycka mig.

Bekant

Windows 11 balanserar ett nytt, uppdaterat utseende och känsla med den kunskap om Windows jag redan känner. Det finns ingen inlärningskurva; det är bara att sätta igång.

Komplett + sammanhängande

Windows 11 erbjuder en visuellt sömlös upplevelse på olika plattformar. Jag kan arbeta på många plattformar och har fortfarande en konsekvent Windows-upplevelse.

Windows 11-signaturupplevelser

Signaturupplevelser är de designelement som Windows 11 använder för att uttrycka sitt visuella språk, samtidigt som man behåller ett sammanhängande utseende över alla Fluent-upplevelser.

Ett fönster och en modal dialogruta i ljust läge till vänster och mörkt läge till höger

Färg

Color hjälper användarna att fokusera på sina uppgifter genom att ange en visuell hierarki och struktur mellan användargränssnittselement. Windows 11 använder färg för att ge en lugnande grund, subtilt förbättra användarinteraktioner och betona viktiga objekt endast när det behövs.

Ett programfönster med ett enda innehållsområde

Höjd och lager

Höjd och skiktning är begreppet att överlappa en yta med en annan yta, vilket skapar två eller flera visuellt åtskiljbara områden inom samma yta. Windows 11 använder höjning och skiktning som grund för apphierarkin.

En kundvagnsikon

Ikonografi

Iconography är en uppsättning visuella bilder och symboler som hjälper användarna att förstå och navigera i appen. Windows 11-ikonografin har utvecklats tillsammans med vårt designspråk. Varje glyph i vårt systemikonteckensnitt har gjorts om för att omfamna en mjukare geometri och modernare metaforer.

En gränssnittsyta av akryl

Material

Material är visuella effekter som gör att gränssnittsytor liknar verkliga artefakter. Windows 11 använder material för att hålla användargränssnittet anslutet till miljön. Material ger liv åt ytor och hjälper oss att skilja mellan fokuserade och ofokuserade program.

Flera gränssnittselement som belyser ny geometri i Windows 11

Former och geometri

Geometri beskriver formen, storleken och positionen för gränssnittselement på skärmen. Dessa grundläggande designelement hjälper dig att känna dig sammanhängande i hela designsystemet. Windows 11 har uppdaterad geometri som skapar en mer lättillgänglig, engagerande och modern upplevelse.

Flera ord som återges i Segoe UI Variable

typografi

Som visuell representation av språket är huvuduppgiften med typografi att kommunicera information. Windows 11-typsystemet hjälper dig att skapa struktur och hierarki i ditt innehåll för att maximera läsbarheten och läsbarheten i användargränssnittet.

En animerad bild som visar flera exempel på rörelse i Windows-användargränssnittet.

Rörelse

Motion beskriver hur gränssnittet animerar och svarar på användarinteraktion. Rörelse i Windows är reaktiv, direkt och sammanhangsanpassad. Den ger feedback till användarindata och förstärker rumsliga paradigm som stöder vägsökning.