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

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

Пользовательский интерфейс центрального узла приложения, предназначенного для управления футбольной командой

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

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

Использование элемента управления Panorama в качестве центрального узла приложения

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

Узел приложения-медиапроигрывателя

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

Домашняя панель

Домашняя (первая) панель слева служит стартовой точкой навигации в другие области приложения. Эта панель представляет собой меню со списком областей, которые может выбрать пользователь. В приложении-медиапроигрывателе (см. предыдущий рисунок) нажатие пальцем на значок «Радио» позволяет перейти к странице «Радио» – это вложенное приложение в составе медиапроигрывателя. В этой области панорамный пользовательский интерфейс полностью заменяется интерфейсом «Радио». Если пользователь хочет перейти в область «Подкасты», ему нужно будет вернуться на домашнюю панель панорамы, воспользовавшись аппаратной кнопкой «Назад», а затем щелкнуть значок «Подкаст» в списке меню. Если список вложенных областей слишком большой и не умещается на экране домашней панели, используйте функцию прокрутки.

Область «Радио» в приложении-медиапроигрывателе

С домашней панели можно не только переходить на различные страницы приложения, но и запустить другие программы. Например, с центрального узла приложения-медиапроигрывателя можно зайти в магазин Windows Phone Marketplace. При нажатии соответствующего элемента пользователь попадает в музыкальный раздел Windows Phone Marketplace, который сам по себе представляет элемент управления Panorama.

Панели справа

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

Таким образом, панель «Журнал» в приложении-медиапроигрывателе упрощает работу пользователя: ему не нужно переходить во вложенную область, чтобы открыть недавно просмотренные фильмы. Если пользователь перешел в область «Музыка» и прослушал ту или иную песню, то она будет отображаться на панели быстрого доступа «Журнал». В данном случае панели обеспечивают быстрый доступ к содержимому, просмотренному в разных областях приложения.

Facebook – еще один пример приложения, использующего элемент управления Panorama для упрощенной навигации по функциям. В приложении имеется домашняя панель – здесь представлен список областей, к которым может перейти пользователь. Например, нажатие пункта «Друзья» позволяет перейти к элементу пользовательского интерфейса для управления списком друзей.

Элемент управления Panorama, расположенный на верхнем уровне правой панели, обычно используется для быстрого доступа к наиболее полезным и часто используемым (по прогнозу разработчиков) представлениям верхнего уровня. Панель «Последние» в этой панораме фактически представляет собой пользовательский интерфейс вложенной области. Чтобы открыть ее из домашней панели, щелкните «Канал новостей»: из элемента управления Pivot вы попадете в эту вложенную область, которая, по сути, представляет собой еще один элемент управления Pivot. Элемент управления Pivotобласти «Канал новостей» представлен пятью страницами: Последние, Фото, Ссылки и Видео. Разработчики приложения продумали следующий момент: чтобы пользователю не пришлось переходить к области «Каналы новостей», а затем возвращаться в область «Последние», нужно разместить эту область в виде панели на элементе управления Panorama верхнего уровня. То же самое было проделано с панелями «Фото» и «События» в элементе управления Panorama верхнего уровня.

Пользовательский интерфейс центрального узла приложения дляFacebook

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

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

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

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

Пользовательский интерфейс узла приложенияKelleyBlueBook

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

Не начинайте работу с домашней панели

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

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

Пользовательский интерфейс узла приложенияeBay

Настраиваемое меню функциональных областей пользовательского интерфейса

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

Пользовательский интерфейс узла приложения для ведения дневника

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

ПриложениеMycomic

Объединение похожих приложений в одно

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

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

Уровни навигации

Сложно решить, как разделить функциональность приложения по разделам и какие уровни навигации создать и предоставить пользователю. Если используется элемент управления Panorama с домашней панелью, то необходимо определить, какой пользовательский интерфейс отобразится при выборе пользователем элемента из списка. Выбрав значение из списка, пользователь перейдет из панорамного узла приложения в новый элемент управления пользовательским интерфейсом – на отдельную страницу или, возможно, к элементу управления Pivot. Чтобы проиллюстрировать вышесказанное, воспользуемся домашней страницей приложения-медиапроигрывателя.

Узел приложения-медиапроигрывателя

В узле приложения-медиапроигрывателя раздел «Радио» представляет собой отдельную страницу пользовательского интерфейса, на которой можно изменить прослушиваемую радиостанцию. В этой области не предоставляются дополнительные средства навигации, такие как список или элементы управления Panorama и Pivot. Выбрав раздел «Музыка» на домашней странице, пользователь получает доступ к разным представлениям сохраненных песен. На следующем рисунке показана часть дерева пользовательского интерфейса, ответственная за навигацию в разделе «Музыка».

Дерево навигации по разделу «Музыка» в приложении-медиапроигрывателе

В разделе «Музыка» отображается элемент управления Pivot с возможностью горизонтальной прокрутки. В разделе «Музыка» первой всегда показана сводная страница «Исполнители». С этой страницы можно перейти на другие, перемещаясь влево или вправо. Каждая сводная страница представляет собой не похожее на другие представление музыкальных произведений, которые можно выбирать.

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

Использование фонового изображения

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

Фоновое изображение

Несколько домашних панелей

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

Основные экраны запуска

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

Пользовательский интерфейс страницы доступа в приложение, предназначенное для ведения дневника