Руководство по элементам управления Hub для приложений Магазина Windows Phone

Статья
04/07/2015

Компоненты элемента управления “Главный раздел” (заголовок, заголовок раздела и т. д.)

Описание

Элемент управления "Главный раздел" — на телефоне он рассчитан только на использование в книжной ориентации — отображает ряд разделов, которые можно двигать в поперечном направлении. Он представляет собой полноэкранный контейнер и модель навигации для приложения.

Взаимодействия элемента управления "Главный раздел" (ранее панорамные взаимодействия) являются неотъемлемой составляющей характерного внешнего вида и оформления Windows Phone. В отличие от приложений, вписанных в границы экрана телефона, приложения на основе элемента управления "Главный раздел" предлагают уникальный способ просматривать элементы управления, данные и службы при помощи широкого виртуального полотна, которое расширяет границы экрана по горизонтали. В Windows Phone эти, по сути, динамические представления используют содержимое и анимации, состоящие из нескольких слоев, чтобы можно было плавно перемещать слои с различной скоростью; это аналогично эффекту параллакса.

Разделы в элементе управления "Главный раздел" служат исходной точкой для более детализированных взаимодействий. Ваша задача — обеспечить пользователей визуально насыщенным представлением содержимого.

Примеры

Приложение Windows Phone: элемент управления “Главный раздел”

Пользовательский интерфейс состоит из слоев, которые перемещаются независимо друг от друга: фоновый цвет или рисунок, заголовок главного раздела, заголовки разделов элемента управления "Главный раздел" и сами разделы.

Если задан фоновый рисунок, он является самым нижним слоем и предназначен для придания главному разделу красивого "журнального" вида. Обычно фоновый рисунок — это изображение без полей, которое может быть самой привлекательной визуальной частью приложения.

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

Разделы элемента управления "Главный раздел" являются его компонентами и содержат все остальные элементы управления и содержимое. Скорость перемещения разделов элемента управления "Главный раздел" равна скорости сдвига или прокрутки. Заголовки разделов элемента управления "Главный раздел" для любого данного раздела являются необязательными элементами.

Эскизы могут быть важным элементом, ведущим к содержимому или мультимедиа на других страницах.

Элемент управления “Главный раздел” с эскизами

Руководство по использованию

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

Рекомендации по проектированию

