Основы проектирования навигации для приложений для Windows

Если вы рассматриваете приложение как коллекцию страниц, термин навигация описывает действие перемещения между страницами и на странице. Навигация является отправной точкой взаимодействия пользователя с интерфейсом. Она служит для поиска содержимого и функций, интересных пользователю. Это очень важно, и иногда сложно сделать правильно.

У вас есть огромное количество вариантов для навигации. Вы можете:

Требовать, чтобы пользователи проходили по ряду страниц по порядку.

Укажите меню, позволяющее пользователям переходить непосредственно на любую страницу.

Поместите все на одну страницу и предоставьте механизмы фильтрации для просмотра содержимого.

Не существует единой схемы навигации, подходящей для каждого приложения. Существует набор принципов и рекомендаций, которым можно следовать, чтобы разработать правильный проект приложения.

Принципы хорошей навигации

Начнем с базовых принципов разработки удобной навигации:

• Согласованность. Соответствует ожиданиям пользователей.
• Простота: не делать больше, чем вам нужно.
• Ясность. Укажите четкие пути и параметры.

Согласованность

Навигация должна быть согласована с ожиданиями пользователей. Использование стандартных элементов управления, с которыми пользователи уже знакомы, и общепринятых обозначений для значков, расположений и стилей позволит сделать навигацию предсказуемой и интуитивно понятной для пользователей.

Пользователи ожидают найти определенные элементы пользовательского интерфейса в стандартных расположениях.

Простота

Отсутствие большого числа элементов навигации упрощает принятие решений для пользователей. Реализация удобного доступа к важным пунктам назначения и скрытие менее важных элементов поможет пользователям находить то, что им нужно, быстрее.

Представляйте элементы навигации в знакомом меню навигации.

Не перегружать пользователей с множеством вариантов навигации.

Понятность

Понятные пути навигации обеспечивают возможность логической навигации для пользователей. Благодаря очевидным вариантам навигации и упрощению связей между страницами пользователь не потеряется в приложении.

Назначения четко помечены, чтобы пользователи знали, где они находятся.

Общие рекомендации

Теперь на основе знаний о наших принципах проектирования — единообразии, простоте и понятности — попробуем сформировать некоторые общие рекомендации.

• Подумайте о пользователях. Подумайте над тем, какие пути пользователи могут часто использовать для навигации в вашем приложении, а также для каждой страницы, поразмышляйте о том, почему пользователь находится на конкретной странице и куда он собирается перейти в последствии.
• Избегайте глубоких навигационных иерархий. Если вы выходите за рамки двух уровней навигации, предоставьте панель навигации, показывющую пользователю, где они находятся, и давайте быстро вернемся. В противном случае вы рискуете застрять пользователя в глубокой иерархии, что у них возникнут трудности.
• Избегайте "pogo-sticking". Пого-придерживаться происходит, когда есть связанное содержимое, но переход к нему требует, чтобы пользователь поднялся на уровень, а затем снова вниз.

Использование подходящей структуры

Теперь, когда вы ознакомились с общими принципами навигации, какую структуру вы бы создали для приложения? Существует две общие структуры: плоская и иерархическая.

Плоская или боковая

В плоской или боковой структуре страницы располагаются рядом друг с другом. Вы можете перейти с одной страницы на другую в любом порядке.

Мы рекомендуем использовать плоскую структуру в следующих случаях.

• Страницы можно просматривать в любом порядке.
• Страницы четко отличаются друг от друга и не имеют очевидных отношений родителя и ребенка.
• Группа содержит менее 8 страниц.
  (Если есть больше страниц, пользователям может быть трудно понять, как страницы уникальны или понять их текущее расположение в группе. Если вы не думаете, что это проблема для вашего приложения, перейдите вперед и сделайте страницы одноранговых узлов. В противном случае рекомендуется использовать иерархическую структуру, чтобы разбить страницы на две или более небольшие группы.)

Иерархическое

В иерархической структуре страницы организованы в древовидную структуру. У каждой дочерней страницы имеется одна родительская, но одна родительская страница может иметь одну или несколько дочерних. Чтобы получить доступ к дочерней странице, вы проходите через родительскую страницу.

Иерархические структуры хорошо подходят для упорядочивания сложного содержимого, занимающего большое количество страниц. Недостаток ее заключается в некоторых издержках навигации: чем глубже структура, тем больше нажатий требуется пользователям, чтобы перейти от страницы к странице.

