Иерархический шаблон навигации от начала до конца (HTML)

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

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

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

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

• Ресурсы изображений — представление приложения в операционной системе.
• Панели приложения — поддержка навигации и применения команд.
• Параметры — предоставление заявления о конфиденциальности, справки и другой информации о приложении.
• Перемещение данных — синхронизация приложения между сеансами и устройствами.
• Глобализация — привлечение пользователей из стран и регионов по всему миру.
• Специальные возможности — функции, помогающие пользователям выполнять задачи независимо от их физических возможностей и устройств ввода.

На рисунке показана простейшая иерархическая структура вместе с эскизом иерархического шаблона навигации в приложении Магазина Windows.

 

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

Страница	Описание
Концентратор	Концентратор — это начальная страница приложения, где перечислены все его возможности и компоненты. Здесь представлены разделы содержимого с небольшой подборкой элементов, связанных с каждым разделом. Управлять отображением разделов и элементов можно на основе различных критериев (в зависимости от параметров приложения или настроек пользователя). Обычно каждый элемент отображает образец, сводку или краткий обзор соответствующего содержимого. С этой страницы пользователи могут перейти на страницу раздела или на страницу сведений об элементе. Рекомендуем проектировать страницу концентратора с разнообразными визуальными компонентами, чтобы привлечь внимание пользователей и вызвать их интерес к другим разделам приложения.
Раздел	Страницы разделов — это второй уровень приложения, где отображаются образцы, сводка или краткий обзор элементов, связанных с разделом. Для представления элементов на этой странице может использоваться любая форма, которая наилучшим образом отражает сценарий и содержимое раздела. Обычно на этой странице отображается больше элементов, чем на странице концентратора. Каждый элемент имеет ссылку на страницу сведений.
Элемент и сведения	Страницы сведений — это третий уровень приложения, где отображается большая часть (если не все) содержимого или функций для конкретного элемента, выбранного на странице концентратора или раздела. Некоторые приложения, такие как средства чтения веб-каналов, могут включать ссылки на статьи и сайты-источники, если само содержимое слишком объемное для отображения в приложении. Страницы сведений могут содержать много информации или всего один объект, например изображение, видео или другую функцию приложения.

 

Панель навигации, обычно используемая в приложениях с плоской системой навигации, может быть также удобна для перемещения по содержимому в приложении с иерархической структурой. Эта панель представляет собой промежуточный элемент, который может появляться у верхнего края экрана, когда пользователь прокручивает его сверху вниз или снизу вверх (щелкает правой кнопкой мыши, нажимает клавиши Windows+Z или клавишу меню на клавиатуре).

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

Примечание  Убедитесь, что пользователь сможет пройти по разделам от текущей страницы в обратном порядке. Для этого в WinJS предусмотрен объект BackButton в сочетании с PageControl.

 

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

Пример иерархической системы навигации

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

Соответствие требованиям Магазина Windows

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

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

• Экран-заставка и изображения плиток
• Полная поддержка сенсорного ввода, а также ввода с помощью мыши и с клавиатуры
• Поддержка разных размеров окна, ориентаций устройства и размеров экрана
• Перемещение данных и состояние сеанса
• Оптимизация для глобализации, локализации и поддержки специальных возможностей

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

Реализация навигации

Откройте пример иерархической системы навигации или начните с шаблона проекта Приложение-концентратор в Visual Studio. При желании вы можете изучить указанные ниже обзоры шаблонов. Шаблоны проектов JavaScript для приложений среды выполнения Windows: обзор сведений о реализации модели навигации, модели данных, обработке состояния просмотра и т. д. Шаблоны элементов JavaScript для приложений Магазина Windows: включает широко используемый код, который может сократить время разработки.

Использование одностраничной навигации Подробная информация о том, как объект PageControl поддерживает одностраничную навигацию. В статье Добавление элементов управления PageControl объясняются различные способы их реализации. См. в примере: Объект PageControl определен в файле \js\navigator.js и используется в файлах \pages\home\home.js и \pages\page2\page2.js.

 

Добавление пользовательского интерфейса и изображений

