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

Заголовок основ навигации

Если вы рассматриваете приложение как коллекцию страниц, термин навигация описывает действие перемещения между страницами и на странице.If you think of an app as a collection of pages, navigation describes the act of moving between pages and within a page. Навигация является отправной точкой взаимодействия пользователя с интерфейсом. Она служит для поиска содержимого и функций, интересных пользователю.It's the starting point of the user experience, and it's how users find the content and features they're interested in. Это очень важно, и иногда сложно сделать правильно.It's very important, and it can be difficult to get right.

Есть огромное количество способов реализации навигации.We have a huge number of choices to make for navigation. Можно сделать следующее:We could:

Пример навигации 1

Требовать от пользователей просматривать ряд страниц по порядку.Require users to go through a series of pages in order.

Пример навигации 2

Создать меню, которое позволит пользователям переходить непосредственно к любой странице.Provide a menu that allows users to jump directly to any page.

Пример навигации 3

Поместить все на одной странице и предоставить механизмы фильтрации для просмотра содержимого.Place everything on a single page and provide filtering mechanisms for viewing content.

Не существует единой схемы навигации, подходящей для каждого приложения. Существует набор принципов и рекомендаций, которым можно следовать, чтобы разработать правильный проект приложения.While there's no single navigation design that works for every app, there are principles and guidelines to help you decide the right design for your app.

Принципы хорошей навигацииPrinciples of good navigation

Начнем с базовых принципов разработки удобной навигации:Let's start with the basic principles of good navigation design:

  • Согласованность: соответствуйте ожиданиям пользователя.Consistency: Meet user expectations.
  • Простота: не делайте больше, чем нужно сделать.Simplicity: Don't do more than you need to.
  • Понятность: предоставляйте понятные пути навигации и варианты выбора.Clarity: Provide clear paths and options.

ConsistencyConsistency

Навигация должна быть согласована с ожиданиями пользователей.Navigation should be consistent with user expectations. Использование стандартных элементов управления, с которыми пользователи уже знакомы, и общепринятых обозначений для значков, расположений и стилей позволит сделать навигацию предсказуемой и интуитивно понятной для пользователей.Using standard controls that users are familiar with and following standard conventions for icons, location, and styling will make navigation predictable and intuitive for users.

изображение с компонентами страницы

Пользователь ожидает найти определенные элементы пользовательского интерфейса в стандартных расположениях.Users expect to find certain UI elements in standard locations.

ПростотаSimplicity

Отсутствие большого числа элементов навигации упрощает принятие решений для пользователей.Fewer navigation items simplify decision making for users. Реализация удобного доступа к важным пунктам назначения и скрытие менее важных элементов поможет пользователям находить то, что им нужно, быстрее.Providing easy access to important destinations and hiding less important items will help users get where they want, faster.

Первый снимок экрана зеленой диаграммы, помеченной зеленым флажком и содержащей слово ''Do''.

Хорошее представление навигации

Представляйте элементы навигации в знакомом меню навигации.Present navigation items in a familiar navigation menu.

Пример того, как не надо делать

Плохое представление навигации

Не перегружайте пользователя различными параметрами навигации.Overwhelm users with many navigation options.

ПонятностьClarity

Понятные пути навигации обеспечивают возможность логической навигации для пользователей.Clear paths allow for logical navigation for users. Благодаря очевидным вариантам навигации и упрощению связей между страницами пользователь не потеряется в приложении.Making navigation options obvious and clarifying relationships between pages should prevent users from getting lost.

Снимок экрана: макет приложения с четкими путями навигации для пользователя.

Пункты назначения должны иметь четкую разметку, чтобы пользователи знали, в каком разделе они находятся.Destinations are clearly labeled so users know where they are.

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

Теперь на основе знаний о наших принципах проектирования — единообразии, простоте и понятности — попробуем сформировать некоторые общие рекомендации.Now, let's take our design principles--consistency, simplicity, and clarity--and use them to come up with some general recommendations.

  1. Подумайте о пользователях.Think about your users. Подумайте над тем, какие пути пользователи могут часто использовать для навигации в вашем приложении, а также для каждой страницы, поразмышляйте о том, почему пользователь находится на конкретной странице и куда он собирается перейти в последствии.Trace out typical paths they might take through your app, and for each page, think about why the user is there and where they might want to go.

  2. Избегайте глубоких навигационных иерархий.Avoid deep navigation hierarchies. Если уровней навигации будет больше трех, вы рискуете тем, что пользователь застрянет в многоуровневой иерархии, которую ему сложно будет покинуть.If you go beyond three levels of navigation, you risk stranding your user in a deep hierarchy that they will have difficulty leaving.

  3. Избегайте прыжков вверх и вниз.Avoid "pogo-sticking." Прыжки вверх и вниз возникают, когда есть связанное содержимое, но для перехода к нему необходимо, чтобы пользователь перешел на один уровень вверх, а затем снова вниз.Pogo-sticking occurs when there is related content, but navigating to it requires the user to go up a level and then down again.

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

