Схемы навигации (приложения Магазина Windows)

Статья
04/07/2015

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

Основой для навигации в приложениях Магазина Windows служат два шаблона: иерархический и плоский. В приложении может использоваться как один из шаблонов, так и их сочетание.

Иерархический шаблон

Приложения Магазина Windows с иерархическим шаблоном — быстрые и гибкие. Такая структура лучше всего подходит для приложений с крупными коллекциями содержимого или большим числом разделов содержимого, предназначенного для изучения пользователем. В большинстве приложений Магазина Windows используется иерархическая система навигации.

Подробнее об этом компоненте см. в нашей серии Компоненты приложений от А до Я.: Иерархическая навигация от А до Я (HTML и XAML)

Страницы узлов, разделов и сведений в приложении Магазина Windows

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

Главный раздел состоит из различных категорий содержимого, каждая из которых сопоставлена со страницами разделов приложения.

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

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

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

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

Плоский шаблон

Во многих приложениях Магазина Windows используется плоский шаблон навигации. Такая структура распространена в играх, браузерах и офисных приложениях. Она позволяет перемещаться между страницами, вкладками или режимами, которые находятся на одном и том же иерархическом уровне. В отличие от иерархического шаблона, в плоском шаблоне, как правило, нет постоянно отображаемой кнопки "Назад" или группы элементов навигации. Поэтому переход между страницами осуществляется по прямым ссылкам в содержимом (см. первый пример ниже) или с помощью панели навигации (см. второй пример ниже).

Подробнее об этом компоненте см. в нашей серии Компоненты приложений от А до Я.: Плоская навигация от А до Я (HTML и XAML)

примеры плоской системы навигации

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

Навигация на полотне

заголовок, кнопка “Назад”, заголовки разделов и плитки как элементы навигации

Заголовок и кнопка "Назад"

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

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

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

Более пристальный взгляд на оформление заголовка, метки раздела и ссылки в приложении “Новости Bing”

Верхняя панель приложения

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

получение доступ к панели навигации

Как правило, метки раздела или категории размещаются на панели навигации, например как в Hulu Plus.

панель навигации приложения Hulu Plus

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

панель навигации приложения ESPN

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

панель навигации приложения Vevo

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

панель навигации приложения Fresh Paint

Контекстное масштабирование

Контекстное масштабирование ускоряет сканирование и перемещение, особенно в представлениях с длинным прокручиваемым списком.

пример увеличения и уменьшения представления в приложении

Например, главная страница приложения Great British Chefs содержит раздел с "информацией дня", за которым следуют пять интересных на вид разделов, которые прокручиваются по горизонтали. Контекстное масштабирование в приложении облегчает переход к любому из пяти разделов.

контекстное масштабирование в приложении Great British Chefs