Základy návrhu navigace pro Windows aplikace

Pokud si aplikaci myslíte jako kolekci stránek, navigace popisuje pohyb mezi stránkami a v rámci stránky. Je to výchozí bod uživatelského prostředí a způsob, jakým uživatelé hledají obsah a funkce, které mají zájem. Je to velmi důležité a může být obtížné to udělat správně.

Pro navigaci máte velký počet možností. Mohli byste:

Vyžadovat, aby uživatelé prošli řadou stránek v pořadí.

Zadejte nabídku, která uživatelům umožňuje přejít přímo na libovolnou stránku.

Umístěte všechno na jednu stránku a poskytněte mechanismy filtrování pro zobrazení obsahu.

I když pro každou aplikaci neexistuje žádný jediný návrh navigace, existují zásady a pokyny, které vám pomůžou rozhodnout se, který návrh pro vaši aplikaci je správný.

Principy dobré navigace

Začněme základními principy dobrého návrhu navigace:

• Konzistence: Splnění očekávání uživatelů
• Jednoduchost: Nedělejte víc, než potřebujete.
• Jasnosti: Zadejte jasné cesty a možnosti.

Consistency

Navigace by měla být konzistentní s očekáváními uživatelů. Používání standardních ovládacích prvků , které uživatelé znají, a dodržování standardních konvencí pro ikony, umístění a styly zajistí, aby navigace byla předvídatelná a intuitivní pro uživatele.

Uživatelé očekávají, že najdou určité prvky uživatelského rozhraní ve standardních umístěních.

Jednoduchost

Méně položek navigace zjednodušuje rozhodování pro uživatele. Poskytnutí snadného přístupu k důležitým cílům a skrytí méně důležitých položek pomůže uživatelům získat místo, kde chtějí, rychleji.

Prezentace navigačních položek ve známé navigační nabídce

Nezahlcujte uživatele mnoha možnostmi navigace.

Jasnost

Jasné cesty umožňují logickou navigaci pro uživatele. Zpřístupnění možností navigace jako zřejmé a objasnění vztahů mezi stránkami by mělo uživatelům zabránit v ztrátě.

Cíle jsou jasně označené, aby uživatelé věděli, kde jsou.

Obecná doporučení

Teď si vezměme naše principy návrhu – konzistenci, jednoduchost a srozumitelnost – a použijeme je k tomu, abychom se seznámili s některými obecnými doporučeními.

• Zamyslete se nad vašimi uživateli. Projděte si typické cesty, které můžou projít vaší aplikací, a pro každou stránku se zamyslete nad tím, proč tam uživatel je a kam může chtít jít.
• Vyhněte se složitým hierarchiím navigace. Pokud přejdete za dvě úrovně navigace, poskytněte panel s popisem cesty, který zobrazuje, kde se uživatel nachází, a umožňuje uživateli rychle se vrátit. Jinak riskujete, že uživatel zůstane uvězněn v hluboké hierarchii, ze které bude mít potíže odejít.
• Vyhněte se "pogo-sticking". Pogo-sticking nastane, když existuje související obsah, ale přechod na něj vyžaduje, aby uživatel šel o úroveň výš a pak znovu dolů.

Použijte správnou strukturu

Teď, když znáte obecné principy navigace, jak byste měli aplikaci strukturovat? Existují dvě obecné struktury: ploché a hierarchální.

Ploché/boční

V ploché/laterální struktuře existují stránky vedle sebe. V libovolném pořadí můžete přejít z jedné stránky na jinou.

Doporučujeme použít plochou strukturu v následujících případech:

• Stránky lze zobrazit v libovolném pořadí.
• Stránky jsou jasně odlišné od sebe a nemají jasný vztah nadřazenosti a podřízenosti.
• Ve skupině je méně než 8 stránek.
  (Pokud existuje větší počet stránek, může být pro uživatele obtížné pochopit, jak jsou stránky jedinečné, nebo pochopit, kde se ve skupině nacházejí. Pokud si myslíte, že to není problém pro vaši aplikaci, tak stránky nastavte jako rovnocenné. V opačném případě zvažte použití hierarchické struktury k rozdělení stránek do dvou nebo více menších skupin.)

