Ontwerp van titelbalk

De titelbalk bevindt zich boven aan een app op de basislaag. Het belangrijkste doel is om gebruikers in staat te stellen de app te identificeren via de titel, het app-venster te verplaatsen en de app te minimaliseren, te maximaliseren of te sluiten.

Standaardontwerp

In deze sectie worden de ontwerpaanvelingen en het gedrag van de onderdelen van een standaardtitelbalk beschreven.

Bar

Ontwerpen

• De standaardtitelbalk heeft een hoogte van 32 pixels.
• De standaardachtergrond van de titelbalk is Mica, maar we raden u aan om titelbalken te combineren met de rest van het venster, indien mogelijk.
• Titelbalken helpen gebruikers onderscheid te maken wanneer een venster actief en inactief is. Alle titelbalkelementen moeten semitransparant zijn wanneer het venster inactief is.
• De kleuren van de titelbalk moeten worden aangepast wanneer gebruikers overschakelen naar thema's met hoog contrast of tussen lichte en donkere modi.
  • Voor thema's met hoog contrast moeten apps de klasse gebruiken om de SystemColors juiste ui-elementkleuring te bepalen om een superieure ervaring met hoog contrast mogelijk te maken.

Gedrag

• De titelbalk speelt een belangrijke rol bij het verplaatsen en wijzigen van het formaat van een venster. Alle lege ruimte in de titelbalk of ruimte die wordt gebruikt door niet-interactieve elementen, zoals de venstertitel, moet kunnen worden gesleept.
• Als u met de rechtermuisknop klikt/ingedrukt houdt op een deel van de titelbalk die geen interactief element heeft, wordt het menu van het systeemvenster weergegeven.
• Een dubbelklik/tik moet schakelen tussen het maximaliseren van het venster en het herstellen van het venster.

pictogram

Ontwerpen

• De grootte van het vensterpictogram is 16px bij 16px.
• Plaats het pictogram 16px vanaf de meest linkse rand in LTR of de meest rechtse rand in RTL.
  • Als de knop Terug aanwezig is, plaatst u het vensterpictogram 16px rechts van de knop Vorige.
• Het vensterpictogram moet verticaal zijn gecentreerd in de titelbalk. Als de hoogte van de titelbalk bijvoorbeeld 32 pixels is, zijn de boven- en ondermarges 8 pixels.

Gedrag

• Met één klik/tik op het pictogram moet het systeemvenstermenu worden weergegeven.
• Een dubbelklik/tik moet het venster sluiten.

Titel

Ontwerpen

• Plaats de venstertitel 16px vanaf het vensterpictogram of de knop Vorige.
  • Als er geen pictogram of knop Terug aanwezig is, plaatst u de venstertitel 16px vanaf de meest linkse rand in LTR of de meest rechtse rand in RTL.
• De venstertitel moet het lettertype Segoe UI Variable (indien beschikbaar) of Segoe UI gebruiken.
• Voor de venstertitel moet tekst in de bijschriftstijl worden gebruikt (zie XAML-type ramp).
• De titel van het venster kan worden afgekapt en er wordt een beletselteken toegevoegd als de breedte van het venster kleiner is dan de lengte van de titelbalkelementen. De knoppen voor pictogrammen en bijschriften (min, max en sluiten) moeten altijd volledig zichtbaar zijn.

Gedrag

• Als u met de rechtermuisknop op het pictogram klikt/ingedrukt houdt, wordt het systeemvenstermenu weergegeven.
• Een dubbelklik/tik moet schakelen tussen het maximaliseren van het venster en het herstellen van het venster.
• De venstertitel en andere tekstelementen in de titelbalk moeten reageren op het schalen van tekst. Dit kan vereisen dat de titelbalk in hoogte toeneemt.

Besturingselementen voor bijschriften (minimaliseren, maximaliseren, herstellen, sluiten)

Als u uw eigen bijschriftknoppen voor uw app maakt, volgt u deze richtlijnen zodat deze overeenkomen met de knoppen voor systeembijschriften.

Ontwerpen

• Gebruik deze pictogrammen voor de knoppen:
  • Pictogram Minimaliseren: E921 ChromeMinimize
  • Pictogram Maximaliseren: E922 ChromeMaximize
  • Pictogram Herstellen: E923 ChromeRestore
  • Pictogram sluiten: E8BB ChromeClose
• De pictogrammen voor de knoppen maximaliseren en herstellen hebben afgeronde hoeken.
• Ondertitelingsknoppen hebben volledige achtergrondplaten.
• Bijschriftknoppen reageren op rusttoestand, bij zweven, bij indrukken, actief en inactief statussen.

Aanvullende ontwerppatronen

Terugknop

Ontwerpen

Het pictogram van de aanbevolen knop Terug is: E830 ChromeBack

• Als er een knop Terug aanwezig is, moet deze links van de combinatie van app-titel of pictogram/titel (in LTR) worden geplaatst.
• De knop Terug reageert op rust, bij zweven, ingedrukt, actieve, en inactieve statussen.
• De knop Terug moet 16 pixels bij 16 pixels zijn en verticaal gecentreerd in de titelbalk. De knop moet een volledige bloedingsachterplaat hebben.
• De knop Terug moet op 16 pixels afstand zijn van de meest linkse rand in LTR, of de meest rechtse rand in RTL, en 16 pixels van het volgende element links of rechts ervan.

Zoeken

Ontwerpen

Als de algemene zoekfunctionaliteit aanwezig is, moet er een zoekvak worden toegevoegd aan de titelbalk, gecentreerd in het venster. Vergroot de grootte van de titelbalk tot 48 pixels wanneer u een zoekvak opneemt.

Het zoekvak moet reageren op wijzigingen in de venstergrootte.

People

Als er een accountrepresentatie is, moet het besturingselement voor de persoonsafbeelding links van de bijschriftelementen worden geplaatst. Vergroot de grootte van de titelbalk tot 48 pixels wanneer u een persoonsfoto opneemt.

Tabs

Als u tabs als het belangrijkste onderdeel van uw app gebruikt, benut dan de ruimte van de titelbalk en houd bijschriftbesturingselementen verankerd aan de rechterkant.

Volgende stappen