Элемент управления "Главный раздел" отображается и работает только в книжной ориентации.
Для элемента управления "Главный раздел" можно использовать темы, переопределить цвета по умолчанию и т. д.
Используйте эффект бесконечной прокрутки в элементе управления "Главный раздел" для Windows Phone, чтобы переходить от последнего раздела к первому и наоборот. В разделе с 1 или 2 элементами этот эффект не действует. Бесконечная прокрутка действует, если в главный раздел входит не менее 3 элементов.
В Windows Phone, если вы используете в элементе управления "Главный раздел" панель приложения, необходимо задать для нее режим свернутая в значок. Этот режим специально разработан для того, чтобы максимально освободить пространство экрана на странице элемента управления "Главный раздел". Подробнее см. в разделе о панели приложения для Windows Phone.
Пока запускается элемент управления "Главный раздел", отображайте индикатор выполнения в области уведомлений или полноэкранный индикатор загрузки.
Отображайте индикатор выполнения в области уведомлений, если какой-либо из разделов элемента управления "Главный раздел" обновляется, но не блокирует взаимодействие с пользователем.
При первом обращении к элементу управления "Главный раздел" заголовок раздела, показываемого первым, должен иметь правильное выравнивание по левому краю. Стандартных рекомендаций по поводу того, какой раздел показывать по умолчанию, нет — все зависит от содержимого.
При последующих обращениях к тому же элементу управления "Главный раздел" необходимо возвращать пользователя в тот раздел, в котором он был последний раз.
Не создавайте в элементе управления "Главный раздел" больше пяти разделов. Это ограничение диктуется соображениями производительности. Кроме того, лучше уменьшить количество областей, через которые придется переходить пользователю. Для более сложного содержимого рекомендуется использовать меньшее число разделов. Не перегружайте пользователя множеством разделов. При четырех-пяти разделах пользователю легче сориентироваться, где он находится в данный момент и что находится слева и справа.
Не следует использовать элемент управления Pivot в элементе управления "Главный раздел", и наоборот. Однако можно добавить в элемент управления "Главный раздел" ссылку на другую страницу, содержащую элемент управления Pivot.
Не используйте в элементе управления "Главный раздел" элементы управления с возможностью сдвига или прокрутки. Например, если поместить в элемент управления "Главный раздел" элемент управления "Карта", будет трудно использовать элемент управления "Главный раздел". Ввод жестами может интерпретироваться неоднозначно. Например, если вы попытаетесь переместить ползунок влево, находясь в разделе элемента управления "Главный раздел", система не сможет однозначно определить, что именно вы хотите сделать — переместить ползунок или прокрутить раздел. Проблему можно решить, если разместить элемент управления, требующий ввода жестами, на отдельной странице и добавить переход к этой странице. Можно добавить в раздел элемента управления "Главный раздел" элемент управления с отключенным вводом жестами — например, карту. Можно наложить кнопку, которая будет активировать карту. По нажатию этой кнопки пользователь перейдет на другую страницу, которая содержит только карту. Затем пользователь может нажать кнопку перехода назад, чтобы вернуться в раздел элемента управления "Главный раздел".
Дополнительные рекомендации по поводу того, когда лучше использовать элемент управления "Главный раздел" или элемент управления Pivot, можно найти в разделах, посвященных:

Заголовки элемента управления "Главный раздел":

Используйте простой текст или изображения, например логотип. Можно также использовать несколько элементов, например логотип и текст (или другие элементы пользовательского интерфейса).
Цвет шрифта или изображения для заголовка должен четко выделяться на всех участках фонового изображения (потому что эти два элемента перемещаются независимо). Используйте системные шрифты и стили; исключение можно сделать только для фирменного стиля, в котором используется нестандартный шрифт, размер или цвет.
Не используйте анимации заголовка или динамическое изменение его размера.
Для единообразия заголовок элемента управления "Главный раздел" следует оформить так же, как плитку для запуска приложения на начальном экране.
При разработке макета элемента управления "Главный раздел" и оформлении заголовков старайтесь, чтобы они не перекрывали область уведомлений или другие элементы.

Заголовки разделов элемента управления "Главный раздел":

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

Разделы элемента управления “Главный раздел”:

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

Искусство выбора фона

Лучше всего использовать темный, размытый фон с низким контрастом. Одноцветный или с плавными переходами цветов.
Ненавязчивая фотография в фоновом рисунке может сделать внешний вид элемента управления "Главный раздел" визуально привлекательным. Следует избегать фотографий с большим количеством ярких, насыщенных цветов, так как они могут мешать чтению содержимого разделов. На практике используется следующий метод: поверх фотографии помещают полупрозрачный черный или белый фильтр (прямоугольник). Это можно сделать в графическом редакторе, а затем объединить слои.
Фоновый рисунок должен занимать все пространство элемента управления "Главный раздел". Это означает, что его пропорции должны соответствовать пропорциям элемента управления, а при выборе размера следует учитывать самое распространенное разрешение, самое высокое разрешение и производительность. Чтобы размер файла оставался маленьким, рекомендуется использовать формат JPEG.
Вы можете переключаться между разными фоновыми рисунками даже при работающем приложении, но в каждый момент времени может отображаться только один из них.

Эскизы

Рекомендуется не уменьшать целое изображение, а вырезать из него часть, которая наилучшим образом идентифицирует объект. Если изображение трудно идентифицировать без текста, то для его определения можно использовать текст (до двух строк).