Hierarchický

V hierarchické struktuře jsou stránky uspořádány do stromové struktury. Každá podřízená stránka má jednu nadřazenou stránku, ale nadřazená stránka může mít jednu nebo více podřízených stránek. Pokud se chcete dostat na podřízenou stránku, procházíte přes nadřazenou stránku.

Hierarchické struktury jsou vhodné pro uspořádání složitého obsahu, který zahrnuje velké množství stránek. Nevýhodou je určitá náročnost navigace: čím hlubší je struktura, tím více kliknutí potřebujete, abyste se dostali ze stránky na stránku.

Hierarchickou strukturu doporučujeme, když:

• Stránky by měly být procházené v určitém pořadí.
• Mezi stránkami existuje jasný vztah nadřazený-podřízený.
• Ve skupině je více než 7 stránek.

Kombinování struktur

Nemusíte si vybírat jednu strukturu nebo druhou; Mnoho dobře navržených aplikací používá obojí. Aplikace může používat ploché struktury pro stránky nejvyšší úrovně, které lze zobrazit v libovolném pořadí, a hierarchické struktury pro stránky, které mají složitější vztahy.

Pokud má vaše navigační struktura více úrovní, doporučujeme, aby prvky navigace peer-to-peer odkazovaly pouze na uzly ve stejné úrovni v rámci jejich aktuálního podstromu. Představte si sousední obrázek, který znázorňuje navigační strukturu, která má dvě úrovně:

• Na úrovni 1 by měl prvek navigace peer-to-peer poskytovat přístup ke stránkám A, B a C.
• Na úrovni 2 by navigační prvky peer-to-peer pro stránky A2 měly odkazovat pouze na ostatní stránky A2. Neměli by odkazovat na stránky úrovně 2 v podstromu C.

Použití správných ovládacích prvků

Jakmile se rozhodnete pro strukturu stránek, musíte se rozhodnout, jak uživatelé procházejí těmito stránkami. XAML poskytuje celou řadu navigačních ovládacích prvků, které pomáhají zajistit konzistentní a spolehlivé navigační prostředí ve vaší aplikaci.

Rámeček

S několika výjimkami používá rámeček každá aplikace, která má více stránek. Aplikace má obvykle hlavní stránku, která obsahuje rámec a primární navigační prvek, například ovládací prvek navigačního zobrazení. Když uživatel vybere stránku, načte se rámeček a zobrazí ji.

Horní navigace

Zobrazí vodorovný seznam odkazů na stránky na stejné úrovni. Ovládací prvek NavigationView implementuje horní navigační vzor.

Horní navigaci použijte, když:

• Chcete zobrazit všechny možnosti navigace na obrazovce.
• Chcete více místa pro obsah vaší aplikace.
• Ikony nemohou jasně popisovat vaše navigační kategorie.

Záložky

Zobrazí vodorovnou sadu záložek a jejich odpovídající obsah. Ovládací prvek TabView je užitečný pro zobrazení několika stránek (nebo dokumentů) a dává uživateli možnost změnit uspořádání, otevřít nebo zavřít karty.

Karty použijte při:

• Chcete, aby uživatelé mohli dynamicky otevírat, zavírat nebo měnit uspořádání karet.
• Očekáváte, že pravděpodobně může být najednou otevřený velký počet karet.
• Očekáváte, že uživatelé budou moct snadno přesouvat karty mezi okny ve vaší aplikaci, která používají karty, podobně jako webové prohlížeče, jako je Microsoft Edge.

Breadcrumb

Zobrazí vodorovný seznam odkazů na stránky na každé z vyšších úrovní. Ovládací prvek BreadcrumbBar implementuje navigaci breadcrumb.

Použijte navigační prvek, když:

• Chcete zobrazit cestu k aktuálnímu umístění.
• Máte mnoho úrovní navigace.
• Očekáváte, že se uživatelé budou moct vrátit na libovolnou předchozí úroveň.

Levá navigace

Zobrazí svislý seznam odkazů na stránky nejvyšší úrovně. Použít, když:

