Dialogy a vyskakovací okna

Dialogy a kontextové rámečky jsou přechodné prvky uživatelského rozhraní, které se zobrazí, když se něco stane, které vyžaduje oznámení, schválení nebo další informace od uživatele.

Dialogy

Dialogy jsou modální překryvy uživatelského rozhraní, které poskytují informace o kontextové aplikaci. Dialogy blokují interakce s oknem aplikace, dokud nejsou explicitně zrušeny. Často od uživatele požadují nějaký druh akce.

Informační rámečky

Kontextová nabídka je lehké kontextové vyskakovací okno, které zobrazuje uživatelské rozhraní související s tím, co uživatel dělá. Zahrnuje logiku umístění a velikosti a lze ji použít k odhalení sekundárního ovládacího prvku nebo zobrazení dalších podrobností o položce.

Na rozdíl od dialogového okna je možné informační panel rychle zavřít klepnutím nebo kliknutím někam mimo informační panel, stisknutím řídicí klávesy nebo tlačítka Zpět, změnou velikosti okna aplikace nebo změnou orientace zařízení.

Je to správná kontrola?

Dialogy a informační rámečky zajišťují, aby uživatelé věděli o důležitých informacích, ale zároveň narušili uživatelské prostředí. Vzhledem k tomu, že dialogy jsou modální (blokující), přerušují uživatele a brání jim v provádění čehokoli jiného, dokud nebudou s dialogem pracovat. Informační rámečky poskytují méně rušivé prostředí, ale zobrazení příliš mnoha informačních rámečků může být rušivé.

Jakmile zjistíte, že chcete použít dialogové okno nebo informační nabídku, musíte zvolit, který z nich chcete použít.

Vzhledem k tomu, že dialogy blokují interakce, zatímco rozbalovací okna nikoliv, měly by být dialogy vyhrazeny pro situace, kdy má uživatel přerušit vše a soustředit se na specifický kousek informací nebo zodpovědět otázku. Na druhou stranu lze rozbalovací okna použít, když chcete na něco upozornit, ale pokud to chce uživatel ignorovat, je to v pořádku.

Použít dialogové okno pro...

• Vyjádření důležitých informací, které uživatel musí před pokračováním přečíst a potvrdit. Mezi příklady patří:
  • Když může dojít k ohrožení zabezpečení uživatele
  • Když se uživatel chystá trvale změnit cenný majetek
  • Když se uživatel chystá odstranit cenný prostředek
  • Potvrzení nákupu v aplikaci
• Chybové zprávy, které platí pro celkový kontext aplikace, jako je chyba připojení.
• Dotazy, kdy se aplikace musí zeptat uživatele na kritickou otázku, například když nemůže učinit rozhodnutí jménem uživatele. Blokující otázku nelze ignorovat ani odložit a měla by nabídnout uživatelem jasně definované volby.

Použijte rozbalovací panel pro...

• Shromažďování dalších informací potřebných před dokončením akce
• Zobrazení informací, které jsou relevantní jenom v některých případech. Například v aplikaci prohlížeče fotografií, když uživatel klikne na miniaturu obrázku, můžete použít vyskakovací okno k zobrazení velké verze obrázku.
• Zobrazí se další informace, například podrobnosti nebo delší popisy položky na stránce.

Způsoby, jak se vyhnout používání dialogových oken a informačních oken

Zvažte důležitost informací, které chcete sdílet: je důležité uživatele přerušit? Zvažte také, jak často se mají zobrazovat informace; Pokud se zobrazuje dialogové okno nebo oznámení každých několik minut, můžete místo toho přidělit místo těchto informací v primárním uživatelském rozhraní. Například v chatovacím klientovi místo zobrazení informačního rámečku při každém přihlášení přítele můžete zobrazit seznam přátel, kteří jsou v tuto chvíli online, a zvýraznit přátele při přihlašování.

Dialogy se často používají k potvrzení akce (například odstranění souboru) před jejím spuštěním. Pokud očekáváte, že uživatel provede určitou akci často, zvažte možnost, jak tuto akci vrátit zpět, pokud se jedná o chybu, a ne vynucení, aby uživatelé akci pokaždé potvrdili.

Examples

• Důležitá rozhraní API: Třída ContentDialog, Třída Flyout

• Pokud máte nainstalovanou aplikaci Galerie WinUI 3, kliknutím sem aplikaci otevřete a podívejte se na ContentDialog nebo Flyout v akci. Získejte aplikaci z Microsoft Store nebo získejte zdrojový kód na GitHub.

Vytvoření dialogového okna

Podívejte se na článek Dialogy.

Vytvoření informačního rámečku

Podívejte se na článek o Flyoutu.