Diseño para Xbox y TV

Diseñe la aplicación de Windows para que se vea bien y funcione bien en Xbox One y pantallas de televisión.

Consulta interacciones de controlador para juegos y control remoto para obtener instrucciones sobre experiencias de interacción en aplicaciones para UWP en la experiencia de de de de 10 pies.

Información general

La Plataforma universal de Windows te permite crear experiencias deliciosas en varios dispositivos Windows. La mayor parte de la funcionalidad proporcionada por el marco de UWP permite a las aplicaciones usar la misma interfaz de usuario (UI) en estos dispositivos, sin trabajo adicional. Sin embargo, adaptar y optimizar la aplicación para que funcione perfectamente en las pantallas de Xbox One y TV requiere consideraciones especiales.

La experiencia de sentarse en el sofá a través de la habitación, usando un controlador para juegos o remoto para interactuar con su TELEVISOR, se llama la experiencia de de 10 pies. Se denomina así porque el usuario suele estar sentado a unos 10 pies de distancia de la pantalla. Esto proporciona desafíos únicos que no están presentes en, por ejemplo, la experiencia de de 2 pies de, o al interactuar con un PC. Si estás desarrollando una aplicación para Xbox One o cualquier otro dispositivo que se genera en la pantalla de TV y usas un controlador para la entrada, siempre debes tener esto en cuenta.

No todos los pasos de este artículo son necesarios para que la aplicación funcione bien para experiencias de 10 pies, pero comprenderlas y tomar las decisiones adecuadas para la aplicación dará como resultado una mejor experiencia de 10 pies adaptada a las necesidades específicas de la aplicación. A medida que das vida a tu aplicación en el entorno de 10 pies de distancia, considera los siguientes principios de diseño.

Sencillo

El diseño para el entorno de 10 pies presenta un conjunto único de desafíos. La resolución y la distancia de visualización pueden dificultar que las personas procesen demasiada información. Intente mantener el diseño limpio, reducido a los componentes más sencillos posibles. La cantidad de información mostrada en un televisor debe ser comparable a lo que vería en un teléfono móvil, en lugar de en un escritorio.

Coherente

Las aplicaciones para UWP en el entorno de 10 pies deben ser intuitivas y fáciles de usar. Haz que el foco sea claro e inconfundible. Organice el contenido para que el movimiento entre el espacio sea coherente y predecible. Dé a la gente el camino más corto a lo que quieren hacer.

Todas las películas que se muestran en la captura de pantalla están disponibles en Microsoft Movies & TV.

Cautivador

Las experiencias cinematográficas más envolventes tienen lugar en la pantalla grande. Los paisajes perimetrales, el movimiento elegante y el uso vibrante del color y la tipografía llevan las aplicaciones al siguiente nivel. Sé atrevida y hermosa.

Optimizaciones para la experiencia de 10 pies

Ahora que conoces los principios del buen diseño de aplicaciones UWP para la experiencia de 10 pies, consulta el siguiente resumen de las formas específicas de optimizar tu aplicación y ofrecer una excelente experiencia de usuario.

Además de las consideraciones de diseño y diseño anteriores, hay una serie de controlador para juegos y la interacción de control remoto optimizaciones que debes tener en cuenta al compilar la aplicación.

Ajuste de tamaño del elemento de la interfaz de usuario

Dado que el usuario de una aplicación en el entorno de 10 pies usa un control remoto o un controlador para juegos y está sentado a varios pies de la pantalla, hay algunas consideraciones de interfaz de usuario que deben tenerse en cuenta en su diseño. Asegúrese de que la interfaz de usuario tiene una densidad de contenido adecuada y no está demasiado desordenada para que el usuario pueda navegar y seleccionar fácilmente los elementos. Recuerde: la simplicidad es clave.

Factor de escala y diseño adaptable

El factor de escala ayuda a garantizar que los elementos de la interfaz de usuario se muestren con el ajuste de tamaño correcto para el dispositivo en el que se ejecuta la aplicación. En el escritorio, esta configuración se puede encontrar en Configuración > Sistema > Mostrar como un valor deslizante. Esta misma configuración existe también en el teléfono si el dispositivo lo admite.

