Примечание.
Для доступа к этой странице требуется авторизация. Вы можете попробовать войти или изменить каталоги.
Для доступа к этой странице требуется авторизация. Вы можете попробовать изменить каталоги.
Если вы считаете приложение коллекцией страниц, навигация описывает действие перемещения между страницами и на странице. Это отправная точка взаимодействия с пользователем, и это то, как пользователи находят содержимое и функции, которые они интересуют. Это очень важно, и это может быть трудно сделать правильно.
У вас есть огромное количество вариантов для навигации. Вы можете:
Требовать, чтобы пользователи проходили по ряду страниц по порядку.
Укажите меню, позволяющее пользователям переходить непосредственно на любую страницу.
Поместите все на одну страницу и предоставьте механизмы фильтрации для просмотра содержимого.
Хотя для каждого приложения нет единой структуры навигации, существуют принципы и рекомендации, которые помогут вам решить правильный дизайн приложения.
Принципы хорошей навигации
Начнем с основных принципов хорошей структуры навигации:
- Согласованность: Соответствуйте ожиданиям пользователей.
- Простота: Не делайте больше, чем вам нужно.
- Ясность: Укажите четкие пути и опции.
Согласованность
Навигация должна соответствовать ожиданиям пользователей. Использование стандартных элементов управления , с которыми знакомы пользователи, и следующие стандартные соглашения для значков, расположений и стилей позволяют сделать навигацию прогнозируемой и интуитивно понятной для пользователей.
Пользователи ожидают найти определенные элементы пользовательского интерфейса в стандартных расположениях.
Простота
Меньше элементов навигации упрощают принятие решений для пользователей. Предоставление простого доступа к важным местам назначения и скрытие менее важных элементов поможет пользователям получить место, где они хотят, быстрее.
Представление элементов навигации в знакомом меню навигации.
Не перегружать пользователей с множеством вариантов навигации.
Понятность
Четкие пути позволяют использовать логическую навигацию для пользователей. Сделать параметры навигации очевидными и прояснить отношения между страницами должно помочь избежать того, чтобы пользователи терялись.
Назначения четко помечены, чтобы пользователи знали, где они находятся.
Общие рекомендации
Теперь давайте рассмотрим наши принципы проектирования- согласованность, простота и ясность- и используйте их для создания некоторых общих рекомендаций.
- Подумайте о своих пользователях. Определение типичных маршрутов, которые пользователи могут пройти через приложение, и для каждой страницы подумайте о том, почему пользователь там и куда он может захотеть перейти.
- Избегайте глубоких иерархий навигации. Если вы выходите за рамки двух уровней навигации, укажите хлебные крошки, которые показывают пользователю, где они находятся, и позволяют им быстро вернуться. В противном случае вы рискуете оставить пользователя в глубокой иерархии, из которой им будет сложно выбраться.
- Избегайте "pogo-sticking". Это происходит, когда есть связанное содержимое, но доступ к нему требует, чтобы пользователь сначала поднялся на один уровень вверх, а затем спустился снова вниз.
Использование правильной структуры
Теперь, когда вы знакомы с общими принципами навигации, как структурировать приложение? Существует две общие структуры: плоские и иерархические.
Плоский/боковой
В плоской или боковой структуре страницы существуют параллельно. Вы можете перейти с одной страницы на другую в любом порядке.
Мы рекомендуем использовать плоскую структуру, когда:
- Страницы можно просматривать в любом порядке.
- Страницы четко отличаются друг от друга и не имеют очевидных отношений родителя и ребенка.
- В группе меньше 8 страниц.
(Если есть больше страниц, пользователям может быть трудно понять, как страницы уникальны или понять их текущее расположение в группе. Если вы не думаете, что это проблема для вашего приложения, перейдите вперед и сделайте страницы одноранговых узлов. В противном случае рекомендуется использовать иерархическую структуру, чтобы разбить страницы на две или более небольшие группы.)
Иерархический
В иерархической структуре страницы упорядочены в виде дерева. У каждой дочерней страницы есть один родитель, но у родительской страницы может быть одна или несколько дочерних страниц. Чтобы получить доступ к дочерней странице, вы проходите через родительскую страницу.
Иерархические структуры хороши для организации сложного содержимого, охватывающего множество страниц. Недостатком является некоторая сложность навигации: чем глубже структура, тем больше требуется щелчков, чтобы перейти с одной страницы на другую.
Мы рекомендуем иерархическую структуру, когда:
- Страницы должны проходить по определенному порядку.
- Между страницами существует четкая связь "родитель-дочь".
- В группе имеется более 7 страниц.
Объединение структур
Вам не нужно выбирать одну структуру или другую; многие хорошо разработанные приложения используют оба. Приложение может использовать неструктурированные структуры для страниц верхнего уровня, которые можно просматривать в любом порядке, и иерархические структуры для страниц с более сложными связями.
Если структура навигации имеет несколько уровней, рекомендуется, чтобы одноранговые элементы навигации ссылались только на одноранговые элементы в текущем поддереве. Рассмотрим смежную иллюстрацию, в которой показана структура навигации с двумя уровнями:
- На уровне 1 элемент одноранговой навигации должен предоставлять доступ к страницам A, B и C.
- На уровне 2 элементы одноранговой навигации для страниц A2 должны ссылаться только на другие страницы A2. Они не должны ссылаться на страницы уровня 2 в поддереве C.
Использование правильных элементов управления
После принятия решения о структуре страницы необходимо решить, как пользователи перемещаются по этим страницам. XAML предоставляет различные элементы управления навигацией для обеспечения согласованной и надежной навигации в приложении.
За исключением нескольких исключений, любое приложение с несколькими страницами использует кадр. Как правило, приложение имеет главную страницу, содержащую кадр и основной элемент навигации, например элемент управления представлением навигации. Когда пользователь выбирает страницу, кадр загружается и отображает его.
Отображает горизонтальный список ссылок на страницы на том же уровне. Элемент управления NavigationView реализует верхний шаблон навигации.
Используйте верхнюю навигацию, когда:
- Вы хотите отобразить все параметры навигации на экране.
- Требуется больше места для содержимого приложения.
- Значки не могут четко описать категории навигации.
Отображает горизонтальный набор вкладок и соответствующее содержимое. Элемент управления TabView полезен для отображения нескольких страниц (или документов) при предоставлении пользователю возможности переупорядочения, открытия или закрытия вкладок.
Используйте вкладки, когда:
- Вы хотите, чтобы пользователи могли динамически открывать, закрывать или переупорядочивать вкладки.
- Вы ожидаете, что одновременно откроется большое количество вкладок.
- Вы ожидаете, что пользователи смогут легко перемещать вкладки между окнами в приложении, которые используют вкладки, аналогичные веб-браузерам, таким как Microsoft Edge.
Отображает горизонтальный список ссылок на страницы на каждом из более высоких уровней. Элемент управления BreadcrumbBar реализует шаблон навигации "хлебные крошки".
Используйте навигационную цепочку в следующих случаях:
- Вы хотите показать путь к текущему местоположению
- У вас есть много уровней навигации
- Вы ожидаете, что пользователи смогут вернуться на любой предыдущий уровень
Отображает вертикальный список ссылок на страницы верхнего уровня. Используйте, когда:
- Страницы существуют на верхнем уровне.
- Существует множество элементов навигации (более 5)
- Вы не ожидаете, что пользователи часто переключаются между страницами.
Отображает список элементов. При выборе элемента отображается соответствующая страница в разделе сведений. Используйте, когда:
- Вы ожидаете, что пользователи часто переключаются между дочерними элементами.
- Вы хотите разрешить пользователю выполнять высокоуровневые операции, такие как удаление или сортировка отдельных элементов или групп элементов, а также разрешить пользователю просматривать или обновлять сведения для каждого элемента.
Список и сведения хорошо подходят для почтовых ящиков, списков контактов и записи данных.
Внедренные элементы навигации могут отображаться в содержимом страницы. В отличие от других элементов навигации, которые должны быть согласованы между страницами, элементы навигации, внедренные в содержимое, уникальны для каждой страницы.
Рекомендации по настраиваемому поведению обратной навигации
Если вы решили предоставить собственную навигацию по обратному стеку, интерфейс должен соответствовать другим приложениям. Рекомендуется следовать следующим шаблонам действий навигации:
| Действие навигации | Добавить в историю навигации? |
|---|---|
| Страница на страницу, разные одноранговые группы |
Да
На этом рисунке пользователь переходит с уровня 1 приложения на уровень 2, пересекая группы пользователей, поэтому эта навигация добавляется в журнал навигации.
На следующем рисунке пользователь перемещается между двумя одноранговых группами на одном уровне, снова пересекая одноранговые группы, поэтому навигация добавляется в журнал навигации.
|
|
Страница на страницу, одна и та же одноранговая группа, без элемента навигации на экране
Пользователь переходит с одной страницы на другую в рамках одной и той же группы пользователей. Нет элемента навигации на экране (например, NavigationView), который обеспечивает прямую навигацию на обоих страницах. |
Да
На следующем рисунке пользователь перемещается между двумя страницами в одной одноранговой группе, а навигация должна быть добавлена в журнал навигации.
|
|
Переход от страницы к странице в той же одноранговой группе, с элементом навигации на экране
Пользователь перемещается с одной страницы на другую в той же одноранговой группе. Обе страницы отображаются в одном элементе навигации, например NavigationView. |
Смотря как
Да, добавьте в историю навигации, за исключением двух заметных случаев. Если вы ожидаете, что пользователи приложения переключаются между страницами в одноранговой группе часто или если вы хотите сохранить иерархию навигации, не добавляйте в журнал навигации. В этом случае, когда пользователь нажимает назад, вернитесь на последнюю страницу, прежде чем пользователь перешел к текущей группе пользователей.
|
|
Отображение временного пользовательского интерфейса
В приложении отображается всплывающее окно или дочернее окно, например диалоговое окно, экран-заставка или экранная клавиатура, или приложение входит в специальный режим, например несколько режимов выбора. |
Нет
Когда пользователь нажимает кнопку "Назад", закройте временный пользовательский интерфейс (скрытие клавиатуры на экране, отмените диалоговое окно и т. д.) и вернитесь на страницу, которая породила временный пользовательский интерфейс.
|
|
Перечисление элементов
Приложение отображает содержимое для элемента на экране, например, сведения о выбранном элементе из списка или деталей. |
Нет
Перечисление элементов аналогично навигации в одноранговой группе. Когда пользователь нажимает назад, перейдите на страницу, которая предшествовала текущей странице с перечислением элементов.
|
Далее: добавление кода навигации в приложение
В следующей статье показано, как реализовать базовую навигацию, показан код, необходимый для использования элемента управления для включения базовой Frame навигации между двумя страницами в приложении.
Совместная работа с нами на GitHub
Источник этого содержимого можно найти на GitHub, где также можно создавать и просматривать проблемы и запросы на вытягивание. Дополнительные сведения см. в нашем руководстве для участников.
Windows developer