Мы рекомендуем иерархическую модель структуры в следующих случаях.

• Просмотр страниц должен осуществляться в определенном порядке.
• Существует четкая иерархическая связь между страницами — "родительский — дочерний".
• В группе имеется более 7 страниц.

Объединение структур

Вам не нужно выбирать одну структуру или другую; многие хорошо разработанные приложения используют оба. В приложении могут использоваться плоские структуры для страниц верхнего уровня, которые можно просматривать в любом порядке, и иерархические структуры для страниц, которые имеют более сложные связи.

Если структура навигации имеет несколько уровней, рекомендуется, чтобы одноранговые элементы навигации ссылались только на одноранговые элементы в текущем поддереве. Изучите следующую иллюстрацию, на которой показана трехуровневая структура навигации:

• На уровне 1 элемент одноранговой модели навигации должен предоставлять доступ к страницам A, B и C.
• На уровне 2 элементы навигации одноранговых узлов для страниц A2 должны ссылаться только на другие страницы A2. Они не должны ссылаться на страницы уровня 2 в поддереве C.

Использование правильных элементов управления

Когда вы решите, какую структуру страниц хотите использовать, вам нужно решить, как пользователи будут переходить по этим страницам. XAML предоставляет различные элементы управления навигацией для обеспечения согласованной и надежной навигации в приложении.

Кадр

С некоторыми исключениями любое приложение, которое состоит из нескольких страниц, использует кадры. Как правило, приложение имеет главную страницу, содержащую кадр, и элемент первичной навигации, например элемент управления представлением навигации. Когда пользователь выбирает страницу, кадр загружает и отображает ее.

Верхняя панель навигации

Отображают горизонтальный список ссылок на страницы одного уровня. Элемент управления NavigationView реализует шаблоны верхней панели навигации.

Используйте верхнюю панель навигации, если:

• вы хотите отобразить все параметры навигации на экране;
• вам требуется больше места для содержимого приложения;
• значки не четко описывают категории навигации.

Вкладки

Отображает горизонтальный набор вкладок и соответствующее содержимое. Элементы управления TabView удобно использовать, чтобы отображать несколько страниц (или документов). С их помощью пользователь может изменять порядок вкладок, а также открывать и закрывать их.

Используйте вкладки, если:

• пользователи должны иметь возможность динамически открывать, закрывать или переупорядочивать вкладки;
• предполагается, что одновременно может быть открыто большое количество вкладок;
• предполагается, что пользователи смогут легко перемещать вкладки между окнами в приложении, которое использует вкладки, как и другие веб-браузеры, например Microsoft Edge.

Строка навигации

Отображает горизонтальный список ссылок на страницы на каждом из более высоких уровней. Элемент управления BreadcrumbBar реализует верхний шаблон навигации.

Используйте при выполнении приведенные далее действия.

• Чтобы отобразить путь к текущему расположению
• У вас есть много уровней навигации
• Вы ожидаете, что пользователи смогут вернуться на любой предыдущий уровень

Левая панель навигации

Отображает вертикальный список ссылок на страницы верхнего уровня. следует использовать в следующих случаях:

• Страницы существуют на верхнем уровне.
• Есть много элементов навигации (более 5).
• Вы не ожидаете, что пользователи часто переключаются между страницами.

Список и подробные сведения

Выводит список элементов. При выборе элемента отображается соответствующая ему страница в разделе сведений. следует использовать в следующих случаях:

• Вы ожидаете, что пользователи часто переключаются между дочерними элементами.
• Вы хотите разрешить пользователю выполнять высокоуровневые операции, такие как удаление или сортировка отдельных элементов или групп элементов, а также разрешить пользователю просматривать или обновлять сведения для каждого элемента.

Шаблон "Список и подробные сведения" хорошо подходит для почтовых приложений, списков контактов и ввода данных.

Гиперссылки

Встроенные элементы навигации могут отображаться в содержимом страницы. В отличие от других элементов навигации, которые должны сохранять единообразие на страницах, элементы управления, встроенные в содержимое, различаются от страницы к странице.

Далее: добавление кода навигации в приложение

В следующей статье показано, как реализовать базовую навигацию, показан код, необходимый для использования элемента управления для включения базовой Frame навигации между двумя страницами в приложении.