• Stránky existují na nejvyšší úrovni.
• Existuje mnoho navigačních položek (více než 5)
• Neočekáváte, že uživatelé budou často přepínat mezi stránkami.

Seznam/podrobnosti

Zobrazí seznam položek. Výběrem položky se zobrazí odpovídající stránka v oddílu podrobností. Použít, když:

• Očekáváte, že uživatelé často přepínají mezi dětskými položkami.
• Chcete uživateli povolit provádění operací vysoké úrovně, jako je odstranění nebo řazení, u jednotlivých položek nebo skupin položek a také chcete uživateli povolit zobrazení nebo aktualizaci podrobností jednotlivých položek.

Seznam/podrobnosti jsou vhodné pro e-mailové schránky, seznamy kontaktů a zadávání dat.

Hypertextové odkazy

Vložené navigační prvky se můžou zobrazovat v obsahu stránky. Na rozdíl od jiných navigačních prvků, které by měly být konzistentní na stránkách, jsou vložené navigační prvky obsahu jedinečné od stránky po stránku.

Pokyny pro přizpůsobení chování zpětné navigace

Pokud se rozhodnete poskytnout vlastní navigaci v zásobníku, prostředí by mělo být konzistentní s jinými aplikacemi. Pro akce navigace doporučujeme postupovat podle následujících vzorů:

Akce navigace	Chcete přidat do historie navigace?
Stránka po stránce, různé skupiny uživatelů	Ano Na tomto obrázku uživatel přejde z úrovně 1 aplikace na úroveň 2, překračuje skupiny vrstevníků, takže navigace se přidává do historie pohybu. Na následujícím obrázku uživatel přechází mezi dvěma partnerskými skupinami na stejné úrovni a znovu překračuje partnerské skupiny, takže navigace se přidá do historie navigace.
Stránka ke stránce, stejná skupina vrstevníků, žádný navigační prvek na obrazovce Uživatel naviguje z jedné stránky na druhou se stejnou skupinou uživatelů. Neexistuje žádný navigační prvek na obrazovce (například NavigationView), který poskytuje přímou navigaci na obě stránky.	Ano Na následujícím obrázku uživatel přechází mezi dvěma stránkami ve stejné partnerské skupině a navigace by se měla přidat do historie navigace.
Z stránky na stránku, stejná skupina vrstevníků, s navigačním prvkem na obrazovce Uživatel přejde z jedné stránky do druhé ve stejné partnerské skupině. Obě stránky se zobrazují ve stejném navigačním prvku, například NavigationView.	Závisí to na tom Ano, přidejte do historie navigace se dvěma výjimkami. Pokud očekáváte, že uživatelé vaší aplikace budou často přepínat mezi stránkami v partnerské skupině nebo pokud chcete zachovat navigační hierarchii, nepřidávejte do historie navigace. V takovém případě, když uživatel stiskne tlačítko zpět, vrátí se na poslední stránku předtím, než vstoupil do aktuální skupiny vrstevníků.
Zobrazení přechodného uživatelského rozhraní Aplikace zobrazí automaticky otevírané nebo podřízené okno, jako je dialogové okno, úvodní obrazovka nebo klávesnice na obrazovce, nebo aplikace přejde do speciálního režimu, jako je režim vícenásobného výběru.	Ne Když uživatel stiskne tlačítko Zpět, zavřete přechodné uživatelské rozhraní (skryjte klávesnici na obrazovce, zrušte dialogové okno atd.) a vraťte se na stránku, která vytvořila přechodné uživatelské rozhraní.
Vytvoření výčtu položek Aplikace zobrazí obsah položky na obrazovce, například podrobnosti o vybrané položce v seznamu nebo seznamu podrobností.	Ne Výčet položek je podobný navigaci v rámci partnerské skupiny. Když uživatel stiskne tlačítko zpět, přejděte na stránku, která předchází aktuální stránce s výčtem položky.

Další: Přidání navigačního kódu do aplikace

Další článek Implementace základní navigace ukazuje kód potřebný k použití Frame ovládacího prvku, který umožňuje základní navigaci mezi dvěma stránkami v aplikaci.