Silhouetten van Windows-apps

Silhouetten geven een gemeenschappelijk patroon aan van relaties tussen elementen zoals app-lagen, menu's, navigatie, opdrachten en inhoudsgebieden. Dit artikel richt zich op de algemene silhouetten die worden gebruikt in verschillende Windows-in-box-apps.

Raadpleeg ook Basisbeginselen van inhoud voor algemene rangschikkingen van inhoud en besturingselementen.

Bovenste navigatie silhouet

Een NavigationView kan worden gebruikt bovenaan de inhoudslaag van de app, om verbinding te maken met de inhoud eronder. Let op de locatie van de gebruiker identiteits-/persoon-/afbeeldingsbeheer wanneer u de bovenste navigatie gebruikt.

Het plaatsen van navigatie op dezelfde rij als opdrachten kan handig zijn bij het maximaliseren van de hoeveelheid verticale ruimte voor de onderstaande inhoud.

Inhoudsmarges kunnen variëren. In dit voorbeeld worden 56epx-marges gebruikt die een aanvulling vormen op grote stukken media. Gebruik kleinere marges voor kleinere/strakkere inhoudsbehoeften.

In Windows 11 is Foto's een goed voorbeeld van een app die gebruikmaakt van een topnavigatiesilhouet.

Silhouet van de menubalk

Een menubalk kan worden gebruikt als onderdeel van de basislaag samen met een CommandBar. Dit brengt meer focus naar de primaire taak van het inhoudsgebied, in dit geval samenstelling en bewerking.

In dit voorbeeld ziet u een teksteditor met 12epx marges om het hulpprogramma van de app te aanvullen.

In Windows 11 is Kladblok een goed voorbeeld van een app die gebruikmaakt van een menubalk silhouet.

Silhouet van de linkernavigatie

Navigatieweergave-besturingselementen worden automatisch op de basislaag van de app geplaatst. Dit brengt meer focus naar de primaire taak van het inhoudsgebied. Let op de locatie van het controle-element gebruiker identiteit/persoon/afbeelding bij het gebruiken van de linkernavigatie.

Inhoudsmarges kunnen variëren. In dit voorbeeld worden 56epx-marges gebruikt om de samenhang van de inhoud binnen de uitbreidingsfuncties te aanvullen. Gebruik kleinere marges wanneer inhoudscohesie minder belangrijk is, omdat andere ontwerpelementen de samenhang versterken, inhoud niet is genest in uitbreiders of inhoud niet logisch moet worden gegroepeerd.

In Windows 11 is Instellingen een goed voorbeeld van een app die gebruikmaakt van een linkernavigatie silhouet.

Silhouet van tabweergave

Een TabView- kan worden geïntegreerd met de basislaag van de appen het besturingselement van de titelbalk. Dit brengt meer focus naar de primaire taak van het inhoudsgebied, in dit geval codesamenstelling en bewerking.

In dit voorbeeld ziet u een teksteditor met 12epx marges om het hulpprogramma van de app te aanvullen.

In Windows 11 is Terminal een goed voorbeeld van een app die gebruikmaakt van een silhouet van de tabweergave.