Проектирование для Xbox и телевизора

Создайте приложение Для Windows, чтобы оно хорошо выглядело и хорошо работает на экранах Xbox One и телевизора.

Сведения о взаимодействии с приложениями UWP см. в взаимодействия с геймпадом и удаленным управлением в 10-футовом.

Обзор

Универсальная платформа Windows позволяет создавать восхитительные возможности на нескольких устройствах с Windows. Большая часть функций, предоставляемых платформой UWP, позволяет приложениям использовать один и тот же пользовательский интерфейс на этих устройствах без дополнительной работы. Тем не менее, настройка и оптимизация приложения для отличной работы на экранах Xbox One и телевизоров требуют особых соображений.

Опыт сидения на вашем диване на другой стороне комнаты, используя геймпад или пульт для взаимодействия с телевизором, называется 10-футовый интерфейс. Это так называется, потому что пользователь обычно сидит около 10 футов от экрана. Это создаёт уникальные задачи, которые отсутствуют, например, в 2-футовом опыте или при взаимодействии с компьютером. Если вы разрабатываете приложение для Xbox One или любое другое устройство, которое выводится на экран телевизора и использует контроллер для ввода, следует всегда помнить об этом.

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

Простой

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

Когерентный

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

Все фильмы, показанные на снимке экрана, доступны в Microsoft Movies и TV.

Пленительный

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

Оптимизация для 10-футового интерфейса

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

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

Размер элемента пользовательского интерфейса

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

Коэффициент масштабирования и адаптивный макет

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

В Xbox One такой системный параметр отсутствует; Однако для элементов пользовательского интерфейса UWP, размер которых подходит для телевизора, они масштабируются по умолчанию в размере 200% для приложений XAML и 150% для HTML-приложений. Если элементы пользовательского интерфейса имеют соответствующий размер для других устройств, они будут иметь соответствующий размер для телевизора. Xbox One обрабатывает ваше приложение в разрешении 1080p (1920 x 1080 пикселей). Поэтому при переносе приложения с других устройств, таких как ПК, убедитесь, что пользовательский интерфейс выглядит отлично на 960 x 540 пикселей в масштабе 100% (или 1280 x 720 пикселей в масштабе 100% для HTML-приложений), используя адаптивные техники.

Проектирование для Xbox отличается от проектирования для ПК, так как вам нужно беспокоиться только о одном разрешении, 1920 x 1080. Это не имеет значения, если у пользователя есть телевизор с лучшим разрешением— приложения UWP всегда масштабируются до 1080p.

Правильные размеры ресурсов из набора 200% (или 150% для HTML-приложений) также будут извлечены для вашего приложения при работе на Xbox One, независимо от разрешения телевизора.

Плотность содержимого

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

Размеры элементов управления пользовательского интерфейса

Элементы интерактивного пользовательского интерфейса должны быть размером не менее 32 epx (действующие пиксели). Это значение по умолчанию для распространенных элементов управления UWP и при использовании в масштабе 200% гарантирует, что элементы пользовательского интерфейса видны на расстоянии и помогают уменьшить плотность содержимого.

кнопка

Количество щелчков

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

Размеры текста

Чтобы сделать пользовательский интерфейс видимым с расстояния, используйте следующие практические правила:

• Основной текст и текст для чтения: минимум 15 epx
• Некритичное текст и дополнительное содержимое: минимум 12 epx

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

Отказ от коэффициента масштабирования

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

Для приложений XAML можно отказаться от коэффициента масштабирования с помощью следующего фрагмента кода:

bool result =
    Windows.UI.ViewManagement.ApplicationViewScaling.TrySetDisableLayoutScaling(true);

result сообщит вам, отказались ли вы успешно от участия.

Дополнительные сведения, включая пример кода для HTML/JavaScript, см. в разделе "Отключение масштабирования".

Не забудьте вычислить соответствующие размеры элементов пользовательского интерфейса, удвоив эффективные значения пикселей, указанные здесь, чтобы получить фактические размеры пикселей (или умножив на 1,5 для HTML-приложений).

зона безопасности ТВ

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

Небезопасная область телевизора представлена синей областью на следующем изображении.

Фон можно задать статическим или тематическим цветом или изображением, как показано в следующем фрагменте кода.

Цвет темы

<Page x:Class="Sample.MainPage"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"/>

Изображение

<Page x:Class="Sample.MainPage"
      Background="\Assets\Background.png"/>

Вот как будет выглядеть ваше приложение без дополнительной работы.

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

Размещение пользовательского интерфейса на край

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

