Iconografie in Windows

Iconografie is een set visuele afbeeldingen en symbolen waarmee gebruikers uw app kunnen begrijpen en doorlopen. Pictogrammen worden in de gebruikersinterface gebruikt als visuele metaforen die een concept, actie of status vertegenwoordigen.

Windows 11 maakt gebruik van drie typen pictogrammen: toepassing, systeem en bestandstype. Dit artikel richt zich op de eerste twee.

Tip

In dit artikel wordt beschreven hoe de Fluent Design-taal wordt toegepast op Windows-apps. Zie Fluent Design - Iconographyvoor meer informatie.

App-pictogrammen

Toepassingspictogrammen vertegenwoordigen uw app in de Windows-shell. Ze worden voornamelijk gebruikt om uw toepassing te openen, maar ze vertegenwoordigen ook uw app, waar deze ook wordt weergegeven in de Windows-shell.

App-pictogrammen moeten de kernfunctionaliteit van uw app vertegenwoordigen via een metafoor. Zie App-pictogrammenvoor meer informatie over het ontwerpen en maken van het pictogram van uw app.

Systeempictogrammen

Gebruik systeempictogrammen in de gebruikersinterface van uw app voor items zoals opdrachtbalken, navigatie of statusindicatoren. Windows 11 introduceert een nieuw lettertype voor systeempictogrammen, Segoe Fluent Icons. Dit nieuwe lettertype vormt een aanvulling op geometrie in Windows 11.

Alle glyphs in Segoe Fluent Icons worden getekend in een monolinestijl. Dat betekent dat ze worden gemaakt met één pennenstreek van 1 epx.

Glyphs in Segoe Fluent Icons volgen drie esthetische principes:

• Minimale: Glyphs bevatten alleen de details die nodig zijn om het concept te communiceren.
• Harmonische: Glyphs zijn gebaseerd op eenvoudige en geometrische vormen.
• Evolved: Glyphs gebruiken moderne metaforen die gemakkelijk te begrijpen zijn.

Zie Pictogrammen in Windows-appsvoor meer informatie over het gebruik van pictogrammen in de gebruikersinterface van uw app.

Pictogramgrootte

Metrische lettertypegegevens voor Segoe Fluent Icons komen overeen met de wijze waarop ontwerpers en ontwikkelaars gewend zijn aan het werken met SVG- en bitmappictogrammen.

Elk lettertype-glyph is zo ontworpen dat de oppervlakte van het pictogramgebied een vierkant em is. Een pictogram met een tekengrootte van 16 epx is het equivalent van een 16x16-epx-pictogram om de grootte en positionering voorspelbaarder te maken.

Modificatoren

U kunt systeempictogrammen visueel samenstellen door een basispictogram te combineren met een wijzigingspictogram.

basispictogrammen zijn het belangrijkste element van een visuele metafoor. Basiselementen moeten de volledige footprint van het pictogram beslaan.

Modifier-pictogrammen de betekenis van het basispictogram wijzigen. Modifier-elementen moeten in een van de onderste kwadranten van de pictogramvoetafdruk worden geplaatst.

alleen basispictogram
Op zichzelf communiceert het papierbladpictogram het concept van een bestand.

basispictogram + wijzigingspictogram
Als u een omhoogwijzende pijl toevoegt aan het bestandspictogram, wordt de betekenis van het pictogram gewijzigd om aan te geven dat het een geüpload bestand is.

Gelaagdheid

Pictogramlagen zijn een techniek die u gebruikt om twee glyphs te overlappen. We raden u aan pictogramlagen te gebruiken om een andere status van hetzelfde pictogram te maken (bijvoorbeeld een actieve of geselecteerde status).

Lokalisatie

De culturele connotaties van symbolen begrijpen. Hoewel iconografie in de meeste gevallen geen lokalisatie vereist, zijn bepaalde pictogrammen mogelijk acceptabel in de ene cultuur, maar niet in een andere cultuur. Valideer uw iconografiekeuzen met de context waarin u ze gaat gebruiken.

Voorbeelden

Open de WinUI 3 Gallery-app en zie iconografieprincipes in actie

De WinUI 3 Gallery app bevat interactieve voorbeelden van de meeste Besturingselementen, functies en functionaliteit van WinUI 3. Download de app uit de Microsoft Store of haal de broncode op GitHub-