Новый элемент управления «Главный раздел» для разнородных данных

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

В Windows 8.1 мы получили возможность проанализировать эволюцию дизайна. ListView — это элемент управления, оптимизированный для отображения информации из общего источника данных в терминах списков, сеток и возможности группировки. Однако мы заметили, что некоторые разработчики пытались использовать ListView для представления разных типов данных (обычно из разных источников) с помощью шаблона главного раздела. Как можно догадаться (а возможно, вы уже с этим сталкивались), попытки добавить несколько разнородных источников данных в один элемент управления, созданный для единого однородного источника, — это процесс сложный и занимающий много времени. Мы услышали вас и создали элемент управления «Главный раздел», оптимизированный для использования шаблона главного раздела и отображения различных типов данных в отдельных секциях.

Элемент управления «Главный раздел», доступный как для HTML/CSS/JavaScript, так и XAML/C++/C#/Visual Basic, упрощает отображение разнородного содержимого и позволяет представить его в красивой и наглядной форме. Информацию можно представить в виде списков, текстов, видео, ссылок и изображений. Для каждого типа данных можно использовать уникальный макет, особую модель взаимодействия, отдельные элементы управления для каждого взаимодействия и большой набор различных источников данных. Обычно данный элемент управления выступает в качестве стартовой точки приложения, но его можно также применять на дочерних страницах в качестве элемента более крупной иерархии. Если говорить кратко, элемент управления «Главный раздел» позволяет создавать высокопроизводительные приложения, соответствующие языку дизайна Майкрософт. Пользователям предоставляется единообразный способ взаимодействия и интерфейс с тонкой настройкой под все способы ввода (касание, клавиатура и мышь).

Увеличить

Магазин Windows в Windows 8.1 использует элемент управления «Главный раздел»

Главный раздел и его секции

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

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

HTML

<div data-win-control="WinJS.UI.Hub">
  <div data-win-control="WinJS.UI.HubSection" >
    <div data-win-control="WinJS.HtmlControl">
    </div>
  </div>

  <div data-win-control="WinJS.UI.HubSection">
    <div data-win-control="WinJS.UI.ListView">
    …
    </div>
  </div>

  <div data-win-control="WinJS.UI.HubSection">
    <input type="email" />
    <div>
      …
    </div>
  </div>
</div>

XAML

<Hub>
  <HubSection>
    <DataTemplate>
      <Grid>
        …
      </Grid>
    </DataTemplate>
  </HubSection>

  <HubSection>
    <DataTemplate>
      <StackPanel>
        …
      </StackPanel>
    </DataTemplate>
  </HubSection>
…
</Hub>

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

Увеличить
Секции главного раздела с однородным содержимым

Интеллектуальная загрузка

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

Компоненты главного раздела

Кроме секций, главный раздел содержит различные заголовки и так называемую hero section (главную секцию).

Увеличить
Структура главного раздела

Заголовок главного раздела

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

Заголовки секций

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

Давайте взглянем на переход между главной секцией и подробным содержимым в секции Flora & Fauna (Флора и фауна) приложения Field Guide. Пользователь щелкает, касается пальцем или выбирает интерактивный заголовок (Flora & Fauna) для перехода к подробному содержимому.

Увеличить
Целевая страница

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

Чтобы просмотреть код для объявления интерактивных заголовков и подключения инициируемых событий, обратитесь к сценарию 3 из примеров главного раздела для HTML и XAML.

Главная секция

Для повышения визуальной привлекательности приложения и объединения содержимого мы вводим понятие главной секции. Главная секция не имеет полей, поэтому она выделяется на фоне других секций и подчеркивает самую важную часть приложения. Обычно это изображение, которое выходит за левый край экрана, располагается с самого верха до низа и не содержит заголовков секций. Например, в новостных приложениях это может быть изображение лучшей статьи за день. Обратите внимание, что в Магазине Windows, использующем элемент управления «Главный раздел», в главной секции размещен элемент управления FlipView, благодаря чему пользователи могут перелистывать избранные приложения. Для получения информации о том, как создавать главную секцию, обратитесь к сценарию 2 в примерах приложений с главным разделом для HTML и  XAML.