Теперь, когда вы ознакомились с общими принципами навигации, какую структуру вы бы создали для приложения?Now that you're familiar with general navigation principles, how should you structure your app? Существует две общие структуры: плоская и иерархическая.There are two general structures: flat and hierarchal.

Страницы, упорядоченные в виде плоской структуры

Плоская или боковаяFlat/lateral

В плоской или боковой структуре страницы располагаются рядом друг с другом.In a flat/lateral structure, pages exist side-by-side. Вы можете переходить от одной страницы к другой в любом порядке.You can go from one page to another in any order.

Мы рекомендуем использовать плоскую структуру в следующих случаях.We recommend using a flat structure when:

  • Страницы могут просматриваться в любом порядке.The pages can be viewed in any order.
  • Страницы явно отличаются друг от друга и не имеют очевидных отношений типа «предок — потомок».The pages are clearly distinct from each other and don't have an obvious parent/child relationship.
  • Группа содержит менее 8 страниц.There are less than 8 pages in the group.
    (Если в группе больше страниц, пользователю может быть трудно понять, чем они отличаются друг от друга, или определить свое текущее местоположение в группе.(When there are more pages, it might be difficult for users to understand how the pages are unique or to understand their current location within the group. Если вам кажется, что затруднений не возникнет, используйте одноранговую модель организации страниц.If you don't think that's an issue for your app, go ahead and make the pages peers. В противном случае используйте иерархическую структуру, чтобы разбить страницы на две или несколько более мелких групп.)Otherwise, consider using a hierarchical structure to break the pages into two or more smaller groups.)

Иерархическая организация страниц

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

В иерархической структуре страницы организованы в древовидную структуру.In a hierarchical structure, pages are organized into a tree-like structure. У каждой дочерней страницы имеется одна родительская, но одна родительская страница может иметь одну или несколько дочерних.Each child page has one parent, but a parent can have one or more child pages. Чтобы попасть на дочернюю страницу, сначала необходимо обратиться к родительской.To reach a child page, you travel through the parent.

Иерархические структуры хорошо подходят для упорядочивания сложного содержимого, занимающего большое количество страниц.Hierarchical structures are good for organizing complex content that spans lots of pages. Недостаток ее заключается в некоторых издержках навигации: чем глубже структура, тем больше нажатий требуется пользователям, чтобы перейти от страницы к странице.The downside is some navigation overhead: the deeper the structure, the more clicks it takes to get from page to page.

Мы рекомендуем иерархическую модель структуры в следующих случаях.We recommend a hierarchical structure when:

  • Просмотр страниц должен осуществляться в определенном порядке.Pages should be traversed in a specific order.
  • Существует четкая иерархическая связь между страницами — "родительский — дочерний".There is a clear parent-child relationship between pages.
  • Группа содержит более 7 страниц.There are more than 7 pages in the group.

приложение с гибридной структурой

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

Вам не нужно выбирать какую-то конкретную структуру. Многие хорошо разработанные приложения одновременно используют плоскую и иерархическую структуры.You don't have to choose one structure or the other; many well-design apps use both. В приложении могут использоваться плоские структуры для страниц верхнего уровня, которые можно просматривать в любом порядке, и иерархические структуры для страниц, которые имеют более сложные связи.An app can use flat structures for top-level pages that can be viewed in any order, and hierarchical structures for pages that have more complex relationships.

Если в структуре навигации имеется несколько уровней, мы рекомендуем, чтобы одноранговые элементы ссылались друг на друга только в пределах своего текущего поддерева.If your navigation structure has multiple levels, we recommend that peer-to-peer navigation elements only link to the peers within their current subtree. Изучите следующую иллюстрацию, на которой показана трехуровневая структура навигации:Consider the adjacent illustration, which shows a navigation structure that has two levels:

  • На уровне 1 элемент одноранговой модели навигации должен предоставлять доступ к страницам A, B, C и D.At level 1, the peer-to-peer navigation element should provide access to pages A, B, C, and D.
  • На уровне 2 элементы одноранговой модели навигации страниц A2 должны ссылаться только на другие страницы A2.At level 2, the peer-to-peer navigation elements for the A2 pages should only link to the other A2 pages. Они не должны ссылаться на страницы уровня 2 поддерева C.They should not link to level 2 pages in the C subtree.

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

Когда вы решите, какую структуру страниц хотите использовать, вам нужно решить, как пользователи будут переходить по этим страницам.Once you've decided on a page structure, you need to decide how users navigate through those pages. UWP предоставляет разнообразные элементы управления навигацией, позволяющие обеспечить единообразную и надежную навигацию в приложении.UWP provides a variety of navigation controls to help ensure a consistent, reliable navigation experience in your app.