En Xbox One, no hay ninguna configuración del sistema; sin embargo, para que los elementos de la interfaz de usuario de UWP tengan el tamaño adecuado para tv, se escalan a un valor predeterminado de 200% para aplicaciones XAML y 150% para aplicaciones HTML. Siempre que los elementos de la interfaz de usuario tengan el tamaño adecuado para otros dispositivos, tendrán el tamaño adecuado para el televisor. Xbox One representa la aplicación a 1080p (1920 x 1080 píxeles). Por lo tanto, al traer una aplicación de otros dispositivos, por ejemplo, PC, asegúrese de que la interfaz de usuario tenga un excelente aspecto a 960 x 540 píxeles (px) a escala% del 100% (o 1280 x 720 píxeles (px) a escala% del 100% para aplicaciones HTML) utilizando técnicas adaptativas .

Diseñar para Xbox es un poco diferente del diseño para PC porque solo necesitas preocuparte por una resolución, 1920 x 1080. No importa si el usuario tiene un televisor que tiene una mejor resolución: las aplicaciones para UWP siempre se escalan a 1080p.

Los tamaños correctos de elemento del conjunto de 200% (o 150% para aplicaciones HTML) también se extraerán para tu aplicación cuando se ejecute en Xbox One, independientemente de la resolución de TV.

Densidad de contenido

Al diseñar la aplicación, recuerde que el usuario verá la interfaz de usuario desde una distancia e interactuará con ella mediante un mando remoto o de juego, lo que tarda más tiempo en navegar que usar la entrada táctil o del mouse.

Tamaños de controles de interfaz de usuario

Los elementos interactivos de la interfaz de usuario deben tener un tamaño mínimo de 32 epx (píxeles efectivos). Este es el valor predeterminado para los controles comunes de UWP y, cuando se usa a escala de 200%, garantiza que los elementos de la interfaz de usuario sean visibles desde una distancia y ayuda a reducir la densidad de contenido.

Número de clics

Cuando el usuario navega desde un borde de la pantalla de TV a la otra, no debe tardar más de seis clics para simplificar la interfaz de usuario. De nuevo, el principio de simplicidad se aplica aquí.

Tamaños de texto

Para que la interfaz de usuario sea visible desde una distancia, use las siguientes reglas:

• Texto principal y contenido de lectura: 15 epx mínimo
• Texto no crítico y contenido complementario: 12 epx mínimo

Al usar texto más grande en la interfaz de usuario, elija un tamaño que no limite el espacio de la pantalla demasiado, ocupando espacio que otro contenido podría rellenar.

Optar por excluirse del factor de escala

Se recomienda que la aplicación aproveche la compatibilidad con factor de escala, lo que le ayudará a ejecutarse correctamente en todos los dispositivos mediante el escalado para cada tipo de dispositivo. Sin embargo, es posible optar por no seguir este comportamiento y diseñar toda la interfaz de usuario a una escala del 100%. Tenga en cuenta que no puede cambiar el factor de escala a nada distinto de 100%.

En el caso de las aplicaciones XAML, puedes rechazar el factor de escalado mediante el siguiente fragmento de código:

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

result le informará si ha optado por no participar con éxito.

Para obtener más información, incluido el código de ejemplo para HTML/JavaScript, consulte Cómo desactivar el escalado.

Asegúrese de calcular los tamaños adecuados de los elementos de la interfaz de usuario duplicando los valores efectivos de píxeles de mencionados en este tema para valores reales de píxeles de (o multiplicando por 1,5 para aplicaciones HTML).

Zona segura para TV

No todos los televisores muestran contenido hasta los bordes de la pantalla debido a razones históricas y tecnológicas. De forma predeterminada, UWP evitará mostrar cualquier contenido de la interfaz de usuario en áreas no seguras de TV y, en su lugar, solo dibujará el fondo de la página.

El área no segura del televisor se representa mediante el área azul de la imagen siguiente.

Puede establecer el fondo en un color estático o con temas, o en una imagen, como se muestra en los fragmentos de código siguientes.

Color del tema

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

Imagen

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

Esto es lo que tendrá la aplicación sin trabajo adicional.

Esto no es óptimo porque proporciona a la aplicación un efecto "boxed-in", con partes de la interfaz de usuario, como el panel de navegación y la cuadrícula aparentemente cortados. Sin embargo, puedes realizar optimizaciones para ampliar partes de la interfaz de usuario a los bordes de la pantalla para proporcionar a la aplicación un efecto más cinemático.

Llevando la interfaz de usuario hasta el borde