Увеличить
Главная секция приложения Field Guide — это первая секция

Вертикальная компоновка

В Windows 8.1 мы добавили поддержку запуска приложений рядом друг с другом, то есть приложения не всегда запускаются в полноэкранном режиме. Поскольку приложения имеют различные размеры и компоновку, мы предусмотрели возможность располагать секции главного раздела вертикально, чтобы упростить создание дизайна для представлений небольшого размера (менее 50 пикселей в ширину). Вы можете переключаться между горизонтальным и вертикальным режимом без изменения содержимого. Секции располагаются вертикально, соответственно меняется взаимодействие с помощью клавиатуры, мыши и касания пальцем. Для получения информации о том, как переключаться в вертикальный режим, обратитесь к сценарию 5 в примерах приложений с главным разделом для HTML и  XAML.

Увеличить

Горизонтальная компоновка

Вертикальная компоновка

Навигация по секциям

Предпочитаемые целевые страницы

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

Поддержка клавиатуры

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

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

Увеличить
Клавиатурная фокусировка расположена вокруг заголовка текущей секции

Увеличить
Клавиша со стрелкой вправо переносит следующую секцию в зону просмотра и перемещает клавиатурную фокусировку

Сохранение состояния приложения

В связи с тем что элемент управления предназначен для иерархических шаблонов, мы уделили особое внимание процессу перехода на страницы с подробной информацией в секциях. Мы добавили scroll-position API в интерфейс главного раздела, чтобы вы могли сохранять позицию, если пользователь уходит со страницы главного раздела. Таким образом, после возврата на страницу главного раздела пользователь окажется в том же месте, откуда ушел с нее. Для того чтобы научиться пользоваться этим API, обратитесь к сценарию 3 в примерах главных разделов для HTML и  XAML.

Запуск с отображением определенной секции

Элемент управления «Главный раздел» позволяет запускать главный раздел в любой секции, учитывать различные сценарии и формировать уникальный опыт взаимодействия с приложением. Ниже указан пример использования этих API. Данная разметка запускает главный раздел в третьей секции (так как индекс секций начинается с 0).

HTML

<div data-win-control="WinJS.UI.Hub" data-win-options="{sectionOnScreen: 2}">
   ...
 </div>

XAML

<Hub DefaultSectionIndex="2">
   ...
 </Hub>

Контекстное масштабирование

Как и в случае с элементом управления ListView, мы заключили контракт между главным разделом и элементом управления контекстным масштабированием. Это сильно упрощает добавление представления с уменьшенным масштабом секций, которое ускоряет навигацию пользователей к нужным секциями. Это особенно полезно в приложениях, запущенных рядом друг с другом, когда не хватает места для панорамирования большого раздела. Чтобы узнать, как добавить контекстное масштабирование в главный раздел, обратитесь к примерам приложений с главным разделом для HTML и  XAML. Также почитайте рекомендации касательно элемента управления контекстным масштабированием здесь: http://msdn.microsoft.com/en-us/library/windows/apps/hh465319.aspx.

Увеличить

Представление с уменьшенным масштабом из примера приложения

Увеличить
Представление с увеличенным масштабом секции Video из примера приложения

Мы очень рады тому, что появился элемент управления «Главный раздел», и очень хотели бы посмотреть, какое применение ему вы найдете. Оставьте свой комментарий внизу! А еще загляните в Рекомендации по элементу управления «Главный раздел», где изложены советы и идеи о том, как стилизовать этот элемент управления, чтобы создать уникальный дизайн и ярко выделить ваше приложение на фоне остальных.

Дополнительные ресурсы

• Рекомендации по элементу управления «Главный раздел»
• Пример элемента управления «Главный раздел» в XAML
• Элемент управления «Главный раздел» (C#/VB/C++ и XAML)
• КлассWindows.UI.Xaml.Controls Hub
• Пример элемента управления «Главный раздел» в HTML
• Элемент управления «Главный раздел» (JavaScript и HTML)
• Объект WinJS.UI.Hub