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

Статья
04/13/2023

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

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

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

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

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

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

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

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

Consistency

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

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

Простота

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

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

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

Понятность

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кадр

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

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

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

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

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

Вкладки

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

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

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

Навигатор

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

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

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

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

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

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

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

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

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

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

Гиперссылки

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

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

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

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