Se recomienda usar determinados elementos de la interfaz de usuario para extenderse a los bordes de la pantalla para proporcionar más inmersión al usuario. Estos incluyen ScrollViewers, paneles de navegación y CommandBars.

Por otro lado, también es importante que los elementos interactivos y el texto siempre eviten los bordes de la pantalla para asegurarse de que no se cortarán en algunos televisores. Se recomienda dibujar solo elementos visuales no esenciales dentro de una distancia de 5 unidades% de los bordes de la pantalla. Como se mencionó en (tamaño del elemento de interfaz de usuario), una aplicación UWP que sigue el factor de escala predeterminado de la consola Xbox One de 200 (%) utilizará un área de 960 x 540 epx. Por lo tanto, en la interfaz de usuario de tu aplicación, debes evitar colocar elementos esenciales en las siguientes áreas:

• 27 epx desde arriba y abajo
• 48 epx desde los lados izquierdo y derecho

En las secciones siguientes se describe cómo ampliar la interfaz de usuario a los bordes de la pantalla.

Límites de ventana principales

Para las aplicaciones para UWP destinadas solo a la experiencia de 10 pies, el uso de límites de ventana principales es una opción más sencilla.

En el OnLaunched método de App.xaml.cs, agregue el código siguiente:

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

Con esta línea de código, la ventana de la aplicación se extenderá a los bordes de la pantalla, por lo que deberá mover toda la interfaz de usuario interactiva y esencial al área segura de TV descrita anteriormente. La interfaz de usuario transitoria, como menús contextuales y cuadros combinados abiertos, permanecerá automáticamente dentro del área segura del televisor.

límites de ventana de

Fondos del panel

Los paneles de navegación normalmente se dibujan cerca del borde de la pantalla, por lo que el fondo debe extenderse al área no segura del televisor para no introducir espacios incómodos. Para ello, simplemente cambie el color del fondo del panel de navegación al color del fondo de la aplicación.

El uso de los límites de la ventana principal, como se ha descrito anteriormente, le permitirá dibujar la interfaz de usuario en los bordes de la pantalla, pero después debe usar márgenes positivos en el contenido del SplitView, para mantenerlo dentro del área segura del televisor.

Aquí, el fondo del panel de navegación se ha ampliado a los bordes de la pantalla, mientras que sus elementos de navegación se mantienen en el área segura del televisor. El contenido de SplitView (en este caso, una cuadrícula de elementos) se ha ampliado a la parte inferior de la pantalla para que parezca que continúa y no se corta, mientras que la parte superior de la cuadrícula sigue dentro del área segura del televisor. (Obtenga más información sobre cómo hacerlo en Desplazamiento en los extremos de listas y cuadrículas).

El siguiente fragmento de código logra este efecto:

<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 es otro ejemplo de un panel que se coloca normalmente cerca de uno o más bordes de la aplicación y, como tal, en el televisor, su fondo debe extenderse a los bordes de la pantalla. También suele contener un botón Más , representado por "..." en el lado derecho, que debe permanecer en el área segura del televisor. A continuación se muestran algunas estrategias diferentes para lograr las interacciones deseadas y los efectos visuales.

Opción 1: cambie el color de CommandBar fondo a transparente o al mismo color que el fondo de la página:

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

Hacer esto hará que el CommandBar parezca que está encima del mismo fondo que el resto de la página, de modo que el fondo fluye de manera fluida hasta la pantalla.

Opción 2: Agregue un rectángulo de fondo cuyo relleno sea el mismo color que el CommandBar fondo y que esté debajo del CommandBar resto de la página:

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

Ambos enfoques también se aplican a los otros tipos de controles enumerados en esta sección.

Finalización del desplazamiento de listas y cuadrículas

Es habitual que las listas y cuadrículas contengan más elementos de los que pueden caber en pantalla al mismo tiempo. Cuando este es el caso, se recomienda extender la lista o cuadrícula al borde de la pantalla. Las listas y cuadrículas de desplazamiento horizontal deben extenderse hasta el borde derecho, y las de desplazamiento vertical hasta la parte inferior.

Aunque una lista o cuadrícula se extiende de esta manera, es importante mantener el objeto visual de foco y su elemento asociado dentro del área segura del televisor.

La UWP tiene funcionalidad que mantendrá el enfoque visual dentro de la VisibleBounds, pero debes agregar margen para asegurarte de que los elementos de lista o cuadrícula se desplacen dentro del área segura. En concreto, agrega un margen positivo al listView o GridViewItemsPresenter, como en el siguiente fragmento de código:

