Вкладки приложения (элемент управления Pivot) (приложения Магазина Windows Phone)

Шаблон "Вкладка приложения" используется для нескольких страниц приложения пользовательского интерфейса, между которыми часто перемещается пользователь. Этот шаблон особенно удобен, если в основе вашего приложения лежит одна и та же тема (например, фильмы, бейсбол и т. д.). На каждой странице для пользователя должно быть что-то такое, что связано с общими данными, которые представлены во всем приложении. Шаблон "Вкладка приложения" может применяться для создания приложения в целом, а также в дочерней области вашего приложения. Например, в качестве основного первого уровня вашего приложения может выступать элемент управления Hub (описанный в предыдущих разделах). Затем пользователь может оттуда переходить к подразделу вашего приложения, использующему шаблон "Вкладка приложения" (с помощью элемента управления Pivot).

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

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

Вкладки приложения для папки “Входящие” Outlook

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

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

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

Элемент управления Pivot можно применять для реализации шаблона "Вкладка приложения". Этот элемент управления дает пользователю возможность навигации вправо и влево на каждой странице (и называется элементом Pivot).

В разработанном корпорацией Майкрософт клиентском приложении Outlook используется шаблон "Вкладка приложения", потому что это приложение показывает данные одного типа. Речь идет о списках сообщений электронной почты, где к каждому элементу Pivot применяется разная фильтрация. Когда вы смотрите на свою папку "Входящие" в приложении Outlook, вы видите три элемента Pivot: —все, непрочитанные и срочные. Благодаря этому становится проще просматривать только срочные сообщения, если требуется. Таким образом, вам не приходится прокручивать список сообщений в элементе Pivot все, чтобы найти сообщения с меткой "важные".

Клиентское приложение Outlook

Другим приложением, использующим шаблон "Вкладка приложения", является Netflix. Каждый элемент Pivot служит для показа списка фильмов. Список в каждом элементе Pivot отличается из-за применения фильтрации. Вы можете провести сравнение и узнать, в чем состоит уникальность каждого из них и чем они полезны. Элемент Pivot мгновенные показывает фильмы, помещенные вами в эту очередь, чтобы получить возможность просмотра с помощью устройства потоковой передачи. Элемент Pivot домашняя страница показывает фильмы, которые могут вас заинтересовать (по мнению создателей Netflix). Элемент Pivot поиск показывает фильмы, соответствующие ключевым словам вашего поиска.

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

Приложение Netflix

Функциональные возможности как у вкладок

Каждый элемент Pivot на деле является вкладкой, и вкладки расположены сверху. Согласно рисунку, посвященному приложению Netflix, приложение в данный момент находится в элементе Pivot домашняя страница, а справа расположен элемент Pivot жанры. Чтобы перейти к элементу Pivot жанры, просто коснитесь его или перейдите к нему путем сдвига.

В приложениях должно использоваться минимальное количество элементов Pivot. Пользователи могут "потеряться", если начнут переходить от одного элемента Pivot к другому. Постарайтесь сделать так, чтобы число элементов Pivot не превышало пяти. Если вам нужно больше элементов, то пусть в одном из элементов будет элемент управления List со ссылками — коснувшись их, можно перейти к другим страницам или на другой уровень навигации, представляющий собой элемент управления Pivot. Чтобы понять, нужно ли это вам, см. статью с детальной информацией для Windows Phone.

Примечание  Благодаря элементу управления Pivot вы можете переходить от одного элемента к другому, касаясь заголовков элементов. Элемент управления Hub не предназначен для этого.

Аспекты фильтрации данных

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

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

Приложение ESPN ScoreCenter

Сочетание элемента управления Pivot с элементом управления Hub

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

Переход от основного элемента управления Hub к элементу управления Pivot в приложении Facebook

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

Панель приложения в элементе управления Pivot

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

Клиентское приложение Outlook

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

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

Элемент Pivot "домашняя страница"

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

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

Связанные разделы

Hub

Pivot