С другой стороны, также важно, чтобы интерактивные элементы и текст всегда избегали краев экрана, чтобы гарантировать, что они не будут отрезаны на некоторых телевизорах. Мы рекомендуем рисовать только неосновные визуальные элементы на расстоянии не ближе 5% от краев экрана. Как упоминалось в элементе пользовательского интерфейса, приложение UWP после коэффициента масштабирования консоли Xbox One по умолчанию в 200% будет использовать область 960 x 540 epx, поэтому в пользовательском интерфейсе приложения следует избегать размещения необходимого пользовательского интерфейса в следующих областях:

• 27 эпс сверху и снизу
• 48 epx с левой и правой сторон

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

Границы основного окна

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

В методе OnLaunchedApp.xaml.csдобавьте следующий код:

Windows.UI.ViewManagement.ApplicationView.GetForCurrentView().SetDesiredBoundsMode
    (Windows.UI.ViewManagement.ApplicationViewBoundsMode.UseCoreWindow);

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

Фоны панели

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

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

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

Следующий фрагмент кода достигает этого эффекта:

<SplitView x:Name="RootSplitView"
           Margin="48,0,48,0">
    <SplitView.Pane>
        <ListView x:Name="NavMenuList"
                  ContainerContentChanging="NavMenuItemContainerContentChanging"
                  ItemContainerStyle="{StaticResource NavMenuItemContainerStyle}"
                  ItemTemplate="{StaticResource NavMenuItemTemplate}"
                  ItemInvoked="NavMenuList_ItemInvoked"
                  ItemsSource="{Binding NavMenuListItems}"/>
    </SplitView.Pane>
    <Frame x:Name="frame"
           Navigating="OnNavigatingToPage"
           Navigated="OnNavigatedToPage"/>
</SplitView>

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

Вариант 1. Измените цвет фона CommandBar на прозрачный или тот же цвет, что и фон страницы:

<CommandBar x:Name="topbar"
            Background="{ThemeResource SystemControlBackgroundAltHighBrush}">
            ...
</CommandBar>

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

вариант 2: добавьте фоновый прямоугольник, цвет заливки которого совпадает с цветом фона CommandBar, а затем разместите его под CommandBar и по всей остальной части страницы.

<Rectangle VerticalAlignment="Top"
            HorizontalAlignment="Stretch"      
            Fill="{ThemeResource SystemControlBackgroundChromeMediumBrush}"/>
<CommandBar x:Name="topbar"
            VerticalAlignment="Top"
            HorizontalContentAlignment="Stretch">
            ...
</CommandBar>

Оба этих подхода также применяются к другим типам элементов управления, перечисленным в этом разделе.

Прокрутка концов списков и сеток

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

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

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

<Style x:Key="TitleSafeListViewStyle"
       TargetType="ListView">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListView">
                <Border BorderBrush="{TemplateBinding BorderBrush}"
                        Background="{TemplateBinding Background}"
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <ScrollViewer x:Name="ScrollViewer"
                                  TabNavigation="{TemplateBinding TabNavigation}"
                                  HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
                                  HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
                                  IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
                                  VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
                                  VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
                                  IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
                                  IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
                                  IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
                                  ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
                                  IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
                                  BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
                                  AutomationProperties.AccessibilityView="Raw">
                        <ItemsPresenter Header="{TemplateBinding Header}"
                                        HeaderTemplate="{TemplateBinding HeaderTemplate}"
                                        HeaderTransitions="{TemplateBinding HeaderTransitions}"
                                        Footer="{TemplateBinding Footer}"
                                        FooterTemplate="{TemplateBinding FooterTemplate}"
                                        FooterTransitions="{TemplateBinding FooterTransitions}"
                                        Padding="{TemplateBinding Padding}"
                                        Margin="0,27,0,27"/>
                    </ScrollViewer>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

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

<Page>
    <Grid>
        <ListView Style="{StaticResource TitleSafeListViewStyle}"
                  ... />

Для более точного управления тем, как элементы переносятся в представление, если приложение предназначено для версии 1803 или более поздней версии, можно использовать событие UIElement.BringIntoViewRequested. Предлагается разместить его на ItemsPanel для ListView/GridView, чтобы перехватить событие до того, как это сделает внутренний ScrollViewer, как показано в следующих примерах кода:

<GridView x:Name="gridView">
    <GridView.ItemsPanel>
        <ItemsPanelTemplate>
            <ItemsWrapGrid Orientation="Horizontal"
                           BringIntoViewRequested="ItemsWrapGrid_BringIntoViewRequested"/>
        </ItemsPanelTemplate>
    </GridView.ItemsPanel>
</GridView>