<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>

Colocaría el fragmento de código anterior en la página o en los recursos de la aplicación y, a continuación, accedería a él de la siguiente manera:

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

Para obtener un control más específico sobre cómo se muestran los elementos, si la aplicación tiene como destino la versión 1803 o posterior, puede usar el evento UIElement.BringIntoViewRequested. Puede colocarlo en el ItemsPanel para el ListView/GridView para capturarlo antes de que lo haga el ScrollViewer interno, como en los siguientes fragmentos de código:

<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
        });
    }
}

Colores

De forma predeterminada, la Plataforma universal de Windows escala los colores de la aplicación a la gama segura de TV (consulta Colores seguros para TV para obtener más información) para que tu aplicación se vea bien en cualquier televisor. Además, hay mejoras que puedes realizar en el conjunto de colores que usa la aplicación para mejorar la experiencia visual en la TELEVISIÓN.

Tema de la aplicación

Puedes elegir un tema de aplicación (oscuro o claro) según lo que sea adecuado para tu aplicación o puedes rechazarlos. Lea más sobre las recomendaciones generales para temas en Temas de color.

La UWP también permite a las aplicaciones establecer dinámicamente el tema en función de la configuración del sistema proporcionada por los dispositivos en los que se ejecutan. Aunque la UWP siempre respeta la configuración del tema especificada por el usuario, cada dispositivo también proporciona un tema predeterminado adecuado. Debido a la naturaleza de Xbox One, que se espera que tenga más experiencias multimedia que experiencias de productividad, se utiliza por defecto un tema del sistema oscuro. Si el tema de la aplicación se basa en la configuración del sistema, espere que se oscurezca de forma predeterminada en Xbox One.

Color de énfasis

La UWP proporciona una manera cómoda de exponer el color de énfasis que el usuario ha seleccionado en la configuración del sistema.

En Xbox One, el usuario puede seleccionar un color de usuario, al igual que puede seleccionar un color de énfasis en un equipo. Siempre que la aplicación llame a estos colores de énfasis a través de pinceles o recursos de color, se usará el color seleccionado por el usuario en la configuración del sistema. Ten en cuenta que los colores de énfasis en Xbox One son por usuario, no por sistema.

Tenga en cuenta también que el conjunto de colores de usuario en Xbox One no es el mismo que en equipos, teléfonos y otros dispositivos.

Siempre que la aplicación use un recurso de pincel como SystemControlForegroundAccentBrush o un recurso de color (SystemAccentColor), o en su lugar llame a colores de énfasis directamente a través de la API UIColorType.Accent* , esos colores se reemplazan por colores de énfasis disponibles en Xbox One. Los colores del pincel de alto contraste también se extraen del sistema de la misma forma que en un ordenador y en un teléfono.

Para obtener más información sobre el color de énfasis en general, consulte Color de énfasis.

Varianza de color entre televisores

Al diseñar para TV, tenga en cuenta que los colores se muestran de forma bastante diferente en función del televisor en el que se representan. No supongamos que los colores se verán exactamente como lo hacen en el monitor. Si la aplicación se basa en diferencias sutiles en el color para diferenciar partes de la interfaz de usuario, los colores podrían combinarse y los usuarios podrían confundirse. Intente usar colores que sean lo suficientemente diferentes como para que los usuarios puedan diferenciarlos claramente, independientemente del televisor que usen.

Colores seguros para TV

Los valores RGB de un color representan las densidades de color rojo, verde y azul. Los televisores no manejan muy bien las intensidades extremas; pueden producir un extraño efecto de bandas o aparecer deslavados en determinados televisores. Además, los colores de alta intensidad pueden provocar la floración (los píxeles cercanos comienzan a dibujar los mismos colores). Aunque hay diferentes escuelas de pensamiento en lo que se consideran colores seguros para tv, los colores dentro de los valores RGB de 16-235 (o 10-EB en hexadecimal) son generalmente seguros para su uso para tv.

Históricamente, las aplicaciones de Xbox tenían que adaptar sus colores para que se encuentran dentro de esta gama de colores "segura para televisores" ; sin embargo, a partir de Fall Creators Update, Xbox One escala automáticamente el contenido de rango completo en el rango seguro de TV. Esto significa que la mayoría de los desarrolladores de aplicaciones ya no tienen que preocuparse por los colores seguros del televisor.

