Плоский шаблон навигации от начала до конца (HTML)

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

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

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

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

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

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

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

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

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

Страница стандартного калькулятора	Страница инженерного калькулятора	Страница калькулятора-конвертера

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

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

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

Соответствие требованиям Магазина 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
• Пример навигации и журнала навигации
• Пример плиток приложения и индикаторов событий
• Пример экрана-заставки
• Пример параметров приложения
• Пример ресурсов и локализации приложения