Изображение кадра

КадрFrame

С некоторыми исключениями любое приложение, которое состоит из нескольких страниц, использует кадры.With few exceptions, any app that has multiple pages uses a frame. Как правило, приложение имеет главную страницу, содержащую кадр, и элемент первичной навигации, например элемент управления представлением навигации.Typically, an app has a main page that contains the frame and a primary navigation element, such as a navigation view control. Когда пользователь выбирает страницу, кадр загружает и отображает ее.When the user selects a page, the frame loads and displays it.

Вкладки и изображение сводки

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

Отображают горизонтальный список ссылок на страницы одного уровня.Displays a horizontal list of links to pages at the same level. Элемент управления NavigationView реализует шаблоны верхней панели навигации.The NavigationView control implements the top navigation pattern.

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

  • вы хотите отобразить все параметры навигации на экране;You want to show all navigation options on the screen.
  • вам требуется больше места для содержимого приложения;You desire more space for your app's content.
  • значки не четко описывают категории навигации.Icons cannot clearly describe your navigation categories.

Вкладки и изображение сводки

ВкладкиTabs

Отображает горизонтальный набор вкладок и соответствующее содержимое.Displays a horizontal set of tabs and their respective content. Элементы управления TabView удобно использовать, чтобы отображать несколько страниц (или документов). С их помощью пользователь может изменять порядок вкладок, а также открывать и закрывать их.The TabView control is useful for displaying several pages (or documents) while giving the user the capability to rearrange, open, or close tabs.

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

  • пользователи должны иметь возможность динамически открывать, закрывать или переупорядочивать вкладки;You want users to be able to dynamically open, close, or rearrange tabs.
  • предполагается, что одновременно может быть открыто большое количество вкладок;You expect that there might be a large number of tabs open at once.
  • предполагается, что пользователи смогут легко перемещать вкладки между окнами в приложении, которое использует вкладки, как и другие веб-браузеры, например Microsoft Edge.You expect users to be able to easily move tabs between windows in your application that use tabs, similar to web browsers like Microsoft Edge.

Вкладки и изображение сводки

СводкаPivot

Аналогична представлению навигации, но с дополнительной поддержкой для сенсорного ввода и немного другим поведением навигации.Similar to Navigation View, but with additional support for touch and slightly different navigation behavior.

Используйте сводку, если:Use a pivot when:

  • вы хотите, чтобы в приложении можно было прокручивать категории касанием;You want your app to allow touch-swiping between categories
  • вы хотите, чтобы параметры навигации прокручивались в виде карусели;You want navigation options to carousel infintely
  • нет необходимости в расширенном контроле над поведением навигации между категориями.You do not need extensive control over navigation behavior between categories

Изображение представления навигации

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

Отображает вертикальный список ссылок на страницы верхнего уровня.Displays a vertical list of links to top-level pages. Используется, когда:Use when:

  • Страницы располагаются на верхнем уровне.The pages exist at the top level.
  • Есть много элементов навигации (более 5).There are many navigation items (more than 5)
  • Предполагается, что пользователи не будут часто переключаться между страницами.You don't expect users to switch between pages frequently.

Изображение с основными сведениями

Основные и подробные сведенияMaster/details

Отображает список (основное представление) элементов.Displays a list (master view) of items. При выборе элемента отображается соответствующая ему страница в разделе сведений.Selecting an item displays its corresponding page in the details section. Используется, когда:Use when:

  • Предполагается, что пользователи будут часто переключаться между дочерними элементами.You expect users to switch between child items frequently.
  • Вы хотите позволить пользователю выполнять операции высокого уровня, например удаление или сортировку, с отдельными элементами или группами элементов, а также хотите позволить им просматривать или обновлять сведения о каждом элементе.You want to enable the user to perform high-level operations, such as deleting or sorting, on individual items or groups of items, and also want to enable the user to view or update the details for each item.

Элемент управления "Основные и подробные данные" хорошо подходит для почтовых приложений, списков контактов и ввода данных.Master/details is well suited for email inboxes, contact lists, and data entry.

Гиперссылки и изображения кнопок

ГиперссылкиHyperlinks

Встроенные элементы навигации могут отображаться в содержимом страницы.Embedded navigation elements can appear in a page's content. В отличие от других элементов навигации, которые должны сохранять единообразие на страницах, элементы управления, встроенные в содержимое, различаются от страницы к странице.Unlike other navigation elements, which should be consistent across the pages, content-embedded navigation elements are unique from page to page.

Далее: добавление кода навигации в приложениеNext: Add navigation code to your app

В следующей статье Implement navigation between two pages (Реализация навигации между двумя страницами) показан код, необходимый для использования элемента управления Frame, чтобы реализовать базовую навигацию между двумя страницами в приложении.The next article, Implement basic navigation, shows the code required to use a Frame control to enable basic navigation between two pages in your app.