Si estás desarrollando una aplicación con DirectX 11 o DirectX 12 y creas tu propia cadena de intercambio para representar la interfaz de usuario o vídeo, puedes especificar el espacio de color que usas llamando a IDXGISwapChain3::SetColorSpace1, que permitirá al sistema saber si necesita escalar colores o no.

Directrices para controles de interfaz de usuario

Hay varios controles de interfaz de usuario que funcionan bien en varios dispositivos, pero tienen ciertas consideraciones cuando se usan en el televisor. Aprende más sobre algunos procedimientos recomendados para usar estos controles al diseñar para la experiencia a 3 metros.

Panel de navegación

Un panel de navegación (también conocido como menú hamburguesa) es un control de navegación que se usa habitualmente en aplicaciones para UWP. Normalmente, es un panel con varias opciones entre las que elegir en un menú de estilo de lista que llevará al usuario a diferentes páginas. Por lo general, este panel empieza a contraerse para ahorrar espacio y el usuario puede abrirlo haciendo clic en un botón.

Aunque los paneles de navegación son muy accesibles con el mouse y la entrada táctil, el controlador para juegos o el mando remoto hace que sean menos accesibles, ya que el usuario tiene que navegar a un botón para abrir el panel. Por lo tanto, un procedimiento recomendado es hacer que el botón Ver abra el panel de navegación, así como permitir que el usuario lo abra navegando hasta la izquierda de la página. El ejemplo de código sobre cómo implementar este patrón de diseño se puede encontrar en el documento de navegación de enfoque programático . Esto proporcionará al usuario acceso muy fácil al contenido del panel. Para obtener más información sobre cómo se comportan los paneles de navegación en diferentes tamaños de pantalla, así como los procedimientos recomendados para la navegación remota o el controlador para juegos, consulta Paneles de navegación.

Etiquetas CommandBar

Es recomendable que las etiquetas se coloquen a la derecha de los iconos de una barra de comandos para que su alto se minimice y permanezca coherente. Para ello, establezca la propiedad CommandBar.DefaultLabelPosition en CommandBarDefaultLabelPosition.Right.

Establecer esta propiedad también hará que las etiquetas siempre se muestren, lo que funciona bien para la experiencia de 10 pies, ya que minimiza el número de clics para el usuario. Este también es un excelente modelo para otros tipos de dispositivos que se deben seguir.

Botón de ayuda

La característica de control Tooltip se introdujo como una manera de proporcionar más información en la interfaz de usuario cuando el usuario pasa el ratón sobre un elemento, o toca y mantiene presionado. Para el controlador para juegos y el control remoto, Tooltip aparece después de un breve momento en el que el elemento obtiene el foco, permanece en pantalla durante un breve tiempo y, a continuación, desaparece. Este comportamiento podría distraerse si se usan demasiadas Tooltip. Intente evitar el uso de Tooltip al diseñar para la televisión.

Estilos de botón

Aunque los botones estándar para UWP funcionan bien en la TV, algunos estilos visuales de botones llaman mejor la atención sobre la interfaz de usuario, lo cual puede considerar para todas las plataformas, especialmente en la experiencia a 10 pies, que se beneficia de comunicar claramente dónde se encuentra el foco. Para obtener más información sobre estos estilos, consulte Botones.

Elementos de interfaz de usuario anidados

La interfaz de usuario anidada expone elementos accionables anidados incluidos dentro de un elemento de interfaz de usuario de contenedor en el que tanto el elemento anidado como el elemento contenedor pueden tomar el foco independiente entre sí.

La interfaz de usuario anidada funciona bien para algunos tipos de entrada, pero no siempre para el controlador para juegos y el control remoto, que dependen de la navegación XY. Asegúrese de seguir las instrucciones de este tema para asegurarse de que la interfaz de usuario está optimizada para el entorno de 10 pies y que el usuario puede acceder fácilmente a todos los elementos interactivos. Una solución común es colocar elementos de interfaz de usuario anidados en un ContextFlyout.

Para obtener más información sobre la interfaz de usuario anidada, consulte interfaz de usuario anidada en los elementos de lista.

MediaTransportControls