Укажите ресурсы изображений (визуальные ресурсы, такие как экран-заставка и изображения плиток) для приложения на вкладке Интерфейс приложения манифеста приложения. Для этого откройте package.appxmanifest из обозревателя решений. См. статью об использовании конструктора манифестов.

Примечание  Сопутствующее приложение содержит изображения-заполнители, отвечающие требованиям Магазина Windows. В целях демонстрации в шаблон включены дополнительные изображения, поддерживающие специальные возможности, с различными настройками контрастности и переводом на французский язык (fr-FR). Большинство изображений представлены в разных разрешениях.

 

	Выбор изображений для представления вашего приложения Выберите изображения, обеспечивающие лучшее взаимодействие с пользователем. Включите масштабированные варианты для разных разрешений экрана. Чтобы пройти сертификацию для Магазина, приложению требуется базовый набор изображений. Логотип Магазина Отображается вместе с описанием приложения в результатах поиска и на странице описания. Логотип Отображается на квадратной плитке приложения на начальном экране. См. статью Создание плиток и индикаторов событий и пример плиток приложения и индикаторов событий. Мелкий логотип Мелкий логотип отображается вместе с названием приложения в результатах поиска, возвращаемых на начальный экран. Он также появляется в списке доступных для поиска приложений и при уменьшении масштаба начальной страницы. Экран-заставка Отображается при запуске приложения и исчезает, когда приложение готово к взаимодействию с пользователем. Экран-заставка состоит из изображения и цвета фона, которые другое можно настроить. См. статью Добавление экрана-заставки и пример экрана-заставки.
	Добавление ресурсов файлов или изображений Следуйте этим инструкциям для назначения имен файловым ресурсам и их организации в папки.
	Оптимизация изображений для различных разрешений экрана Создайте ресурсы изображений для приложения, добавьте их в проект и определите их в манифесте приложения.
	Добавление панелей приложения Панель приложения выводит средства навигации, команды и инструменты по запросу пользователя. Она отображает команды, соответствующие контексту пользователя: как правило, для текущей страницы или выделенного элемента. Выполните настройку по своему усмотрению. Подробнее см. в описании примера элемента управления HTML AppBar.
	Добавление параметров приложения Предоставьте доступ ко всем параметрам, соответствующим текущему контексту пользователя. Выполните настройку по своему усмотрению. См. пример параметров приложения. Сопутствующее приложение включает и политику конфиденциальности, и справку, доступ к которым можно получить при помощи чудо-кнопки «Параметры».

 

Перемещение данных приложения

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

 

Глобализация

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

	Сведения о ресурсах приложения и локализации Проектируйте приложения Магазина Windows так, чтобы можно было независимо обслуживать и локализовать их ресурсы, а также настраивать их с учетом различных масштабных коэффициентов, параметров специальных возможностей и других контекстов пользователя и компьютера. См. пример ресурсов приложения и локализации.
	Локализация манифеста пакета Локализуйте отображаемое имя, описание и другие отличительные компоненты приложения, описанные в его манифесте.
	Глобализация приложения Адаптируйте приложение для дополнительных языков, рынков, культурных особенностей и регионов.

 

Поддержка специальных возможностей

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

	Проверка специальных возможностей приложения Ознакомьтесь с инструментами тестирования специальных возможностей, входящими в пакет средств разработки программного обеспечения для Windows 8, которые помогут вам проверить специальные возможности приложения.
	Объявление о специальных возможностях приложения в Магазине Windows Если вы протестировали приложение на предмет поддержки специальных возможностей, можно указать это, установив флажок Специальные возможности на странице Сведения о продажах.

 

Заключение

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

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

 

Хотите знать больше?

Планирование приложений Магазина Windows

Подробнее о планировании взаимодействия с пользователями.

Рекомендации по специальным возможностям

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

Гибкое проектирование и разные форм-факторы

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

Указатель рекомендаций по взаимодействию с пользователем для универсальных приложений Windows

Полный перечень рекомендаций по взаимодействию с пользователем.

Примеры

• Пример элемента управления HTML AppBar
• Пример навигации и журнала навигации
• Пример плиток приложения и индикаторов событий
• Пример экрана-заставки
• Пример параметров приложения
• Пример ресурсов и локализации приложения