Návrh záhlaví

Záhlaví se nachází v horní části aplikace na základní vrstvě. Jejím hlavním účelem je umožnit uživatelům identifikaci aplikace pomocí jejího názvu, přesunutí okna aplikace a minimalizaci, maximalizaci nebo zavření aplikace.

Standardní návrh

Tato část popisuje doporučení a chování návrhu částí standardního záhlaví.

Bar

Návrh

• Standardní záhlaví má výšku 32 pixelů.
• Výchozí pozadí záhlaví je Mica, ale pokud je to možné, doporučujeme, aby se záhlaví shodovala se zbytkem okna.
• Záhlaví pomáhají uživatelům rozlišovat, kdy je okno aktivní a neaktivní. Všechny prvky záhlaví by měly být poloprůhledné, když je okno neaktivní.
• Barvy záhlaví by se měly upravit, když uživatelé přepnou na motivy s vysokým kontrastem nebo mezi světlým a tmavým režimem.
  • U motivů s vysokým kontrastem by aplikace měly použít SystemColors třídu k určení správného barevného zabarvení prvků uživatelského rozhraní, aby bylo možné zajistit vynikající prostředí s vysokým kontrastem.

Chování

• Záhlaví hraje zásadní roli při změně umístění a změně velikosti okna. Veškeré prázdné místo v záhlaví nebo mezery, které zabírají neinteraktivní prvky, jako je název okna, by měly být přetahovatelné.
• Po kliknutí pravým tlačítkem myši nebo stisknutí a podržení na libovolné části záhlaví, která nemá interaktivní prvek, by se měla zobrazit nabídka systémového okna.
• Dvojitým kliknutím nebo klepnutím by se mělo přepínat mezi maximalizací okna a obnovením okna.

Ikona

Návrh

• Velikost ikony okna je 16px o 16px.
• Umístěte ikonu 16px od levého okraje v LTR nebo 16px od pravého okraje v RTL.
  • Pokud je tlačítko Zpět k dispozici, umístěte ikonu okna 16px napravo od tlačítka Zpět.
• Ikona okna by měla být svisle vycentrována v liště záhlaví. Pokud je například výška záhlaví 32 pixelů, horní a dolní okraje jsou 8 pixelů.

Chování

• Jediným kliknutím nebo klepnutím na ikonu by se měla zobrazit systémová nabídka okna.
• Poklikáním nebo klepnutím zavřete okno.

Titul

Návrh

• Umístěte název okna 16px od ikony okna nebo tlačítka Zpět.
  • Pokud není k dispozici ikona ani tlačítko Zpět, umístěte název okna 16px od levého okraje pro LTR nebo od pravého okraje pro RTL.
• Název okna by měl používat proměnnou uživatelského rozhraní Segoe (pokud je k dispozici) nebo písmo segoe UI.
• Název okna by měl používat text stylu titulku (viz rampa typu XAML).
• Název okna lze zkrátit a přidají se tři tečky, pokud je šířka okna menší než délka prvků titulního pruhu. Tlačítka ikon a titulků (min, maximum a zavření) by měly být vždy plně viditelné.

Chování

• Na ikoně by se měla zobrazit nabídka systémového okna po kliknutí pravým tlačítkem nebo stisknutí a podržení.
• Dvojitým kliknutím nebo klepnutím by se mělo přepínat mezi maximalizací okna a obnovením okna.
• Nadpis okna a další textové prvky v záhlaví by měly odpovídat na změnu velikosti textu. To může vyžadovat, aby záhlaví vzrostlo o výšku.

Ovládací prvky titulků (minimalizace, maximalizace, obnovení, zavření)

Pokud pro aplikaci vytvoříte vlastní tlačítka titulků, postupujte podle těchto pokynů, aby odpovídaly tlačítkům titulků systému.

Návrh

• Pro tlačítka použijte tyto ikony :
  • Minimalizovat ikonu: E921 ChromeMinimize
  • Ikona maximalizovat: E922 ChromeMaximize
  • Ikona Obnovení: E923 ChromeRestore
  • Ikona Zavřít: E8BB ChromeClose
• Ikony pro tlačítka pro maximalizaci a obnovení mají zaoblené rohy.
• Tlačítka s popisky mají úplné zadní panely.
• Tlačítka titulků reagují na klid, při najetí, stisknutí, aktivní a neaktivní stavy.

Další vzory návrhu

Tlačítko Zpět

Návrh

Ikona doporučeného tlačítka Zpět: E830 ChromeBack

• Pokud je tlačítko Zpět k dispozici, mělo by se umístit nalevo od názvu aplikace nebo kombinace ikon nebo názvu (v LTR).
• Tlačítko Zpět reaguje na pohotovostní, při najetí myší, při stisknutí, aktivní a neaktivní stavy.
• Tlačítko Zpět by mělo být 16px x 16px a svisle vycentrováno v záhlaví. Tlačítko by mělo mít bezokrajový podkladový panel.
• Tlačítko Zpět by mělo být 16px od levého okraje při směru LTR nebo od pravého okraje při směru RTL a 16px od dalšího prvku vlevo či vpravo od něj.

Search

Návrh

Pokud je k dispozici funkce globálního vyhledávání, mělo by se do záhlaví na střed přidat vyhledávací pole. Pokud zahrnete vyhledávací pole, zvětšete velikost záhlaví na 48 pixelů.

Vyhledávací pole musí reagovat na změny velikosti okna.

People

Pokud je přítomna reprezentace účtu, měl by být ovládací prvek pro obrázek osoby umístěn vlevo od ovládacích prvků popisků. Pokud zahrnete obrázek osoby, zvětšete velikost záhlaví na 48 pixelů.

Karty

Pokud jako hlavní prvek aplikace používáte tabulátory, použijte mezeru v záhlaví a ovládací prvky titulků zachovejte na pravé straně.

Další kroky

Pokyny pro vývojáře najdete v záhlaví