El elemento MediaTransportControls permite a los usuarios interactuar con sus medios proporcionando una experiencia de reproducción predeterminada que les permite reproducir, pausar, activar subtítulos, etc. Este control es una propiedad de MediaPlayerElement y admite dos opciones de diseño: fila única y doble fila. En el diseño de una sola fila, los botones deslizante y de reproducción se encuentran en una fila, con el botón reproducir o pausa situado a la izquierda del control deslizante. En el diseño de fila doble, el control deslizante ocupa su propia fila, con los botones de reproducción en una fila inferior independiente. Al diseñar para la experiencia de 10 pies, se debe usar el diseño de doble fila, ya que proporciona una mejor navegación para el mando de juegos. Para habilitar el diseño de dos filas, establezca en el elemento en la propiedad TransportControls de del .

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

Visite Reproducción de medios para obtener más información sobre cómo agregar medios a su aplicación.

Experiencia de búsqueda

La búsqueda de contenido es una de las funciones que se realizan con más frecuencia en la experiencia de 10 pies. Si la aplicación proporciona una experiencia de búsqueda, resulta útil que el usuario tenga acceso rápido a ella mediante el botón Y del controlador para juegos como acelerador.

La mayoría de los clientes ya deberían estar familiarizados con este acelerador; sin embargo, si lo prefiere, puede agregar un icono visual y a la interfaz de usuario para indicar que el cliente puede usar el botón y acceder a la funcionalidad de búsqueda. Si agregas esta indicación, asegúrate de usar el símbolo de la fuente segoe Xbox MDL2 Symbol ( para aplicaciones XAML, \E426 para aplicaciones HTML) para proporcionar coherencia con el shell de Xbox y otras aplicaciones.

Puesto que el botón Y solo está disponible en el controlador para juegos, asegúrate de proporcionar otros métodos de acceso a la búsqueda, como botones en la interfaz de usuario. De lo contrario, es posible que algunos clientes no puedan acceder a la funcionalidad.

En la experiencia de 10 pies, a menudo es más fácil que los clientes usen una experiencia de búsqueda en pantalla completa porque hay espacio limitado en la pantalla. Tanto si tiene una pantalla completa como una pantalla parcial, la búsqueda "en el lugar", se recomienda que cuando el usuario abra la experiencia de búsqueda, el teclado en pantalla ya esté abierto, listo para que el cliente escriba los términos de búsqueda.

Desencadenador de estado visual personalizado para Xbox

Para adaptar tu aplicación para UWP para la experiencia de 10 pies, te recomendamos que realices cambios de diseño cuando la aplicación detecte que se ha iniciado en una consola Xbox. Una manera de hacerlo es mediante un desencadenador de estado visual personalizado . Los desencadenadores de estado visual son más útiles cuando se desea editar en Blend para Visual Studio. El siguiente fragmento de código muestra cómo crear un desencadenador de estado visual para 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>

Para crear el desencadenador, agregue la siguiente clase a la aplicación. Esta es la clase a la que hace referencia el código XAML anterior:

class DeviceFamilyTrigger : StateTriggerBase
{
    private string _currentDeviceFamily, _queriedDeviceFamily;

    public string DeviceFamily
    {
        get
        {
            return _queriedDeviceFamily;
        }

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

Después de agregar el desencadenador personalizado, la aplicación realizará automáticamente las modificaciones de diseño que especificó en el código XAML siempre que detecte que se ejecuta en una consola Xbox One.

Otra manera de comprobar si la aplicación se ejecuta en Xbox y, a continuación, realizar los ajustes adecuados es a través del código. Puedes usar la siguiente variable sencilla para comprobar si la aplicación se ejecuta en Xbox:

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

A continuación, puede realizar los ajustes adecuados en la interfaz de usuario en el bloque de código después de esta comprobación.

Resumen

El diseño de la experiencia de 10 pies tiene consideraciones especiales que deben tenerse en cuenta que hacen que sea diferente del diseño de cualquier otra plataforma. Aunque sin duda puedes hacer una adaptación directa de tu aplicación UWP a Xbox One, y aunque funcionará, no necesariamente estará optimizada para la experiencia a una distancia de 3 metros, lo que puede provocar la frustración del usuario. Siguiendo las pautas de este artículo se asegurará que tu aplicación sea tan buena como pueda funcionar en la televisión.

Artículos relacionados

• Guía del dispositivo para aplicaciones de Windows
• interacciones de controlador para juegos y control remoto
• Sonido en aplicaciones UWP