Ikonografi i Windows

Ikonografi är en uppsättning visuella bilder och symboler som hjälper användarna att förstå och gå igenom din app. Ikoner används i hela användargränssnittet som visuella metaforer som representerar ett begrepp, en åtgärd eller en status.

Windows 11 använder tre typer av ikoner: program, system och filtyp. Den här artikeln fokuserar på de två första.

Tips

Den här artikeln beskriver hur Fluent Design-språket tillämpas på Windows-appar. Mer information finns i Fluent Design – Iconography.

Programikoner

Programikoner representerar din app i Windows-gränssnittet. De används främst för att öppna ditt program, men de representerar även din app var den än visas i Windows-gränssnittet.

Appikoner bör representera appens kärnfunktioner via en metafor. Mer information om hur du utformar och skapar appens ikon finns i Appikoner.

Systemikoner

Använd systemikoner i appgränssnittet för objekt som kommandostaplar, navigering eller statusindikatorer. Windows 11 introducerar ett nytt systemikonteckensnitt, Segoe Fluent Icons. Det här nya teckensnittet kompletterar geometri i Windows 11.

Alla ikoner i Segoe Fluent Icons är ritade i en monolinjär stil. Det innebär att de skapas med ett enda drag av 1 epx.

Glyfer i Segoe Fluent-ikoner följer tre estetiska principer:

• Minimal: Glyphs innehåller bara den information som krävs för att kommunicera konceptet.
• Harmonisk: Glyfer baseras på enkla och geometriska former.
• Evolved: Glyphs använder moderna metaforer som är lätt att förstå.

Mer information om hur du använder ikoner i appens användargränssnitt finns i Ikoner i Windows-appar.

Ikonstorlek

Teckensnittsmått för Segoe Fluent-ikoner matchar hur designers och utvecklare är vana vid att arbeta med SVG- och bitmappsikoner.

Varje teckenglyf är utformat så att fotavtrycket för ikonområdet är en kvadrat-em. En ikon med teckenstorleken 16 epx motsvarar en 16x16-epx-ikon för att göra storlek och placering mer förutsägbar.

Modifierare

Du kan visuellt konstruera systemikonens tecken genom att kombinera en basikon med en modifierarikon.

Basikoner är huvudelementet i en visuell metafor. Basdelarna bör uppta hela ikonens yta.

modifierarikoner ändra innebörden av basikonen. Element för modifiering ska placeras i en av de nedre kvadranterna av ikonens fotavtryck.

basikonen endast
På egen hand kommunicerar ikonen för pappersark begreppet fil.

Basikon + modifierareikon
Om du lägger till en uppåtpil i filikonen ändras innebörden av ikonen så att den representerar en uppladdad fil.

Skikta

Ikonskiktning är en teknik som du använder för att överlappa två glyfer. Vi rekommenderar att du använder ikonskiktning för att skapa ett annat tillstånd för samma ikon (till exempel ett aktivt eller valt tillstånd).

Lokalisering

Förstå symbolernas kulturella konnotationer. Även om ikonografi inte kräver lokalisering i de flesta fall kan vissa ikoner vara acceptabla i en kultur men inte i en annan. Verifiera dina val av ikonografi med kontexten där du ska använda dem.

Exempel

Öppna WinUI 3-galleriappen och se Ikonografiprinciper i praktiken

WinUI 3 Gallery-appen innehåller interaktiva exempel på de flesta WinUI 3-kontroller, funktioner och funktioner. Hämta appen från Microsoft Store- eller hämta källkoden på GitHub-