// The BringIntoViewRequested event is raised by the framework when items receive keyboard (or Narrator) focus or 
// someone triggers it with a call to UIElement.StartBringIntoView.
private void ItemsWrapGrid_BringIntoViewRequested(UIElement sender, BringIntoViewRequestedEventArgs args)
{
    if (args.VerticalAlignmentRatio != 0.5)  // Guard against our own request
    {
        args.Handled = true;
        // Swallow this request and restart it with a request to center the item.  We could instead have chosen
        // to adjust the TargetRect's Y and Height values to add a specific amount of padding as it bubbles up, 
        // but if we just want to center it then this is easier.

        // (Optional) Account for sticky headers if they exist
        var headerOffset = 0.0;
        var itemsWrapGrid = sender as ItemsWrapGrid;
        if (gridView.IsGrouping && itemsWrapGrid.AreStickyGroupHeadersEnabled)
        {
            var header = gridView.GroupHeaderContainerFromItemContainer(args.TargetElement as GridViewItem);
            if (header != null)
            {
                headerOffset = ((FrameworkElement)header).ActualHeight;
            }
        }

        // Issue a new request
        args.TargetElement.StartBringIntoView(new BringIntoViewOptions()
        {
            AnimationDesired = true,
            VerticalAlignmentRatio = 0.5, // a normalized alignment position (0 for the top, 1 for the bottom)
            VerticalOffset = headerOffset, // applied after meeting the alignment ratio request
        });
    }
}

Цвета

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

Тема приложения

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

UWP также позволяет приложениям динамически задавать тему на основе параметров системы, предоставляемых устройствами, на которых они работают. Хотя UWP всегда учитывает параметры темы, указанные пользователем, каждое устройство также предоставляет соответствующую тему по умолчанию. Из-за характера Xbox One, который, как ожидается, имеет больше мультимедиа, чем производительности взаимодействия, он по умолчанию использует темную системную тему. Если тема вашего приложения основана на системных параметрах, ожидается, что она по умолчанию темна в Xbox One.

Акцентный цвет

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

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

Обратите внимание также, что набор цветов пользователей на Xbox One не совпадает с тем, что на компьютерах, телефонах и других устройствах.

Если ваше приложение использует ресурс кисти, такой как SystemControlForegroundAccentBrush, или ресурс цвета (SystemAccentColor), или вместо этого напрямую вызывает акцентные цвета через API UIColorType.Accent*, то эти цвета заменяются акцентными цветами, которые доступны на Xbox One. Цвета кисти высокой контрастности также извлекаются из системы так же, как на компьютере и телефоне.

Дополнительные сведения о цвете акцента в целом см. в разделе "Цвет акцента".

Разнообразие цветов среди телевизоров

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

Цветы, безопасные для телевизора

Значения RGB цвета представляют интенсивность для красного, зеленого и синего. Телевизоры не очень хорошо справляются с очень высокими уровнями яркости — они могут демонстрировать странный полосатый эффект, или изображение может выглядеть выцветшим на некоторых моделях. Кроме того, цвета высокой интенсивности могут вызвать цветение (ближайшие пиксели начинают рисование одних и того же цвета). Хотя существуют различные мнения о том, какие цвета считаются безопасными для телевизора, цвета с RGB-значениями от 16 до 235 (или 10-EB в шестнадцатеричной системе) обычно безопасны для использования в телевизоре.

Исторически приложения на Xbox должны были адаптировать свои цвета, чтобы попасть в этот "тв-безопасный" цветовой диапазон; Однако, начиная с Fall Creators Update, Xbox One автоматически масштабирует содержимое полного диапазона в тв-безопасный диапазон. Это означает, что большинство разработчиков приложений больше не должны беспокоиться о телевизионных безопасных цветах.

Если вы разрабатываете приложение с помощью DirectX 11 или DirectX 12 и создаете собственную цепочку буферов для отрисовки пользовательского интерфейса или видео, можно указать цветовое пространство, которое вы используете, вызвав IDXGISwapChain3::SetColorSpace1, что позволит системе знать, нужно ли масштабировать цвета или нет.

Рекомендации по элементам управления пользовательским интерфейсом

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

Область навигации

Панель навигации (также известная как меню гамбургера) — это элемент управления навигацией, часто используемый в приложениях UWP. Как правило, это панель с несколькими параметрами для выбора в меню в стиле списка, которое будет перенаправлять пользователя на разные страницы. Как правило, эта панель обычно свернута, чтобы сэкономить место, и пользователь может открыть её, нажав кнопку.

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

Метки панели команд

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

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

Подсказка

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

Стили кнопки

