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

Applies to Windows only

Каркасная модель приложения Food with Friends (Обед с друзьями)

Описание

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

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

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

Для первой группы можно использовать главное изображение или раздел содержимого.

шаблон “Приложение-концентратор” с главной плиткой с горизонтальной прокруткойшаблон “Приложение-концентратор” с главной плиткой с вертикальной прокруткой

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

Здесь приведен пример одного главного изображения, показано, как можно обрезать изображение для альбомной и книжной ориентаций, а также до ширины менее стандартной.

главное изображение обрезано под различные размеры окна

Примеры

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

Приложение “Новости Bing”, демонстрирующее стандартный элемент управления Hub

Шаблон "Приложение-концентратор"

Шаблон "Приложение-концентратор" представляет собой отправную точку. Здесь представлен пример приложения о природе, использующего шаблон "Приложение-концентратор" Microsoft Visual Studio.

Целевая страница:

пример приложения о природе с базовым шаблоном “Приложение-концентратор”

Страница сведений:

пример приложения о природе с базовым шаблоном “Приложение-концентратор”, страница дополнительных сведений

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

Вариант 1. Модуль

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

вариант 1 примера приложения о природе

Целевая страница:

вариант 1 примера приложения о природе, целевая страница

Страница дополнительных сведений:

вариант 1 примера приложения о природе, страница дополнительных сведений
палитра цветов для варианта 1 примера приложения о природеЦвет.   Графический эффект цвета улучшает содержимое и создает наглядную структуру всего макета. В данном примере цветовая палитра состоит из холодных оттенков серого с перфорацией из выделяющегося яркого цвета. На целевой странице в качестве цвета фона одного раздела использован ярко-красный, чтобы дополнить аналогичный оттенок красного в изображении. Яркие цвета уравновешиваются использованием нейтральных оттенков серого. Они предназначены для дополнения содержимого, а не для того, чтобы конкурировать с ним.
группа изображений для варианта 1 примера приложения о природеГруппа изображений.   Фотографии занимают центральное место в дизайне. Изображения были тщательно подобраны по ярким цветам и возможностям обрезки графики. Изображения не имеют рамки по краям или размещены по краям приложения. Это сделано для того, чтобы обеспечивать полный эффект присутствия. Изображения помогают представить содержимое в наглядном виде, раскрывая его контекст и смысл. Если главное изображение является основным, то окружающая его группа изображений должна поддерживать этот эффект и не конкурировать с основным изображением.
компоновка для варианта 1 примера приложения о природеКомпоновка.   Группа главного изображения выходит на передний план благодаря своим размерам и впечатляющей графической реализации. В составе каждой группы справа от главного изображения есть отдельная композиция, содержащая текст и изображения. В композиции и направлении взгляда учтен макет, наилучшим образом представляющий различные требования каждой группы. Порядок групп поддерживает общую иерархию содержимого и горизонтальную структуру приложения.
шрифтовое оформление для варианта 1 примера приложения о природеШрифтовое оформление.   В этом примере использование размера шрифта и цвета поддерживает иерархию содержимого и структуру интерфейса. Размер, положение и интервал логичны для иерархии представляемой информации. Поскольку главное изображение имеет исключительные размеры и внешний вид, шрифт для него может быть также исключением в зависимости от требований языка. Управляемые данными модели, отраженные тремя группами справа от героя, взаимосвязаны через единообразную обработку плиток и выравнивание по лежащей в основе сетке.

 

Вариант 2. Состыкованные вертикальные области

Этот дизайн соединяет компоновку встык вертикальных областей с природными элементами для создания естественной и вместе с тем современной эстетики.

вариант 2, состыкованные вертикальные области примера приложения о природе

Целевая страница:

вариант 2, состыкованные вертикальные области примера приложения о природе, целевая страница

Страница дополнительных сведений:

вариант 2, состыкованные вертикальные области примера приложения о природе, страница дополнительных сведений
палитра цветов для варианта 2 примера приложения о природеЦвет.   Палитра цветов земли, которая состоит из зеленого, черного и коричневого, дополняет изображения природы.
шрифтовое оформление для варианта 2 примера приложения о природеШрифтовое оформление.   Этот дизайн использует шрифт Segoe UI слабой и обычной насыщенности различного размера. Масштаб и прозрачность шрифта используется для обеспечения графического акцента в главном разделе, названиях групп и на нужных объектах на карте.
графическое оформление для варианта 2 примера приложения о природеГрафическое оформление.   Графическое оформление топографической карты в главном разделе на основной странице усиливает тему природы и обеспечивает наглядный контраст со структурой сетки приложения.
компоновка для варианта 2 примера приложения о природеКомпоновка.   Приложение состоит из цветных вертикальных областей текста и изображений. Такие элементы, как изображения с круговыми акцентами, заголовки групп и отдельные цитаты, выделяемые шрифтом, на вертикальных областях, придают компоновке привлекательность и притягивают взор к ключевым зонам содержимого.

 

Вариант 3. Структурированные столбцы

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

вариант 3, структурированные столбцы примера приложения о природе

Целевая страница:

вариант 3, структурированные столбцы примера приложения о природе, целевая страница

Страница дополнительных сведений:

