Поделиться через


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

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

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

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

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

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

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

Простейшая реализация плоского шаблона навигации

Эскиз примера приложения.

 

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

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

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

Пример плоской системы навигации: страница стандартного калькулятора Пример плоской системы навигации: страница инженерного калькулятора Пример плоской системы навигации: страница калькулятора-конвертера
Страница стандартного калькулятора Страница инженерного калькулятора Страница калькулятора-конвертера

 

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

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

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

Пример приложения: страница 1

Пример приложения: страница 2 с панелью навигации

Пример приложения: страница 2

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

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

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

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

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

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

значок ступени

Откройте пример плоской системы навигации или начните с шаблона проекта Приложение навигации в Visual Studio. При желании вы можете изучить указанные ниже обзоры шаблонов.

значок ступени

Добавление одностраничной навигации

Подробная информация о том, как объект 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

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

Примеры