Хотя стандартные кнопки UWP хорошо работают на телевизоре, некоторые визуальные стили кнопок лучше привлекают внимание к пользовательскому интерфейсу, что вам стоит рассмотреть для всех платформ, особенно в 10-футовом интерфейсе, что важно для четкого понимания, где находится фокус. Дополнительные сведения об этих стилях см. в кнопках.

Вложенные элементы пользовательского интерфейса

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

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

Дополнительные сведения о вложенном пользовательском интерфейсе см. в разделе Nested UI в элементах списка.

MediaTransportControls

Элемент MediaTransportControls позволяет пользователям взаимодействовать со своими носителями, предоставляя интерфейс воспроизведения по умолчанию, позволяющий им воспроизводить, приостановить, включить закрытые субтитры и многое другое. Этот элемент управления является свойством MediaPlayerElement и поддерживает два варианта макета: однорядный и двурядный. В макете одной строки ползунок и кнопки воспроизведения находятся в одной строке с кнопкой воспроизведения и приостановки, расположенной слева от ползунка. В двухрядном макете ползунок занимает отдельный ряд, а кнопки воспроизведения располагаются в отдельном нижнем ряду. При проектировании для 10-футового интерфейса следует использовать двухрядный макет, так как он обеспечивает лучшую навигацию для геймпада. Чтобы включить макет двойных строк, задайте IsCompact="False" на элементе MediaTransportControls в свойстве TransportControlsMediaPlayerElement.

<MediaPlayerElement x:Name="mediaPlayerElement1"  
                    Source="Assets/video.mp4"
                    AreTransportControlsEnabled="True">
    <MediaPlayerElement.TransportControls>
        <MediaTransportControls IsCompact="False"/>
    </MediaPlayerElement.TransportControls>
</MediaPlayerElement>

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

Интерфейс поиска

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

Большинство клиентов уже должны быть знакомы с этим акселератором, но если вы хотите, вы можете добавить визуальный элемент и глиф в пользовательский интерфейс, чтобы указать, что клиент может использовать кнопку для доступа к функциональности поиска. Если вы добавите эту подсказку, обязательно используйте символ из шрифта Segoe Xbox MDL2 Symbol ( для приложений XAML, \E426 для HTML-приложений), чтобы обеспечить последовательность с оболочкой Xbox и другими приложениями.

Так как кнопка Y доступна только на геймпаде, обязательно предоставьте другие методы доступа к поиску, например кнопки в пользовательском интерфейсе. В противном случае некоторые клиенты могут не иметь доступа к функциям.

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

Триггер пользовательского визуального состояния для Xbox

Чтобы настроить приложение UWP для 10-футового интерфейса, рекомендуется внести изменения в макет, когда приложение обнаруживает, что оно было запущено на консоли Xbox. Одним из способов этого является использование пользовательского триггера визуального состояния. Триггеры визуального состояния наиболее полезны, если вы хотите редактировать в Blend для Visual Studio. В следующем фрагменте кода показано, как создать триггер визуального состояния для Xbox:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState>
            <VisualState.StateTriggers>
                <triggers:DeviceFamilyTrigger DeviceFamily="Windows.Xbox"/>
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="RootSplitView.OpenPaneLength"
                        Value="368"/>
                <Setter Target="RootSplitView.CompactPaneLength"
                        Value="96"/>
                <Setter Target="NavMenuList.Margin"
                        Value="0,75,0,27"/>
                <Setter Target="Frame.Margin"
                        Value="0,27,48,27"/>
                <Setter Target="NavMenuList.ItemContainerStyle"
                        Value="{StaticResource NavMenuItemContainerXboxStyle}"/>
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Чтобы создать триггер, добавьте следующий класс в приложение. Это класс, на который ссылается приведенный выше код XAML:

class DeviceFamilyTrigger : StateTriggerBase
{
    private string _currentDeviceFamily, _queriedDeviceFamily;

    public string DeviceFamily
    {
        get
        {
            return _queriedDeviceFamily;
        }

        set
        {
            _queriedDeviceFamily = value;
            _currentDeviceFamily = AnalyticsInfo.VersionInfo.DeviceFamily;
            SetActive(_queriedDeviceFamily == _currentDeviceFamily);
        }
    }
}

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

Другой способ проверить, работает ли ваше приложение на Xbox, и затем внести соответствующие корректировки — это сделать это посредством кода. Чтобы проверить, работает ли приложение на Xbox, можно использовать следующую простую переменную:

bool IsTenFoot = (Windows.System.Profile.AnalyticsInfo.VersionInfo.DeviceFamily ==
                    "Windows.Xbox");

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

Сводка

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

Связанные статьи

• Введение в устройства для приложений Windows
• Взаимодействие с геймпадом и пультом дистанционного управления
• Звук в приложениях UWP