вариант 3, структурированные столбцы примера приложения о природе, страница дополнительных сведений
палитра цветов для варианта 3 примера приложения о природеЦвет.   Мягкая цветовая палитра, состоящая из светлых нейтральных тонов, создает ощущение спокойствия.
группа изображений для варианта 3 примера приложения о природеГруппа изображений.   Изображения в нейтральных тонах или с оттенками сепия дополняют мягкую цветовую схему. Изображения в схожих тонах создают ощущение единства макета и уменьшают визуальный шум.
графическое оформление для варианта 3 примера приложения о природеГрафическое оформление.   Круговая и прозрачная графика игриво нарушает остальную линейную компоновку.
компоновка для варианта 3 примера приложения о природеКомпоновка.   Тонкие серые линии толщиной 1 пиксель разделяют различные группы главного раздела. Маленький шрифт, перемежающийся множеством пробелов, еще более усиливает спокойную эстетику этого приложения.
иллюстрация для варианта 3 примера приложения о природеИллюстрация.   Рисунки или интересные шрифты, используемые в мультимедиа, разрывают крупные блоки текста. Эскиз здесь использован для придания статье структуры и индивидуальности.

 

Вариант 4. Угловой элемент

Данный вариант представляет угловой повторяющийся элемент для обрамления группы изображений и создания фокуса на фоне.

вариант 4, угловой элемент, пример приложения о природе

Целевая страница:

вариант 4, угловой элемент, пример приложения о природе, целевая страница

Страница дополнительных сведений:

вариант 4, угловой элемент, пример приложения о природе, страница дополнительных сведений
палитра цветов для варианта 4 примера приложения о природеЦвет.   Для создания акцента данное приложение использует палитру светлых тонов с угловыми формами насыщенных цветов.
шрифтовое оформление для варианта 4 примера приложения о природеШрифтовое оформление.   Данный дизайн использует шрифт Segoe UI для основного текста, но контрастно выделяет его применением шрифта Bebas Neue в заголовках и названиях групп. Использование различных видов шрифтов является быстрым и эффективным способом создать уникальное впечатление от работы с вашим приложением.
графическое оформление для варианта 4 примера приложения о природеГрафическое оформление.   Данное приложение использует стандартное размещение главного изображения в основном разделе, за которым следуют отдельные группы, содержащие списки. Но добавление угловых графических элементов — как в главное изображение, так и в фоновые — придает данному дизайну динамичность и индивидуальность.

 

Рекомендации

  • Используйте интерактивные заголовки и размещайте глиф угловой скобки (>) в конце текста заголовка, чтобы обозначить, что далее есть еще содержимое. Дополнительную информацию см. в разделе Hub статьи Элементы управления (XAML с C#, C++ или VB) или в разделе Hub статьи Элементы управления (HTML с JavaScript).
  • Не создавайте главный раздел внутри главного раздела. Вместо этого для перехода к другому разделу или на другую страницу используйте интерактивные заголовки.
  • Динамически переформатируйте содержимое в группах, чтобы оно подходило под различные размеры окон. Подробные сведения см. в руководстве по размерам окон.
  • Если у вас много разделов, подумайте о том, чтобы добавить в главный раздел контекстное масштабирование. Это также облегчает поиск разделов, если приложение было сжато по ширине.
  • Делайте обдуманный выбор групп изображений для содержимого основного приложения, которые хорошо работают с наложенным текстом.
  • Используйте шаблон "Приложение-концентратор" в качестве отправной точки и настраивайте макет так, чтобы наилучшим образом показать, в чем преимущества вашего приложения. Вы можете настраивать следующие аспекты элемента управления "Главный раздел".
    • Число разделов
    • Тип содержимого в каждом разделе
    • Размещение и порядок следования разделов
    • Размер разделов
    • Интервалы между разделами
    • Интервалы между разделами сверху или снизу от главного раздела
    • Стиль и размер текста в заголовках и содержимом
    • Цвет фона, разделов, заголовков разделов и содержимого разделов
  • Избегайте использования разделов с вертикальной прокруткой в главном разделе с горизонтальной прокруткой. Выделение прокруткой и прокрутка мышью не будут работать так, как это ожидалось. Подробные сведения см. в руководстве по функции сдвига.

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

Для разработчиков
Шаблоны команд
Схемы навигации
Макет
Руководство по кнопкам "Назад"
Руководство по панелям приложения
Создание специальной панели приложения
Элемент управления Hub для приложений Windows Phone
Для разработчиков (HTML)
Иерархический шаблон навигации, от начала до конца
WinJS.UI.Hub object
WinJS.UI.AppBar object
WinJS.UI.NavBar object
WinJS.UI.BackButton object
Пример элемента управления "Главный раздел" на HTML
Образец элемента управления AppBar HTML
Пример элемента управления HTML NavBar
Образец навигации и журнала навигации
Ваше первое приложение. Часть 3. Объекты PageControl и навигация
Добавление панелей приложения (HTML)
Добавление панелей навигации (HTML)
Навигация между страницами (HTML)
Использование элемента управления Hub для макета и навигации
Навигация между страницами
Для разработчиков (XAML)
Иерархический шаблон навигации, от начала до конца
Windows.UI.Xaml.Controls Hub class
Windows.UI.Xaml.Controls AppBar class
Windows.UI.Xaml.Controls CommandBar class
Пример элемента управления "Главный раздел" на XAML
Пример элемента управления AppBar XAML
Пример XAML Navigation
Ваше первое приложение. Часть 3. Навигация, макет и представления
Ваше первое приложение. Добавление навигации и представлений в приложение Магазина Windows на C++ (учебник, часть 3 из 4)
Добавление панелей приложения (XAML)
Навигация между страницами (XAML)
Использование элемента управления Hub
Для разработчиков (приложения среды выполнения Windows на DirectX и C++)
Создание панели приложения или чудо-кнопки "Параметры" (DirectX)

 

 

Показ:
© 2014 Microsoft